/* =============================================================
   JONATHAN ZAMBRANO — styles.css
   1 Tokens · 2 Reset · 3 Utilities · 4 Type · 5 Components
   6 Sections · 7 Effects · 8 Responsive · 9 Reduced-motion
   ============================================================= */

/* ============ 1. TOKENS ============ */
:root{
  --bg:#050505;
  --s1:#0A0A0A;
  --s2:#101010;
  --s3:#151515;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --fg:#FFFFFF;
  --mut:#A1A1AA;
  --mut-2:#71717A;

  --jade:#00C878;
  --jade-d:#00A86B;
  --emerald:#10B981;
  --cyan:#22D3EE;

  --jade-a08:rgba(0,200,120,.08);
  --jade-a14:rgba(0,200,120,.14);
  --jade-a30:rgba(0,200,120,.30);

  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --disp:"Sora","Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.25,.46,.45,.94);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);

  --gut:clamp(1.25rem,5vw,2.5rem);
  --maxw:1280px;
  --r:14px;
  --r-lg:22px;
}

/* ============ 2. RESET ============ */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;tab-size:2;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  font-family:var(--sans);font-size:16px;line-height:1.6;
  background:var(--bg);color:var(--fg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;overscroll-behavior-y:none;
}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
p{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance;line-height:1.05;letter-spacing:-.03em;font-family:var(--disp);font-weight:600}
::selection{background:var(--jade);color:#031}
:focus-visible{outline:2px solid var(--jade);outline-offset:3px;border-radius:6px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#1d1d1d;border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:#2a2a2a}

/* ============ 3. UTILITIES ============ */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;left:1rem;padding:.6rem 1rem;background:var(--fg);color:var(--bg);z-index:9999;border-radius:8px;font-weight:600}
.skip-link:focus{top:1rem}
.jade{color:var(--jade)}
.center{text-align:center}

/* ============ 4. TYPE ============ */
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--jade);display:inline-flex;align-items:center;gap:.55rem;
}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--jade);box-shadow:0 0 12px var(--jade)}
.sec-title{font-size:clamp(2rem,5.2vw,3.6rem);letter-spacing:-.035em}
.sec-lead{color:var(--mut);font-size:clamp(1rem,1.6vw,1.15rem);max-width:62ch;margin-top:1.25rem}
.num{font-family:var(--mono);font-size:.72rem;color:var(--mut-2);letter-spacing:.14em}

/* ============ 5. COMPONENTS ============ */
.btn{
  --btn-bg:transparent;--btn-fg:var(--fg);--btn-bd:var(--line-2);
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.6rem;border-radius:100px;font-weight:600;font-size:.95rem;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  transition:transform .35s var(--ease-out),background .35s var(--ease-out),border-color .35s var(--ease-out),box-shadow .35s var(--ease-out);
  will-change:transform;white-space:nowrap;
}
.btn svg{width:16px;height:16px;transition:transform .35s var(--ease-out)}
.btn:hover svg{transform:translateX(4px)}
.btn--primary{--btn-bg:var(--jade);--btn-fg:#04140d;--btn-bd:var(--jade);box-shadow:0 0 0 0 var(--jade-a30)}
.btn--primary:hover{box-shadow:0 10px 40px -8px rgba(0,200,120,.55)}
.btn--ghost:hover{--btn-bd:var(--jade);background:var(--jade-a08)}

.tag{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.32rem .65rem;border-radius:100px;border:1px solid var(--line);color:var(--mut);
  background:rgba(255,255,255,.02);white-space:nowrap;
}

.card{
  position:relative;background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .5s var(--ease-out),border-color .5s var(--ease-out);
}
.card:hover{border-color:var(--line-2)}
.glow{
  position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;
  transition:opacity .45s var(--ease-out);
  background:radial-gradient(520px circle at var(--mx,-500px) var(--my,-500px),var(--jade-a14),transparent 42%);
}
.card:hover .glow{opacity:1}
.card>*:not(.glow){position:relative;z-index:2}

/* ============ 6. SECTIONS ============ */
section{position:relative}
.sec{padding-block:clamp(5rem,11vw,9.5rem)}
.sec--tight{padding-block:clamp(3.5rem,7vw,6rem)}
.sec-head{display:flex;flex-direction:column;gap:1rem;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}

/* --- SPLASH --- */
#splash{
  position:fixed;inset:0;z-index:9998;background:var(--bg);
  display:grid;place-items:center;transition:opacity .7s var(--ease-out),visibility .7s;
}
#splash.is-done{opacity:0;visibility:hidden;pointer-events:none}
.splash-mark{font-family:var(--mono);font-size:.8rem;letter-spacing:.35em;color:var(--mut);text-transform:uppercase}
.splash-bar{margin:1.1rem auto 0;width:150px;height:1px;background:var(--line-2);overflow:hidden}
.splash-bar i{display:block;height:100%;width:0;background:var(--jade);animation:load 1.1s var(--ease-out) forwards}
@keyframes load{to{width:100%}}

