/* Works band: curved row of website screens (built by curve.js) */
.cv { position: relative; height: calc(var(--cv-h, 200px) * 1.5 + 32px); margin: 0 calc(50% - 50vw) 48px; overflow: hidden;
  perspective: var(--cv-p, 1600px); perspective-origin: 50% 50%;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.cv.dragging { cursor: grabbing; }
.cv-stage { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.cv-tile { pointer-events: auto; }
.cv-tile { position: absolute; left: 50%; top: 50%; width: var(--cv-w, 300px); height: var(--cv-h, 190px);
  margin: calc(var(--cv-h, 190px) / -2) 0 0 calc(var(--cv-w, 300px) / -2);
  border-radius: 14px; overflow: hidden; background: var(--card, #fff); backface-visibility: hidden; will-change: transform;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 30px 60px -36px rgba(0,0,0,.55);
  transition: box-shadow .45s var(--ease, ease); -webkit-tap-highlight-color: transparent; }
.cv-tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none;
  transition: transform .9s var(--ease, ease), filter .45s; }
.cv-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 26px 16px 13px; color: #fff; font-size: .82rem; line-height: 1.25;
  background: linear-gradient(180deg, transparent, rgba(3,9,15,.82)); opacity: 0; transform: translateY(8px);
  transition: opacity .4s var(--ease, ease), transform .4s var(--ease, ease); pointer-events: none; }
.cv-t { font-weight: 500; letter-spacing: -.01em; }
.cv-u { display: inline-flex; flex: none; color: rgba(255,255,255,.85); }
.cv-u svg { width: 15px; height: 15px; }
.cv-tile.on { box-shadow: 0 0 0 2px var(--blue, #3b8fb3), 0 40px 70px -36px rgba(0,0,0,.7); }
.cv-tile.on img { transform: scale(1.03); }
.cv-tile.on .cv-cap { opacity: 1; transform: none; }
.cv:has(.cv-tile.on) .cv-tile:not(.on) img { filter: saturate(.7) brightness(.82); }
html:not([data-theme="light"]) .cv-tile { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 34px 60px -34px rgba(0,0,0,.95); }
html:not([data-theme="light"]) .cv-tile.on { box-shadow: 0 0 0 2px var(--blue, #3b8fb3), 0 40px 70px -30px rgba(0,0,0,.95); }

/* The page's own project links stay in the HTML for Google and keyboards,
   but are visually hidden: the band shows the works. Only the closing card shows. */
.has-cv #trabajos .works { display: block; }
.has-cv #trabajos .works > li:not(.next-li) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.has-cv #trabajos .next-li { display: block; margin-top: 8px; }
.has-cv #trabajos .next { width: 100%; aspect-ratio: auto; min-height: 0; flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: 20px 32px; padding: 32px; }
.has-cv #trabajos .next .label { width: 100%; }
.has-cv #trabajos .next-t { font-size: clamp(1.8rem, 3vw, 2.6rem); flex: 1 1 auto; }

@media (max-width: 639px) {
  .cv { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .cv { margin-bottom: 36px; height: calc(var(--cv-h, 160px) * 1.3 + 24px); }
  .cv-cap { padding: 22px 12px 10px; font-size: .76rem; }
  .has-cv #trabajos .next { padding: 24px; }
}
.cv-tile.is-concept { cursor: zoom-in; }
.cv-u .cv-c { margin-right: 8px; }
.cv-c { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border: 1px solid rgba(255,255,255,.35); border-radius: 99px; }

/* large view of a concept */
.cv-lb { width: min(1180px, calc(100vw - 32px)); max-width: none; max-height: calc(100svh - 32px); padding: 0; border: 0; border-radius: 16px; background: #0b0f14; color: #fff; overflow: visible; }
.cv-lb::backdrop { background: rgba(3, 9, 15, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cv-lb[open] { animation: cv-lb-in .45s var(--ease, ease); }
.cv-lb[open]::backdrop { animation: cv-lb-fade .45s ease; }
@keyframes cv-lb-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes cv-lb-fade { from { opacity: 0; } }
.cv-lb figure { margin: 0; }
.cv-lb img { display: block; width: 100%; height: auto; max-height: calc(100svh - 110px); object-fit: contain; object-position: top; border-radius: 16px 16px 0 0; background: #fff; }
.cv-lb figcaption { display: flex; align-items: center; gap: 12px; padding: 14px 18px; font-size: .9rem; }
.cv-lb-t { font-weight: 500; margin-right: auto; }
.cv-lb-x { position: absolute; top: -14px; right: -14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: #03090f; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); }
.cv-lb-x svg { width: 18px; height: 18px; }
@media (max-width: 639px) { .cv-lb-x { top: -44px; right: 0; width: 34px; height: 34px; } .cv-lb figcaption { padding: 12px 14px; } }

/* keyboard focus on the hidden list shows on the matching screen */
.cv.kb .cv-tile.on { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--blue, #3b8fb3), 0 40px 70px -36px rgba(0,0,0,.7); }
:root[data-theme="light"] .cv.kb .cv-tile.on { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #03090f, 0 40px 70px -36px rgba(0,0,0,.7); }
.cv-cap { background: linear-gradient(180deg, transparent, rgba(3,9,15,.72) 40%, rgba(3,9,15,.94)); }
.cv-c { background: rgba(3,9,15,.7); }
.cv-lb-go { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; background: #fff; color: #03090f; font-weight: 500; font-size: .86rem; text-decoration: none; }
.cv-lb-go svg { width: 14px; height: 14px; }
.cv-lb [hidden] { display: none; }