/* ============================================================
   Rafael Andreassa — Portfólio Archviz
   Design system v2.1 (escopo_portfolio_archviz_v2.md)
   Branco puro · Figtree + Source Code Pro · acento bronze
   restrito a hover/meta. Títulos SEMPRE em uma cor só.
   ============================================================ */

:root{
  --paper:#FFFFFF;
  --ink:#141414;
  --muted:#6F6D6A;
  --line:#E8E8E6;
  --surface:#F6F6F4;
  --accent:#B89460;      /* só hover/meta/pill ativa */
  --accent-deep:#8A6C40;
  --radius:12px;
  --radius-btn:8px;
  --container:1320px;
  --font-sans:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'Source Code Pro',ui-monospace,'SF Mono',Menlo,monospace;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%}
a{color:inherit}

.container{max-width:var(--container);margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* ---------- utilitários ---------- */

.mono{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- nav ---------- */

.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px clamp(20px,4vw,48px);
  max-width:var(--container);margin:0 auto;
}
.marca{font-weight:600;font-size:15px;letter-spacing:.02em;text-decoration:none}
.nav-links a{
  color:var(--muted);text-decoration:none;font-size:14px;
  margin-left:clamp(16px,2.5vw,28px);transition:color .25s ease;
}
.nav-links a:hover{color:var(--ink)}

/* ---------- hero ---------- */

.hero{padding:clamp(64px,10vh,120px) 0 clamp(40px,6vh,64px)}
.hero .mono{display:block;margin-bottom:18px}
.hero h1{
  font-size:clamp(2.6rem,6vw,4.6rem);
  font-weight:500;letter-spacing:-0.02em;line-height:1.08;
  max-width:16ch;
}
.hero p{
  color:var(--muted);max-width:52ch;margin-top:20px;
  font-size:17px;font-weight:300;
}
.hero-img{margin-top:clamp(36px,6vh,56px)}
.hero-img img{
  width:100%;aspect-ratio:21/9;object-fit:cover;
  border-radius:var(--radius);border:1px solid var(--line);
  background:var(--surface);
}

/* ---------- seções numeradas ---------- */

.secao{margin-top:clamp(72px,10vh,110px)}
.secao-head{
  display:flex;align-items:baseline;gap:14px;
  margin-bottom:clamp(24px,4vh,36px);
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.secao-head .num{font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:.08em}
.secao-head h2{font-size:21px;font-weight:500;letter-spacing:-0.01em}

/* ---------- grid de trabalhos ---------- */

.filtro-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}

.pill{
  display:inline-block;border:1px solid var(--line);border-radius:1000px;
  padding:7px 16px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  background:#fff;cursor:pointer;
  transition:border-color .25s ease,color .25s ease;
}
.pill:hover{border-color:var(--accent);color:var(--accent-deep)}
.pill.ativa{border-color:var(--accent);color:var(--accent-deep)}

.grid-trabalhos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(16px,2.5vw,28px);
}

.card{
  display:block;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:#fff;
  transition:transform .35s ease;
}
.card:hover{transform:scale(1.02)}
.card-img{
  aspect-ratio:4/3;overflow:hidden;background:var(--surface);
  border-bottom:1px solid var(--line);
}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-body{padding:16px 18px 18px}
.card-body .meta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.card-body h3{font-size:17px;font-weight:500}
.card:hover .meta .cat{color:var(--accent-deep)}
.card.oculto{display:none}

/* ---------- lista de serviços ---------- */

.lista-servicos{display:flex;flex-direction:column}
.servico{
  display:grid;grid-template-columns:64px 260px 1fr;gap:18px;
  padding:22px 0;border-bottom:1px solid var(--line);
}
.servico:first-child{border-top:1px solid var(--line)}
.servico .num{font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:.08em}
.servico h3{font-size:17px;font-weight:500}
.servico p{color:var(--muted);font-weight:300;font-size:15px}

/* ---------- página de projeto ---------- */

.projeto-header{padding:clamp(56px,9vh,96px) 0 0}
.projeto-header .meta-linha{
  display:flex;gap:clamp(16px,3vw,40px);flex-wrap:wrap;
  margin-bottom:20px;
}
.projeto-header .meta-item .mono{display:block;margin-bottom:4px}
.projeto-header .meta-item b{
  font-weight:500;font-size:14px;color:var(--ink);
}
.projeto-header h1{
  font-size:clamp(2.2rem,5vw,3.6rem);font-weight:500;
  letter-spacing:-0.02em;line-height:1.1;max-width:18ch;
}
.projeto-intro{
  color:var(--muted);font-weight:300;font-size:17px;
  max-width:62ch;margin-top:20px;
}
.projeto-galeria{
  display:flex;flex-direction:column;gap:clamp(28px,5vh,48px);
  margin-top:clamp(40px,7vh,64px);
}
.projeto-galeria img{
  width:100%;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--surface);
}
.projeto-galeria img.ratio-21-9{aspect-ratio:21/9;object-fit:cover}
.projeto-galeria img.ratio-16-9{aspect-ratio:16/9;object-fit:cover}
.projeto-galeria img.ratio-4-3{aspect-ratio:4/3;object-fit:cover}
.fig-caption{margin-top:10px}
.voltar{
  display:inline-block;margin-top:clamp(40px,7vh,64px);
  color:var(--muted);text-decoration:none;font-size:14px;
  transition:color .25s ease;
}
.voltar:hover{color:var(--accent-deep)}

/* ---------- página sobre ---------- */

.sobre-bloco{max-width:64ch}
.sobre-bloco p{margin-bottom:18px;color:var(--ink);font-weight:300;font-size:17px}
.sobre-bloco p strong{font-weight:500}

.stack-lista{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

/* ---------- contato ---------- */

.contato-box{max-width:56ch}
.contato-box p{color:var(--muted);font-weight:300;font-size:17px;margin:14px 0 24px}

/* ---------- botões ---------- */

.btn{
  display:inline-block;background:var(--ink);color:#fff;
  padding:12px 24px;border-radius:var(--radius-btn);
  font-size:14px;font-weight:500;text-decoration:none;
  transition:background .25s ease;
}
.btn:hover{background:#000}
.btn-ghost{
  display:inline-block;border:1px solid var(--line);color:var(--ink);
  padding:12px 24px;border-radius:var(--radius-btn);
  font-size:14px;text-decoration:none;background:#fff;
  transition:border-color .25s ease,color .25s ease;
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-deep)}

/* ---------- footer ---------- */

.footer{
  margin-top:clamp(80px,12vh,120px);
  border-top:1px solid var(--line);
  padding:24px 0 40px;
}
.footer-inner{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;
  max-width:var(--container);margin:0 auto;
  padding:0 clamp(20px,4vw,48px);
}
.footer a{color:var(--muted);text-decoration:none;transition:color .25s ease}
.footer a:hover{color:var(--accent-deep)}
.footer .links{display:flex;gap:20px}

/* ---------- movimento (reveal sutil) ---------- */

.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.visivel{opacity:1;transform:translateY(0)}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .card,.card-img img{transition:none}
  html{scroll-behavior:auto}
}

/* ---------- responsivo ---------- */

@media (max-width:720px){
  .servico{grid-template-columns:44px 1fr;grid-template-rows:auto auto}
  .servico p{grid-column:2}
  .hero-img img{aspect-ratio:4/3}
  .nav-inner{padding:14px 20px}
}