/* ===========================================================
   Unyxlab — Página de Projetos
   Depende de style.css (tokens, nav, footer)
   Prefixo .pj- para não colidir com o resto do site

   Perfil de desempenho:
   - só se anima transform e opacity
   - efeitos caros (blur, backdrop-filter, parallax, cursor)
     desligam-se abaixo de 820px e em prefers-reduced-motion
   =========================================================== */

  :root{
    --pj-accent:#a98bff;
    --pj-accent-soft:rgba(169,139,255,0.16);
    --pj-gutter:clamp(20px,5vw,72px);
    --pj-ease-out:cubic-bezier(.16,.84,.44,1);
    --pj-ease-io:cubic-bezier(.65,.05,.36,1);
  }

  .pj-page{
    background:var(--bg);
    overflow-x:clip;
  }

  /* ===========================================================
     CORTINA DE ENTRADA / SAÍDA
     =========================================================== */
  .pj-curtain{
    position:fixed;
    inset:0;
    z-index:90;
    background:#050509;
    display:grid;
    place-items:center;
    pointer-events:none;
  }
  .pj-curtain.is-gone{display:none;}
  .pj-curtain-mark{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(13px,2vw,17px);
    letter-spacing:0.3em;
    color:var(--ink-faint);
  }
  .pj-curtain-bar{
    position:absolute;
    left:0; bottom:0;
    height:2px;
    width:100%;
    transform:scaleX(0);
    transform-origin:0 50%;
    background:linear-gradient(90deg,var(--violet),var(--pink));
  }

  /* ===========================================================
     RAIL DE PROGRESSO COM MARCAS DE CAPÍTULO
     =========================================================== */
  .pj-progress{
    position:fixed;
    top:0; left:0;
    height:2px; width:100%;
    transform:scaleX(0);
    transform-origin:0 50%;
    background:linear-gradient(90deg,var(--pj-accent),var(--pink));
    z-index:62;
    will-change:transform;
    transition:background .8s var(--pj-ease-out);
  }

  .pj-rail{
    position:fixed;
    left:clamp(12px,1.6vw,22px);
    top:50%;
    transform:translateY(-50%);
    z-index:58;
    display:none;
    flex-direction:column;
    gap:14px;
    align-items:flex-start;
  }
  /* só aparece quando há largura para não competir com o asteroide à direita */
  @media (min-width:1280px){ .pj-rail{display:flex;} }

  .pj-rail a{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--ink-faint);
    font-size:10px;
    font-weight:700;
    letter-spacing:0.14em;
  }
  .pj-rail .tick{
    width:16px; height:2px;
    border-radius:2px;
    background:currentColor;
    opacity:.45;
    transition:width .45s var(--pj-ease-out), opacity .45s, background .45s;
  }
  .pj-rail .lb{
    opacity:0;
    transform:translateX(-6px);
    transition:opacity .35s, transform .35s;
    order:2;
  }
  .pj-rail .tick{order:1;}
  .pj-rail a:hover .lb,
  .pj-rail a:focus-visible .lb,
  .pj-rail a.is-on .lb{opacity:1; transform:translateX(0);}
  .pj-rail a.is-on{color:var(--pj-accent);}
  .pj-rail a.is-on .tick{width:30px; opacity:1;}

  /* ===========================================================
     CURSOR
     =========================================================== */
  .pj-cursor{
    position:fixed;
    top:0; left:0;
    width:12px; height:12px;
    margin:-6px 0 0 -6px;
    border-radius:50%;
    background:var(--pj-accent);
    pointer-events:none;
    z-index:75;
    opacity:0;
    will-change:transform;
    display:none;
    transition:opacity .3s, background .8s var(--pj-ease-out);
  }
  .pj-cursor-ring{
    position:fixed;
    top:0; left:0;
    width:44px; height:44px;
    margin:-22px 0 0 -22px;
    border:1px solid var(--pj-accent);
    border-radius:50%;
    pointer-events:none;
    z-index:74;
    opacity:0;
    will-change:transform;
    display:none;
    transition:opacity .3s, border-color .8s var(--pj-ease-out);
  }
  .pj-cursor-ring .lbl{
    position:absolute; inset:0;
    display:grid; place-items:center;
    font-size:8.5px; font-weight:700; letter-spacing:0.16em;
    color:var(--ink);
    opacity:0;
    transition:opacity .25s;
    white-space:nowrap;
  }
  .pj-cursor-ring.is-active .lbl{opacity:1;}
  @media (hover:hover) and (pointer:fine) and (min-width:981px){
    .pj-cursor, .pj-cursor-ring{display:block;}
    .pj-page, .pj-page a, .pj-page button{cursor:none;}
  }

  /* ===========================================================
     GRÃO + VINHETA GLOBAL (profundidade cinematográfica)
     =========================================================== */
  .pj-grain{
    position:fixed;
    inset:-50%;
    z-index:56;
    pointer-events:none;
    opacity:.16;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    will-change:transform;
  }
  @media (max-width:820px){ .pj-grain{display:none;} }

  /* ===========================================================
     ASTEROIDES — campo reativo ao scroll
     =========================================================== */
  .pj-field{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    overflow:hidden;
  }
  .pj-rock{
    position:absolute;
    will-change:transform;
    filter:drop-shadow(0 18px 34px rgba(0,0,0,0.85));
  }
  .pj-rock-body{
    width:100%; height:100%;
    background:radial-gradient(circle at 32% 28%, #232030 0%, #121019 45%, #08070d 100%);
    border-radius:48% 52% 68% 32% / 42% 38% 62% 58%;
    box-shadow:
      inset -10px -12px 26px rgba(0,0,0,.95),
      inset 6px 8px 20px rgba(169,139,255,.10),
      0 0 34px rgba(139,107,242,.16);
    border:1px solid rgba(255,255,255,0.07);
    position:relative;
    overflow:hidden;
  }
  .pj-rock-body::after{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 26% 22%, rgba(214,201,255,.22) 0%, transparent 42%);
  }
  .pj-rock i{
    position:absolute;
    background:rgba(0,0,0,.55);
    border-radius:50%;
    box-shadow:inset 3px 3px 7px rgba(0,0,0,.9);
  }
  /* posições/dimensões: cada rocha tem a sua profundidade */
  .pj-rock.r1{width:clamp(54px,7vw,104px); aspect-ratio:1; top:16%; left:7%;}
  .pj-rock.r2{width:clamp(30px,4vw,58px);  aspect-ratio:1; top:62%; left:17%;}
  .pj-rock.r3{width:clamp(70px,9.5vw,146px);aspect-ratio:1; top:24%; right:11%;}
  .pj-rock.r4{width:clamp(22px,2.8vw,40px);aspect-ratio:1; top:73%; right:26%;}
  .pj-rock.r5{width:clamp(38px,5vw,74px);  aspect-ratio:1; top:8%;  right:34%;}
  @media (max-width:820px){
    .pj-rock.r2, .pj-rock.r4{display:none;}
    .pj-rock{filter:none;}
    .pj-rock-body{box-shadow:inset -8px -10px 20px rgba(0,0,0,.9);}
  }

  /* ===========================================================
     HERO
     =========================================================== */
  .pj-hero{
    position:relative;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:clamp(110px,16vh,180px) var(--pj-gutter) clamp(34px,6vh,60px);
    overflow:hidden;
    isolation:isolate;
  }
  .pj-hero-stars{
    position:absolute; inset:0;
    width:100%; height:100%;
    z-index:0;
    pointer-events:none;
  }
  .pj-hero-aura{
    position:absolute;
    left:50%; top:42%;
    width:min(130vw,1500px);
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    background:
      radial-gradient(circle, rgba(139,107,242,0.20) 0%, rgba(247,168,212,0.06) 34%, transparent 66%);
    z-index:0;
    pointer-events:none;
    will-change:transform;
  }
  @media (max-width:820px){
    .pj-hero-aura{background:radial-gradient(circle, rgba(139,107,242,0.16) 0%, transparent 62%);}
  }

  .pj-hero-meta{
    position:relative; z-index:3;
    display:flex;
    align-items:center;
    gap:clamp(10px,2vw,20px);
    flex-wrap:wrap;
    font-size:clamp(9.5px,1.1vw,11.5px);
    font-weight:700;
    letter-spacing:0.2em;
    color:var(--ink-faint);
    margin-bottom:clamp(16px,3.5vh,30px);
  }
  .pj-hero-meta .rule{
    flex:1; min-width:24px; height:1px;
    background:linear-gradient(90deg,var(--line),transparent);
  }

  /* --- título com revelação em máscara --- */
  .pj-hero-title{
    position:relative; z-index:3;
    margin:0 0 clamp(20px,4.5vh,40px);
    font-family:var(--font-display);
    font-weight:700;
    color:var(--ink);
    letter-spacing:-0.05em;
    line-height:0.84;
  }
  .pj-ln{
    display:block;
    overflow:hidden;
    padding-bottom:0.06em;
  }
  .pj-ln-in{display:block;}
  .pj-t1{font-size:clamp(56px,15vw,224px);}
  .pj-t2{
    font-family:var(--font-serif);
    font-style:italic;
    font-weight:500;
    font-size:clamp(20px,4.6vw,66px);
    line-height:1.08;
    letter-spacing:-0.02em;
    color:var(--ink-dim);
    margin-top:clamp(4px,1vh,14px);
  }
  .pj-hero-title .ch{
    display:inline-block;
    will-change:transform;
  }
  .pj-hero-title .ch.is-out{
    color:transparent;
    -webkit-text-stroke:1.4px var(--violet-bright);
  }

  .pj-hero-foot{
    position:relative; z-index:3;
    display:grid;
    gap:clamp(22px,4vh,34px);
    align-items:end;
    border-top:1px solid rgba(255,255,255,0.09);
    padding-top:clamp(18px,3vh,28px);
  }
  .pj-hero-lede{
    font-size:clamp(14px,1.6vw,18px);
    line-height:1.7;
    color:var(--ink-dim);
    max-width:54ch;
    margin:0;
  }
  .pj-hero-figures{display:flex; gap:clamp(22px,5vw,58px); flex-wrap:wrap;}
  .pj-fig b{
    display:block;
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(24px,3.4vw,44px);
    line-height:1;
    letter-spacing:-0.025em;
    color:var(--ink);
  }
  .pj-fig span{
    display:block; margin-top:6px;
    font-size:clamp(10px,1.1vw,11.5px);
    letter-spacing:0.1em;
    color:var(--ink-faint);
    line-height:1.5;
  }
  @media (min-width:900px){
    .pj-hero-foot{grid-template-columns:minmax(0,1fr) auto; gap:64px;}
  }

  .pj-scrollcue{
    position:absolute;
    left:var(--pj-gutter);
    bottom:clamp(14px,2.4vh,22px);
    z-index:3;
    display:flex; align-items:center; gap:10px;
    font-size:9.5px; font-weight:700; letter-spacing:0.22em;
    color:var(--ink-faint);
  }
  .pj-scrollcue .bar{
    width:40px; height:1px;
    background:linear-gradient(90deg,var(--pj-accent),transparent);
    transform-origin:0 50%;
  }
  @media (max-width:900px){ .pj-scrollcue{display:none;} }

  /* ===========================================================
     MARQUEE
     =========================================================== */
  .pj-marquee{
    position:relative; z-index:3;
    overflow:hidden;
    border-top:1px solid rgba(255,255,255,0.08);
    border-bottom:1px solid rgba(255,255,255,0.08);
    padding:clamp(12px,2vh,20px) 0;
    background:rgba(0,0,0,0.3);
  }
  .pj-marquee-track{
    display:flex;
    gap:clamp(26px,5vw,60px);
    width:max-content;
    will-change:transform;
  }
  .pj-marquee-track span{
    display:flex; align-items:center;
    gap:clamp(26px,5vw,60px);
    white-space:nowrap;
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(14px,2.2vw,26px);
    letter-spacing:-0.01em;
    color:var(--ink-faint);
  }
  .pj-marquee-track span::after{
    content:'';
    width:5px; height:5px; border-radius:50%;
    background:var(--pj-accent);
    transition:background .8s var(--pj-ease-out);
  }

  /* ===========================================================
     ÍNDICE
     =========================================================== */
  .pj-index{padding:clamp(64px,11vh,130px) var(--pj-gutter);}
  .pj-index-head{display:grid; gap:14px; margin-bottom:clamp(26px,5vh,48px);}
  .pj-index-head h2{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(26px,4vw,46px);
    line-height:1.08; letter-spacing:-0.025em;
    color:var(--ink); margin:0;
  }
  .pj-index-head p{
    margin:0; color:var(--ink-dim);
    font-size:clamp(13.5px,1.5vw,16.5px);
    line-height:1.7; max-width:58ch;
  }
  @media (min-width:900px){
    .pj-index-head{grid-template-columns:1fr 1fr; align-items:end; gap:50px;}
  }

  .pj-list{list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,0.1);}
  .pj-row{
    position:relative;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:clamp(12px,3vw,32px);
    padding:clamp(18px,3.2vh,30px) 0;
    border-bottom:1px solid rgba(255,255,255,0.1);
    text-decoration:none; color:inherit;
    overflow:hidden;
    transition:padding-left .5s var(--pj-ease-out);
  }
  .pj-row::before{
    content:'';
    position:absolute; left:0; top:0; bottom:0;
    width:2px;
    background:var(--row-accent,var(--violet-bright));
    transform:scaleY(0); transform-origin:50% 100%;
    transition:transform .5s var(--pj-ease-out);
  }
  .pj-row::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(90deg, var(--row-accent,var(--violet-bright)), transparent 55%);
    opacity:0;
    transition:opacity .5s var(--pj-ease-out);
    pointer-events:none;
  }
  .pj-row:hover, .pj-row:focus-visible{padding-left:20px;}
  .pj-row:hover::before, .pj-row:focus-visible::before{transform:scaleY(1); transform-origin:50% 0;}
  .pj-row:hover::after, .pj-row:focus-visible::after{opacity:.07;}

  .pj-row-num{
    font-family:var(--font-display);
    font-size:11px; font-weight:700; letter-spacing:0.14em;
    color:var(--ink-faint);
    transition:color .4s;
  }
  .pj-row:hover .pj-row-num{color:var(--row-accent,var(--violet-bright));}
  .pj-row-main{min-width:0;}
  .pj-row-name{
    display:block;
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(20px,3.6vw,42px);
    line-height:1.1; letter-spacing:-0.03em;
    color:var(--ink);
    transition:color .4s;
  }
  .pj-row:hover .pj-row-name{color:var(--row-accent,var(--violet-bright));}
  .pj-row-desc{
    display:block; margin-top:5px;
    font-size:clamp(11.5px,1.3vw,13px);
    color:var(--ink-faint); line-height:1.55;
  }
  .pj-row-go{
    flex-shrink:0;
    width:clamp(32px,4vw,40px); height:clamp(32px,4vw,40px);
    border-radius:50%;
    border:1px solid var(--line);
    display:grid; place-items:center;
    color:var(--ink-dim);
    transition:transform .5s var(--pj-ease-out), border-color .4s, color .4s;
  }
  .pj-row-go svg{width:14px;height:14px;}
  .pj-row:hover .pj-row-go{
    transform:translateX(5px);
    border-color:var(--row-accent,var(--violet-bright));
    color:var(--row-accent,var(--violet-bright));
  }

  .pj-preview{
    position:fixed; top:0; left:0;
    width:280px; aspect-ratio:4/3;
    border-radius:var(--radius-md);
    overflow:hidden;
    pointer-events:none;
    z-index:57;
    opacity:0;
    will-change:transform,opacity;
    box-shadow:0 34px 76px -30px rgba(0,0,0,0.95);
    border:1px solid rgba(255,255,255,0.14);
    display:none;
    clip-path:inset(0 0 0 0 round 14px);
  }
  .pj-preview img{
    width:100%; height:100%;
    object-fit:cover; display:block;
    filter:brightness(1.16) saturate(1.12) contrast(1.05);
  }
  @media (hover:hover) and (pointer:fine) and (min-width:1100px){
    .pj-preview{display:block;}
  }

  /* ===========================================================
     CAPÍTULOS
     =========================================================== */
  .pj-chapter{
    position:relative;
    padding:clamp(64px,13vh,150px) var(--pj-gutter);
    scroll-margin-top:76px;
    border-top:1px solid rgba(255,255,255,0.07);
    overflow:hidden;
  }
  .pj-chapter-wash{
    position:absolute; inset:0;
    background:radial-gradient(ellipse 66% 58% at 76% 34%, var(--wash,rgba(169,139,255,0.13)) 0%, transparent 68%);
    pointer-events:none; z-index:0;
  }
  .pj-ghost{
    position:absolute;
    top:clamp(16px,4vh,54px);
    right:var(--pj-gutter);
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(84px,19vw,290px);
    line-height:.8; letter-spacing:-0.06em;
    color:transparent;
    -webkit-text-stroke:1px rgba(255,255,255,0.06);
    pointer-events:none; z-index:0;
    will-change:transform;
  }
  @media (max-width:820px){ .pj-ghost{opacity:.6;} }

  .pj-chapter-inner{
    position:relative; z-index:1;
    display:grid;
    gap:clamp(26px,5vh,54px);
    align-items:center;
  }
  @media (min-width:981px){
    .pj-chapter-inner{
      grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
      gap:clamp(40px,5vw,84px);
    }
    .pj-chapter.is-flipped .pj-media{order:2;}
  }

  /* --- media: tratamento cinematográfico --- */
  .pj-media{
    position:relative;
    border-radius:var(--radius-lg);
    overflow:hidden;
    aspect-ratio:4/3;
    background:var(--media-bg,linear-gradient(160deg,#15131f,#050408));
    border:1px solid rgba(255,255,255,0.09);
    box-shadow:0 44px 96px -44px rgba(0,0,0,0.98);
    clip-path:inset(0 0 0 0 round 22px);
  }
  .pj-media-inner{position:absolute; inset:-11% 0; will-change:transform;}
  .pj-media img{
    width:100%; height:100%;
    object-fit:cover; display:block;
    /* mais luz e densidade sem lavar os pretos */
    filter:brightness(1.16) contrast(1.07) saturate(1.12);
    will-change:transform;
  }
  /* realce de luz no canto superior + queda de luz em baixo */
  .pj-media-veil{
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 60% 50% at 28% 12%, rgba(255,255,255,.14) 0%, transparent 60%),
      linear-gradient(180deg, transparent 42%, rgba(5,4,9,.76) 100%);
    pointer-events:none;
    mix-blend-mode:screen;
  }
  .pj-media-veil::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 46%, rgba(5,4,9,.78) 100%);
    mix-blend-mode:normal;
  }
  /* brilho que atravessa a imagem ao entrar em vista */
  .pj-media-sheen{
    position:absolute; top:0; bottom:0;
    left:-40%;
    width:36%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
    transform:skewX(-14deg);
    pointer-events:none;
    opacity:0;
    z-index:2;
  }
  .pj-media-tag{
    position:absolute; left:15px; top:15px; z-index:3;
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 13px; border-radius:999px;
    background:rgba(5,4,9,0.78);
    border:1px solid var(--accent,var(--violet-bright));
    color:var(--accent,var(--violet-bright));
    font-size:10px; font-weight:700; letter-spacing:0.15em;
  }
  .pj-chip{
    position:absolute; z-index:3;
    padding:11px 15px; border-radius:13px;
    background:rgba(9,8,14,0.86);
    border:1px solid rgba(255,255,255,0.12);
    will-change:transform;
  }
  .pj-chip b{
    display:block;
    font-family:var(--font-display);
    font-size:clamp(15px,1.9vw,21px);
    font-weight:700; line-height:1;
    color:var(--accent,var(--violet-bright));
  }
  .pj-chip span{
    display:block; margin-top:4px;
    font-size:9.5px; letter-spacing:0.1em; color:var(--ink-faint);
  }
  .pj-chip.at-br{right:14px; bottom:14px;}
  .pj-chip.at-bl{left:14px; bottom:14px;}
  @media (min-width:821px){
    .pj-media-tag, .pj-chip{
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
    }
  }

  /* --- texto --- */
  .pj-info{min-width:0;}
  .pj-kicker{
    display:inline-flex; align-items:center; gap:10px;
    font-size:10.5px; font-weight:700; letter-spacing:0.18em;
    color:var(--accent,var(--violet-bright));
    margin-bottom:14px;
  }
  .pj-kicker i{width:22px; height:1px; background:currentColor; display:block; transform-origin:0 50%;}
  .pj-name{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(30px,5.2vw,64px);
    line-height:1.0; letter-spacing:-0.035em;
    color:var(--ink); margin:0 0 12px;
  }
  .pj-name .pj-ln{padding-bottom:0.08em;}
  .pj-tagline{
    font-family:var(--font-serif);
    font-style:italic; font-weight:500;
    font-size:clamp(17px,2.4vw,28px);
    line-height:1.35; color:var(--ink-dim);
    margin:0 0 22px;
  }
  .pj-body{
    font-size:clamp(14px,1.5vw,16.5px);
    line-height:1.78; color:var(--ink-dim);
    max-width:56ch; margin:0 0 13px;
  }
  .pj-facts{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
    gap:14px 22px;
    margin:24px 0; padding:19px 0;
    border-top:1px solid rgba(255,255,255,0.1);
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .pj-fact dt{font-size:10px; letter-spacing:0.14em; color:var(--ink-faint); margin-bottom:6px;}
  .pj-fact dd{margin:0; font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.45;}

  .pj-stats{
    list-style:none; margin:0 0 26px; padding:0;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:18px;
  }
  .pj-stats li b{
    display:block;
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(22px,3vw,36px);
    line-height:1; letter-spacing:-0.025em;
    color:var(--accent,var(--violet-bright));
  }
  .pj-stats li span{
    display:block; margin-top:6px;
    font-size:11px; color:var(--ink-faint); line-height:1.5;
  }

  .pj-stack{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px;}
  .pj-stack span{
    padding:6px 12px; border-radius:999px;
    border:1px solid rgba(255,255,255,0.13);
    font-size:11px; font-weight:500;
    color:var(--ink-dim);
    background:rgba(255,255,255,0.03);
    transition:border-color .4s, color .4s, background .4s;
  }
  .pj-stack span:hover{
    border-color:var(--accent,var(--violet-bright));
    color:var(--ink);
    background:rgba(255,255,255,0.06);
  }

  .pj-cta{
    position:relative;
    display:inline-flex; align-items:center; gap:10px;
    padding:13px 25px; border-radius:999px;
    background:var(--accent,var(--violet-bright));
    color:#0a0910;
    font-size:13.5px; font-weight:700;
    text-decoration:none;
    overflow:hidden;
    transition:box-shadow .4s var(--pj-ease-out);
  }
  .pj-cta svg{width:15px;height:15px; position:relative; z-index:1;}
  .pj-cta span{position:relative; z-index:1;}
  .pj-cta:hover{box-shadow:0 16px 38px -14px var(--accent,var(--violet-bright));}

  /* ---- ligação para o próximo projeto ---- */
  .pj-next{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:34px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,0.09);
    text-decoration:none;
    color:var(--ink-dim);
    width:fit-content;
    transition:gap .4s var(--pj-ease-out), color .35s;
  }
  .pj-next:hover, .pj-next:focus-visible{gap:20px; color:var(--ink);}
  .pj-next-label{
    font-size:10px;
    font-weight:700;
    letter-spacing:0.14em;
    color:var(--ink-faint);
  }
  .pj-next-name{
    font-family:var(--font-display);
    font-weight:700;
    font-size:16px;
    letter-spacing:-0.01em;
    color:var(--ink);
    transition:color .35s;
  }
  .pj-next:hover .pj-next-name, .pj-next:focus-visible .pj-next-name{color:var(--accent,var(--violet-bright));}
  .pj-next svg{
    width:15px; height:15px;
    color:var(--accent,var(--violet-bright));
    transition:transform .4s var(--pj-ease-out);
  }
  .pj-next:hover svg, .pj-next:focus-visible svg{transform:translateX(6px);}
  .pj-next-label, .pj-next-name{display:flex; flex-direction:column; justify-content:center;}
  @media (max-width:640px){
    .pj-next{margin-top:26px; padding-top:18px;}
  }

  /* ===========================================================
     SCROLL HORIZONTAL
     =========================================================== */
  .pj-hscroll{
    position:relative;
    border-top:1px solid rgba(255,255,255,0.07);
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.42),transparent);
  }
  .pj-hscroll-viewport{overflow:hidden;}
  .pj-hscroll-track{
    display:flex; align-items:center;
    gap:clamp(16px,3vw,38px);
    padding:clamp(56px,10vh,110px) var(--pj-gutter);
    width:max-content;
    will-change:transform;
  }
  .pj-hs-intro{flex:0 0 auto; width:min(80vw,400px); padding-right:clamp(8px,3vw,36px);}
  .pj-hs-intro h2{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(26px,4.4vw,52px);
    line-height:1.04; letter-spacing:-0.03em;
    color:var(--ink); margin:0 0 15px;
  }
  .pj-hs-intro p{margin:0; color:var(--ink-dim); font-size:14.5px; line-height:1.7;}
  .pj-step{
    flex:0 0 auto;
    width:min(78vw,330px);
    min-height:clamp(250px,40vh,330px);
    padding:26px 24px;
    border-radius:var(--radius-lg);
    border:1px solid rgba(255,255,255,0.1);
    background:linear-gradient(170deg,rgba(24,20,38,0.72),rgba(8,7,13,0.62));
    display:flex; flex-direction:column;
    position:relative; overflow:hidden;
  }
  .pj-step::before{
    content:''; position:absolute;
    left:0; top:0; height:2px; width:100%;
    background:linear-gradient(90deg,var(--violet-bright),transparent);
    opacity:.55;
  }
  .pj-step-n{
    font-family:var(--font-display);
    font-size:11px; font-weight:700; letter-spacing:0.16em;
    color:var(--violet-bright); margin-bottom:auto;
  }
  .pj-step h3{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(19px,2.6vw,26px);
    line-height:1.14; letter-spacing:-0.025em;
    color:var(--ink); margin:22px 0 11px;
  }
  .pj-step p{margin:0; font-size:13.5px; line-height:1.7; color:var(--ink-dim);}
  @media (min-width:821px){
    .pj-step{backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
  }
  @media (max-width:820px){
    .pj-hscroll-viewport{
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .pj-hscroll-viewport::-webkit-scrollbar{display:none;}
    .pj-hs-intro, .pj-step{scroll-snap-align:center;}
  }

  /* ===========================================================
     CTA FINAL
     =========================================================== */
  .pj-final{
    position:relative;
    padding:clamp(76px,14vh,160px) var(--pj-gutter);
    text-align:center; overflow:hidden;
    border-top:1px solid rgba(255,255,255,0.07);
  }
  .pj-final-glow{
    position:absolute; left:50%; top:50%;
    width:min(126vw,1150px); aspect-ratio:1;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(139,107,242,0.17) 0%,transparent 64%);
    pointer-events:none; z-index:0;
    will-change:transform;
  }
  .pj-final > *{position:relative; z-index:1;}
  .pj-final h2{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(30px,6.4vw,84px);
    line-height:1.0; letter-spacing:-0.04em;
    color:var(--ink);
    margin:0 auto 18px; max-width:16ch;
  }
  .pj-final p{
    margin:0 auto 32px; max-width:50ch;
    font-size:clamp(14px,1.6vw,17px);
    line-height:1.7; color:var(--ink-dim);
  }
  .pj-final-actions{display:flex; gap:13px; justify-content:center; flex-wrap:wrap;}
  .pj-btn-main, .pj-btn-ghost{
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 30px; border-radius:999px;
    font-size:14.5px; font-weight:700; text-decoration:none;
    transition:box-shadow .4s var(--pj-ease-out), border-color .4s, background .4s;
  }
  .pj-btn-main{background:linear-gradient(95deg,#9b6bf7,#7c4de0); color:#fff;}
  .pj-btn-main:hover{box-shadow:0 18px 44px -16px rgba(139,107,242,0.9);}
  .pj-btn-ghost{border:1px solid var(--line); color:var(--ink);}
  .pj-btn-ghost:hover{border-color:var(--violet-bright); background:rgba(139,107,242,0.09);}
  .pj-btn-main svg, .pj-btn-ghost svg{width:16px;height:16px;}

  /* ===========================================================
     ESTADOS INICIAIS (só com o GSAP vivo)
     =========================================================== */
  .js-gsap [data-reveal]{opacity:0;}
  .js-gsap .pj-ln-in{transform:translateY(105%);}
  .js-gsap .pj-media-inner{opacity:0;}

  /* ===========================================================
     MOVIMENTO REDUZIDO
     =========================================================== */
  @media (prefers-reduced-motion:reduce){
    .pj-page [data-reveal],
    .pj-page .pj-ln-in,
    .pj-page .pj-media-inner{opacity:1 !important; transform:none !important;}
    .pj-cursor, .pj-cursor-ring, .pj-grain, .pj-field{display:none !important;}
    .pj-marquee-track{transform:none !important;}
    .pj-curtain{display:none !important;}
  }