/* sprite de carga: 4 fotogramas en una sola imagen */
.splash-bear{
  width:clamp(150px,30vw,250px);aspect-ratio:250/334;margin:0 auto 1.4rem;
  background-image:url("assets/img/loading.webp");
  background-repeat:no-repeat;background-size:400% 100%;background-position:0% 0%;
  animation:bearFrames .95s steps(1) forwards;
  filter:drop-shadow(0 18px 44px rgba(0,200,120,.22));
}
@keyframes bearFrames{
  0%  {background-position:0% 0%}
  28% {background-position:33.333% 0%}
  56% {background-position:66.666% 0%}
  84%,100%{background-position:100% 0%}
}

/* --- NAV --- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  transition:background .4s var(--ease-out),border-color .4s var(--ease-out),backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{background:rgba(5,5,5,.72);backdrop-filter:blur(18px) saturate(140%);border-bottom-color:var(--line)}
@supports not (backdrop-filter:blur(1px)){.nav.is-stuck{background:rgba(5,5,5,.96)}}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--disp);font-weight:600;letter-spacing:-.02em;font-size:.98rem}
.brand-dot{width:9px;height:9px;border-radius:50%;background:var(--jade);box-shadow:0 0 14px var(--jade)}
.nav-links{display:none;gap:2rem;font-size:.9rem;color:var(--mut)}
.nav-links a{transition:color .3s var(--ease-out);position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--jade);transition:width .35s var(--ease-out)}
.nav-links a:hover{color:var(--fg)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:none}
.nav-burger{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:100px}
.nav-burger span{display:block;width:16px;height:1.5px;background:var(--fg);position:relative;transition:.3s var(--ease-out)}
.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--fg);transition:.3s var(--ease-out)}
.nav-burger span::before{top:-5px}.nav-burger span::after{top:5px}
.is-menu .nav-burger span{background:transparent}
.is-menu .nav-burger span::before{top:0;transform:rotate(45deg)}
.is-menu .nav-burger span::after{top:0;transform:rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:890;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;gap:.25rem;padding:0 var(--gut);
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),visibility .5s;
}
.is-menu .menu{opacity:1;visibility:visible;transform:none}
.menu a{font-family:var(--disp);font-size:clamp(1.9rem,8vw,3rem);font-weight:600;letter-spacing:-.035em;padding:.35rem 0;color:var(--mut);transition:color .3s}
.menu a:hover,.menu a:focus{color:var(--fg)}
.menu-foot{margin-top:2.5rem;display:flex;gap:1.25rem;flex-wrap:wrap;font-family:var(--mono);font-size:.75rem;color:var(--mut-2)}


/* --- LANG SWITCH --- */
.nav-right{display:flex;align-items:center;gap:.7rem}
.lang{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:100px;padding:2px;background:rgba(255,255,255,.02)}
.lang button{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  padding:.38rem .62rem;border-radius:100px;color:var(--mut-2);
  transition:color .3s var(--ease-out),background .3s var(--ease-out);
}
.lang button:hover{color:var(--fg)}
.lang button.is-on{background:var(--jade);color:#04140d;font-weight:600}

/* --- HERO --- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-top:96px;padding-bottom:clamp(3rem,8vw,6rem);overflow:hidden}

/* la mascota es el ÚNICO protagonista visual del hero */
.hero-art{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity 1.4s var(--ease-out);
  will-change:transform;
}
.hero-art.is-on{opacity:1}
.hero-art img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:72% center;
}
.hero-art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 4%,rgba(5,5,5,.88) 24%,rgba(5,5,5,.45) 44%,transparent 62%);
}
.hero-glow{
  position:absolute;z-index:0;pointer-events:none;
  right:-6%;top:6%;width:62%;height:78%;
  background:radial-gradient(50% 50% at 50% 50%,var(--jade-a14),transparent 70%);
  filter:blur(30px);
}
.hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,5,5,.75) 0%,rgba(5,5,5,.15) 22%,transparent 55%,rgba(5,5,5,.9) 100%);
}
.hero-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(80% 60% at 50% 40%,#000 0%,transparent 75%);
}
.hero-in{position:relative;z-index:2;width:100%}
.hero-badge{
  display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .9rem;border-radius:100px;
  border:1px solid var(--jade-a30);background:var(--jade-a08);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--jade);
}
.hero-badge i{width:5px;height:5px;border-radius:50%;background:var(--jade);animation:pulse 2.4s var(--ease-soft) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.hero h1{
  margin-top:1.5rem;
  font-size:clamp(2.7rem,10.5vw,7.5rem);
  font-weight:600;letter-spacing:-.055em;line-height:.92;
}
.hero-roles{margin-top:1.4rem;font-family:var(--mono);font-size:clamp(.68rem,1.7vw,.82rem);letter-spacing:.1em;color:var(--mut);text-transform:uppercase}
.hero-head{margin-top:2.2rem;font-family:var(--disp);font-size:clamp(1.35rem,3.4vw,2.15rem);font-weight:500;letter-spacing:-.03em;line-height:1.2;max-width:20ch}
.hero-sub{margin-top:1.1rem;color:var(--mut);max-width:56ch;font-size:clamp(.95rem,1.5vw,1.05rem)}
.hero-cta{margin-top:2.4rem;display:flex;gap:.8rem;flex-wrap:wrap}
.hero-scroll{margin-top:clamp(2.5rem,6vw,4rem);display:flex;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut-2)}
.hero-scroll i{display:block;width:34px;height:1px;background:linear-gradient(90deg,var(--jade),transparent);animation:slide 2.2s var(--ease-soft) infinite}
@keyframes slide{0%{transform:translateX(0);opacity:1}70%{transform:translateX(12px);opacity:0}100%{transform:translateX(0);opacity:0}}

