/* ============================================================
   KRAAK.APP — Ecosistema de software
   Dark editorial · rosa marca #e94770 · tipografía brutal
   ============================================================ */

:root{
  --pink:#e94770;
  --pink-soft:rgba(233,71,112,.12);
  --bg:#0b0b0e;
  --bg-2:#101015;
  --ink:#f4f1ec;
  --ink-dim:rgba(244,241,236,.55);
  --line:rgba(244,241,236,.12);
  --font-display:'Syne',sans-serif;
  --font-body:'Space Grotesk',sans-serif;
  --font-mono:'Space Mono',monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  overflow-x:hidden;
  cursor:none;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;cursor:none}
img{display:block;max-width:100%}
::selection{background:var(--pink);color:#0b0b0e}

/* ---------- PRELOADER ---------- */
.preloader{
  position:fixed;inset:0;z-index:200;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
}
.preloader__inner{display:flex;flex-direction:column;align-items:center;gap:2rem}
.preloader__mark{width:88px;height:auto;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.preloader__count{
  font-family:var(--font-mono);font-size:.9rem;letter-spacing:.35em;
  color:var(--ink-dim);
}

/* ---------- CURSOR ---------- */
.cursor{
  position:fixed;top:0;left:0;z-index:300;pointer-events:none;
  width:8px;height:8px;border-radius:50%;
  background:var(--pink);
  transform:translate(-50%,-50%);
}
.cursor-ring{
  position:fixed;top:0;left:0;z-index:299;pointer-events:none;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(233,71,112,.6);
  transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  transition:width .35s cubic-bezier(.22,1,.36,1),height .35s cubic-bezier(.22,1,.36,1),background .35s,border-color .35s;
}
.cursor-ring__label{
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.15em;
  color:#0b0b0e;opacity:0;transition:opacity .25s;
  text-transform:uppercase;white-space:nowrap;
}
.cursor-ring.is-active{
  width:96px;height:96px;background:var(--pink);border-color:var(--pink);
}
.cursor-ring.is-active .cursor-ring__label{opacity:1}

@media (hover:none),(pointer:coarse){
  body{cursor:auto}
  a{cursor:pointer}
  .cursor,.cursor-ring{display:none}
}

/* ---------- GRAIN ---------- */
.grain{
  position:fixed;inset:-100%;z-index:150;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity:.06;
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}
  20%{transform:translate(-12%,3%)}30%{transform:translate(6%,-10%)}
  40%{transform:translate(-4%,12%)}50%{transform:translate(-10%,4%)}
  60%{transform:translate(12%,0)}70%{transform:translate(0,10%)}
  80%{transform:translate(3%,12%)}90%{transform:translate(-8%,8%)}
}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.6rem clamp(1.2rem,4vw,3.5rem);
  mix-blend-mode:difference;
}
.nav__brand{display:flex;align-items:center;gap:.7rem}
.nav__mark{width:34px;height:auto}
.nav__word{
  font-family:var(--font-display);font-weight:800;font-size:1.25rem;
  letter-spacing:-.02em;text-transform:lowercase;
}
.nav__word sup{font-size:.55em;color:var(--pink);mix-blend-mode:normal}
.nav__links{display:flex;gap:clamp(1rem,3vw,2.4rem)}
.nav__link{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;position:relative;padding:.3rem 0;
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.nav__link:hover::after{transform:scaleX(1);transform-origin:left}
.nav__link--cta{color:var(--pink)}
@media(max-width:640px){.nav__links .nav__link:not(.nav__link--cta){display:none}}

/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(1.2rem,4vw,3.5rem);
  overflow:hidden;
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%}
.hero__content{position:relative;z-index:2;pointer-events:none}
.hero__kicker{
  font-family:var(--font-mono);font-size:clamp(.7rem,1.1vw,.85rem);
  letter-spacing:.3em;text-transform:uppercase;color:var(--pink);
  margin-bottom:1.5rem;overflow:hidden;
}
.hero__kicker span,.hero__sub span{display:inline-block}
.hero__title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(4.2rem,17.5vw,17rem);
  line-height:.86;letter-spacing:-.04em;text-transform:uppercase;
  color:var(--ink);
  display:flex;flex-wrap:wrap;align-items:flex-end;
}
.hero__logo{
  width:min(88vw,1150px);height:auto;
  filter:drop-shadow(0 0 46px rgba(233,71,112,.18));
  will-change:transform;
}
.hero__letter{display:inline-block;will-change:transform}
.hero__appgroup{
  display:inline-flex;white-space:nowrap;
  font-size:clamp(2.2rem,6.5vw,6.5rem);line-height:1;
  padding-bottom:.06em;margin-left:clamp(.6rem,1.6vw,1.6rem);
}
.hero__letter--dot{color:var(--pink)}
.hero__letter--app{
  color:transparent;-webkit-text-stroke:2px var(--pink);letter-spacing:0;
}
.hero__sub{
  margin-top:2.2rem;max-width:34rem;overflow:hidden;
  font-size:clamp(1rem,1.6vw,1.3rem);font-weight:300;line-height:1.55;
  color:var(--ink-dim);
}
.hero__footer{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:2rem clamp(1.2rem,4vw,3.5rem);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-dim);
}
.hero__scroll{display:flex;align-items:center;gap:.7rem}
.hero__scroll::after{
  content:"";width:1px;height:44px;background:var(--pink);
  animation:drip 1.8s ease-in-out infinite;transform-origin:top;
}
@keyframes drip{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- MARQUEE ---------- */
.marquee{
  background:var(--pink);color:#0b0b0e;
  overflow:hidden;padding:1.1rem 0;
  transform:rotate(-1.2deg) scale(1.02);
  margin:2rem 0 0;
  border-top:1px solid #0b0b0e;border-bottom:1px solid #0b0b0e;
}
.marquee__track{
  display:flex;align-items:center;gap:2.6rem;width:max-content;
  will-change:transform;
}
.marquee__track span{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.1rem,2.4vw,1.8rem);text-transform:uppercase;
  letter-spacing:-.01em;white-space:nowrap;
}
.marquee__track i{font-style:normal;font-size:.6em}

