/* ---------- TRABAJOS: index + hover preview ---------- */
:root{
  --wk-bg:#110d16; --wk-line:rgba(243,238,233,.14); --wk-dim:rgba(243,238,233,.28);
  --wk-accent:var(--cy); --wk-hot:var(--cr);
  --wk-prev-w:clamp(260px,30vw,460px);
  --dur-fast:180ms; --dur-normal:420ms;
}

/* trigger pill */
.wk-open{position:fixed;left:50%;bottom:clamp(18px,4vh,40px);z-index:60;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:12px;padding:12px 14px 12px 22px;border-radius:999px;
  font:700 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;cursor:pointer;text-decoration:none;
  background:linear-gradient(180deg,#ff5a5f,#e3343f 55%,#8f1622);border:1px solid rgba(255,255,255,.25);box-shadow:0 14px 32px -10px rgba(227,52,63,.75),inset 0 1px 0 rgba(255,255,255,.35);
  opacity:0;transition:opacity .6s 1.4s var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast)}
body.entered .wk-open{opacity:1}
.wk-open .wk-count{display:grid;place-items:center;min-width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.18);color:#fff;font-size:.8rem;letter-spacing:0}
.wk-open:hover{transform:translateX(-50%) translateY(-3px) rotate(-1.5deg);box-shadow:0 16px 36px rgba(0,0,0,.5),inset 0 -3px 0 rgba(0,0,0,.18)}
.wk-open:active{transform:translateX(-50%) translateY(0) scale(.97)}
.wk-open:focus-visible,.wk-close:focus-visible,.wk-row:focus-visible{outline:2px solid var(--wk-accent);outline-offset:4px}
body.detailing .wk-open,body.working .wk-open{opacity:0;pointer-events:none;transition-delay:0s}

/* panel */
.works{position:fixed;inset:0;z-index:75;overflow-y:auto;overscroll-behavior:contain;background:var(--wk-bg);
  padding:clamp(28px,6vw,84px) clamp(16px,6vw,84px) clamp(48px,8vw,110px);
  clip-path:inset(100% 0 0 0);visibility:hidden;
  transition:clip-path .7s var(--ease),visibility 0s .7s}
.works.show{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .7s var(--ease),visibility 0s}
/* film grain */
.works::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.wk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:clamp(18px,3vw,34px);border-bottom:1px solid var(--wk-line);max-width:1280px;margin:0 auto}
.wk-head h2{font-family:var(--serif);font-weight:700;font-size:clamp(3rem,11vw,9rem);line-height:.82;letter-spacing:-.03em}
.wk-head h2 sup{font-family:var(--sans);font-size:.16em;letter-spacing:.1em;color:var(--wk-accent);vertical-align:top;margin-left:.3em}
.wk-head p{max-width:34ch;font-size:.92rem;line-height:1.55;color:var(--ink-soft)}
.wk-close{position:fixed;top:clamp(16px,3vw,26px);right:clamp(16px,3vw,26px);z-index:2;width:50px;height:50px;border-radius:50%;
  border:2px solid var(--ink);background:rgba(17,13,22,.7);backdrop-filter:blur(6px);color:var(--ink);font-size:1.4rem;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease),background var(--dur-fast)}
.wk-close:hover{transform:rotate(90deg);background:rgba(243,238,233,.12)}

.wk-list{list-style:none;max-width:1280px;margin:0 auto}
.wk-row{position:relative;display:grid;grid-template-columns:3.2rem 1fr auto;align-items:baseline;gap:clamp(10px,2vw,28px);
  padding:clamp(14px,2vw,22px) 0;border-bottom:1px solid var(--wk-line);cursor:pointer;
  transition:opacity var(--dur-normal) var(--ease)}
.wk-num{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--ink-soft)}
.wk-name{font-weight:800;font-size:clamp(1.6rem,4.6vw,3.6rem);line-height:1;letter-spacing:-.025em;
  transition:transform var(--dur-normal) var(--ease),color var(--dur-fast)}
.wk-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right;
  font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.wk-meta .wk-url{color:var(--wk-accent);letter-spacing:.08em;text-transform:none;font-size:.78rem}
.wk-thumb{display:none}

/* focus mode: siblings recede, hovered row slides */
@media (hover:hover){
  .wk-list:hover .wk-row,.wk-list:focus-within .wk-row{opacity:.32}
  .wk-list .wk-row:hover,.wk-list .wk-row:focus-visible{opacity:1}
  .wk-row:hover .wk-name,.wk-row:focus-visible .wk-name{transform:translateX(clamp(8px,1.6vw,22px));color:var(--wk-accent)}
}

/* floating preview (follows cursor) */
.wk-preview{position:fixed;left:0;top:0;z-index:85;width:var(--wk-prev-w);aspect-ratio:16/10;pointer-events:none;
  transform:translate3d(var(--x,-999px),var(--y,-999px),0) rotate(var(--rot,0deg));will-change:transform}
.wk-preview-frame{position:absolute;inset:0;border-radius:10px;overflow:hidden;background:#221830;
  box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);
  clip-path:inset(50% 50% 50% 50% round 10px);opacity:0;
  transition:clip-path .45s var(--ease),opacity .3s var(--ease)}
.wk-preview.on .wk-preview-frame{clip-path:inset(0 0 0 0 round 10px);opacity:1}
.wk-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);
  transition:opacity .35s var(--ease),transform .7s var(--ease)}
.wk-preview img.on{opacity:1;transform:scale(1)}
.wk-preview-tag{position:absolute;left:12px;bottom:12px;padding:6px 9px;border-radius:4px;background:var(--wk-hot);color:#fff;
  font:700 .58rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;opacity:0;transform:translateY(6px);
  transition:opacity .3s .1s,transform .3s .1s var(--ease)}
.wk-preview.on .wk-preview-tag{opacity:1;transform:none}

/* detail-panel items that also carry a preview */
.d-item[data-preview]{cursor:pointer;transition:background var(--dur-fast),transform var(--dur-fast) var(--ease)}
.d-item[data-preview]:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.d-item[data-preview] b::after{content:" ↗";opacity:.7}

/* touch: no hover → inline thumbnails */
@media (hover:none),(max-width:720px){
  .wk-preview{display:none}
  .wk-row{grid-template-columns:1fr;gap:8px}
  .wk-num{font-size:.85rem}
  .wk-meta{align-items:flex-start;text-align:left}
  .wk-thumb{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:8px;margin-top:6px;
    box-shadow:0 14px 30px rgba(0,0,0,.45)}
}
@media (prefers-reduced-motion:reduce){.works{clip-path:none}.wk-preview{display:none}}