/* João Mateus — preto, papel e latão. */
:root{--bg:#151513;--fg:#f2f0e9;--muted:#a6a59b;--gold:#c1a46a;--line:#393933;--paper:#eeece5;--ink:#24251f;--font-body:'DM Sans',Arial,sans-serif;--font-display:'Libre Caslon Display',Georgia,serif;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.65 var(--font-body);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{color:inherit}button,a{touch-action:manipulation}button{cursor:pointer}p,h1,h2,h3{margin:0}h1,h2,h3{font-weight:400}em{font-family:var(--font-display);font-weight:400}svg{display:block}::selection{background:var(--gold);color:var(--bg)}:focus-visible{outline:2px solid var(--gold);outline-offset:6px}.wrap,.nav-in,.foot{width:min(1240px,calc(100% - 112px));margin-inline:auto}section{padding:110px 0}.eyebrow{display:block;color:var(--gold);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.16em}.h2{font-size:clamp(40px,5.4vw,72px);line-height:1.05;letter-spacing:-.045em;margin:28px 0 24px}.h2 em{letter-spacing:-.025em}.lead{max-width:530px;color:var(--muted);font-size:16px}.skip-link{position:fixed;top:8px;left:16px;transform:translateY(-150%);z-index:100;background:var(--paper);color:var(--ink);padding:12px}.skip-link:focus{transform:none}
/* Navegação */
.nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}.nav-in{height:84px;display:flex;justify-content:space-between;align-items:center;gap:24px}.logo{font-size:21px;letter-spacing:-.06em;white-space:nowrap;font-weight:600}.logo-dot{color:var(--gold);margin-left:2px}.menu{display:flex;align-items:center;gap:24px}.menu .l{font-size:12px;color:var(--muted);padding:8px 0;transition:color .2s}.menu .l:hover,.menu .l.on{color:var(--fg)}.menu .l.on{box-shadow:0 1px var(--gold)}.burger{display:none}.btn{display:inline-flex;justify-content:center;align-items:center;gap:12px;padding:14px 22px;border:1px solid var(--line);font-size:12px;font-weight:600;line-height:1.5;transition:background .2s,color .2s}.btn-gold{background:var(--gold);color:#191a16;border-color:var(--gold)}.btn-gold:hover{background:var(--paper);border-color:var(--paper)}.btn-line:hover{background:var(--fg);color:var(--bg)}.btn.sm{padding:10px 16px;font-size:11px}.text-link{display:inline-flex;gap:32px;align-items:center;font-size:13px;border-bottom:1px solid var(--gold);padding-bottom:8px}.text-link span{color:var(--gold);font-size:21px}.text-link:hover{color:var(--gold)}
/* Abertura */
#inicio{padding:30px 0 0}.hero-top{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.hero-grid{display:grid;grid-template-columns:1fr 280px;align-items:end;gap:60px;padding:92px 0 80px}.hero h1{font-size:clamp(76px,9.2vw,138px);line-height:.95;letter-spacing:-.07em;margin-top:32px}.hero h1 em{color:var(--gold);letter-spacing:-.04em}.hero-note{padding-bottom:8px}.note-mark{display:block;font-family:Georgia,serif;font-size:46px;line-height:1;color:var(--gold);margin-bottom:25px}.hero-note p{font-size:15px;color:var(--muted);margin-bottom:30px}.hero-bottom{display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid var(--line);padding:24px 0 26px;font-size:11px}.hero-bottom p{display:flex;align-items:center;gap:10px}.status-dot{width:5px;height:5px;background:var(--gold);border-radius:50%}.hero-index{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em}
/* Trabalhos: índice de projetos */
#projetos{border-top:1px solid var(--line)}#projetos .wrap{display:grid;grid-template-columns:1fr 1fr;column-gap:50px}#projetos .eyebrow{grid-column:1/-1}#projetos .h2{grid-column:1}#projetos .lead{grid-column:2;align-self:center}.filters{grid-column:1/-1;display:flex;gap:24px;margin:24px 0 30px}.chip{border:0;border-bottom:1px solid transparent;background:none;padding:8px 0;color:var(--muted);font-size:12px}.chip[aria-pressed=true]{color:var(--gold);border-color:var(--gold)}.chip:hover{color:var(--fg)}.proj-grid{grid-column:1/-1;counter-reset:work}.proj{counter-increment:work;border:0;border-top:1px solid var(--line);background:none;width:100%;display:grid;grid-template-columns:48px minmax(0,.85fr) minmax(0,1fr);text-align:left;gap:34px;padding:36px 0;align-items:center}.proj:last-child{border-bottom:1px solid var(--line)}.proj:before{content:'0' counter(work);font-size:11px;color:var(--muted);align-self:start;margin-top:5px}.proj .shot{overflow:hidden;background:#1b1b18;position:relative;aspect-ratio:16/10;padding:20px}.shot svg{width:100%;height:100%;transition:transform .3s}.proj:hover .shot svg{transform:scale(1.035)}.proj-body{padding:4px 0 4px 24px}.proj-body small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}.proj-body h3{font-size:clamp(25px,3vw,39px);line-height:1.15;letter-spacing:-.045em;margin:14px 0}.proj-body p{color:var(--muted);max-width:390px;font-size:14px}.tags{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px}.tags span{font-size:10px;color:var(--muted)}.project-open{display:block;margin-top:28px;font-size:11px;color:var(--fg)}.proj:hover .project-open{color:var(--gold)}.proj[hidden]{display:none}
/* Perfil: papel claro, retrato e texto */
#sobre{background:var(--paper);color:var(--ink);--line:#cecec2;--muted:#606157;--gold:#816731}.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px;align-items:start}.portrait{position:relative;margin-top:60px}.portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center;display:block;filter:grayscale(1)}.portrait .tag{display:flex;justify-content:space-between;gap:10px;font-size:10px;padding-top:15px;border-top:1px solid var(--line);margin-top:14px}.portrait .tag b{font-weight:400;color:var(--muted)}.about p{font-size:15px;color:var(--muted);margin-top:20px;max-width:580px}.about strong{color:var(--ink);font-weight:500}.timeline{margin-top:36px}.tl{border-top:1px solid var(--line);padding:20px 0;display:grid;grid-template-columns:75px 1fr;column-gap:12px}.tl small{grid-row:1/3;color:var(--gold);font-size:10px;text-transform:uppercase;letter-spacing:.1em;padding-top:4px}.tl h3{font-size:17px;letter-spacing:-.025em}.tl p{font-size:12px;margin-top:6px;line-height:1.65}
/* Ferramentas: lista técnica */
#tecnologias .wrap{display:grid;grid-template-columns:1fr 1fr;column-gap:90px}#tecnologias .eyebrow,#tecnologias .h2,#tecnologias .lead{grid-column:1}#tecnologias .h2{align-self:end}#tecnologias .lead{align-self:start}.tech-grid{grid-column:2;grid-row:1/5}.tech{display:grid;grid-template-columns:32px 120px 1fr;align-items:center;gap:20px;border-top:1px solid var(--line);padding:25px 0}.tech:last-child{border-bottom:1px solid var(--line)}.ico svg{width:25px;height:25px;filter:grayscale(1);opacity:.85}.tech h3{font-size:16px;letter-spacing:-.03em}.tech p{font-size:12px;color:var(--muted)}
/* Serviços: linhas de escopo */
#servicos{border-top:1px solid var(--line)}.srv-grid{margin-top:50px;counter-reset:service}.srv{counter-increment:service;border-top:1px solid var(--line);display:grid;grid-template-columns:35px 1.15fr 1fr 1fr auto;gap:24px;padding:30px 0;align-items:start}.srv .n{font-size:0;color:var(--gold)}.srv .n:before{content:'0' counter(service);font-size:11px}.srv h3{font-size:23px;letter-spacing:-.04em;line-height:1.2}.srv p,.srv li{font-size:12px;color:var(--muted)}.srv ul{padding:0;list-style:none;margin:0}.srv li+li{margin-top:5px}.srv .btn{border:0;border-bottom:1px solid var(--gold);padding:0 0 8px;white-space:nowrap;font-size:10px}.srv .btn:hover{background:none;color:var(--gold)}.process{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:70px;padding-top:30px;border-top:1px solid var(--line)}.step b{font-size:12px;font-weight:500;color:var(--gold)}.step p{font-size:12px;color:var(--muted);margin-top:12px}
/* Contato */
#contato{background:#1e1f1a;border-top:1px solid var(--line)}.contact{display:grid;grid-template-columns:1fr 1fr;gap:100px}.ctt-list{margin-top:38px}.ctt{display:flex;align-items:center;gap:15px;padding:16px 0;border-bottom:1px solid var(--line)}.ctt .ic{display:none}.ctt div{flex:1;min-width:0}.ctt small{display:block;font-size:10px;color:var(--muted);margin-bottom:4px}.ctt .v{font-size:13px;overflow-wrap:anywhere}.copy{background:none;border:0;color:var(--gold);font-size:10px;padding:12px 0 12px 12px}.copy:hover{text-decoration:underline}#waDirect{margin-top:26px}form{display:grid;gap:24px;padding-top:38px}.row{display:grid;grid-template-columns:1fr 1fr;gap:22px}.field{display:grid;gap:10px;min-width:0}label{font-size:11px;color:var(--muted)}input,select,textarea{width:100%;color:var(--fg);background:transparent;border:0;border-bottom:1px solid #66675b;border-radius:0;padding:12px 0;font-size:14px}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 1px var(--gold)}select option{background:var(--bg)}textarea{resize:vertical;min-height:110px}input::placeholder,textarea::placeholder{color:#8c8d81;font-size:12px}#send{justify-self:start;margin-top:8px}.hint{font-size:11px;color:var(--muted)}.hint.err{color:#f3ac96}footer{padding:27px 0}.foot{display:flex;justify-content:space-between;gap:24px;font-size:10px;color:var(--muted)}.back-to-top{color:var(--fg)}.wa{position:fixed;bottom:22px;right:22px;background:var(--bg);border:1px solid #79705c;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;z-index:20}.wa svg{fill:var(--gold);width:21px;height:21px}.wa:hover{background:#303127}
/* Detalhes e acessibilidade */
dialog{background:var(--bg);color:var(--fg);border:1px solid var(--line);padding:0;width:min(680px,calc(100% - 32px));max-height:calc(100dvh - 48px);overscroll-behavior:contain}dialog::backdrop{background:rgba(0,0,0,.8)}dialog .shot{height:230px;padding:24px;background:#1b1b18}dialog .shot svg{width:100%;height:100%}.dlg-x{position:absolute;right:12px;top:12px;background:var(--bg);border:1px solid var(--line);width:38px;height:38px;z-index:1}.dlg-body{padding:32px}.dlg-body h3{font-size:36px;line-height:1.1;letter-spacing:-.04em;margin:15px 0}.dlg-body p,.dlg-body li{color:var(--muted);font-size:14px}.dlg-body ul{padding-left:20px;margin:24px 0}.dlg-body .btn{margin-top:28px}.rv{opacity:1}.rv.in{opacity:1}
@media(min-width:1500px){.hero-grid{padding:120px 0 100px}}
@media(max-width:1100px){.wrap,.nav-in,.foot{width:calc(100% - 64px)}.menu{gap:16px}.menu .l{font-size:11px}.hero-grid{grid-template-columns:1fr 240px;gap:35px}.about,.contact{gap:55px}.tech{grid-template-columns:26px 95px 1fr;gap:12px}#tecnologias .wrap{column-gap:40px}.srv{grid-template-columns:24px 1fr 1fr;gap:20px}.srv ul{grid-column:2}.srv .btn{justify-self:start}.proj{gap:22px}.proj-body{padding-left:5px}}
@media(max-width:1000px){.burger{display:block;background:none;border:1px solid var(--line);width:42px;height:42px;font-size:19px}.nav-in{height:72px}.menu{display:none;position:absolute;top:72px;left:0;right:0;background:var(--bg);padding:20px 32px 30px;border-bottom:1px solid var(--line)}.menu.open{display:flex;flex-direction:column;align-items:stretch;gap:0}.menu .l{font-size:14px;padding:12px 0}.menu .l.on{box-shadow:none;color:var(--gold)}.menu .btn{margin-top:15px;align-self:start}.hero-grid{padding-top:70px}.hero h1{font-size:clamp(70px,11vw,110px)}.hero .eyebrow{font-size:9px}.tech{grid-template-columns:26px 1fr}.tech p{grid-column:2}.about{gap:40px}.portrait .tag{flex-direction:column}.contact{gap:40px}}
@media(max-width:700px){.wrap,.nav-in,.foot{width:calc(100% - 40px)}section{padding:72px 0}.hero-top{font-size:8px;gap:15px}.hero-top span:last-child{text-align:right}.hero-grid{grid-template-columns:1fr;padding:64px 0 42px;gap:36px}.hero h1{font-size:clamp(66px,14vw,98px);margin-top:24px}.hero .eyebrow{font-size:9px;letter-spacing:.1em}.hero-note{display:grid;grid-template-columns:28px 1fr;gap:0 14px;max-width:420px}.note-mark{font-size:30px;margin:0}.hero-note p{font-size:14px;margin-bottom:18px}.hero-note .text-link{grid-column:2;justify-self:start}.hero-bottom{flex-wrap:wrap;gap:20px;font-size:10px}.hero-bottom .text-link{font-size:11px;gap:20px}.hero-index{display:none}#projetos .wrap{display:block}.h2{font-size:46px;margin:22px 0}.lead{font-size:14px}.filters{margin-top:28px}.proj{grid-template-columns:24px 1fr;gap:14px;padding:26px 0}.proj .shot{grid-column:2;padding:14px}.proj-body{grid-column:2;padding:4px 0 0}.proj-body h3{font-size:29px;margin:10px 0}.proj-body p{font-size:13px}.tags{margin-top:16px}.project-open{margin-top:20px}.about{grid-template-columns:1fr;gap:42px}.portrait{margin-top:0;max-width:330px}.portrait .tag{flex-direction:row}.about>.rv:last-child{grid-row:1}.about p{font-size:14px}.tl{grid-template-columns:65px 1fr}.tl h3{font-size:16px}#tecnologias .wrap{display:block}.tech-grid{margin-top:36px}.tech{grid-template-columns:28px 100px 1fr;gap:15px;padding:22px 0}.tech p{grid-column:auto;font-size:11px}.srv-grid{margin-top:35px}.srv{grid-template-columns:22px 1fr;gap:14px;padding:26px 0}.srv h3{font-size:24px}.srv p,.srv ul,.srv .btn{grid-column:2}.srv p{max-width:400px}.srv ul{font-size:12px}.srv .btn{margin-top:10px}.process{grid-template-columns:1fr 1fr;gap:28px;margin-top:40px}.contact{grid-template-columns:1fr;gap:45px}.ctt .v{font-size:12px}form{padding-top:0}.row{grid-template-columns:1fr}.foot{flex-direction:column;gap:10px;padding-right:45px}.wa{bottom:16px;right:16px}.dlg-body{padding:24px}dialog .shot{height:180px}.dlg-body h3{font-size:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}