/* QKStudio — Archivo de proyectos (/proyectos). Solo se carga en esa página; todas las clases llevan el prefijo .pj- */

.pj-main{ padding-top:0; }

/* ---------- Hero ---------- */
.pj-hero{ padding:clamp(130px,17vh,190px) 0 clamp(44px,7vw,84px); }
.pj-hero .qk-bigt{ font-size:clamp(2.5rem,6.6vw,5.6rem); letter-spacing:-.025em; margin-top:16px; max-width:15em; }
.pj-hero .qk-bigt .muted{ color:var(--gray-light); }
.pj-lead{ color:var(--gray-light); font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.6; max-width:38em; margin-top:22px; }

/* ---------- 6 proyectos grandes: cajas del 50 % ---------- */
.pj-bigs{
  --gap:clamp(10px,1.2vw,18px);
  --off:clamp(36px,7vw,110px);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--gap);
  padding:0 var(--gap) calc(var(--off) + var(--gap));
}
.pj-big{
  position:relative; border-radius:clamp(12px,1.4vw,20px); overflow:hidden; isolation:isolate;
  background:var(--gray-dark);
  aspect-ratio:5/4;
  transition:opacity .6s var(--ease), transform .8s var(--ease), filter .55s var(--ease);
  transition-delay:var(--d,0s),var(--d,0s),0s;
}
.pj-big.is-visible{ transition-delay:0s; }
.pj-big:nth-child(even){ translate:0 var(--off); }
.pj-big__a{ position:absolute; inset:0; display:block; color:var(--white); }
.pj-big__media{ position:absolute; inset:0; overflow:hidden; }
.pj-big__img{ width:100%; height:100%; object-fit:cover; display:block; scale:1.12; translate:0 var(--py,0); transition:scale 1s var(--ease), filter .6s ease; will-change:translate; }
.pj-big__img--ph{ background-size:cover; }
.pj-big__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(38,30,37,.18) 0%,rgba(38,30,37,0) 38%,rgba(38,30,37,.82) 100%); transition:opacity .5s ease; }
.pj-big__num{ position:absolute; top:clamp(16px,2vw,28px); left:clamp(18px,2.2vw,32px); font-family:var(--font-display); font-weight:500; font-size:.9rem; letter-spacing:.12em; color:var(--white); opacity:.85; z-index:2; }
.pj-big__txt{ position:absolute; left:0; right:0; bottom:0; padding:clamp(18px,2.4vw,36px); z-index:2; display:flex; flex-direction:column; gap:14px; }
.pj-big__tags{ display:flex; flex-wrap:wrap; gap:8px; }
.pj-big__tags span{ font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:.5em .95em; border-radius:99px; background:rgba(241,241,241,.14); border:1px solid rgba(241,241,241,.22); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.pj-big__title{ font-size:clamp(1.5rem,2.8vw,2.7rem); line-height:1.05; letter-spacing:-.015em; max-width:14em; transition:translate .6s var(--ease); }
.pj-big__go > span{ display:inline-block; width:.95rem; height:.95rem; font-size:0; line-height:0; background:currentColor; -webkit-mask:var(--qk-arrow) center/contain no-repeat; mask:var(--qk-arrow) center/contain no-repeat; }
.pj-big__go{ position:absolute; right:clamp(16px,2vw,28px); top:clamp(14px,1.8vw,24px); z-index:2; font-size:.82rem; font-weight:600; display:none; align-items:center; gap:.4em; padding:.7em 1.1em; border-radius:99px; background:var(--white); color:var(--gray-dark); }
html:not(.pj-cursor-on) .pj-big__go{ display:inline-flex; opacity:0; translate:0 -6px; transition:opacity .35s ease, translate .35s var(--ease); }
html:not(.pj-cursor-on) .pj-big__a:hover .pj-big__go, .pj-big__a:focus-visible .pj-big__go{ opacity:1; translate:0 0; }
.pj-big__a:focus-visible{ outline:2px solid var(--white); outline-offset:-6px; border-radius:inherit; }
.pj-big:not(.is-nolink) .pj-big__a:hover .pj-big__img{ scale:1.2; }
.pj-big:not(.is-nolink) .pj-big__a:hover .pj-big__title{ translate:0 -4px; }
.pj-big.is-nolink .pj-big__a{ cursor:default; }

/* Al pasar sobre una caja, las demás se desenfocan (solo con mouse) */
@media (hover:hover) and (pointer:fine){
  .pj-bigs:has(.pj-big:not(.is-nolink):hover) .pj-big:not(:hover),
  .pj-bigs:has(.pj-big__a:focus-visible) .pj-big:not(:focus-within){ filter:blur(9px) saturate(.55); opacity:.5; }
  .pj-bigs:has(.pj-big:not(.is-nolink):hover) .pj-big:not(:hover) .pj-big__txt,
  .pj-bigs:has(.pj-big__a:focus-visible) .pj-big:not(:focus-within) .pj-big__txt{ opacity:0; }
  .pj-big__txt{ transition:opacity .4s ease; }
  html.pj-cursor-on .pj-big:not(.is-nolink) .pj-big__a{ cursor:none; }
}

/* Cursor circular "Ver proyecto" (lo crea projects.js; el exterior se mueve, el interior escala) */
.pj-cursor{ position:fixed; left:0; top:0; z-index:300; pointer-events:none; will-change:transform; }
.pj-cursor__dot{ display:flex; align-items:center; justify-content:center; text-align:center; width:104px; height:104px; margin:-52px 0 0 -52px; border-radius:50%; background:var(--white); color:var(--gray-dark); font-family:var(--font-body); font-weight:600; font-size:.8rem; line-height:1.15; letter-spacing:.01em; padding:14px; scale:0; opacity:0; transition:scale .45s var(--ease), opacity .25s ease; box-shadow:0 10px 40px rgba(0,0,0,.35); }
.pj-cursor.is-on .pj-cursor__dot{ scale:1; opacity:1; }

/* ---------- Listado ---------- */
.pj-list{ padding:clamp(40px,6vw,90px) 0 clamp(20px,4vw,50px); }
.pj-list__head{ position:relative; z-index:20; display:flex; align-items:flex-end; justify-content:space-between; gap:24px 40px; flex-wrap:wrap; margin-bottom:18px; }
.pj-list__head h2{ font-size:clamp(1.8rem,3.6vw,3rem); letter-spacing:-.02em; }
.pj-filters{ display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; }
.pj-select{ position:relative; display:block; }
.pj-select select{
  appearance:none; -webkit-appearance:none; font:inherit; font-size:.92rem; font-weight:500; color:var(--white);
  background:transparent; border:1px solid var(--light-30); border-radius:99px; cursor:pointer;
  padding:.85em 2.9em .85em 1.3em; max-width:100%; transition:border-color .3s ease, background-color .3s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23f1f1f1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.2em center;
}
.pj-select select:hover{ border-color:var(--white); background-color:var(--light-08); }
.pj-select select:focus-visible{ outline:2px solid var(--white); outline-offset:3px; }
.pj-select option{ color:#261e25; background:#f1f1f1; }

/* Selectores con diseño propio (los crea projects.js; el <select> nativo queda oculto y sigue mandando el valor) */
.pj-select.is-custom{ display:none; }
.pj-dd{ position:relative; }
.pj-dd__btn{
  display:inline-flex; align-items:center; gap:.9em; max-width:100%; min-height:50px; padding:0 1.25em 0 1.4em;
  font:inherit; font-size:.92rem; font-weight:500; color:var(--white); background:transparent; cursor:pointer; text-align:left;
  border:1px solid var(--light-30); border-radius:99px;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.pj-dd__lab{ font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-light); white-space:nowrap; transition:color .3s ease; }
.pj-dd__val{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:12.5em; }
.pj-dd__chev{ flex:none; margin-left:.15em; transition:transform .45s var(--ease); }
.pj-dd__btn:hover{ border-color:var(--white); background-color:var(--light-08); }
.pj-dd__btn:focus-visible{ outline:2px solid var(--white); outline-offset:3px; }
.pj-dd.is-open .pj-dd__btn{ border-color:var(--white); background-color:var(--light-08); }
.pj-dd.is-open .pj-dd__chev{ transform:rotate(180deg); }
.pj-dd.has-value .pj-dd__btn{ background:var(--white); border-color:var(--white); color:var(--gray-dark); }
.pj-dd.has-value .pj-dd__lab{ color:rgba(38,30,37,.58); }
.pj-dd.has-value .pj-dd__btn:hover{ background:#fff; }

.pj-dd__panel{
  position:absolute; left:0; top:calc(100% + 10px); z-index:40; min-width:100%; width:max-content; max-width:min(380px,calc(100vw - 2 * var(--pad,20px)));
  padding:8px; border-radius:22px; background:rgba(47,38,46,.97); border:1px solid var(--light-15);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 32px 80px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; translate:0 -8px; scale:.97; transform-origin:top left; pointer-events:none;
  transition:opacity .25s ease, translate .4s var(--ease), scale .4s var(--ease), visibility 0s linear .4s;
}
.pj-dd.is-right .pj-dd__panel{ left:auto; right:0; transform-origin:top right; }
.pj-dd.is-open .pj-dd__panel{ opacity:1; visibility:visible; translate:0 0; scale:1; pointer-events:auto; transition-delay:0s; }
.pj-dd__list{ list-style:none; margin:0; padding:0; max-height:min(340px,52vh); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--light-30) transparent; outline:none; }
.pj-dd__opt{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:.8em 1em; border-radius:14px;
  font-size:.92rem; line-height:1.3; color:var(--white); cursor:pointer; transition:background-color .2s ease, color .2s ease;
}
.pj-dd__opt + .pj-dd__opt{ margin-top:2px; }
.pj-dd__opt.is-all{ color:var(--gray-light); margin-bottom:6px; }
.pj-dd__opt.is-all::before{ content:""; position:absolute; left:1em; right:1em; bottom:-4px; height:1px; background:var(--light-15); }
.pj-dd__opt.is-active{ background:var(--light-08); color:var(--white); }
.pj-dd__opt[aria-selected="true"]{ color:var(--white); font-weight:600; }
.pj-dd__opt[aria-selected="true"]::after{
  content:""; flex:none; width:16px; height:16px; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23f1f1f1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
}
.pj-filters__clear.is-hidden{ display:none; }
.pj-more__retry[hidden]{ display:none; }
@media (min-width:1181px){ .pj-filters{ flex-wrap:nowrap; } .pj-filters__clear{ white-space:nowrap; margin-left:6px; } }
.pj-filters__clear{ font-size:.88rem; }
html.js .pj-filters__go{ display:none; }
.pj-count{ color:var(--gray-light); font-size:.9rem; margin:0 0 26px; font-variant-numeric:tabular-nums; }

.pj-rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--light-15); transition:opacity .35s ease; }
.pj-rows.is-swapping{ opacity:0; }
.pj-row{ border-bottom:1px solid var(--light-15); }
.pj-row__a{
  position:relative; display:grid; grid-template-columns:56px minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) 36px; align-items:center; gap:clamp(12px,2vw,28px);
  padding:clamp(20px,2.6vw,34px) 6px; color:var(--white);
  transition:padding .45s var(--ease), opacity .4s ease, background-color .35s ease;
}
.pj-row__n{ font-family:var(--font-display); font-size:.85rem; letter-spacing:.1em; color:var(--gray-light); font-variant-numeric:tabular-nums; }
.pj-row__thumb{ display:none; }
.pj-row__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.35rem,2.7vw,2.5rem); line-height:1.08; letter-spacing:-.015em; transition:translate .45s var(--ease); }
.pj-row__tag{ font-size:.86rem; color:var(--gray-light); line-height:1.3; }
.pj-row__go{ justify-self:end; width:1.5rem; height:1.5rem; font-size:0; line-height:0; background:currentColor; -webkit-mask:var(--qk-arrow) center/contain no-repeat; mask:var(--qk-arrow) center/contain no-repeat; transition:transform .45s var(--ease); }
.pj-row__a:focus-visible{ outline:2px solid var(--white); outline-offset:-2px; border-radius:10px; }
.pj-row.is-nolink .pj-row__a{ cursor:default; }

