/* ===== PROYECTOS PAGE ===== */
.px-hero{
  padding:11rem 2rem 5rem;
  background:var(--bg-2);
  text-align:center;
}
.px-hero__inner{max-width:760px;margin:0 auto}
.px-hero h1{
  font-family:'Cormorant Garamond',serif;
  font-weight:400;
  font-size:clamp(2.6rem,5.5vw,5rem);
  line-height:1.02;margin:1rem 0 1.2rem;
  letter-spacing:-.015em;
}
.px-hero p{color:var(--muted);font-size:1.05rem;max-width:540px;margin:0 auto}

.px-grid{
  max-width:1280px;margin:0 auto;
  padding:6rem 2rem;
  display:flex;flex-direction:column;gap:6rem;
}
.px-item{
  display:grid;grid-template-columns:1.5fr 1fr;
  gap:3rem;align-items:center;
}
.px-item:nth-child(even){grid-template-columns:1fr 1.5fr}
.px-item:nth-child(even) .px-info{order:-1}

.px-img{
  border-radius:4px;overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.3);
}
.px-img img{width:100%;height:auto;display:block;transition:transform 1s}
.px-img:hover img{transform:scale(1.02)}

.px-slider{
  position:relative;aspect-ratio:4/3;
  overflow:hidden;cursor:ew-resize;user-select:none;
  border-radius:4px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.3);
}
.px-after,.px-before{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
}
.px-before{clip-path:inset(0 50% 0 0);transition:clip-path .05s linear}
.px-handle{
  position:absolute;top:0;bottom:0;left:50%;
  width:2px;background:#f5f1ea;
  transform:translateX(-50%);pointer-events:none;
}
.px-handle span{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;
  background:#f5f1ea;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  display:grid;place-items:center;
}
.px-handle span::before,.px-handle span::after{
  content:'';position:absolute;top:50%;
  width:0;height:0;border:6px solid transparent;
  transform:translateY(-50%);
}
.px-handle span::before{left:8px;border-right:8px solid var(--ink)}
.px-handle span::after{right:8px;border-left:8px solid var(--ink)}
.px-label{
  position:absolute;top:1rem;
  padding:.4rem .9rem;font-size:.7rem;letter-spacing:.2em;font-weight:500;
  background:rgba(0,0,0,.55);color:#f5f1ea;
  border-radius:50px;backdrop-filter:blur(8px);
}
.px-label--b{left:1rem}
.px-label--a{right:1rem}

.px-cat{
  font-size:.72rem;letter-spacing:.25em;
  color:var(--olive);font-weight:600;
  margin-bottom:.8rem;display:inline-block;
}
.px-info h2{
  font-family:'Cormorant Garamond',serif;
  font-weight:400;font-size:2.4rem;
  line-height:1;letter-spacing:-.01em;
  margin-bottom:1rem;
}
.px-info p{color:var(--ink-soft);margin-bottom:1.5rem;font-size:1rem;line-height:1.6}
.px-info ul{
  list-style:none;display:grid;
  grid-template-columns:1fr 1fr;gap:.5rem 1.5rem;
}
.px-info li{
  font-size:.85rem;color:var(--muted);
  padding-left:1.2rem;position:relative;
}
.px-info li::before{
  content:'';position:absolute;left:0;top:50%;
  width:6px;height:6px;background:var(--olive);
  border-radius:50%;transform:translateY(-50%);
}

@media (max-width:900px){
  .px-grid{padding:4rem 1.5rem;gap:4rem}
  .px-item,.px-item:nth-child(even){grid-template-columns:1fr;gap:2rem}
  .px-item:nth-child(even) .px-info{order:0}
  .px-hero{padding:8rem 1.5rem 3rem}
}