/* ============================================================
   KEO REFURB — PROYECTOS (listado)
   ============================================================ */

/* ===== Cabecera ===== */
.pp-head{ padding:clamp(130px,14vw,200px) 0 clamp(24px,3vw,40px); }
.pp-head .wrap{ display:flex; flex-direction:column; gap:1.2rem; max-width:var(--maxw); }
.pp-head h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(46px,7vw,118px); line-height:.98; letter-spacing:-.015em;
  color:var(--carbon); margin-top:.1em;
}
.pp-head .pp-rule{ width:54px; margin-top:.4rem; }

/* ===== Filtros ===== */
.pp-filters{ border-top:1px solid var(--piedra); border-bottom:1px solid var(--piedra); }
.pp-filters__row{ display:flex; align-items:center; justify-content:space-between; gap:1.4rem; padding:clamp(16px,1.8vw,24px) var(--pad-x); max-width:var(--maxw); margin-inline:auto; }

/* selector tipo */
.pp-filter{ display:flex; align-items:center; gap:1.1rem; min-width:0; flex:1; }
.pp-filter > label{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--piedra-texto); white-space:nowrap; }
.pp-filter .sel{ position:relative; min-width:220px; }
.pp-filter select{
  appearance:none; -webkit-appearance:none;
  font-family:var(--serif); font-weight:500; font-size:clamp(18px,1.5vw,24px);
  color:var(--carbon); background:transparent; border:0; padding:.3em 2.2em .3em 0;
  cursor:pointer; width:100%; line-height:1.2;
}
.pp-filter select:focus{ outline:none; }
.pp-filter .sel::after{
  content:""; position:absolute; right:6px; top:50%;
  width:8px; height:8px; border-right:1px solid var(--acento); border-bottom:1px solid var(--acento);
  transform:translateY(-65%) rotate(45deg); pointer-events:none;
}

/* contador */
.pp-count{ font-size:12.5px; letter-spacing:.04em; color:var(--piedra-texto); white-space:nowrap; }
.pp-count b{ font-family:var(--serif); font-weight:500; font-size:18px; color:var(--carbon); margin-right:.3em; font-variant-numeric:tabular-nums; }

/* vista */
.pp-view{ display:flex; gap:0; border:1px solid var(--piedra); }
.pp-view button{
  width:42px; height:42px; display:grid; place-items:center;
  color:var(--piedra-texto); background:transparent; transition:.3s var(--ease);
}
.pp-view button + button{ border-left:1px solid var(--piedra); }
.pp-view button.on{ background:var(--carbon); color:var(--blanco); }
.pp-view button:hover:not(.on){ color:var(--carbon); }
.pp-view svg{ width:16px; height:16px; }

/* ===== Listado ===== */
.pp-list{ padding:clamp(40px,5vw,80px) 0 var(--sec-y); }

/* GRID (masonry vía CSS columns) */
.pp-grid{ column-count:4; column-gap:clamp(18px,2vw,30px); }
@media (max-width:1180px){ .pp-grid{ column-count:3; } }
@media (max-width:860px){  .pp-grid{ column-count:2; } }
@media (max-width:540px){  .pp-grid{ column-count:1; } }

/* Tarjeta */
.pcard{
  display:block; break-inside:avoid; margin:0 0 clamp(28px,2.8vw,42px); background:var(--blanco);
  opacity:0; transform:translateY(18px);
  animation:ppFade .9s var(--ease) forwards;
}
@keyframes ppFade{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .pcard{ opacity:1; transform:none; animation:none; }
}
.pcard__media{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--piedra-claro); }
.pcard--r34 .pcard__media{ aspect-ratio:3/4; }
.pcard--r43 .pcard__media{ aspect-ratio:4/3; }
.pcard--r56 .pcard__media{ aspect-ratio:5/6; }
.pcard--r54 .pcard__media{ aspect-ratio:5/4; }
.pcard--r11 .pcard__media{ aspect-ratio:1/1; }
.pcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.pcard:hover .pcard__media img{ transform:scale(1.045); }

.pcard__cap{ padding:clamp(14px,1.4vw,20px) 2px 0; position:relative; display:flex; flex-direction:column; gap:.45em; }
.pcard__cap::before{
  content:""; display:block; height:1px; width:0; background:var(--acento);
  transition:width .55s var(--ease); margin-bottom:.6em;
}
.pcard:hover .pcard__cap::before{ width:42px; }
.pcard h3{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(18px,1.35vw,23px); line-height:1.2; color:var(--carbon); letter-spacing:-.005em;
}
.pcard__sub{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--piedra-texto); }

/* LISTA */
.pp-rows{ border-top:1px solid var(--piedra); }
.prow{
  display:grid; grid-template-columns:clamp(96px,12vw,160px) 1fr auto;
  gap:clamp(20px,2.5vw,44px); align-items:center;
  padding:clamp(16px,1.8vw,26px) clamp(8px,1vw,16px);
  border-bottom:1px solid var(--piedra);
  transition:background .35s var(--ease), padding .35s var(--ease);
  opacity:0; transform:translateY(10px);
  animation:ppFade .8s var(--ease) forwards;
}
.prow:hover{ background:var(--piedra-claro); padding-left:clamp(14px,1.4vw,22px); padding-right:clamp(14px,1.4vw,22px); }
.prow__media{ overflow:hidden; aspect-ratio:4/3; }
.prow__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.prow:hover .prow__media img{ transform:scale(1.06); }
.prow__body{ display:flex; flex-direction:column; gap:.35em; min-width:0; }
.prow__body .tag{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--dorado); }
.prow__body h3{ font-family:var(--serif); font-weight:500; font-size:clamp(20px,1.7vw,28px); line-height:1.18; color:var(--carbon); }
.prow__loc{ font-size:13px; color:var(--piedra-texto); letter-spacing:.02em; }
.prow__arrow{ font-size:20px; color:var(--carbon); transition:transform .4s var(--ease), color .4s var(--ease); padding-left:1rem; }
.prow:hover .prow__arrow{ transform:translateX(6px); color:var(--acento); }

/* Vista activa */
.pp-list[data-view=grid] .pp-rows{ display:none; }
.pp-list[data-view=list] .pp-grid{ display:none; }

/* Estado vacío */
.pp-empty{ padding:clamp(60px,8vw,120px) 0; text-align:center; color:var(--piedra-texto); }
.pp-empty b{ display:block; font-family:var(--serif); font-weight:500; font-size:clamp(22px,2vw,30px); color:var(--carbon); margin-bottom:.4em; }

/* Responsive filtros */
@media (max-width:760px){
  .pp-filters__row{ flex-wrap:wrap; gap:.8rem 1.2rem; padding-top:14px; padding-bottom:14px; }
  .pp-filter{ order:1; flex:1 1 100%; gap:.8rem; }
  .pp-filter .sel{ min-width:0; flex:1; }
  .pp-count{ order:2; }
  .pp-view{ order:3; margin-left:auto; }
  .prow{ grid-template-columns:80px 1fr auto; gap:14px; }
  .prow__arrow{ padding-left:0; }
}
@media (max-width:480px){
  .pp-head h1{ font-size:clamp(36px,9vw,118px); }
}