.proj-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: clamp(16px, 2.5vw, 26px); }
.proj-filter button {
font: inherit; font-weight: 600; font-size: 0.92rem; cursor: pointer;
padding: 0.5rem 1rem; border-radius: 999px; color: var(--ink);
background: var(--card); border: 1.5px solid var(--hair); transition: border-color .15s, background .15s, color .15s;
}
.proj-filter button:hover { border-color: var(--oxido); }
.proj-filter button[aria-pressed="true"] { background: var(--oxido); border-color: var(--oxido); color: #fff; }
.proj-filter button:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--oxido) 22%, transparent); } .proj-grid { columns: 4 260px; column-gap: 14px; }
@media (max-width: 560px) { .proj-grid { column-gap: 10px; } }
.proj-card { position: relative; margin: 0 0 14px; break-inside: avoid; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--tinta); }
.proj-card[hidden] { display: none; } .proj-card__img { display: block; width: 100%; height: auto; transition: transform .5s ease; }
.proj-card:hover .proj-card__img { transform: scale(1.05); } .proj-card__over {
position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
gap: 0.6rem; padding: 0.9rem 1rem;
background: linear-gradient(to top, rgba(30,25,20,.88) 0%, rgba(30,25,20,.25) 48%, rgba(30,25,20,0) 78%);
}
.proj-card__label { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.15; text-decoration: none; text-shadow: 0 1px 3px rgba(0,0,0,.4); padding-block: 4px; }
.proj-card__label:hover { text-decoration: underline; }
.proj-want {
align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4em;
padding: 0.4rem 0.85rem; border-radius: 999px; font-weight: 700; font-size: 0.85rem;
background: var(--wa, #25D366); color: #fff; text-decoration: none;
opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s;
}
.proj-card:hover .proj-want, .proj-card:focus-within .proj-want { opacity: 1; transform: translateY(0); }
.proj-want:hover { filter: brightness(1.05); } @media (hover: none) { .proj-want { opacity: 1; transform: none; } }
.proj-empty { text-align: center; color: var(--ink-soft); padding: 2rem 0; }