@media (hover:hover) and (pointer:fine){
  .pj-rows:has(.pj-row:not(.is-nolink):hover) .pj-row:not(:hover) .pj-row__a{ opacity:.32; }
  .pj-row:not(.is-nolink) .pj-row__a:hover{ padding-left:22px; padding-right:22px; }
  .pj-row:not(.is-nolink) .pj-row__a:hover .pj-row__go{ transform:translate(4px,-4px) rotate(0deg); }
  .pj-row:not(.is-nolink) .pj-row__a:hover .pj-row__title{ translate:6px 0; }
}

/* Vista previa que sigue al mouse (la crea projects.js) */
.pj-peek{ position:fixed; left:0; top:0; z-index:90; width:min(24vw,360px); aspect-ratio:16/10; pointer-events:none; will-change:transform; }
.pj-peek__in{ width:100%; height:100%; border-radius:14px; overflow:hidden; opacity:0; scale:.86; transition:opacity .3s ease, scale .45s var(--ease); background:var(--gray-light); box-shadow:0 24px 60px rgba(0,0,0,.45); }
.pj-peek.is-on .pj-peek__in{ opacity:1; scale:1; }
.pj-peek img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Estados del scroll infinito */
.pj-empty{ color:var(--gray-light); padding:50px 0; font-size:1.05rem; max-width:34em; }
.pj-more{ display:flex; flex-direction:column; align-items:center; gap:18px; padding:clamp(34px,5vw,64px) 0 0; min-height:70px; }
.pj-more__msg{ color:var(--gray-light); font-size:.9rem; margin:0; }
.pj-more__msg:empty{ display:none; }
.pj-loader{ display:none; gap:8px; }
.pj-loader i{ width:9px; height:9px; border-radius:50%; background:var(--white); animation:pj-dot 1s var(--ease) infinite; }
.pj-loader i:nth-child(2){ animation-delay:.14s; }
.pj-loader i:nth-child(3){ animation-delay:.28s; }
.pj-more.is-loading .pj-loader{ display:inline-flex; }
.pj-sentinel{ width:100%; height:1px; }
@keyframes pj-dot{ 0%,100%{ transform:translateY(0); opacity:.35; } 40%{ transform:translateY(-9px); opacity:1; } }

