/* ============================================================
   PRISMA · archive.css
   Archivo visual de marcas del home al estilo de Public Work (Cosmos):
   columnas de 300px separadas 30px que siguen fuera de la vista, esquinas
   de 3px, placeholders grises, veladura + píldoras al pasar el cursor, y
   transición "similares" al entrar en una marca (la portada queda
   anclada, el resto se apaga y sus obras aparecen alrededor). El visor de
   obra va al final. Lo pinta js/archive-canvas.js desde js/archive-data.js.

   Es una sección a mitad de página y NUNCA atrapa el scroll:
   · Ventana (≥ 640 px): 100svh, el lienzo se arrastra con el puntero en
     los dos ejes y se mueve con la rueda horizontal o shift+rueda; la
     rueda vertical y el dedo vertical bajan la página. Velos de tinta
     arriba y abajo: las casillas nacen del negro del manifiesto y se
     hunden en el negro del que sale el showcase.
   · Flujo (< 640 px): el lienzo es la página (15 filas de 3 con el scroll
     normal), sin ventana y sin velos; el dedo vertical siempre es de la
     página (si una marca abierta es más ancha que la pantalla, el
     horizontal la desplaza de lado). Las chips se pegan arriba mientras se
     recorren las obras de una marca.
   ============================================================ */

/* Tokens del lienzo. Para la versión clara (blanca, como public.work)
   basta cambiar estos cuatro valores. */
.cv-section {
  --cv-bg: var(--ink);
  --cv-placeholder: var(--ink-2);
  --cv-pill-light-bg: var(--text-on-ink);
  --cv-pill-light-fg: var(--ink);
  --cv-pill-dark-bg: rgba(10, 10, 10, .55);
  --cv-pill-dark-fg: #fff;
  --cv-radius: 3px;
  position: relative;
  background: var(--cv-bg); color: var(--text-on-ink);
}

/* Escenario = la ventana al lienzo. El dedo vertical es de la página
   (pan-y); el horizontal y el ratón mueven el lienzo. */
.cv-stage {
  overflow: hidden;
  touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none;
}
.cv-stage.is-dragging { cursor: grabbing; }
.cv-stage.is-dragging .cv-tile { pointer-events: none; }

.cv-canvas { position: absolute; left: 0; top: 0; will-change: transform; }
/* Copia del lienzo que se arrastra y se apaga mientras se abre una marca
   (ventana) o que se funde mientras se recompone (flujo). */
.cv-canvas--ghost { pointer-events: none; z-index: 0; }
.cv-canvas--ghost .cv-tile { transition: none; }

/* Cabecera de la sección: la gramática de las demás secciones (kicker +
   una línea), no un aviso flotante encima del lienzo */
.cv-head { z-index: 3; pointer-events: none; }
.cv-head__line {
  margin-top: 14px; max-width: 58ch;
  font-size: var(--fs-lead); font-weight: 400; line-height: 1.5;
  color: var(--text-on-ink-2);
}
.cv-head__line [data-cv-status] { display: inline-block; transition: opacity .25s var(--ease-ui); }
.cv-head__line [data-cv-status].is-swap { opacity: 0; }
.cv-only-touch, .cv-only-flow { display: none; }
@media (hover: none) { .cv-only-fine { display: none; } .cv-only-touch { display: inline; } }

/* Chips: "← Marcas" y la marca abierta, solo dentro de una marca */
.cv-chips {
  z-index: 3; display: flex; gap: 6px; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease-ui), visibility 0s .2s;
}
.cv-chips.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s var(--ease-ui); }