/* --- MASCOTA (sprite 3x2) --- */
.bear{
  --bx:0%;--by:0%;
  width:clamp(150px,20vw,260px);aspect-ratio:1/1;
  background-image:url("assets/img/easters.webp");
  background-repeat:no-repeat;background-size:300% 200%;
  background-position:var(--bx) var(--by);
  opacity:0;transform:translateY(18px) scale(.96);
  transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);
  filter:drop-shadow(0 22px 50px rgba(0,200,120,.16));
  pointer-events:none;
}
.bear.is-in{opacity:1;transform:none}
.bear[data-bear="0"]{--bx:0%;--by:0%}
.bear[data-bear="1"]{--bx:50%;--by:0%}
.bear[data-bear="2"]{--bx:100%;--by:0%}
.bear[data-bear="3"]{--bx:0%;--by:100%}
.bear[data-bear="4"]{--bx:50%;--by:100%}
.bear[data-bear="5"]{--bx:100%;--by:100%}

/* colocación: acento en la esquina de la sección, nunca sobre el texto */
.bear-slot{position:absolute;right:0;top:-1.5rem;z-index:0;display:none;pointer-events:none}
.sec{position:relative}
.sec>.wrap{position:relative;z-index:1}

/* retrato en About */
.avatar{
  width:clamp(150px,34vw,230px);aspect-ratio:1/1;border-radius:50%;
  border:1px solid var(--jade-a30);background:radial-gradient(60% 60% at 50% 35%,var(--jade-a08),transparent 70%);
  overflow:hidden;position:relative;
}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:center top}
.avatar::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 -40px 60px -30px var(--bg)}
.about-id{display:flex;align-items:center;gap:1.25rem;margin-bottom:1.6rem}
.about-id p{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-2);line-height:1.7}

