/* Modal de projeto (case). Escopado em .pjm; usa o .btn da página no CTA. */
.pjm{
  width:min(1040px, calc(100% - 32px));max-height:calc(100% - 48px);padding:0;border:0;
  border-radius:28px;background:#0B1220;color:#fff;overflow:hidden;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08);
}
.pjm::backdrop{background:rgba(3,10,26,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pjm[open]{animation:pjmIn .45s cubic-bezier(.2,.8,.2,1)}
.pjm[open]::backdrop{animation:pjmFade .35s ease}
.pjm__body{max-height:calc(100vh - 48px);overflow-y:auto;overscroll-behavior:contain;padding:32px 32px 28px}
.pjm__x{
  position:absolute;top:16px;right:16px;z-index:2;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  transition:background .25s, transform .25s;
}
.pjm__x:hover{background:rgba(255,255,255,.14);transform:rotate(90deg)}
.pjm__x svg,.pjm__live svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pjm__cat{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8FB8F0}
.pjm__name{margin:6px 0 0;font-size:clamp(28px, 4vw, 40px);line-height:1.05;font-weight:700;letter-spacing:-.035em}
.pjm__desc{margin-top:10px;max-width:46ch;color:#B9C6DA;font-size:15px;line-height:1.5}
.pjm__frame{margin:24px 0 0;border-radius:16px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.12)}
.pjm__bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#111A2B}
.pjm__bar i{width:9px;height:9px;border-radius:50%;background:#FF6159}
.pjm__bar i:nth-child(2){background:#FFBD2E}
.pjm__bar i:nth-child(3){background:#28C941}
.pjm__bar em{flex:1;margin-left:10px;text-align:center;font-style:normal;font-size:12px;color:#8C99AE;background:rgba(255,255,255,.06);border-radius:6px;padding:3px 0}
.pjm__frame img{display:block;width:100%;height:auto}
.pjm__phones{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px;margin-top:14px}
.pjm__phones img{display:block;width:100%;height:auto;aspect-ratio:780/1688;object-fit:cover;object-position:top;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:#111A2B}
.pjm__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
.pjm__live{
  display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;
  font-weight:600;font-size:15px;color:#fff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);
  transition:background .25s, border-color .25s;
}
.pjm__live:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.32)}
.pjm__cta{min-height:52px}
.pjm :focus-visible{outline:3px solid #55A6F0;outline-offset:3px}

@keyframes pjmIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pjmFade{from{opacity:0}to{opacity:1}}

@media (max-width: 640px){
  .pjm{width:calc(100% - 20px);border-radius:22px}
  .pjm__body{padding:24px 18px 20px}
  .pjm__x{top:12px;right:12px}
  .pjm__name{padding-right:48px}
  .pjm__phones{gap:8px}
  .pjm__phones img{border-radius:10px}
  .pjm__actions{flex-direction:column;align-items:stretch}
  .pjm__live,.pjm__cta{justify-content:center;width:100%}
}
@media (prefers-reduced-motion: reduce){
  .pjm[open],.pjm[open]::backdrop{animation:none}
}