/* =============================================================
   GCLP · Portafolio (proyectos.html)
   Complementa styles.css — mismos tokens, mismo lenguaje visual.
   ============================================================= */

.portada {
  padding-top: calc(var(--nav-h) + clamp(4rem, 10vw, 7rem));
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  position: relative; overflow: hidden; isolation: isolate;
}
.portada::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 120%; z-index: -1;
  background:
    radial-gradient(60% 55% at 18% 0%, rgba(216,33,58,.24), transparent 62%),
    radial-gradient(50% 45% at 92% 12%, rgba(161,21,42,.18), transparent 60%);
  filter: blur(60px);
}
.portada-title {
  font-family: var(--display);
  font-size: clamp(2.6rem, 7.5vw, 5.4rem);
  line-height: .99;
  margin: 1.2rem 0 1.4rem;
}
.portada-title em { font-style: normal; color: var(--accent-3); }
.portada-lead {
  max-width: 62ch; color: var(--paper-2); font-size: clamp(1.05rem, 1.6vw, 1.18rem); line-height: 1.72;
  text-align: justify; text-justify: inter-word; hyphens: none; -webkit-hyphens: none;
}
.portada-nota {
  margin-top: 1.6rem; max-width: 62ch;
  padding-left: 1rem; border-left: 2px solid var(--accent);
  font-size: .95rem; color: var(--paper-2); line-height: 1.65;
  text-align: justify; text-justify: inter-word; hyphens: none; -webkit-hyphens: none;
}

/* --- Filtros --- */
.listado { padding-bottom: clamp(4rem, 9vw, 7rem); }
.filtros {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: var(--nav-h); z-index: 40;
  background: linear-gradient(180deg, var(--bg) 72%, rgba(11,7,8,0));
  padding-top: 1rem;
}
.filtro {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .58rem .95rem;
  border: 1px solid var(--line-soft); border-radius: 2px;
  color: var(--paper-3);
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.filtro:hover { color: var(--paper); border-color: var(--line); }
.filtro.is-active { color: #fff; background: var(--accent); border-color: var(--accent); }
.filtro-info {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .12em;
  color: var(--paper-2); margin: 1.2rem 0 2rem;
}

/* --- Lista de proyectos --- */
.proy-list { display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
.proy {
  background: var(--bg);
  display: grid; grid-template-columns: 3rem 1fr; gap: 1rem;
  padding: 1.8rem .2rem;
  transition: background-color .5s var(--ease-out), padding-left .5s var(--ease-out);
}
.proy:hover { background: var(--card); padding-left: 1rem; }
.proy[hidden] { display: none; }
.proy-n {
  font-family: var(--mono); font-size: .8rem; color: var(--accent); padding-top: .3rem;
}
.proy-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--paper-2);
  margin-bottom: .7rem;
}
.proy-tag {
  color: var(--accent-3);
  border: 1px solid rgba(216,33,58,.35);
  padding: .18rem .5rem; border-radius: 2px;
}
.proy-title {
  font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.12; margin-bottom: .55rem; font-weight: 500; letter-spacing: -0.03em;
}
.proy-rol {
  font-size: .92rem; color: var(--accent-3); margin-bottom: .5rem;
  font-family: var(--mono); letter-spacing: .02em;
}
.proy-desc {
  font-size: 1rem; color: var(--paper-2); max-width: 78ch; line-height: 1.72;
  text-align: justify; text-justify: inter-word; hyphens: none; -webkit-hyphens: none;
}

/* --- Cierre --- */
.cierre { background: var(--bg-2); text-align: left; }
.cierre-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }

@media (min-width: 720px) {
  .proy { grid-template-columns: 4.5rem 1fr; gap: 1.5rem; padding-block: 2.2rem; }
}

/* =============================================================
   Imagen flotante que sigue al cursor sobre la lista de fichas
   ============================================================= */
.flotante {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: 320px; height: 215px;
  margin: -108px 0 0 -160px;
  pointer-events: none;
  opacity: 0; transform: scale(.9);
  transition: opacity .45s var(--ease-out), transform .55s var(--ease-out);
  overflow: hidden; border-radius: 1rem;
}
.flotante.visible { opacity: 1; transform: scale(1); }
.flotante img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.04) saturate(1.04) contrast(1.04); }
@media (pointer: coarse), (hover: none) { .flotante { display: none; } }

