/* Páginas de projeto do portfólio: mesmos tokens e componentes da home (index.html) */
:root{
  --bg:#f3f3f1;
  --bg-soft:#e8e8e5;
  --ink:#101010;
  --muted:#8a8c85;
  --line:#dcdcd8;
  --lime:#d4ff2a;
  --on-lime:#101010;
  --f-display:"News Cycle","Arial Narrow",sans-serif;
  --f-body:"Manrope",Tahoma,Verdana,sans-serif;
  --fs-hero:clamp(3rem,8.6vw,10.5rem);
  --fs-h2:clamp(1.75rem,3vw,3rem);
  --fs-h3:clamp(1rem,1.1vw,1.25rem);
  --fs-lead:clamp(1.125rem,1.6vw,1.6rem);
  --fs-body:clamp(.875rem,.95vw,1.05rem);
  --fs-small:clamp(.75rem,.8vw,.875rem);
  --gutter:max(16px,4vw);
  --section:clamp(64px,9vw,160px);
  --gap:clamp(16px,1.6vw,32px);
  --r-pill:80px; --r-card:24px; --r-panel:40px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
body{color:var(--ink);font-family:var(--f-body);font-weight:300;font-size:var(--fs-body);line-height:1.5}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--lime);color:var(--on-lime)}
.cta ::selection{background:var(--on-lime);color:var(--lime)}
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px));max-width:2200px;margin-inline:auto}
.label{font-size:var(--fs-small);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.muted{color:var(--muted)}
h1,h2{font-family:var(--f-display);font-weight:400;text-transform:uppercase;margin:0;text-wrap:balance}
h2{font-size:var(--fs-h2);line-height:1.1}
p{margin:0}

/* Seta em SVG (mesma da home) */
.dot{width:34px;height:34px;flex:none;border-radius:50%;background:var(--on-lime);color:var(--lime);display:grid;place-items:center;overflow:hidden}
.dot::before{content:"";width:16px;height:16px;background:currentColor;transition:transform .3s cubic-bezier(.2,.8,.2,1);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12h14M13 6l6 6-6 6%27/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12h14M13 6l6 6-6 6%27/%3E%3C/svg%3E") center/contain no-repeat}
a:hover .dot::before{transform:rotate(-45deg)}

/* Botão pílula */
.pill{display:inline-flex;align-items:center;gap:14px;background:var(--lime);color:var(--on-lime);border-radius:var(--r-pill);padding:0 10px 0 28px;height:52px;font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:transform .2s}
.pill:hover{transform:translateY(-2px)}

/* Header (sempre visível nas páginas internas) */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
header{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px}
.logo{display:flex;align-items:center}
.logo img{height:clamp(22px,1.9vw,30px);width:auto;display:block}
.links{display:flex;gap:clamp(16px,2.4vw,44px);font-size:var(--fs-small);letter-spacing:.02em}
.links a{position:relative}
.links a:hover::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--lime)}
@media (max-width:860px){.links{display:none}.nav .pill{height:44px;padding-left:18px}}

/* Abertura do projeto */
.p-hero{padding-top:calc(90px + clamp(40px,6vw,100px));padding-bottom:clamp(40px,5vw,80px);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.back{margin-bottom:clamp(16px,2vw,32px);transition:color .2s}
.back:hover{color:var(--muted)}
.p-hero h1{font-size:var(--fs-hero);line-height:.95;letter-spacing:-.01em}
.p-info{width:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--gap);align-items:end;margin-top:clamp(24px,3vw,56px);padding-top:clamp(20px,2vw,32px);border-top:1px solid var(--ink)}
.p-info p{font-size:var(--fs-lead);max-width:36ch}
.tags{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px;font-size:var(--fs-small)}
@media (max-width:760px){.p-info{grid-template-columns:1fr}}

/* Galeria: imagens largas ocupam a linha toda, verticais vão em pares */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.shot{margin:0;border-radius:var(--r-card);overflow:hidden;background:var(--bg-soft)}
.shot.full{grid-column:1/-1}
.shot img{display:block;width:100%;height:auto}
.shot.half img{height:100%;aspect-ratio:3/4;object-fit:cover}
@media (max-width:560px){.shot.half{grid-column:1/-1}}

/* Próximo projeto */
.next{display:flex;flex-direction:column;gap:12px;padding-block:var(--section)}
.next-name{display:flex;align-items:center;gap:clamp(12px,1.6vw,28px);font-family:var(--f-display);text-transform:uppercase;font-size:clamp(2.5rem,7vw,8rem);line-height:.95}
.next .dot{width:clamp(44px,5vw,88px);height:clamp(44px,5vw,88px);background:var(--lime);color:var(--on-lime)}
.next .dot::before{width:45%;height:45%}

/* CTA e rodapé */
.cta{background:var(--lime);color:var(--on-lime);border-radius:var(--r-panel) var(--r-panel) 0 0;padding-block:var(--section)}
.cta h2{font-size:clamp(2.5rem,7vw,8rem);line-height:.95}
.cta .row{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-top:clamp(28px,3vw,56px)}
.cta p{font-size:var(--fs-lead);max-width:36ch}
.cta .pill{background:var(--on-lime);color:var(--lime)}
.cta .pill .dot{background:var(--lime);color:var(--on-lime)}
footer{background:var(--on-lime);color:#d9dbd3;padding-block:32px;font-size:var(--fs-small)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer .f-logo{height:22px;width:auto;display:block}
footer .wrap{align-items:center}
footer .social{display:flex;gap:10px}
footer .social a{width:40px;height:40px;border-radius:50%;border:1px solid #3a3b37;display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s}
footer .social a:hover{background:var(--lime);border-color:var(--lime);color:var(--on-lime)}

/* Cursor próprio e rolagem suave (mesmos da home) */
.cur{position:fixed;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:2147483647;opacity:0;
  transition:width .25s,height .25s,margin .25s,opacity .2s}
.cur.on{opacity:1}
.cur.big{width:48px;height:48px;margin:-24px 0 0 -24px}
.cur.down{width:8px;height:8px;margin:-4px 0 0 -4px}
html.has-cur,html.has-cur *{cursor:none!important}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}