:root{
    --ink:#0f172a; --muted:#475569; --border:#e5e7eb;
    --card:#ffffff; --bg:#f1f5f9;
    --accent:#0ea5e9; --accent-2:#3b82f6;
}

body{ background: var(--bg); }

/* Hero */
.proj-hero{ text-align:center; padding: clamp(36px,6vw,64px) 16px 18px; }
.proj-hero h1{ margin:0 0 6px; font-size: clamp(26px,4.6vw,38px); letter-spacing:.2px; color:var(--ink); }
.proj-hero p{ margin:0 auto; color:var(--muted); max-width: 70ch; }

/* Filtros */
.filters{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
.chip{ border:1px solid var(--border); background:#fff; color:var(--ink); padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:600; }
.chip.active{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border-color:transparent; }
#search{ padding:8px 12px; border-radius:12px; border:1px solid var(--border); min-width: 260px; }
#search:focus{ outline:none; border-color: var(--accent); box-shadow:0 0 0 3px rgba(14,165,233,.15); }

/* Grid */
.grid{ max-width:1100px; margin:18px auto 60px; padding:0 16px; display:grid; gap:18px; grid-template-columns: 1fr; }
@media (min-width: 760px){ .grid{ grid-template-columns: repeat(2,1fr);} }
@media (min-width: 1080px){ .grid{ grid-template-columns: repeat(3,1fr);} }

/* Tarjeta */
.card{ background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:0 6px 24px rgba(2,6,23,.06); overflow:hidden; display:flex; flex-direction:column; }
.thumb{ width:100%; height:160px; object-fit:cover; background:#cbd5e1; }
.body{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:10px; }
.top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.title{ font-size:1.05rem; margin:0; color:var(--ink); }
.desc{ color:var(--muted); margin:0; }
.meta{ list-style:none; padding:0; margin:0; color:var(--muted); font-size:.95rem; display:flex; gap:14px; flex-wrap:wrap; }
.actions{ display:flex; gap:10px; margin-top:auto; }

/* Botones */
.btn{ background:var(--ink); color:#fff; text-decoration:none; padding:10px 12px; border-radius:10px; font-weight:700; }
.btn.ghost{ background:#fff; color:var(--ink); border:1px solid var(--border); }
.btn:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 10px 18px rgba(2,6,23,.12); }

/* Badges */
.badge{ font-size:.85rem; padding:4px 8px; border-radius:999px; border:1px solid var(--border); white-space:nowrap; }
.badge.done{ background:#e6fbe6; color:#047857; border-color:#a7f3d0; }
.badge.wip{ background:#fff7ed; color:#b45309; border-color:#fed7aa; }
.badge.plan{ background:#eef2ff; color:#4338ca; border-color:#c7d2fe; }



/* ===== MOBILE TWEAKS PARA NAV EN PROYECTOS ===== */
/* Opción A (por defecto): ocultar el nombre en XS y centrar el pill */
@media (max-width: 480px){
    .brand{ display:none; }
    .nav{ grid-template-columns: 1fr; }
    .pill{ justify-self:center; }
}