/* ---------- Ventana (≥ 640 px) ---------- */
@media (min-width: 640px) {
  /* 200 % de la pantalla (pedido del usuario, 2026-10-02; primero 130 %):
     al llegar ya se ve que el archivo sigue hacia abajo, y durante una
     pantalla entera lo llena todo. overflow: clip (no hidden) para que los
     chips puedan ser sticky. */
  .cv-section { height: 200vh; height: 200svh; min-height: 1120px; overflow: hidden; overflow: clip; }
  .cv-stage { position: absolute; inset: 0; cursor: grab; }
  /* Velos: las casillas nacen de la tinta del manifiesto y se hunden en la
     del showcase (sustituyen al velo del header de la portada de antes) */
  .cv-section::before,
  .cv-section::after {
    content: ''; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
  }
  /* Velos más largos pero con caída suave: con la sección centrada en la
     pantalla, lo que asoma de ellos es ya casi transparente. */
  .cv-section::before { top: 0; height: 28vh; background: linear-gradient(180deg, var(--ink) 0%, rgb(var(--ink-rgb) / .82) 22%, rgb(var(--ink-rgb) / .45) 50%, rgb(var(--ink-rgb) / .14) 78%, rgb(var(--ink-rgb) / 0) 100%); }
  .cv-section::after { bottom: 0; height: 26vh; background: linear-gradient(0deg, var(--ink) 0%, rgb(var(--ink-rgb) / .82) 22%, rgb(var(--ink-rgb) / .45) 50%, rgb(var(--ink-rgb) / .14) 78%, rgb(var(--ink-rgb) / 0) 100%); }
  .cv-head { position: absolute; top: clamp(84px, 12vh, 120px); left: 0; right: 0; }
  /* La cabecera queda sobre las casillas: un velo propio pegado al texto
     (horizontal, con los bordes de arriba y abajo difuminados) y sombra
     cerrada en las letras. Así se lee sobre cualquier foto sin apagar
     toda la franja de arriba del lienzo. */
  .cv-head::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    left: 0; top: -56px; bottom: -64px; width: min(100%, 940px);
    background: linear-gradient(90deg, rgb(var(--ink-rgb) / .9) 0%, rgb(var(--ink-rgb) / .84) 70%, rgb(var(--ink-rgb) / 0) 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 68%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 68%, transparent 100%);
  }
  .cv-head .kicker,
  .cv-head__line { text-shadow: 0 0 2px rgb(var(--ink-rgb) / .9), 0 0 8px rgb(var(--ink-rgb) / .8), 0 0 18px rgb(var(--ink-rgb) / .7); }
  /* Pegados al borde de abajo de la PANTALLA mientras se ve la sección
     (sticky dentro de los 130 %): con la sección más alta que la pantalla,
     abajo del todo quedaban fuera de la vista. */
  .cv-chips { position: sticky; top: calc(100vh - 54px); top: calc(100svh - 54px); width: max-content; margin-inline: auto; max-width: calc(100vw - 32px); }
}

/* ---------- Flujo (< 640 px): el lienzo es la página ---------- */
@media (max-width: 639px) {
  .cv-section { overflow-x: clip; padding-block: calc(var(--sect) / 2); }
  .cv-head { position: relative; margin-bottom: 22px; }
  .cv-only-fine, .cv-only-touch { display: none; }
  .cv-only-flow { display: inline; }
  /* pegadas bajo el header (70 px, que se esconde al bajar) mientras se
     recorren las obras; el hueco queda reservado aunque no se vean */
  .cv-chips { position: sticky; top: 76px; height: 34px; margin-bottom: 12px; }
  /* alto reservado hasta que el JS mide (sin salto de maquetación): lo
     escribe scripts/generate.js en la etiqueta. --cv-k es el alto del
     tablero en anchos de columna (la misma espiral del lienzo, promediada
     en los teléfonos comunes); la columna mide (100vw − 32px) / 3.
     Sin --cv-k, 9,45 (15 filas × 75 px a 390). */
  .cv-stage { position: relative; height: calc(var(--cv-rows, 15) * 75px); height: calc(var(--cv-k, 9.45) * (100vw - 32px) / 3); cursor: default; }
  .cv-stage.is-sizing { transition: height .5s var(--ease-enter); }
}

/* Pieza: <button> con la imagen y las píldoras de hover */
.cv-tile {
  position: absolute; left: 0; top: 0;
  display: block; padding: 0; border: 0; margin: 0;
  background: var(--cv-placeholder); border-radius: var(--cv-radius);
  overflow: hidden; cursor: inherit; color: inherit; font: inherit; text-align: left;
  will-change: transform, opacity;
  transition: opacity .22s var(--ease-ui);
}
.cv-tile img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .35s var(--ease-ui), transform .6s var(--ease-soft);
}
/* Hover mínimo: la imagen crece un 3 % dentro de su marco (el marco no se
   mueve, así no compite con el transform en línea que coloca la casilla). */
@media (hover: hover) {
  .cv-tile:not(.is-focus):hover img.is-loaded { transform: scale(1.03); }
}
.cv-tile img.is-loaded { opacity: 1; }
.cv-tile.is-out { opacity: 0; pointer-events: none; }
.cv-tile.is-in { opacity: 0; }
/* Ventana: las casillas esperan apagadas hasta emerger desde el centro de
   la sección (archive-canvas.js → emergeAll, una vez, al cruzar la mitad) */