/* --- MARQUEE --- */
.band{border-block:1px solid var(--line);background:var(--s1);overflow:hidden;padding-block:1.15rem}
.band--big{background:transparent;border-block:1px solid var(--line);padding-block:clamp(1.2rem,3vw,2rem)}
.track{display:flex;width:max-content;gap:0;animation:marq 42s linear infinite}
.track--slow{animation-duration:64s}
.track--rev{animation-direction:reverse}
.band:hover .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.track-g{display:flex;align-items:center;gap:clamp(1.6rem,4vw,3.2rem);padding-right:clamp(1.6rem,4vw,3.2rem)}
.track-i{font-family:var(--mono);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);white-space:nowrap;display:flex;align-items:center;gap:clamp(1.6rem,4vw,3.2rem)}
.track-i::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--jade);flex:none}
.track-b{font-family:var(--disp);font-weight:600;font-size:clamp(1.8rem,5.5vw,3.6rem);letter-spacing:-.035em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.34);white-space:nowrap;display:flex;align-items:center;gap:clamp(1.4rem,3.5vw,2.6rem);transition:color .4s,-webkit-text-stroke-color .4s}
.track-b::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--jade);flex:none;-webkit-text-stroke:0}
.track-b:hover{color:var(--fg);-webkit-text-stroke-color:transparent}

/* --- INTRO --- */
.intro-q{
  margin-top:2.5rem;padding-left:1.5rem;border-left:2px solid var(--jade);
  font-family:var(--disp);font-size:clamp(1.2rem,2.8vw,1.8rem);font-weight:500;letter-spacing:-.025em;line-height:1.3;
}

/* --- PILLARS --- */
.pillars{display:grid;gap:1.25rem;grid-template-columns:1fr}
.pillar{padding:clamp(1.6rem,3.2vw,2.6rem)}
.pillar-top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.pillar h3{font-size:clamp(1.25rem,2.3vw,1.6rem);letter-spacing:-.03em}
.pillar p{color:var(--mut);font-size:.95rem;margin-top:.85rem}
.chips{display:flex;flex-wrap:wrap;gap:.42rem;margin-top:1.4rem}
.chip{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;padding:.3rem .6rem;border-radius:7px;background:rgba(255,255,255,.035);border:1px solid var(--line);color:var(--mut);transition:.3s var(--ease-out)}
.pillar:hover .chip{border-color:rgba(0,200,120,.2);color:#d4d4d8}
.pull{
  margin-top:1.5rem;padding:1rem 1.2rem;border-radius:12px;
  background:var(--jade-a08);border:1px solid var(--jade-a30);
  font-family:var(--disp);font-weight:500;letter-spacing:-.02em;font-size:.98rem;color:#cffce4;
}

/* --- FEATURED PRODUCTS --- */
.feat{border-top:1px solid var(--line);padding-top:clamp(2.5rem,5vw,4rem);margin-top:clamp(2.5rem,5vw,4rem)}
.feat:first-of-type{border-top:0;padding-top:0;margin-top:0}
.feat-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem}
.feat-name{font-size:clamp(2.2rem,7vw,4.6rem);letter-spacing:-.05em;line-height:.95}
.feat-cat{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--jade);margin-top:.9rem}
.feat-body{display:grid;gap:clamp(1.75rem,4vw,3rem);margin-top:clamp(1.75rem,4vw,3rem);grid-template-columns:1fr}
.feat-txt p{color:var(--mut)}
.feat-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem 1rem;margin-top:1.5rem}
.feat-list li{list-style:none;font-size:.88rem;color:var(--mut);display:flex;align-items:center;gap:.5rem}
.feat-list li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--jade);flex:none}
.shot{border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;background:var(--s2);position:relative}
.shot img{width:100%;transition:transform .8s var(--ease-out)}
.shot:hover img{transform:scale(1.03)}
.shot-bar{display:flex;align-items:center;gap:.4rem;padding:.7rem .9rem;background:var(--s3);border-bottom:1px solid var(--line)}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:#2a2a2a;display:block}
.shot-bar b{margin-left:.6rem;font-family:var(--mono);font-size:.68rem;font-weight:400;color:var(--mut-2);letter-spacing:.04em}

