/* ════════════════════════════════════════════════════════
   projects.css — Sección proyectos y modal de detalle
   ════════════════════════════════════════════════════════ */

/* ── Sección ──────────────────────────────────────────── */
#projects {
  padding: clamp(3.5rem, 6vw, 5rem) var(--px) var(--py);
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.filter-bar { display: flex; gap: 0.4rem; margin-bottom: 3rem; flex-wrap: wrap; }
.f-btn {
  font-family: var(--fm); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.45rem 1.1rem;
  background: transparent; border: 1px solid var(--border-h);
  color: var(--t2); cursor: pointer; transition: all .2s; border-radius: var(--r-sm);
}
.f-btn:hover, .f-btn.active { background: var(--orange); border-color: var(--orange); color: #fff; }

/* ── Grid de cards ────────────────────────────────────── */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.p-card {
  background: var(--s0); border: 1px solid var(--border);
  cursor: pointer; position: relative; overflow: hidden;
  border-radius: var(--r-md); transition: box-shadow .25s, transform .22s;
  display: flex; flex-direction: column; /* necesario para empujar tags al fondo */
}
.p-card::after {
  content: ''; position: absolute; top: 0; left: 0;
  width: 100%; height: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: left; transition: transform .35s;
}
.p-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.09); transform: translateY(-3px); }
.p-card:hover::after { transform: scaleX(1); }
.p-thumb {
  width: 100%; height: 140px; background: var(--s1);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; /* evita que el thumb se comprima */
}
.p-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.p-card:hover .p-thumb img { transform: scale(1.04); }
.p-thumb-ph { font-family: var(--fm); font-size: 0.58rem; color: var(--t3); letter-spacing: 0.1em; text-align: center; padding: 1rem; }
.p-body  {
  padding: 1rem 1.1rem 1rem;
  display: flex; flex-direction: column;
  flex: 1; /* ocupa el espacio restante de la card */
}
.p-year  { position: absolute; top: 0.75rem; right: 0.85rem; font-family: var(--fm); font-size: 0.55rem; color: var(--t3); }
.p-cat   { font-family: var(--fm); font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin-bottom: 0.25rem; }
.p-title { font-family: var(--fh); font-size: 0.9rem; font-weight: 500; margin-bottom: 0.4rem; color: var(--t1); }
.p-desc  { font-size: 0.74rem; color: var(--t2); line-height: 1.6; margin-bottom: 0; }
.p-tags  { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: auto; padding-top: 0.75rem; }
.p-tag   { font-family: var(--fm); font-size: 0.54rem; letter-spacing: 0.04em; padding: 0.14rem 0.4rem; background: var(--bg); color: var(--t2); border: 1px solid var(--border); border-radius: 2px; }
.p-link-icon { position: absolute; bottom: 0.85rem; right: 1rem; font-size: 0.7rem; color: var(--orange); opacity: 0; transition: opacity .2s; }
.p-card:hover .p-link-icon { opacity: 1; }

/* ── Ver más ──────────────────────────────────────────── */
.projects-more {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* ── Modal ────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(14,12,9,0.45); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.modal-box {
  background: var(--s0); border: 1px solid var(--border);
  width: 100%; max-width: 740px; max-height: 90vh;
  overflow-y: auto; position: relative; border-radius: var(--r-lg);
}
.modal-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 1;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--t2); cursor: pointer; padding: 0.28rem 0.72rem;
  font-family: var(--fm); font-size: 0.67rem; border-radius: var(--r-sm);
  transition: color .2s, border-color .2s;
}
.modal-close:hover { color: var(--t1); border-color: var(--border-h); }
.modal-cover { width: 100%; height: 250px; background: var(--s1); overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.modal-cover img { width: 100%; height: 100%; object-fit: cover; }
.modal-cover-ph { font-family: var(--fm); font-size: 0.6rem; color: var(--t3); letter-spacing: 0.1em; }
.modal-body    { padding: 2rem; }
.modal-cat     { font-family: var(--fm); font-size: 0.6rem; color: var(--orange); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.42rem; }
.modal-title   { font-family: var(--fd); font-size: 2rem; font-weight: 600; margin-bottom: 1rem; color: var(--t1); }
.modal-desc    { font-size: 0.87rem; color: var(--t2); line-height: 1.82; margin-bottom: 1.4rem; white-space: pre-line; }
.modal-tags    { display: flex; flex-wrap: wrap; gap: 0.28rem; margin-bottom: 1.4rem; }
.modal-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }