/* Projetos v3 (06/11/2026): vitrine escura. Usado por /projetos/ e /projetos/meia-hora/. */
.pj{--bg:#000;--ink:#fff;--dim:#9a9aa0;--mute:#8a8a90;--line:rgba(255,255,255,.12);--teal:#00c896;
  --ease:cubic-bezier(.16,1,.3,1);--gut:clamp(1.1rem,3.4vw,2.75rem);background:#000;color:#fff;overflow-x:clip}
.pj *,.pj *::before,.pj *::after{box-sizing:border-box}
.pj img{display:block;max-width:100%;height:auto}
.pj a{color:inherit}
.pj h1,.pj h2,.pj h3{margin:0;font-family:var(--sans)!important;font-weight:500!important;letter-spacing:-.035em!important}
.pj p{margin:0}
.pj-w{padding-left:var(--gut);padding-right:var(--gut)}
.pj-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pj :focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:2px}

/* ── HERO ── */
.pj-hero{position:relative;padding-top:clamp(108px,15vh,150px);padding-bottom:clamp(2rem,5vw,3.5rem)}
.pj-hero__topo{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;color:var(--dim);font-size:.92rem;line-height:1.5}
.pj-hero__topo p{max-width:30ch}
.pj-hero__topo a{text-decoration:none;color:#fff;border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .3s}
.pj-hero__topo a:hover{border-color:#fff}
.pj-marca{position:relative;margin-top:clamp(1.5rem,5vh,3.5rem)}
.pj-marca h1{font-weight:700!important;font-size:clamp(4.2rem,26.4vw,40rem);line-height:.8;letter-spacing:-.04em!important;white-space:nowrap;margin-left:-.05em;position:relative;z-index:1}
.pj-marca h1 .lt{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .2em 0;margin-bottom:-.16em}
.pj-marca h1 .lt>span{display:inline-block;transform:translateY(102%);animation:pj-sobe 1.15s var(--ease) forwards}
@keyframes pj-sobe{to{transform:none}}
/* placas que "atravessam" o nome */
.pj-placa{position:absolute;z-index:2;overflow:hidden;border-radius:6px;background:#111;
  clip-path:inset(100% 0 0 0);animation:pj-abre 1.4s var(--ease) forwards}
.pj-placa img{width:100%;height:100%;object-fit:cover}
.pj-placa--a{width:clamp(120px,13vw,300px);aspect-ratio:4/5;right:2.5%;top:-14%;animation-delay:.55s}
.pj-placa--b{width:clamp(110px,15vw,330px);aspect-ratio:4/3;left:51%;bottom:-38%;animation-delay:.75s}
.pj-placa--c{width:clamp(80px,8.5vw,190px);aspect-ratio:4/5;left:9%;bottom:-56%;animation-delay:.95s}
@keyframes pj-abre{to{clip-path:inset(0 0 0 0)}}
.pj-hero__pe{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2rem;align-items:end;margin-top:clamp(5rem,17vw,16rem)}
.pj-hero__pe p{font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.4;max-width:30ch;color:#e9e9ec}
.pj-hero__pe small{justify-self:end;max-width:34ch;color:var(--dim);font-size:.85rem;line-height:1.55;text-align:right}

/* ── DESTAQUE (caso Meia Hora) ── */
.pj-dest{padding-top:clamp(4rem,9vw,8rem)}
.pj-dest__img{position:relative;overflow:hidden;height:min(86vh,58vw);border-radius:8px;margin:0 var(--gut);
  clip-path:inset(0 0 0 0 round 8px)}
.pj-dest__img img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover}
.pj-dest__img a{position:absolute;inset:0;z-index:2}
.pj-dest__info{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem;align-items:end;padding-top:clamp(1.6rem,3vw,2.5rem)}
.pj-dest__info h2{font-size:clamp(2.6rem,7.4vw,7.2rem);line-height:.9}
.pj-dest__info p{color:#cfcfd4;line-height:1.6;max-width:42ch;margin-bottom:1.3rem}
.pj-trio{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:clamp(.6rem,1.4vw,1.2rem);margin-top:clamp(2rem,4vw,3.5rem);align-items:start}
.pj-trio figure{margin:0;overflow:hidden;border-radius:6px}
.pj-trio figure:nth-child(2){margin-top:clamp(2rem,7vw,7rem)}
.pj-trio figure:nth-child(3){margin-top:clamp(1rem,3vw,3rem)}
.pj-trio img{width:100%}

/* links em pílula */
.pj-link{display:inline-flex;align-items:center;gap:.6rem;font-size:.95rem;text-decoration:none;border:1px solid rgba(255,255,255,.28);border-radius:99px;padding:.8rem 1.25rem .8rem 1.35rem;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s}
.pj-link svg{transition:transform .35s var(--ease)}
.pj-link:hover{background:#fff;color:#000;border-color:#fff}
.pj-link:hover svg{transform:translateX(4px)}

/* ── PAREDE (marcas no mundo real) ── */
.pj-parede{padding-top:clamp(6rem,13vw,12rem)}
.pj-cab{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.pj-cab h2{font-size:clamp(2.6rem,7.4vw,7.2rem);line-height:.9}
.pj-cab p{color:var(--dim);line-height:1.6;max-width:40ch}
.pj-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.7rem,1.6vw,1.4rem);align-items:start}
.pj-col{display:flex;flex-direction:column;gap:clamp(1.6rem,3vw,2.6rem)}
.pj-col:nth-child(2){padding-top:clamp(4rem,12vw,11rem)}
.pj-col:nth-child(3){padding-top:clamp(1.5rem,5vw,4.5rem)}
.pj-item{margin:0}
.pj-item__img{position:relative;overflow:hidden;border-radius:6px;background:#0d0d0f}
.pj-item__img img{width:100%;transition:transform 1.2s var(--ease)}
.pj-item:hover .pj-item__img img{transform:scale(1.045)}
.pj-item figcaption{display:flex;justify-content:space-between;gap:1rem;padding-top:.8rem;font-size:.95rem;line-height:1.35}
.pj-item figcaption b{font-weight:500}
.pj-item figcaption span{color:var(--dim);text-align:right}
.pj-nota{color:var(--mute);font-size:.82rem;margin-top:clamp(2rem,4vw,3rem);line-height:1.5}
.pj-nota a{color:var(--dim)}

/* ── ÍNDICE (no ar) ── */
.pj-idx{padding-top:clamp(6rem,13vw,12rem)}
.pj-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pj-lista li{border-bottom:1px solid var(--line)}
.pj-linha{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;gap:1.5rem;align-items:center;padding:clamp(1.3rem,2.4vw,2rem) 0;text-decoration:none;position:relative}
.pj-linha .nome{font-size:clamp(1.6rem,3.6vw,3.2rem);letter-spacing:-.03em;line-height:1;transition:transform .6s var(--ease),color .4s}
.pj-linha .oque{color:var(--dim);font-size:.98rem;line-height:1.45}
.pj-linha .ir{font-size:.9rem;color:var(--dim);display:inline-flex;gap:.45rem;align-items:center;white-space:nowrap;transition:color .3s}
.pj-linha .mini{display:none}
.pj-linha:hover .nome{transform:translateX(14px);color:var(--teal)}
.pj-linha:hover .ir{color:#fff}
.pj-previa{position:fixed;left:0;top:0;width:min(30vw,420px);aspect-ratio:4/3;border-radius:6px;overflow:hidden;pointer-events:none;z-index:60;
  opacity:0;transform:translate3d(-50%,-50%,0) scale(.9);transition:opacity .3s;will-change:transform}
.pj-previa.on{opacity:1}
.pj-previa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .35s}
.pj-previa img.on{opacity:1}

/* ── CTA ── */
.pj-cta{padding:clamp(7rem,15vw,13rem) 0 clamp(4rem,8vw,6rem)}
.pj-cta h2{font-weight:700!important;font-size:clamp(3.2rem,12.6vw,15rem);line-height:.84;letter-spacing:-.04em!important}
.pj-cta h2 em{font-style:normal;color:var(--teal)}
.pj-cta__pe{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:clamp(2rem,4vw,3.2rem);padding-top:1.6rem;border-top:1px solid var(--line)}
.pj-cta__pe p{color:var(--dim);max-width:44ch;line-height:1.55}
.pj-btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--teal);color:#03140d;font-weight:500;font-size:1rem;padding:1rem 1.6rem;border-radius:99px;text-decoration:none;transition:transform .4s var(--ease),background .3s}
.pj .pj-btn,.pj .pj-btn:hover{color:#03140d}
.pj-btn:hover{background:#fff;transform:translateY(-2px)}

/* revelação ao rolar (sem GSAP também) */
.pj-rev{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.pj-rev.visto{opacity:1;transform:none}
/* a máscara fica na imagem (o IntersectionObserver ignora elemento todo recortado) */
.pj-mask img{clip-path:inset(100% 0 0 0);transform:scale(1.18);transition:clip-path 1.25s var(--ease),transform 1.6s var(--ease)}
.pj-mask.visto img{clip-path:inset(0 0 0 0);transform:scale(1)}

/* cursor (só computador) */
.pj-cursor{position:fixed;left:0;top:0;z-index:80;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;
  mix-blend-mode:difference;opacity:0;transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),background .3s,opacity .3s;display:none}
.pj-cursor.ativo{opacity:1}
.pj-cursor span{position:absolute;inset:0;display:grid;place-items:center;font-size:.8rem;font-weight:500;color:#03140d;opacity:0;transition:opacity .25s}
.pj-cursor.grande{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--teal);mix-blend-mode:normal}
.pj-cursor.grande span{opacity:1}
@media (hover:hover) and (pointer:fine){.pj-cursor{display:block}}

/* ── CELULAR ── */
@media (max-width:900px){
  .pj-hero__topo{flex-direction:column;gap:.6rem}
  .pj-hero__pe,.pj-dest__info,.pj-cab{grid-template-columns:1fr}
  .pj-hero__pe small{justify-self:start;text-align:left}
  .pj-dest__img{height:auto;aspect-ratio:4/3}
  .pj-dest__img img{inset:0;height:100%}
  .pj-cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.8rem;padding-bottom:3rem}
  .pj-col,.pj-col:nth-child(n){display:contents;padding:0}
  .pj-item.d{position:relative;top:3rem}
  .pj-linha{grid-template-columns:96px minmax(0,1fr);gap:1rem}
  .pj-linha .mini{display:block;grid-row:span 2;border-radius:4px;overflow:hidden;aspect-ratio:4/3}
  .pj-linha .mini img{width:100%;height:100%;object-fit:cover;object-position:top}
  .pj-linha .ir{display:none}
  .pj-linha .nome{font-size:1.45rem}
  .pj-linha .oque{font-size:.88rem}
  .pj-previa{display:none}
}
@media (max-width:560px){
  .pj-marca{margin-top:1.4rem}
  .pj-placa{top:auto;bottom:auto}
  .pj-placa--c{left:0;right:auto;width:27vw;top:calc(100% + 1rem)}
  .pj-placa--b{left:31vw;right:auto;width:33vw;top:calc(100% + 3.2rem)}
  .pj-placa--a{right:0;left:auto;width:27vw;top:calc(100% + .4rem)}
  .pj-hero__pe{margin-top:calc(34vw + 3rem)}
  .pj-item figcaption{flex-direction:column;gap:.15rem;font-size:.86rem}
  .pj-item figcaption span{text-align:left}
  .pj-trio{grid-template-columns:1fr 1fr}
  .pj-trio figure:nth-child(3){display:none}
}
@media (hover:none){.pj-previa{display:none}}
@media (prefers-reduced-motion:reduce){
  .pj-marca h1 .lt>span,.pj-placa{animation:none;transform:none;clip-path:none}
  .pj-rev,.pj-mask img,.pj-item__img img,.pj-linha .nome{transition:none!important;opacity:1;transform:none;clip-path:none}
}

/* imagem ampliada (07/11/2026) */
.pj-zoom{cursor:zoom-in;position:relative}
.pj-zoom img{-webkit-tap-highlight-color:transparent}
.pj-zoom::after{content:"";position:absolute;top:.6rem;right:.6rem;z-index:3;width:30px;height:30px;border-radius:50%;pointer-events:none;
  background:rgba(0,0,0,.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center/16px no-repeat;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:.9;transition:opacity .3s}
@media (hover:hover) and (pointer:fine){.pj-zoom::after{opacity:0}.pj-zoom:hover::after{opacity:.9}}
.pj-zoom img:focus-visible{outline:2px solid var(--teal,#00c896);outline-offset:-4px}
.pj-caso{display:inline-flex;align-items:center;gap:.4rem;margin-top:.45rem;font-size:.86rem;color:var(--teal,#00c896)!important;text-decoration:none}
.pj-caso:hover{text-decoration:underline}
html.pj-lb-aberto,html.pj-lb-aberto body{overflow:hidden}
.pj-lb{position:fixed;inset:0;z-index:300;background:#000;opacity:0;transition:opacity .25s ease;color:#fff;font-family:var(--sans,inherit)}
.pj-lb.on{opacity:1}
.pj-lb[hidden]{display:none}
.pj-lb__palco{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;touch-action:none;overflow:hidden;padding:56px 12px 72px}
.pj-lb__foto{max-width:calc(100vw - 24px);max-height:calc(100vh - 128px);max-height:calc(100dvh - 128px);width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-select:none;transition:transform .3s cubic-bezier(.16,1,.3,1);cursor:zoom-in;border-radius:4px}
.pj-lb.zoom .pj-lb__foto{cursor:grab}
.pj-lb__bt{position:absolute;z-index:2;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(20,20,22,.7);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s}
.pj-lb__bt:hover{background:rgba(255,255,255,.18)}
.pj-lb__bt:focus-visible{outline:2px solid #00c896;outline-offset:3px}
.pj-lb__bt[hidden]{display:none}
.pj-lb__fecha{top:12px;right:12px}
.pj-lb__ant{left:16px;top:50%;margin-top:-23px}
.pj-lb__prox{right:16px;top:50%;margin-top:-23px}
.pj-lb__pe{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;padding:14px 18px 18px;pointer-events:none;
  background:linear-gradient(transparent,rgba(0,0,0,.65))}
.pj-lb__txt{margin:0;font-size:.9rem;line-height:1.4;max-width:70ch;color:#e9e9ec}
.pj-lb__cont{font-size:.8rem;color:#a9a9b0;white-space:nowrap;font-variant-numeric:tabular-nums}
.pj-lb.zoom .pj-lb__pe,.pj-lb.zoom .pj-lb__ant,.pj-lb.zoom .pj-lb__prox{opacity:0;pointer-events:none}
@media (max-width:900px){
  .pj-lb__palco{padding:56px 0 76px}
  .pj-lb__foto{border-radius:0;max-width:100vw;max-height:calc(100vh - 132px);max-height:calc(100dvh - 132px)}
  .pj-lb__ant,.pj-lb__prox{top:auto;bottom:62px;margin:0;width:40px;height:40px}
  .pj-lb__ant{left:auto;right:62px}
  .pj-lb__prox{right:14px}
  .pj-lb__pe{padding-right:120px}
}
@media (prefers-reduced-motion:reduce){.pj-lb,.pj-lb__foto,.pj-zoom::after{transition:none!important}}