/* --- MOCK UI (ServiPos / TuClick) --- */
.mock{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.mock-body{padding:clamp(1rem,2.4vw,1.6rem);display:grid;gap:.8rem}
.mock-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.kpi{background:var(--s2);border:1px solid var(--line);border-radius:12px;padding:.9rem}
.kpi small{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut-2);display:block}
.kpi b{font-family:var(--disp);font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:600;letter-spacing:-.03em;display:block;margin-top:.35rem}
.kpi.is-jade b{color:var(--jade)}
.bars{display:flex;align-items:flex-end;gap:5px;height:72px;padding-top:.6rem}
.bars i{flex:1;background:linear-gradient(180deg,var(--jade),rgba(0,200,120,.15));border-radius:3px 3px 0 0;display:block;transform-origin:bottom;transform:scaleY(.05)}
.mock-list{display:grid;gap:.45rem}
.mock-li{display:flex;align-items:center;justify-content:space-between;gap:.75rem;background:var(--s2);border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;font-size:.8rem}
.mock-li span{color:var(--mut)}
.mock-li b{font-family:var(--mono);font-size:.72rem;font-weight:500;color:var(--jade)}
.dot-s{width:6px;height:6px;border-radius:50%;background:var(--jade);display:inline-block;margin-right:.45rem}

/* --- PROJECT GRID --- */
.grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
.p-card{display:flex;flex-direction:column;height:100%}
.p-media{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--s3)}
.p-media img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .8s var(--ease-out),filter .8s var(--ease-out);filter:saturate(.75) contrast(1.02)}
.p-card:hover .p-media img{transform:scale(1.05);filter:saturate(1) contrast(1.02)}
.p-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,5,5,.75));opacity:.9}
.p-kind{position:absolute;top:.9rem;left:.9rem;z-index:3;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#04140d;background:var(--jade);padding:.25rem .55rem;border-radius:5px;opacity:0;transform:translateY(-6px);transition:.4s var(--ease-out)}
.p-card:hover .p-kind{opacity:1;transform:none}
.p-body{padding:1.4rem clamp(1.2rem,2.4vw,1.6rem) 1.6rem;display:flex;flex-direction:column;flex:1}
.p-cat{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--jade)}
.p-card h3{font-size:1.35rem;margin-top:.6rem;letter-spacing:-.03em}
.p-card p{color:var(--mut);font-size:.9rem;margin-top:.7rem}
.p-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1rem;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease-out),opacity .4s var(--ease-out),margin .5s var(--ease-out)}
.p-card:hover .p-tags,.p-card:focus-within .p-tags{max-height:120px;opacity:1}
.p-foot{margin-top:auto;padding-top:1.25rem;display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.p-link{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;font-weight:600;color:var(--fg);transition:gap .35s var(--ease-out),color .35s}
.p-link svg{width:14px;height:14px;transition:transform .35s var(--ease-out)}
.p-link:hover{color:var(--jade);gap:.7rem}
.p-link--sub{color:var(--mut);font-weight:500}
.p-note{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut-2);border:1px solid var(--line);padding:.2rem .5rem;border-radius:5px}

