/* Página Projetos (15/09/2026) — a mesma folha nas duas camadas: projetos.dc.html e dist/.
   Só estados e responsividade que o style inline não alcança (hover, filtro, vídeo, foco),
   no mesmo padrão de onepage.css, curso.css e mobile.css. Cores, tipos e raios do AFO. */

:root{--pj-curva:cubic-bezier(.2,.6,.2,1)}

/* ---------- rótulos e títulos de seção ---------- */
.pj-rotulo{font:600 10.5px/1 Manrope,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#b08a4e;margin:0 0 18px}
.pj-titulo{margin:0;font-family:Sora,sans-serif;font-weight:200;font-size:clamp(30px,4vw,54px);line-height:1.08;letter-spacing:-.04em;color:#ece7e0;text-wrap:balance}
.pj-apoio{margin:18px 0 0;max-width:520px;font:300 15.5px/1.7 Manrope,sans-serif;color:rgba(236,231,224,.66)}
.pj-cabeca{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-bottom:40px}

/* ---------- banda de números ---------- */
.pj-banda{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(236,231,224,.14);border-top:1px solid rgba(236,231,224,.14);border-bottom:1px solid rgba(236,231,224,.14)}
.pj-banda > div{background:#0a0a0a;padding:34px 26px}
.pj-banda-num{font-family:Sora,sans-serif;font-weight:200;font-size:56px;line-height:.9;letter-spacing:-.04em;margin-left:-.03em;color:#b08a4e}
.pj-banda-leg{margin-top:14px;font:500 10.5px/1.45 Manrope,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(236,231,224,.58)}

/* ---------- destaques ---------- */
.pj-destaques{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:12px}
.pj-destaque{position:relative;border-radius:20px;overflow:hidden;background:#0d0d0d;border:1px solid rgba(236,231,224,.12);transition:border-color 160ms var(--pj-curva);min-height:0}
.pj-destaque:first-child{grid-row:1 / span 2}
.pj-destaque:hover,.pj-destaque:focus-within{border-color:#b08a4e}
.pj-destaque-midia{position:relative;height:100%;aspect-ratio:16/9;overflow:hidden}
.pj-destaque:first-child .pj-destaque-midia{aspect-ratio:auto;min-height:100%}
.pj-destaque-midia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.9);transform:scale(1.001);transition:transform 900ms var(--pj-curva)}
.pj-destaque:hover .pj-destaque-midia img{transform:scale(1.04)}
.pj-destaque-midia::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(0deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.42) 38%,rgba(10,10,10,0) 64%)}
.pj-destaque-texto{position:absolute;z-index:3;left:26px;right:26px;bottom:22px;pointer-events:none}
.pj-destaque-marca{font:600 10px/1 Manrope,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#b08a4e}
.pj-destaque-titulo{margin-top:10px;font-family:Sora,sans-serif;font-weight:300;font-size:clamp(19px,1.7vw,24px);line-height:1.2;letter-spacing:-.025em;color:#ece7e0;text-wrap:balance}
.pj-destaque:first-child .pj-destaque-titulo{font-size:clamp(24px,2.6vw,38px)}
.pj-destaque-meta{margin-top:12px;display:flex;align-items:center;gap:10px;font:500 11px/1 Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(236,231,224,.72)}
.pj-destaque-meta i{font-style:normal;color:#b08a4e}
.pj-destaque-abrir{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;cursor:pointer;border-radius:20px}
.pj-destaque-abrir:focus-visible{outline:2px solid #b08a4e;outline-offset:-4px}
.pj-pausa{position:absolute;z-index:5;top:16px;right:16px;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(236,231,224,.24);background:rgba(10,10,10,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#ece7e0;font:600 10px/1 Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;opacity:0;transition:opacity 240ms var(--pj-curva),border-color 160ms var(--pj-curva)}
.pj-destaque.pj-tocando .pj-pausa,.pj-destaque.pj-pausado .pj-pausa,.pj-pausa:focus-visible{opacity:1}
.pj-pausa:hover{border-color:#ece7e0}
.pj-pausa b{display:block;width:8px;height:10px;border-left:2.5px solid currentColor;border-right:2.5px solid currentColor}
.pj-pausado .pj-pausa b{width:0;height:0;border:0;border-left:9px solid currentColor;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
.pj-pausa[hidden]{display:none}

/* vídeo das prévias (destaques e tiles): entra por cima da capa, abaixo do texto */
.pj-video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity 420ms var(--pj-curva)}
.pj-tocando .pj-video{opacity:1}

/* ---------- vitrine: filtros e tiles ---------- */
.pj-filtros{display:flex;flex-wrap:wrap;gap:8px}
.pj-filtro{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(236,231,224,.2);background:transparent;color:rgba(236,231,224,.78);font:500 11px/1 Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color 160ms var(--pj-curva),background-color 160ms var(--pj-curva),color 140ms var(--pj-curva)}
.pj-filtro span{font-family:Sora,sans-serif;font-weight:300;font-size:12px;letter-spacing:0;color:#b08a4e}
.pj-filtro:hover{border-color:rgba(236,231,224,.5);color:#ece7e0}
.pj-filtro[aria-pressed="true"]{border-color:#b08a4e;background:rgba(176,138,78,.12);color:#ece7e0}
.pj-contagem{margin:18px 0 22px;font:500 10.5px/1 Manrope,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(236,231,224,.5)}
[data-fora]{display:none !important}
@keyframes pjEntra{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
.pj-entra{animation:pjEntra 460ms var(--pj-curva) both;animation-delay:calc(var(--pj-i,0) * 32ms)}
/* tile com prévia tocando: o texto fica por cima do vídeo e o botão de play sai */
[data-previa] > div:nth-child(2){z-index:2}
[data-previa].pj-tocando > div:nth-child(2){opacity:1 !important;transform:none !important;background:linear-gradient(0deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.15) 46%,rgba(10,10,10,0) 100%) !important}
[data-previa].pj-tocando > div:nth-child(2) > div:first-child{opacity:0;transition:opacity 200ms var(--pj-curva)}

/* ---------- formatos ---------- */
.pj-formatos{list-style:none;margin:0;padding:0;border-top:1px solid rgba(236,231,224,.14)}
.pj-formatos li{border-bottom:1px solid rgba(236,231,224,.14)}
.pj-formato{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) clamp(180px,20vw,280px);gap:28px;align-items:center;width:100%;margin:0;padding:30px 4px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit}
.pj-formato-nome{font-family:Sora,sans-serif;font-weight:200;font-size:clamp(24px,2.8vw,40px);line-height:1.1;letter-spacing:-.035em;color:#ece7e0;transition:color 160ms var(--pj-curva),transform 420ms var(--pj-curva)}
.pj-formato-texto{font:300 15px/1.65 Manrope,sans-serif;color:rgba(236,231,224,.7)}
.pj-formato-exemplo{display:block;margin-top:10px;font:600 10px/1.4 Manrope,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#b08a4e}
.pj-formato-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid rgba(236,231,224,.14);opacity:0;transform:translate3d(calc((var(--fx,.5) - .5) * 28px),10px,0) rotate(-2deg) scale(.94);transition:opacity 260ms var(--pj-curva),transform 520ms var(--pj-curva)}
.pj-formato:hover .pj-formato-nome,.pj-formato:focus-visible .pj-formato-nome{color:#b08a4e;transform:translate3d(8px,0,0)}
.pj-formato:hover .pj-formato-img,.pj-formato:focus-visible .pj-formato-img{opacity:1;transform:translate3d(calc((var(--fx,.5) - .5) * 28px),0,0) rotate(-1.2deg) scale(1)}
.pj-formato:focus-visible{outline:2px solid #b08a4e;outline-offset:4px;border-radius:14px}

/* ---------- processo ---------- */
.pj-etapas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:1px;background:rgba(236,231,224,.14);border-top:1px solid rgba(236,231,224,.14);border-bottom:1px solid rgba(236,231,224,.14)}
.pj-etapas > div{background:#0a0a0a;padding:34px 26px}
.pj-etapa-num{font-family:Sora,sans-serif;font-weight:200;font-size:30px;line-height:1;letter-spacing:-.04em;color:#b08a4e;margin-bottom:18px}
.pj-etapa-nome{margin:0 0 10px;font-family:Sora,sans-serif;font-weight:300;font-size:21px;line-height:1.25;letter-spacing:-.02em;color:#ece7e0}
.pj-etapa-texto{margin:0;font:300 14.5px/1.7 Manrope,sans-serif;color:rgba(236,231,224,.74)}

/* ---------- depoimento ---------- */
.pj-citacao{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;max-width:980px}
.pj-citacao blockquote{margin:0;font-family:Sora,sans-serif;font-weight:200;font-size:clamp(24px,3vw,42px);line-height:1.28;letter-spacing:-.03em;color:#ece7e0;text-wrap:pretty}
.pj-citacao figcaption{padding-top:22px;border-top:1px solid rgba(236,231,224,.14);max-width:520px}

/* ---------- convite final ---------- */
.pj-convite{position:relative;border-radius:26px;overflow:hidden;background:#050505;border:1px solid rgba(236,231,224,.1);min-height:460px;display:flex;align-items:center}
.pj-convite-fundo{position:absolute;inset:-6%;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;transform:rotate(-6deg) scale(1.12);opacity:.34;pointer-events:none}
.pj-convite-fundo img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;filter:saturate(.9)}
.pj-convite::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(90% 120% at 18% 50%,rgba(10,10,10,.96) 0%,rgba(10,10,10,.86) 45%,rgba(10,10,10,.55) 100%)}
.pj-convite-texto{position:relative;z-index:2;padding:64px clamp(24px,5vw,64px);max-width:760px}

/* ---------- celular e tablet ---------- */
@media (max-width:900px){
  .pj-destaques{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .pj-destaque:first-child{grid-row:auto}
  .pj-destaque:first-child .pj-destaque-midia{aspect-ratio:16/10;min-height:0}
  .pj-formato{grid-template-columns:minmax(0,1fr) 112px;gap:8px 18px;padding:24px 2px}
  .pj-formato-nome{grid-column:1}
  .pj-formato-texto{grid-column:1}
  .pj-formato-img{grid-column:2;grid-row:1 / span 2;opacity:1;transform:none;align-self:start}
  .pj-formato:hover .pj-formato-img{transform:none}
  .pj-convite-fundo{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .pj-banda{grid-template-columns:minmax(0,1fr)}
  .pj-banda > div{padding:26px 22px;display:flex;align-items:baseline;gap:18px}
  .pj-banda-num{font-size:44px;flex:none;min-width:112px}
  .pj-banda-leg{margin-top:0}
  .pj-destaque-texto{left:18px;right:18px;bottom:16px}
  .pj-pausa{opacity:1}
  .pj-convite{min-height:0}
}
@media (hover:none){
  .pj-pausa{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .pj-entra{animation:none}
  .pj-destaque-midia img,.pj-formato-img,.pj-formato-nome,.pj-video{transition:none}
  .pj-destaque:hover .pj-destaque-midia img{transform:none}
}

/* A cena deixa o adereço passar da lateral de propósito. Sem esta trava isso vira rolagem
   horizontal. clip (e não hidden) porque clip não cria contêiner de rolagem, então a cena
   presa do auditório continua funcionando. */
html{overflow-x:clip}

/* ---------- Cenas de projeto (16/09/2026) ----------
   Cada projeto grande ocupa a tela inteira. O fundo é a própria capa, ampliada e desfocada,
   então a cor da cena vem da marca e não de uma paleta inventada. Quatro profundidades
   respondem ao ponteiro, cada uma no seu passo: fundo, brilho, elementos soltos e o card.
   Os elementos soltos (PNGs recortados dos slides) são opcionais: entram por
   assets/elementos/lista.json quando existirem. */
.pj-cena{position:relative;min-height:56svh;display:flex;align-items:center;isolation:isolate;--mx:0;--my:0;--sy:0}
/* sem recorte na cena: a ambientação passa por cima da vizinha e some aos poucos, para a cor
   de uma entrar na outra. Quem recorta é cada camada, então nada escapa para os lados. */
/* O palco não corta o elemento na borda da cena: overflow-clip-margin deixa ele passar
   200px para fora antes de recortar, então o adereço entra um pouco na cena vizinha, como o
   cliente pediu em 17/09/2026. O clip continua existindo para não criar rolagem lateral. */
.pj-cena-palco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip;overflow-clip-margin:200px}

.pj-cena-ambiente,.pj-cena-brilho{position:absolute;left:0;right:0;pointer-events:none;z-index:-2;overflow:hidden}
.pj-cena-ambiente{top:-24%;bottom:-24%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 21%,#000 79%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 21%,#000 79%,transparent 100%)}
.pj-cena-ambiente img{width:100%;height:100%;object-fit:cover;filter:blur(52px) brightness(.62) saturate(1.5);
  transform:scale(1.2) translate3d(calc(var(--mx) * 16px),calc(var(--my) * 12px + var(--sy) * 30px),0);
  transition:transform 900ms cubic-bezier(.2,.6,.2,1);will-change:transform}

/* o brilho é a mesma capa, menos desfocada e recortada num halo: dá a cor da marca sem escolher cor */
.pj-cena-brilho{top:-16%;bottom:-16%;opacity:.74;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%)}
/* o halo ficou na imagem, e o esmaecer das pontas no quadro: duas máscaras sem precisar compor */
.pj-cena-brilho img{-webkit-mask-image:radial-gradient(56% 52% at 70% 46%,#000 0%,rgba(0,0,0,.5) 46%,transparent 74%);
  mask-image:radial-gradient(56% 52% at 70% 46%,#000 0%,rgba(0,0,0,.5) 46%,transparent 74%);width:100%;height:100%;object-fit:cover;filter:blur(22px) brightness(.84) saturate(1.7);
  transform:scale(1.06) translate3d(calc(var(--mx) * -26px),calc(var(--my) * -18px),0);
  transition:transform 900ms cubic-bezier(.2,.6,.2,1);will-change:transform}

/* véu de tinta: segura o contraste do texto sobre qualquer capa, clara ou escura */
.pj-cena-veu{position:absolute;inset:-2% 0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.76) 30%,rgba(10,10,10,.26) 62%,rgba(10,10,10,.58) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}

/* Adereços da cena: desde 17/09/2026 os arquivos vêm recortados no tamanho do próprio
   elemento, então nada é esticado nem cortado — cada um entra na sua proporção, limitado por
   uma caixa (--w x --h). A ordem da lista é a profundidade: o primeiro fica atrás e quase não
   se move; o último anda mais, deriva mais na rolagem e flutua mais rápido. */
.pj-cena-camada{position:absolute;width:auto;height:auto;max-width:var(--w,300px);max-height:var(--h,360px);
  translate:calc(var(--mx) * var(--e,26px)) calc(var(--my) * var(--e,26px) * .55 + var(--sy) * var(--s,38px));
  transition:translate 1000ms cubic-bezier(.2,.6,.2,1);
  animation:pjBoia var(--t,13s) cubic-bezier(.4,0,.6,1) var(--d,0s) infinite alternate;
  will-change:translate,transform;filter:drop-shadow(0 22px 42px rgba(0,0,0,.52))}
@keyframes pjBoia{from{transform:translate3d(0,var(--b,-8px),0)}to{transform:translate3d(0,calc(var(--b,-8px) * -1),0)}}

.pj-cena-grade{position:relative;z-index:1;width:100%;max-width:1240px;margin:0 auto;box-sizing:border-box;
  padding:48px 44px;display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:56px;align-items:center}

.pj-cena-rotulo{margin:0 0 20px;max-width:30ch;font:600 10px/1.5 Manrope,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#c99f5c;text-wrap:balance}
.pj-cena-rotulo i{font-style:normal;color:rgba(236,231,224,.48)}
.pj-cena-titulo{margin:0;font-family:Sora,sans-serif;font-weight:200;font-size:clamp(32px,4.3vw,60px);
  line-height:1.05;letter-spacing:-.04em;color:#ece7e0;text-wrap:balance}
.pj-cena-texto p{margin:22px 0 0;max-width:44ch;font:300 16px/1.7 Manrope,sans-serif;color:rgba(236,231,224,.74)}
.pj-cena-pe{margin-top:36px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pj-cena-dur{font:500 10.5px/1 Manrope,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(236,231,224,.55);font-variant-numeric:tabular-nums}
.pj-cena-btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 28px;border-radius:999px;border:0;
  background:#ece7e0;color:#0a0a0a;font:700 11px/1 Manrope,sans-serif;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;transition:background-color 140ms cubic-bezier(.2,.6,.2,1)}
.pj-cena-btn:hover,.pj-cena-btn:focus-visible{background:#fff}
.pj-cena-btn b{width:0;height:0;border:6px solid transparent;border-left:10px solid currentColor;margin-left:1px}

.pj-cena-midia{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#0d0d0d;
  border:1px solid rgba(236,231,224,.14);cursor:pointer;box-shadow:0 50px 120px rgba(0,0,0,.62);
  transform:perspective(1200px) translate3d(calc(var(--mx) * -9px),calc(var(--my) * -7px),0) rotateY(calc(var(--mx) * -1.7deg)) rotateX(calc(var(--my) * 1.3deg));
  transition:transform 900ms cubic-bezier(.2,.6,.2,1),border-color 200ms cubic-bezier(.2,.6,.2,1);will-change:transform}
.pj-cena-midia:hover,.pj-cena-midia:focus-visible{border-color:#b08a4e}
.pj-cena-midia img,.pj-cena-midia video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pj-cena-midia video{opacity:0;transition:opacity 420ms cubic-bezier(.2,.6,.2,1)}
.pj-cena-midia.pj-tocando video{opacity:1}
/* em tela cheia o vídeo manda: sem recorte e sem o card por perto */
.pj-cena-midia:fullscreen{aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;transform:none;background:#000}
.pj-cena-midia:fullscreen video{object-fit:contain;opacity:1}
/* vídeo completo do YouTube (19/09/2026): cobre o card; no celular toca ali mesmo */
.pj-cena-yt{position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0;display:block;background:#000}
.pj-cena-midia.pj-yt{cursor:default}

@media (max-width:860px){
  .pj-cena{min-height:auto}
  .pj-cena-grade{grid-template-columns:minmax(0,1fr);gap:22px;padding:38px 24px}
  .pj-cena-midia{transform:none;box-shadow:0 30px 70px rgba(0,0,0,.55)}
  .pj-cena-ambiente img,.pj-cena-brilho img{transform:scale(1.25)}
  .pj-cena-brilho{opacity:.4}
  .pj-cena-veu{background:linear-gradient(180deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.74) 42%,rgba(10,10,10,.95) 100%)}
  .pj-cena-camada{opacity:.94;filter:none}
  .pj-cena-pe{order:5;margin-top:0}
}

@media (prefers-reduced-motion:reduce){
  .pj-cena-ambiente img,.pj-cena-brilho img,.pj-cena-midia{transform:none !important;transition:none}
  .pj-cena-camada{translate:none !important;animation:none !important;transition:none}
}