/* ---------- MANIFIESTO ---------- */
.manifiesto{
  padding:clamp(7rem,16vh,12rem) clamp(1.2rem,4vw,3.5rem);
  max-width:1200px;
}
.manifiesto__label{
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.25em;
  color:var(--pink);text-transform:uppercase;margin-bottom:2.5rem;
}
.manifiesto__text{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.7rem,4.2vw,3.4rem);line-height:1.22;letter-spacing:-.02em;
}
.manifiesto__text .w{display:inline-block;opacity:.14;transition:opacity .5s ease}
.manifiesto__text .w--on{opacity:1}
.manifiesto__text .w--pink{color:var(--pink)}

/* ---------- ECOSISTEMA ---------- */
.ecosistema{padding:clamp(4rem,10vh,8rem) 0 clamp(6rem,12vh,10rem);position:relative}
.ecosistema__head{
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:0 clamp(1.2rem,4vw,3.5rem) 4rem;gap:2rem;flex-wrap:wrap;
}
.ecosistema__title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(3rem,9vw,7.5rem);line-height:.92;
  letter-spacing:-.03em;text-transform:uppercase;
}
.ecosistema__count{
  font-family:var(--font-mono);font-size:.85rem;line-height:1.7;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-dim);
  text-align:right;
}
.ecosistema__count span{color:var(--pink);font-size:1.4rem}