.cv-section.is-pre .cv-tile { opacity: 0; }
.cv-tile:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Veladura (40% negro) + píldoras: solo con hover real o foco de teclado */
.cv-tile__scrim {
  position: absolute; inset: 0; background: rgb(var(--shadow-rgb) / .4);
  opacity: 0; transition: opacity .2s var(--ease-ui); pointer-events: none;
}
.cv-pill {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: 999px;
  font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap;
  opacity: 0; transform: translateY(2px);
  transition: opacity .2s var(--ease-ui), transform .2s var(--ease-ui);
  pointer-events: none;
}
.cv-pill svg { width: 14px; height: 14px; flex: none; }
.cv-pill--tr { top: 8px; right: 8px; background: var(--cv-pill-light-bg); color: var(--cv-pill-light-fg); max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; display: block; line-height: 34px; }
.cv-pill--bl { left: 8px; bottom: 8px; background: var(--cv-pill-dark-bg); color: var(--cv-pill-dark-fg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.cv-pill--br { right: 8px; bottom: 8px; width: 34px; padding: 0; justify-content: center; background: var(--cv-pill-dark-bg); color: var(--cv-pill-dark-fg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .cv-tile:hover .cv-tile__scrim, .cv-tile:hover .cv-pill { opacity: 1; transform: none; }
  .cv-tile:hover .cv-pill--bl { opacity: .85; }
}
.cv-tile:focus-visible .cv-tile__scrim, .cv-tile:focus-visible .cv-pill { opacity: 1; transform: none; }
@media (max-width: 639px) {
  .cv-pill { height: 28px; padding: 0 10px; font-size: 12px; }
  .cv-pill--tr { line-height: 28px; }
  .cv-pill--br { width: 28px; }
}

.cv-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: 999px; border: 0; font: inherit; font-size: 14px; font-weight: 500; line-height: 1;
  background: var(--glass-pill); color: var(--text-on-ink-2);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  white-space: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis;
  transition: color .2s var(--ease-ui), background-color .2s var(--ease-ui), opacity .2s var(--ease-ui), transform .2s var(--ease-ui);
}
button.cv-chip { cursor: pointer; }
button.cv-chip:hover { color: var(--text-on-ink); }
.cv-chip--on { background: var(--cv-pill-light-bg); color: var(--cv-pill-light-fg); }
.cv-chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---------- Pieza centrada ---------- */
.cv-tile.is-focus {
  z-index: 2; cursor: default;
  box-shadow: var(--shadow-lg);
}
.cv-tile.is-focus.has-more { cursor: pointer; }
.cv-tile.is-focus .cv-tile__scrim { opacity: 0; }
.cv-tile.is-focus .cv-pill--tr, .cv-tile.is-focus .cv-pill--bl { display: none; }
@media (hover: hover) {
  .cv-tile.is-focus.has-more:hover .cv-pill--br { opacity: 1; transform: none; }
}

/* Rótulo bajo la pieza centrada: viaja con el lienzo */
.cv-caption {
  position: absolute; z-index: 2;
  display: flex; align-items: baseline; gap: 12px;
  font-size: .84rem; line-height: 1.35; color: var(--text-on-ink-2);
  pointer-events: none;
}
.cv-caption[hidden] { display: none; }
.cv-caption__t { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-caption__t strong { color: var(--text-on-ink); font-weight: 500; }
.cv-caption__dots { display: flex; gap: 5px; align-items: center; flex: none; }
.cv-caption__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--fg-rgb) / .28); }
.cv-caption__dots i.is-on { background: var(--orange); }

/* Flechas: pieza anterior / siguiente de la marca */
.cv-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 999px; border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--glass); color: var(--on-photo);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: opacity .2s var(--ease-ui), transform .16s var(--ease-snap);
}
.cv-nav svg { width: 20px; height: 20px; }
.cv-nav:hover { transform: translateY(-50%) scale(1.06); }
.cv-nav:active { transform: translateY(-50%) scale(.94); }
.cv-nav:disabled { opacity: .25; cursor: default; }
.cv-nav:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.cv-nav--prev { left: 18px; }
.cv-nav--next { right: 18px; }
.cv-nav[hidden] { display: none; }
@media (max-width: 639px) {
  .cv-nav { display: none; }       /* flujo: tocar una pieza la centra */
  .cv-caption { font-size: .78rem; gap: 8px; }
}


/* ---------- Ficha en grande (al pulsar la pieza centrada) ---------- */
.cv-light {
  border: 0; padding: 0; margin: 0; background: transparent; color: var(--text-on-ink);
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; inset: 0;
}
/* Color literal a propósito: ::backdrop no hereda las variables de :root en
   todos los navegadores y con var() el fondo quedaba transparente. Es el
   mismo --ink (10 10 10) que el resto del sitio. */
.cv-light::backdrop { background: rgb(10 10 10 / .94); }
.cv-light[open] {
  /* El velo va en el propio diálogo (cubre todo el viewport): no depende de
     que ::backdrop pinte, que en la práctica no lo hacía. */
  background: rgb(10 10 10 / .94);
  display: grid; grid-template-columns: minmax(0, 1fr) min(400px, 36vw);
  opacity: 1; transform: none;
  transition: opacity .28s var(--ease-ui), transform .42s var(--ease-enter);
  @starting-style { opacity: 0; transform: scale(.985); }
}
.cv-light__media { display: grid; place-items: center; min-width: 0; min-height: 0; padding: clamp(18px, 4vh, 44px); }
.cv-light__media img[hidden], .cv-light__media video[hidden] { display: none; }
.cv-light__media img, .cv-light__media video {
  display: block; width: auto; height: auto; max-width: 100%;
  max-height: calc(100dvh - 2 * clamp(18px, 4vh, 44px)); object-fit: contain;
  border-radius: var(--r-md); background: var(--cv-placeholder);
}
.cv-light__panel {
  background: var(--ink-2);
  display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: auto;
  padding: clamp(24px, 5vh, 56px) clamp(22px, 2.6vw, 44px) clamp(24px, 4vh, 40px);
  border-left: 1px solid var(--line-on-ink);
}
.cv-light__brand { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.cv-light__title { font-size: var(--fs-h3); font-weight: 500; line-height: 1.16; letter-spacing: -0.01em; text-wrap: balance; }
.cv-light__desc { color: var(--text-on-ink-2); font-size: .98rem; }
.cv-light__link {
  margin-top: 10px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 18px; height: 42px; border-radius: 4px; border: 1px solid var(--line-on-ink);
  font-weight: 500; transition: color .2s var(--ease-ui), border-color .2s var(--ease-ui), background-color .2s var(--ease-ui);
}
.cv-light__link svg { width: 14px; height: 14px; }
.cv-light__link:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.cv-light__close, .cv-light__nav {
  position: fixed; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--cv-pill-dark-bg); color: var(--cv-pill-dark-fg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: background-color .2s var(--ease-ui), color .2s var(--ease-ui), transform .16s var(--ease-snap);
}
.cv-light__close svg, .cv-light__nav svg { width: 18px; height: 18px; }
.cv-light__close { top: 16px; right: 16px; }
.cv-light__nav { top: 50%; transform: translateY(-50%); }
.cv-light__nav--prev { left: 16px; }
.cv-light__nav--next { right: calc(min(400px, 36vw) + 16px); }
.cv-light__nav:disabled { opacity: .35; cursor: default; }
.cv-light__close:hover, .cv-light__nav:not(:disabled):hover { background: var(--orange); color: var(--ink); }
.cv-light__close:active, .cv-light__nav:not(:disabled):active { transform: scale(.94); }
.cv-light__nav:active:not(:disabled) { transform: translateY(-50%) scale(.94); }
@media (max-width: 899px) {
  .cv-light[open] { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .cv-light__media { padding: 64px 16px 12px; }
  .cv-light__media img, .cv-light__media video { max-height: calc(100dvh - 76px - 40vh); }
  .cv-light__panel { border-left: 0; border-top: 1px solid var(--line-on-ink); max-height: 40vh; padding: 18px 20px 24px; gap: 10px; }
  .cv-light__nav--next { right: 16px; }
  .cv-light__nav { top: auto; bottom: calc(40vh + 12px); transform: none; }
  .cv-light__nav:active:not(:disabled) { transform: scale(.94); }
}
@media (prefers-reduced-motion: reduce) { .cv-light[open] { transition: none; } .cv-stage.is-sizing { transition: none; } }

/* Columnas que se cruzan con el scroll (js/archive-canvas.js →
   updateParallax): `translate` se suma al transform de cada casilla, así no
   toca su colocación ni sus transiciones. Solo el tablero de marcas lleva
   data-par. */
@media (min-width: 640px) and (prefers-reduced-motion: no-preference) {
  .cv-tile[data-par="0"] { translate: 0 calc(var(--cv-par, 0px) * -1); }
  .cv-tile[data-par="1"] { translate: 0 var(--cv-par, 0px); }
}