/* La fila resalta al pasar por encima */
.proy { position: relative; }
.proy::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(216,33,58,.14), transparent 60%);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.proy:hover::before { transform: scaleX(1); }
.proy-title { transition: color .4s var(--ease-out); }
.proy:hover .proy-title { color: var(--accent-3); }
/* Archivo fotográfico: fichas de campo, identidad GCLP */
.portada { background: linear-gradient(90deg,rgba(8,13,24,.98),rgba(8,13,24,.74)),var(--portada-img,none) center 48%/cover; }
.portada::before { display:none; }
.portada-title { max-width:1000px; font-size:clamp(2.6rem,5.6vw,5rem); line-height:1.06; }
.portada-title em { color:#fff; font-weight:400; }
.portada-lead,.proy-desc { text-align:left; }
.archive-stats { display:flex; flex-wrap:wrap; gap:2rem 3.5rem; margin-top:2.5rem; border-top:1px solid var(--line); padding-top:1.5rem; }
.archive-stats span { color:var(--paper-3); font-size:.8rem; }
.archive-stats strong { display:block; color:white; font-family:var(--display); font-size:1.8rem; font-weight:500; }
.listado { padding-top:1.8rem; }
.project-search { display:block; font-size:.8rem; color:var(--paper-2); max-width:540px; }
.project-search input { display:block; margin-top:.6rem; width:100%; padding:.9rem 1rem; background:var(--card); border:1px solid #536073; border-radius:6px; color:white; font:inherit; font-size:1rem; }
.filtros { position:static; background:none; margin-top:.65rem; gap:.35rem .4rem; padding-top:.65rem; padding-bottom:.8rem; }
.filtro { letter-spacing:0; text-transform:none; font-family:var(--sans); font-size:.76rem; border-radius:30px; padding:.4rem .68rem; }
.filtro-count {
  display:inline-block;
  min-width:1.05rem;
  margin-left:.28rem;
  padding:.04rem .25rem;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:var(--paper-2);
  font-size:.72em;
  font-variant-numeric:tabular-nums;
  text-align:center;
}
.filtro.is-active .filtro-count { background:rgba(255,255,255,.2); color:#fff; }
.proy-list { background:none; border:0; gap:2rem; }
.proy { grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); gap:0; padding:0; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; scroll-margin-top:95px; }
.proy:hover { padding:0; background:var(--card); }
.proy::before { display:none; }
.proy-cover { position:relative; min-height:330px; overflow:hidden; }
.proy-cover>img { width:100%; height:100%; position:absolute; object-fit:cover; filter:brightness(1.04) saturate(1.04) contrast(1.04); transition:transform .4s ease,filter .4s ease; }
.proy-cover:hover>img { transform:scale(1.035); }
.photo-badge { position:absolute; bottom:1rem; left:1rem; background:rgba(8,13,24,.9); border:1px solid #657083; padding:.45rem .8rem; border-radius:4px; font-size:.78rem; }
.proy-n { position:absolute; top:1rem; left:1rem; z-index:1; padding:.2rem .55rem; background:var(--bg); color:white; border-radius:3px; }
.proy-body { min-width:0; padding:clamp(1.25rem,3vw,2.5rem); }
.proy-title { font-size:clamp(1.3rem,2vw,1.8rem); line-height:1.2; }
.proy-rol { font:500 .82rem/1.6 var(--sans); margin-block:.8rem; }
.proy-desc { font-size:.94rem; line-height:1.75; }
.proy-meta { font-size:.67rem; letter-spacing:.025em; }
.project-album { margin-top:1.4rem; border-top:1px solid var(--line); padding-top:1rem; }
.project-album summary { cursor:pointer; color:white; font-size:.85rem; }
.photo-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; margin-top:1rem; }
.photo-grid img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:3px; filter:brightness(1.04) saturate(1.04) contrast(1.04); }
.photo-grid a:hover { opacity:.8; }
.photo-dialog { position:fixed; inset:0; margin:auto; width:min(1200px,96vw); max-width:96vw; max-height:95dvh; padding:1.2rem; background:#0b1220; border:1px solid #536073; border-radius:10px; color:#fff; }
.photo-dialog::backdrop { background:rgba(0,0,0,.9); }
.photo-toolbar,.photo-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.85rem; }
.photo-toolbar p { max-width:85ch; line-height:1.4; }
.photo-toolbar button { white-space:nowrap; padding:.6rem; }
.photo-stage { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:.5rem; margin:1rem 0; }
.photo-stage img { width:100%; height:65dvh; object-fit:contain; filter:brightness(1.04) saturate(1.04) contrast(1.04); }
.photo-stage button { border:1px solid #536073; border-radius:50%; width:42px; height:42px; font-size:1.2rem; }
.photo-stage button:disabled { opacity:.3; cursor:default; }
.photo-footer a { text-decoration:underline; }
.gallery-open { overflow:hidden; }
#no-projects { padding:2rem 0; }
@media(max-width:700px) { .proy { grid-template-columns:1fr; } .proy-cover { min-height:0; aspect-ratio:4/3; } .archive-stats { gap:1.2rem; } .archive-stats strong { font-size:1.4rem; } .archive-hint { display:none; } .photo-dialog { padding:.75rem; } .photo-stage { grid-template-columns:32px minmax(0,1fr) 32px; gap:.2rem; } .photo-stage button { width:30px; height:36px; } .photo-stage img { height:55dvh; } .photo-toolbar { align-items:flex-start; font-size:.75rem; } .photo-footer { font-size:.72rem; } }
@media(prefers-reduced-motion:reduce) { .proy-cover>img { transition:none; } }
/* Mayor legibilidad del rótulo sobre la fotografía del portafolio. */
.portada .kicker {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  font-weight: 700;
  letter-spacing: .16em;
  color: #FF3030;
  text-shadow: 0 0 14px rgba(255, 48, 48, .42);
  line-height: 1.6;
}

/* Fichas justificadas sin separación automática de palabras. */
.proy-title, .proy-rol, .proy-desc {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}
.proy-tag, .proy-rol, .proy-n { color: var(--accent-3); }
.proy-tag {
  color: #fff;
  background: #ff3030;
  border-color: #ff3030;
}

.proy-rol {
  display: table;
  max-width: 100%;
  padding: .3rem .5rem;
  color: #f5f7fa;
  background: rgba(255, 48, 48, .1);
  border: 1px solid rgba(255, 48, 48, .52);
  border-left: 2px solid #ff3030;
  border-radius: 4px;
  font-size: .76rem;
  line-height: 1.45;
  font-weight: 600;
  text-align: left;
}
.proy-n { color: #fff; }
.proy-cover {
  align-self: start;
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 3;
}