/* --- FILTERS --- */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2.25rem}
.filt{padding:.5rem 1.05rem;border-radius:100px;border:1px solid var(--line);font-size:.85rem;color:var(--mut);transition:.35s var(--ease-out)}
.filt:hover{border-color:var(--line-2);color:var(--fg)}
.filt.is-on{background:var(--jade);border-color:var(--jade);color:#04140d;font-weight:600}
.p-card.is-hidden{display:none}

/* --- CASE STUDY / DIAGRAM --- */
.diagram{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,4vw,3rem)}
.d-core{
  text-align:center;padding:1.1rem;border-radius:14px;
  background:linear-gradient(180deg,var(--jade-a14),var(--jade-a08));border:1px solid var(--jade-a30);
}
.d-core b{font-family:var(--disp);letter-spacing:-.02em;font-size:1.05rem;display:block}
.d-core small{font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--jade);display:block;margin-top:.3rem}
.d-arrow{height:34px;display:grid;place-items:center;position:relative}
.d-arrow::before{content:"";width:1px;height:100%;background:linear-gradient(180deg,var(--jade-a30),var(--line))}
.d-tenants{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.d-tenant{background:var(--s2);border:1px solid var(--line);border-radius:12px;padding:.9rem;transition:.4s var(--ease-out)}
.d-tenant:hover{border-color:var(--jade-a30);background:#0d130f;transform:translateY(-3px)}
.d-tenant b{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--fg);display:block}
.d-tenant ul{margin-top:.55rem;display:grid;gap:.2rem;list-style:none}
.d-tenant li{font-size:.72rem;color:var(--mut-2)}
.d-layer{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;padding-top:1.1rem;border-top:1px dashed var(--line)}

.flow{display:grid;gap:.5rem;justify-items:center}
.flow-i{width:100%;max-width:340px;text-align:center;padding:.8rem 1rem;border-radius:12px;background:var(--s2);border:1px solid var(--line);font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.flow-i.is-key{background:var(--jade-a08);border-color:var(--jade-a30);color:var(--jade)}
.flow-a{width:1px;height:22px;background:linear-gradient(180deg,var(--jade-a30),var(--line))}

/* --- PROCESS --- */
.steps{position:relative;display:grid;gap:0}
.steps::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:1px;background:var(--line)}
.steps-fill{position:absolute;left:11px;top:8px;width:1px;height:0;background:linear-gradient(180deg,var(--jade),var(--jade-d));box-shadow:0 0 12px var(--jade-a30)}
.step{position:relative;padding:0 0 2.4rem 3rem}
.step:last-child{padding-bottom:0}
.step-dot{position:absolute;left:5px;top:6px;width:13px;height:13px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg);transition:.45s var(--ease-out)}
.step.is-on .step-dot{border-color:var(--jade);background:var(--jade);box-shadow:0 0 0 5px var(--jade-a08),0 0 18px var(--jade-a30)}
.step small{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--mut-2)}
.step h3{font-size:clamp(1.3rem,3vw,1.9rem);margin-top:.35rem;letter-spacing:-.035em;color:var(--mut);transition:color .45s var(--ease-out)}
.step.is-on h3{color:var(--fg)}
.step p{color:var(--mut-2);margin-top:.5rem;font-size:.95rem;max-width:52ch}

/* --- STACK --- */
.stack-g{display:grid;gap:1rem;grid-template-columns:1fr}
.stack-c{padding:1.5rem}
.stack-c h3{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--jade);font-weight:400}
.stack-c ul{margin-top:1.1rem;display:grid;gap:.42rem;list-style:none}
.stack-c li{font-size:.9rem;color:var(--mut);display:flex;align-items:center;gap:.6rem;transition:color .3s}
.stack-c li::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--mut-2);flex:none;transition:.3s}
.stack-c:hover li{color:#d4d4d8}
.stack-c:hover li::before{background:var(--jade)}

/* --- PRINCIPLES --- */
.prin{display:grid;gap:0;border-top:1px solid var(--line)}
.prin-i{padding:clamp(1.5rem,3.5vw,2.4rem) 0;border-bottom:1px solid var(--line);display:grid;gap:.6rem;transition:padding-left .5s var(--ease-out)}
.prin-i:hover{padding-left:1.2rem}
.prin-i h3{font-size:clamp(1.4rem,3.5vw,2.2rem);letter-spacing:-.04em}
.prin-i p{color:var(--mut);max-width:60ch}

/* --- STATS --- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--s1);padding:clamp(1.4rem,3vw,2.2rem);text-align:center}
.stat b{font-family:var(--disp);font-size:clamp(1.8rem,5vw,3.2rem);font-weight:600;letter-spacing:-.05em;display:block;line-height:1;color:var(--fg)}
.stat b em{font-style:normal;color:var(--jade)}
.stat small{display:block;margin-top:.65rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-2)}

/* --- COLLAB --- */
.collab{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;grid-template-columns:1fr}
.collab-i{background:var(--s1);padding:clamp(1.4rem,3vw,2rem);transition:background .45s var(--ease-out)}
.collab-i:hover{background:#0d120f}
.collab-i h3{font-size:1.1rem;letter-spacing:-.025em}
.collab-i p{color:var(--mut);font-size:.88rem;margin-top:.5rem}

/* --- CONTACT --- */
.contact{text-align:center}
.contact h2{font-size:clamp(2.3rem,8.5vw,6rem);letter-spacing:-.055em;line-height:.95}
.contact .sec-lead{margin-inline:auto}
.socials{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:2.5rem}
.social{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border:1px solid var(--line);border-radius:100px;font-size:.85rem;color:var(--mut);transition:.35s var(--ease-out)}
.social:hover{border-color:var(--jade);color:var(--fg);background:var(--jade-a08)}
.social[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* --- FOOTER --- */
.foot{border-top:1px solid var(--line);padding-block:2.5rem;background:var(--s1)}
.foot-in{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:.72rem;color:var(--mut-2);letter-spacing:.05em}
.foot-in a:hover{color:var(--jade)}

/* --- CURSOR --- */
.cur{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;mix-blend-mode:difference;display:none}
.cur-d{position:fixed;top:-3px;left:-3px;width:6px;height:6px;background:#fff;border-radius:50%;will-change:transform}
.cur-r{position:fixed;top:-19px;left:-19px;width:38px;height:38px;border:1px solid rgba(255,255,255,.7);border-radius:50%;will-change:transform;transition:width .3s var(--ease-out),height .3s var(--ease-out),top .3s var(--ease-out),left .3s var(--ease-out),background-color .3s,border-color .3s}
.cur.is-on .cur-r{width:56px;height:56px;top:-28px;left:-28px;background:#fff;border-color:transparent}
.cur.is-on .cur-d{opacity:0}

/* --- REVEALS --- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}
.word-wrap{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.word{display:inline-block;will-change:transform}

/* --- SUBPAGE (case studies) --- */
.cs-hero{padding-top:clamp(7rem,14vw,9.5rem);padding-bottom:clamp(1.5rem,3vw,2.5rem);position:relative;overflow:hidden}
.cs-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 20% 0%,var(--jade-a08),transparent 70%);pointer-events:none}
.back{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);transition:.3s}
.back:hover{color:var(--jade)}
.cs-title{font-size:clamp(2.4rem,8vw,5.4rem);letter-spacing:-.055em;line-height:.95;margin-top:1.6rem}
.meta{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:2.5rem}
.meta div{background:var(--s1);padding:1.1rem}
.meta small{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-2);display:block}
.meta b{display:block;margin-top:.4rem;font-size:.92rem;font-weight:500}
.prose{max-width:70ch}
.prose h3{font-size:clamp(1.4rem,3.4vw,2rem);letter-spacing:-.035em;margin-top:2.6rem}
.prose p{color:var(--mut);margin-top:1rem}
.prose ul{margin-top:1rem;display:grid;gap:.45rem;list-style:none}
.prose li{color:var(--mut);font-size:.95rem;display:flex;gap:.6rem}
.prose li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--jade);flex:none;margin-top:.6rem}

