.portfolio-hero { padding-top: 65px; padding-bottom: 60px; }
.portfolio-hero-grid { display:grid; grid-template-columns:1.12fr 1fr; align-items:center; gap:56px; }
.portfolio-hero h1 { font-size:clamp(2.6rem,4.6vw,4.7rem); line-height:1.09; letter-spacing:-.055em; max-width:850px; }
.portfolio-hero .hero-text { max-width:610px; }
.portfolio-cover { position:relative; min-height:490px; border-radius:32px; overflow:hidden; border:1px solid var(--line); }
.portfolio-cover>img { position:absolute; width:100%; height:100%; object-fit:cover; }
.portfolio-cover::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 20%,#080b20ee 100%); }
.portfolio-cover-caption { position:absolute; left:32px; right:25px; bottom:24px; z-index:1; }
.portfolio-cover-caption span { font-size:.65rem; letter-spacing:.15em; color:#ded3fa; }
.portfolio-cover-caption p { font-size:1.75rem; font-weight:700; line-height:1.3; margin-top:12px; }
.portfolio-jump { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding-top:20px; padding-bottom:20px; border-block:1px solid var(--line); }
.portfolio-jump a { display:inline-flex; align-items:center; min-height:44px; font-size:.9rem; color:#ddd7f6; }
.portfolio-jump a:hover { color:var(--accessible-accent); }
#projetos,#agencia,#solucoes,#vamos-conversar,.work-card { scroll-margin-top:125px; }
.portfolio-filters { display:flex; flex-wrap:wrap; gap:10px; }
.portfolio-filters button { cursor:pointer; min-height:46px; padding:10px 24px; border:1px solid #5c5683; border-radius:99px; background:#0e1127; color:#dedbea; font:inherit; }
.portfolio-filters button[aria-pressed=true] { background:linear-gradient(135deg,#4b33bd,#792cdc); border-color:#ae80ed; color:#fff; }
.portfolio-count { color:var(--muted); font-size:.88rem; margin:18px 0 28px; }
.works-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:start; }
.work-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:26px; background:linear-gradient(150deg,#17142d,#0a0d21); }
.work-image { display:block; position:relative; overflow:hidden; aspect-ratio:3/2; }
.work-image img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.work-image:hover img { transform:scale(1.04); }
.work-image span { position:absolute; bottom:14px; right:14px; background:#0a0d21ec; border:1px solid #77708c; color:#fff; padding:8px 13px; border-radius:99px; font-size:.76rem; }
.work-copy { padding:26px; }
.work-copy h3 { font-size:1.5rem; line-height:1.25; margin:14px 0; }
.work-copy p { color:var(--muted); line-height:1.75; font-size:.95rem; }
.work-copy .eyebrow { color:var(--accessible-accent); font-size:.68rem; }
.work-copy .work-headline { color:#f6f1ff; font-weight:600; line-height:1.5; }
.work-copy details { border-block:1px solid var(--line); margin:24px 0 16px; }
.work-copy summary { cursor:pointer; padding:18px 0; font-size:.9rem; list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:center; }
.work-copy summary::-webkit-details-marker { display:none; }
.work-copy details[open] summary span { transform:rotate(45deg); }
.work-details { padding-bottom:20px; }
.work-details h4 { margin:5px 0 12px; font-size:.92rem; }
.work-details ul { padding-left:20px; color:var(--muted); font-size:.9rem; line-height:1.7; }
.work-details li+li { margin-top:8px; }
.work-visit { display:flex; gap:10px; align-items:center; justify-content:space-between; color:var(--accessible-accent); min-height:44px; font-size:.88rem; line-height:1.5; }
.work-visit:hover { text-decoration:underline; text-underline-offset:4px; }
.portfolio-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(min-width:1051px) { .main-nav { gap:20px; } }
@media(max-width:1050px) { .portfolio-hero-grid { gap:30px; } .portfolio-cover { min-height:430px; } .works-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:720px) { .portfolio-hero { padding-top:36px; } .portfolio-hero-grid,.works-grid { grid-template-columns:1fr; } .portfolio-cover { min-height:350px; } .portfolio-hero h1 { font-size:clamp(2.5rem,8.8vw,3.6rem); } .portfolio-jump { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; } .portfolio-jump a { font-size:.8rem; } .work-copy { padding:24px; } .portfolio-filters button { padding:10px 18px; } }