/* Identidade do site vitrine (do Pedro, não de um cliente) */
:root {
  --cor-fundo: #f3f1ec;
  --cor-superficie: #fbfaf7;
  --cor-superficie-2: #e8e5dd;
  --cor-texto: #171614;
  --cor-texto-suave: #5f5b53;
  --cor-borda: #d9d5cb;
  --cor-marca: #171614;
  --cor-marca-forte: #000000;
  --cor-sobre-marca: #f3f1ec;
  --cor-destaque: #d2572b;
  --fonte-titulo: "Bricolage Grotesque", system-ui, sans-serif;
  --fonte-texto: "Figtree", system-ui, sans-serif;
}

.cabecalho { display: flex; justify-content: space-between; align-items: center; padding-block: var(--e-5); }
.marca { font-family: var(--fonte-titulo); font-weight: 700; font-size: var(--t-h4); color: var(--cor-texto); text-decoration: none; }
.marca::after { content: "."; color: var(--cor-destaque); }

.abertura { padding-block: var(--e-8) var(--e-7); display: flex; flex-direction: column; gap: var(--e-5); }
.abertura h1 { font-size: clamp(2.5rem, 1.5rem + 5vw, 5.5rem); font-weight: 500; max-width: 14ch; letter-spacing: -0.035em; }

.filtros { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.filtro {
  min-height: 40px; padding-inline: var(--e-4); border-radius: var(--raio-total);
  border: 1px solid var(--cor-borda); background: transparent; font-weight: 600; font-size: var(--t-pequeno);
}
.filtro[aria-pressed="true"] { background: var(--cor-texto); color: var(--cor-fundo); border-color: var(--cor-texto); }

.vitrine { display: grid; gap: var(--e-6) var(--e-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.projeto { display: flex; flex-direction: column; gap: var(--e-3); color: inherit; text-decoration: none; }
.projeto__capa {
  aspect-ratio: 16 / 10; border-radius: var(--raio-g); overflow: hidden;
  background: var(--cor-superficie-2); border: 1px solid var(--cor-borda);
}
.projeto__capa img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 500ms var(--curva); }
.projeto:hover .projeto__capa img { transform: scale(1.03); }
.projeto__sem-capa { display: grid; place-items: center; height: 100%; font-family: var(--fonte-titulo); font-size: var(--t-h3); color: var(--cor-texto-suave); }
.projeto__titulo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); }
.projeto__titulo h3 { font-size: var(--t-h4); }
.projeto p { font-size: var(--t-pequeno); color: var(--cor-texto-suave); }

.passos { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border-top: 1px solid var(--cor-borda); padding-top: var(--e-7); }
.passo__numero { font-family: var(--fonte-mono); color: var(--cor-destaque); font-size: var(--t-pequeno); }

.contato { display: flex; flex-direction: column; gap: var(--e-5); border-top: 1px solid var(--cor-borda); }
.contato h2 { max-width: 18ch; }

.rodape { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--e-3); padding-block: var(--e-6); font-size: var(--t-pequeno); border-top: 1px solid var(--cor-borda); }