/* Aparición de las filas nuevas (escalonada) */
.pj-enter{ animation:pj-in .75s var(--ease) both; animation-delay:calc(var(--i,0) * 70ms); }
@keyframes pj-in{ from{ opacity:0; transform:translateY(46px); clip-path:inset(0 0 100% 0); } to{ opacity:1; transform:none; clip-path:inset(0 0 0 0); } }

/* ---------- Sin enlace: al final, en dos columnas ---------- */
.pj-old{ margin-top:clamp(64px,9vw,130px); }
.pj-old[hidden]{ display:none; }
.pj-old__head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px 32px; flex-wrap:wrap; margin-bottom:clamp(18px,2vw,28px); }
.pj-old__title{ font-size:clamp(1.5rem,2.8vw,2.3rem); letter-spacing:-.02em; }
.pj-old__text{ color:var(--gray-light); font-size:.95rem; margin:0; max-width:30em; }
.pj-old__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(28px,5vw,80px); border-top:1px solid var(--light-15); }
.pj-old__item{ padding:clamp(16px,1.9vw,26px) 0; border-bottom:1px solid var(--light-15); cursor:default; }
.pj-old__name{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.1rem,1.7vw,1.5rem); line-height:1.2; letter-spacing:-.01em; margin:0; }
.pj-old__tags{ color:var(--gray-light); font-size:.84rem; line-height:1.4; margin:6px 0 0; }