.apps{list-style:none;border-top:1px solid var(--line)}
.app__row{
  display:grid;
  grid-template-columns:4.5rem 1fr auto 3rem;
  align-items:center;gap:clamp(.8rem,2vw,2rem);
  padding:clamp(1.4rem,3.4vw,2.6rem) clamp(1.2rem,4vw,3.5rem);
  border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;isolation:isolate;
}
.app__row::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--pink);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .5s cubic-bezier(.65,0,.35,1);
}
.app__row:hover::before{transform:scaleY(1);transform-origin:top}
.app__num{
  font-family:var(--font-mono);font-size:.8rem;color:var(--ink-dim);
  transition:color .4s;
}
.app__name{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.7rem,5.2vw,4.4rem);letter-spacing:-.02em;line-height:1;
  transition:color .4s,transform .5s cubic-bezier(.22,1,.36,1);
}
.app__tag{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim);
  border:1px solid var(--line);border-radius:99px;
  padding:.45rem 1rem;white-space:nowrap;
  transition:color .4s,border-color .4s;
}
.app__arrow{
  font-size:clamp(1.4rem,2.6vw,2.2rem);justify-self:end;
  transition:transform .5s cubic-bezier(.22,1,.36,1),color .4s;
}
.app__row:hover .app__name{color:#0b0b0e;transform:translateX(clamp(.5rem,2vw,1.6rem))}
.app__row:hover .app__num,.app__row:hover .app__tag{color:rgba(11,11,14,.7)}
.app__row:hover .app__tag{border-color:rgba(11,11,14,.35)}
.app__row:hover .app__arrow{color:#0b0b0e;transform:translate(6px,-6px) rotate(45deg)}
@media(max-width:700px){
  .app__row{grid-template-columns:2.6rem 1fr 2rem}
  .app__tag{display:none}
}

/* Floating preview */
.preview{
  position:fixed;z-index:90;pointer-events:none;
  width:min(340px,80vw);
  background:var(--bg-2);
  border:1px solid rgba(233,71,112,.45);
  border-radius:14px;padding:1.4rem 1.5rem;
  opacity:0;transform:translate(-50%,-110%) scale(.92);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.preview__title{
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  color:var(--pink);margin-bottom:.55rem;text-transform:uppercase;letter-spacing:.02em;
}
.preview__desc{font-size:.88rem;line-height:1.55;color:var(--ink-dim);font-weight:300}
@media(hover:none){.preview{display:none}}

/* ---------- STATS ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stat{
  padding:clamp(2.4rem,5vw,4.5rem) clamp(1.2rem,3vw,3rem);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:.9rem;
}
.stat:last-child{border-right:none}
.stat__num{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.6rem,6vw,5rem);line-height:1;color:var(--pink);
  letter-spacing:-.03em;
}
.stat__label{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-dim);line-height:1.6;
}
@media(max-width:820px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2n){border-right:none}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

/* ---------- FOOTER ---------- */
.footer{padding:clamp(5rem,10vh,8rem) clamp(1.2rem,4vw,3.5rem) 2rem;position:relative;overflow:hidden}
.footer__top{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:2rem;flex-wrap:wrap;margin-bottom:clamp(3rem,7vh,6rem);
}
.footer__claim{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2rem,5.5vw,4.6rem);line-height:1.02;
  letter-spacing:-.03em;text-transform:uppercase;
}
.footer__mail{
  font-family:var(--font-mono);font-size:clamp(.8rem,1.4vw,1rem);
  letter-spacing:.06em;color:var(--pink);
  border-bottom:1px solid var(--pink);padding-bottom:.3rem;
  transition:opacity .3s;
}
.footer__mail:hover{opacity:.7}
.footer__mark{
  width:clamp(180px,32vw,420px);margin:0 auto;
  filter:drop-shadow(0 0 60px rgba(233,71,112,.35));
  will-change:transform;
}
.footer__base{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:clamp(3rem,7vh,5rem);padding-top:1.6rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim);
}

/* ---------- REVEAL DEFAULTS ---------- */
.reveal-line{overflow:hidden}