/* VERTIX · Portafolio — solo lo propio de esta página; el resto vive en base.css.
   La cinta, el índice y la ficha los monta js/portafolio.js desde #workData. */

.ph{text-align:center;padding-bottom:clamp(32px,4vw,56px)}
.ph .h1{max-width:15ch;margin:0 auto}
.ph .lead{margin-left:auto;margin-right:auto}
.ph .actions{justify-content:center}

/* ── La cinta ───────────────────────────────────────────── */
.reel{padding:6px 0 24px}
.reel-row{
  position:relative;overflow:hidden;padding:10px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.reel-track{display:flex;width:max-content;will-change:transform;animation:reel-l var(--dur,64s) linear infinite}
.reel-row[data-dir="r"] .reel-track{animation-name:reel-r}
/* El bucle es exacto: el JS duplica el set una vez y las placas separan con
   margin-right, así media pista mide exactamente un set. */
@keyframes reel-l{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes reel-r{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.reel-row:hover .reel-track,.reel-row:focus-within .reel-track{animation-play-state:paused}

.shot{
  position:relative;flex:0 0 auto;width:clamp(300px,30vw,468px);margin-right:16px;aspect-ratio:16/10;
  overflow:hidden;border-radius:var(--r-md);border:1px solid var(--glass-edge);background:var(--bg-2);
  box-shadow:var(--glass-shadow);padding:0;cursor:pointer;
  transition:opacity .4s ease,transform .5s var(--ease),box-shadow .5s var(--ease);
}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.reel:has(.shot:hover) .shot{opacity:.45}
.reel .shot:hover,.reel .shot:focus-visible{opacity:1;transform:translateY(-4px);box-shadow:var(--lift-shadow)}
.shot-bar{
  position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 14px;border-radius:var(--r-sm);text-align:left;
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  transform:translateY(calc(100% + 14px));transition:transform .45s var(--ease);
}
.shot:hover .shot-bar,.shot:focus-visible .shot-bar{transform:none}
.shot-name{font:600 16px/1.2 var(--f-ui);color:var(--ink)}
.shot-kind{font-size:13.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reel-hint{display:none;text-align:center;color:var(--mute);font-size:14px;margin-top:10px}

/* ── El índice ──────────────────────────────────────────── */
.index-head p{color:var(--mute)}
.index-list{border-top:1px solid var(--line-2)}
.row{
  display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,.8fr) 28px;align-items:center;gap:clamp(14px,2.4vw,28px);
  width:100%;padding:26px 8px;border:0;border-bottom:1px solid var(--line-2);background:transparent;
  text-align:left;cursor:pointer;border-radius:0;
  transition:background .3s ease,padding .4s var(--ease);
}
.row:hover,.row:focus-visible{background:rgba(255,255,255,.55);padding-left:20px;outline:none}
.row-n{font-size:14px;color:var(--mute);font-variant-numeric:tabular-nums}
.row-name{font:600 clamp(26px,3.2vw,40px)/1.05 var(--f-display);letter-spacing:-.035em;color:var(--ink)}
.row-kind{color:var(--mute);font-size:15.5px}
.row-go{color:var(--mute);font-size:18px;transition:transform .3s var(--ease),color .3s}
.row:hover .row-go,.row:focus-visible .row-go{color:var(--accent-ink);transform:translate(3px,-3px)}
.row-thumb{display:none}

/* Vista previa que sigue al cursor */
.peek{
  position:fixed;left:0;top:0;z-index:60;width:330px;aspect-ratio:16/10;pointer-events:none;
  border-radius:var(--r-md);overflow:hidden;border-style:none!important;box-shadow:var(--lift-shadow);
  opacity:0;transition:opacity .25s ease;
}
.peek.on{opacity:1}
.peek img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* ── Ficha de proyecto ──────────────────────────────────── */
.case{position:fixed;inset:0;z-index:80}
.case[hidden]{display:none}
.case-bd{position:absolute;inset:0;background:rgba(40,34,28,.28);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .4s ease}
.case.on .case-bd{opacity:1}
.case-panel{
  position:absolute;left:50%;top:50%;width:min(1080px,calc(100vw - 2 * var(--gut)));max-height:min(88vh,880px);
  overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:1.12fr .88fr;
  border-radius:var(--r-xl);background:rgba(255,255,255,.9);border:1px solid var(--glass-edge);box-shadow:var(--lift-shadow);
  transform:translate(-50%,-46%);opacity:0;transition:opacity .4s ease,transform .5s var(--ease);
}
.case.on .case-panel{opacity:1;transform:translate(-50%,-50%)}
.case-x{
  position:absolute;top:20px;right:var(--gut);z-index:3;display:inline-flex;align-items:center;gap:8px;
  height:42px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--glass-edge);
  background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--glass-shadow);
  font:600 14px/1 var(--f-ui);cursor:pointer;opacity:0;transition:opacity .4s ease,background .2s;
}
.case.on .case-x{opacity:1}
.case-x:hover{background:#fff}
.case-x span:last-child{font-size:18px;line-height:1}
.case-shot{position:relative;overflow:hidden;background:var(--bg-2);margin:10px;border-radius:calc(var(--r-xl) - 8px)}
.case-shot img{width:100%;height:100%;min-height:280px;object-fit:cover;object-position:top center}
.case-meta{display:flex;flex-direction:column;padding:clamp(26px,3.4vw,42px)}
.case-idx{margin-bottom:14px;color:var(--mute);font-size:14px;font-variant-numeric:tabular-nums}
.case-meta h2{font:600 clamp(40px,4.4vw,60px)/1 var(--f-display);letter-spacing:-.045em;margin-bottom:8px}
.case-kind{margin-bottom:20px;color:var(--accent-ink);font-weight:500}
.case-desc{margin-bottom:22px;color:var(--ink-2);font-size:16px;line-height:1.65}
/* Lo que se hizo, como línea de texto: nada de pastillas */
.case-tags{display:flex;flex-wrap:wrap;margin-bottom:26px;color:var(--mute);font-size:15px}
.case-tags li+li::before{content:"·";margin:0 8px}
.case-link{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;align-self:flex-start;margin-top:auto;
  height:50px;padding:0 24px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-weight:600;
  box-shadow:0 8px 20px -8px rgba(22,20,15,.5);transition:transform .2s var(--ease);
}
.case-link:hover{transform:translateY(-1px)}
.case-link[hidden]{display:none}
body.case-open{overflow:hidden}

.noscript{padding:40px var(--gut);text-align:center;color:var(--mute)}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:1080px){
  .case-panel{grid-template-columns:1fr;max-height:86vh}
  .case-shot img{min-height:0;aspect-ratio:16/10;height:auto}
}
@media (max-width:760px){
  .reel-row{padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
  .shot{width:min(74vw,300px);margin-right:12px}
  .shot-bar{transform:none;padding:8px 12px}
  .shot-name{font-size:14.5px}
  .shot-kind{display:none}
  .row{grid-template-columns:88px minmax(0,1fr) 24px;grid-template-areas:"thumb name go" "thumb kind go";gap:4px 16px;padding:16px 4px}
  .row:hover,.row:focus-visible{padding-left:8px}
  .row-n{display:none}
  .row-thumb{display:block;grid-area:thumb;border-radius:10px;overflow:hidden;aspect-ratio:16/10}
  .row-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center}
  .row-name{grid-area:name;font-size:24px}
  .row-kind{grid-area:kind;font-size:14px;line-height:1.35}
  .row-go{grid-area:go}
  .case-panel{width:calc(100vw - 24px);max-height:88vh;border-radius:var(--r-lg)}
  .case-meta{padding:22px 20px 26px}
  .case-link{width:100%}
  .case-x{top:12px;right:12px}
}
@media (hover:none),(pointer:coarse){
  .reel-hint{display:block}
  .reel-row:hover .reel-track{animation-play-state:running}
  .reel:has(.shot:hover) .shot{opacity:1}
  .reel .shot:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .reel-row{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .reel-row::-webkit-scrollbar{display:none}
  .reel-track{animation:none!important;transform:none!important}
  .shot{scroll-snap-align:center}
  .shot-bar{transform:none}
}