/* Paginación común: solo si no hay JavaScript */
.pj-pager{ margin-top:34px; }
.pj-pager ul{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.pj-pager a,.pj-pager span{ display:inline-flex; min-width:44px; height:44px; align-items:center; justify-content:center; padding:0 14px; border:1px solid var(--light-30); border-radius:99px; font-size:.92rem; color:var(--white); }
.pj-pager .current{ background:var(--white); color:var(--gray-dark); border-color:var(--white); }
.pj-list.is-inf .pj-pager{ display:none; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .pj-row__a{ grid-template-columns:44px minmax(0,1fr) 36px; grid-template-areas:"n title go" "n ind go" "n tipo go"; row-gap:6px; }
  .pj-row__n{ grid-area:n; align-self:start; padding-top:.5em; }
  .pj-row__title{ grid-area:title; }
  .pj-row__tag--ind{ grid-area:ind; }
  .pj-row__tag--tipo{ grid-area:tipo; }
  .pj-row__go{ grid-area:go; }
  .pj-row__tag:empty{ display:none; }
}
@media (max-width:760px){
  .pj-bigs{ grid-template-columns:1fr; padding-bottom:var(--gap); }
  .pj-big{ aspect-ratio:4/4.4; }
  .pj-big:nth-child(even){ translate:none; }
  .pj-big__go{ display:none !important; }
  .pj-row__a{ grid-template-columns:78px minmax(0,1fr) 28px; grid-template-areas:"thumb title go" "thumb ind go" "thumb tipo go"; column-gap:16px; }
  .pj-row__n{ display:none; }
  .pj-row__thumb{ display:block; grid-area:thumb; grid-row:1 / span 3; width:78px; height:78px; object-fit:cover; border-radius:12px; }
  .pj-row__title{ font-size:1.2rem; }
  .pj-list__head{ align-items:flex-start; }
  .pj-filters{ width:100%; }
  .pj-select{ flex:1 1 100%; }
  .pj-select select{ width:100%; }
  .pj-dd{ flex:1 1 100%; }
  .pj-dd__btn{ width:100%; justify-content:space-between; }
  .pj-dd__val{ margin-left:auto; max-width:none; }
  .pj-dd__panel{ width:100%; max-width:none; }
}
@media (max-width:480px){
  .pj-old__grid{ column-gap:18px; }
  .pj-old__name{ font-size:1rem; }
  .pj-old__tags{ font-size:.78rem; }
}

/* ---------- Sin JavaScript o con menos movimiento ---------- */
html:not(.js) .pj-enter{ animation:none; }
html:not(.js) .pj-big__img{ scale:1; }
@media (prefers-reduced-motion:reduce){
  .pj-big,.pj-big__img,.pj-big__title,.pj-row__a,.pj-row__title,.pj-row__go,.pj-rows,.pj-cursor__dot,.pj-peek__in,.pj-dd__panel,.pj-dd__chev,.pj-dd__btn{ transition:none !important; }
  .pj-enter{ animation:none; }
  .pj-big__img{ scale:1; translate:none; }
  .pj-loader i{ animation:none; opacity:.8; }
}