/* ============================================================
   PARAFERNALIA · PROYECTOS
   Portada: masonry limpia, solo imagen destacada.
   Caso: documento, no publicidad. Lightbox a pantalla completa.
   ============================================================ */

/* ---------- Portada /proyectos ---------- */
.proyectos-hero{
  max-width:1240px;margin:0 auto;
  padding:clamp(40px,7vh,80px) clamp(24px,5vw,64px) clamp(28px,4vh,44px);
}
.proyectos-hero h1{
  font-weight:700;
  font-size:clamp(2.8rem,7vw,5.4rem);
  line-height:1.05;letter-spacing:-.015em;
  color:var(--warm-red);
}
.filtros{
  max-width:1240px;margin:0 auto;
  padding:0 clamp(24px,5vw,64px) clamp(28px,4vh,44px);
  display:flex;flex-wrap:wrap;gap:10px 26px;
  font-weight:700;font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;
}
.filtros span{color:var(--slate-gray)}
.filtros a{
  color:var(--outer-space);
  border-bottom:1px solid transparent;
  transition:color .3s,border-color .3s;
}
.filtros a:hover{color:var(--warm-red);border-color:currentColor}

.masonry-proyectos{
  max-width:1240px;margin:0 auto;
  padding:0 clamp(24px,5vw,64px) clamp(64px,10vh,120px);
  columns:3;column-gap:18px;
}
.proyecto-card{
  display:block;position:relative;overflow:hidden;
  margin-bottom:18px;break-inside:avoid;
}
.proyecto-card img{
  width:100%;height:auto;
  transition:transform .6s var(--ease-suave);
}
.proyecto-card .velo{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(16px,2vw,24px);
  background:linear-gradient(to top,rgba(28,30,33,.72) 0%,rgba(28,30,33,0) 46%);
  opacity:0;transition:opacity .45s var(--ease-suave);
}
.proyecto-card .velo h2{
  font-weight:700;font-size:clamp(1rem,1.4vw,1.2rem);
  color:var(--ivory);line-height:1.25;
}
.proyecto-card .velo p{
  font-weight:400;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ivory);opacity:.8;margin-top:4px;
}
@media (hover:hover){
  .proyecto-card:hover img{transform:scale(1.03)}
  .proyecto-card:hover .velo{opacity:1}
}
@media (hover:none){
  .proyecto-card .velo{opacity:1}
}

/* ---------- Caso /proyectos/{slug} ---------- */
.caso{
  max-width:880px;margin:0 auto;
  padding:clamp(40px,7vh,80px) clamp(24px,5vw,64px) clamp(56px,9vh,110px);
}
.caso h1{
  font-weight:700;
  font-size:clamp(2.2rem,5.2vw,4rem);
  line-height:1.08;letter-spacing:-.015em;
  color:var(--warm-red);
  margin-bottom:clamp(24px,4vh,36px);
}
.caso .destacada{width:100%;height:auto;margin-bottom:clamp(20px,3vh,28px)}
.ficha{
  display:flex;flex-wrap:wrap;gap:10px 34px;
  padding-bottom:clamp(28px,4vh,40px);
  margin-bottom:clamp(28px,4vh,40px);
  border-bottom:1px solid rgba(3,16,97,.14);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
}
.ficha dt{font-weight:700;color:var(--slate-gray);display:inline}
.ficha dd{font-weight:700;color:var(--outer-space);display:inline;margin-left:6px}
.ficha div{display:inline}
.caso h2{
  font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  color:var(--warm-red);
  margin:clamp(36px,5vh,52px) 0 .6em;
}
.caso h2 .t2{color:var(--outer-space)}
.caso p{
  color:var(--outer-space);
  line-height:1.8;font-size:clamp(1rem,1.25vw,1.1rem);
}
.caso p + p{margin-top:1.1em}

/* Galería del caso */
.galeria-caso{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin-top:clamp(16px,2.5vh,24px);
}
.galeria-caso button{
  appearance:none;border:0;padding:0;background:none;cursor:zoom-in;
  overflow:hidden;display:block;
}
.galeria-caso img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform .5s var(--ease-suave);
}
.galeria-caso button:hover img{transform:scale(1.04)}

/* Lightbox pantalla completa */
.lightbox{
  position:fixed;inset:0;z-index:90;
  background:rgba(28,30,33,.96);
  display:none;align-items:center;justify-content:center;
}
.lightbox.abierto{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;object-fit:contain}
.lightbox .lb-cerrar,.lightbox .lb-ant,.lightbox .lb-sig{
  appearance:none;border:0;background:none;cursor:pointer;
  position:absolute;color:var(--ivory);
  font-family:var(--font-titulares);font-weight:400;
  padding:14px;line-height:1;
  transition:color .3s,transform .3s;
}
.lightbox .lb-cerrar{top:18px;right:22px;font-size:2rem}
.lightbox .lb-ant{left:16px;top:50%;transform:translateY(-50%);font-size:2.4rem}
.lightbox .lb-sig{right:16px;top:50%;transform:translateY(-50%);font-size:2.4rem}
.lightbox button:hover{color:var(--warm-red)}

/* Relacionados y similares */
.relacionados{
  display:flex;flex-wrap:wrap;gap:12px 28px;
  margin-top:clamp(12px,2vh,18px);
}
.relacionados a{
  font-weight:700;font-size:.82rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--outer-space);
  border-bottom:1px solid currentColor;padding-bottom:4px;
  transition:color .3s;
}
.relacionados a:hover{color:var(--warm-red)}
.similares{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-top:clamp(16px,2.5vh,24px);
}
.similares .proyecto-card{margin:0}

.caso-cta{
  text-align:center;
  margin-top:clamp(48px,8vh,80px);
}
.caso-cta .btn-cotizar{color:var(--warm-red);border-color:var(--warm-red)}
.caso-cta .btn-cotizar:hover{background:var(--warm-red);color:var(--ivory)}

@media (max-width:900px){
  .masonry-proyectos{columns:2}
  .galeria-caso{grid-template-columns:repeat(2,1fr)}
  .similares{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .masonry-proyectos{columns:1}
}

@media (prefers-reduced-motion:reduce){
  .proyecto-card img,.galeria-caso img{transition:none}
}