/* ============ 8. RESPONSIVE ============ */
@media (min-width:540px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(3,1fr)}
  .collab{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:720px){
  .about-id{gap:1.6rem}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .stack-g{grid-template-columns:repeat(2,1fr)}
  .d-tenants{grid-template-columns:repeat(4,1fr)}
  .feat-body{grid-template-columns:1fr 1fr;align-items:center}
  .meta{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:960px){
  .bear-slot{display:block}
  .hero-art{left:26%}
  .hero-art img{object-position:58% center}
  .hero-art::after{background:linear-gradient(90deg,var(--bg) 0%,rgba(5,5,5,.92) 16%,rgba(5,5,5,.45) 34%,transparent 56%)}
  .hero-glow{right:-4%;width:56%}
  .nav-links{display:flex}
  .nav-cta{display:inline-flex}
  .nav-burger{display:none}
  .grid{grid-template-columns:repeat(3,1fr)}
  .stack-g{grid-template-columns:repeat(3,1fr)}
  .collab{grid-template-columns:repeat(4,1fr)}
  .stats{grid-template-columns:repeat(5,1fr)}
  .feat-body{grid-template-columns:.85fr 1.15fr;gap:4rem}
  .feat--rev .feat-body>.shot,.feat--rev .feat-body>.mock{order:-1}
}
@media (min-width:1280px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .pillars{grid-template-columns:repeat(2,1fr)}
}
@media (pointer:fine) and (min-width:1024px){
  body,a,button{cursor:none}
  .cur{display:block}
}

@media (max-width:719px){
  .hero{padding-bottom:0}
  .hero-in{padding-bottom:clamp(19rem,54vw,23rem)}
  .hero-art{top:auto;bottom:0;height:36%}
  .hero-art img{object-position:59% 10%}
  .hero-art::after{background:linear-gradient(180deg,var(--bg) 0%,rgba(5,5,5,.55) 26%,transparent 62%,rgba(5,5,5,.45) 100%)}
  .hero-glow{right:-25%;top:auto;bottom:2%;height:40%;width:130%}
  .hero-scroll{position:relative;z-index:3}
}

/* ============ 9. REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .track{animation:none;transform:none}
  .hero-badge i,.hero-scroll i{animation:none}
  .splash-bar i{animation:none;width:100%}
  .splash-bear{animation:none;background-position:100% 0%}
  .bear{opacity:1;transform:none}
}


/* =============================================================
   10. Página 404
   ============================================================= */
.nf{min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;padding-block:clamp(6rem,14vw,9rem)}
.nf-art{position:absolute;inset:0;z-index:0;pointer-events:none}
.nf-art img{position:absolute;right:0;bottom:0;height:100%;width:auto;max-width:none;object-position:center right}
.nf-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 4%,rgba(5,5,5,.9) 26%,rgba(5,5,5,.45) 44%,transparent 62%)}
.nf-in{position:relative;z-index:2}
.nf .nf-code{font-family:var(--disp);font-size:clamp(4.5rem,17vw,11rem);font-weight:600;letter-spacing:-.06em;line-height:.85;color:var(--jade);text-shadow:0 0 60px rgba(0,200,120,.35)}
.nf h1{font-size:clamp(1.6rem,5vw,3rem);margin-top:.6rem;letter-spacing:-.04em}
.nf-in p:not(.nf-code){color:var(--mut);margin-top:1rem;max-width:46ch}