/* 61 · Dos lados rotulados. Parte de la base (proceso corto de la home, clases pv-) y añade clases p61-.
   Composición: render al centro; a la izquierda «Lo que pide el cliente» y a la derecha «Lo que entrega el estudio» como columnas fijas
   con papeles apilados (el paso activo nítido y delante, los anteriores detrás en gris al 35 %); dos líneas verticales, una a cada lado
   del render, que se rellenan en rojo con el scroll; debajo del render, tira de miniaturas y texto del paso. Sin hilo horizontal.
   Sin JS, con prefers-reduced-motion o con poca altura: lista estática de cuatro pasos (render + texto + material con su rótulo).
   El modo «vivo» se activa solo con la clase .cj (la pone un script del <head>). Solo se animan transform y opacity. */

.pv { --mesa: #e6e4df; --tinta2: #4d4d4d; padding-top: var(--sec); border-top: 1px solid var(--line-strong); }
.pv-cab { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.pv-cab .lead { color: var(--muted); max-width: 52ch; }

/* ---------- base (sin JS / reduced-motion): lista de cuatro pasos ---------- */
.pv-pista { background: var(--mesa); padding-block: var(--s-4); }
.pv-pasos { list-style: none; margin: 0 auto; padding: 0 var(--m); max-width: 1100px; display: grid; gap: 64px; }
.pv-paso { display: grid; gap: 24px; align-items: start; }
.pv-render { margin: 0; }
.pv-render img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--grid); }
.pv-render figcaption, .pv-papel figcaption, .pv-tf, .p61-r {
  font-family: var(--mono); font-size: 0.75rem; line-height: 1.3; letter-spacing: 0.05em; text-transform: uppercase;
}
.pv-render figcaption { display: none; }
.pv-f::after { content: " \00b7  "; }
.pv-tf { margin: 0 0 6px; color: var(--tinta2); }
.pv-tf .pv-f::after { content: none; }
.pv-texto h3 { margin: 0 0 8px; }
.pv-texto p:last-child { margin: 0; max-width: 46ch; }

.pv-material { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; align-items: start; }
.p61-r { grid-column: 1 / -1; margin: 0; color: var(--tinta2); }
.pv-papel {
  margin: 0; padding: 5px 5px 0; box-sizing: border-box; background: #fff; transform: rotate(var(--r, 0deg));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 14px 28px -12px rgba(0, 0, 0, 0.34);
}
.pv-papel img { display: block; width: 100%; height: auto; background: #fff; }
.pv-papel figcaption { padding: 6px 2px 7px; font-size: 0.625rem; color: var(--tinta2); letter-spacing: 0.04em; }
.pv-tira, .p61-rot, .p61-lin { display: none; }

@media (min-width: 760px) {
  .pv-paso { grid-template-columns: 1fr 1fr; gap: 16px 40px; }
  .pv-render { grid-column: 1; grid-row: 1 / span 3; }
  .pv-texto { grid-column: 2; grid-row: 1; }
  .pv-material { grid-column: 2; }
}

.pv-fin { padding-block: var(--s-4) var(--sec); }
.pv-fin .btn:focus-visible { outline: 3px solid var(--fg); outline-offset: 4px; }

/* ---------- modo vivo ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* escritorio: render al centro, columnas de cliente y estudio a los lados */
  @media (min-width: 1000px) and (min-height: 560px) {
    .cj .pv-pista { height: 360vh; height: 360svh; padding: 0; position: relative; }
    .cj .pv-escena {
      --W: min(44vw, calc((100vh - 400px) * 1.5)); --W: min(44vw, calc((100svh - 400px) * 1.5));
      position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; overflow: clip;
      display: grid; align-content: center; padding: var(--cab-h, 77px) var(--m) 24px;
      grid-template-columns: minmax(0, 1fr) 2px var(--W) 2px minmax(0, 1fr); column-gap: 28px; row-gap: 0;
      grid-template-rows: auto auto auto;
      grid-template-areas: "cl ll render lr cr" "cl ll tira lr cr" "cl ll texto lr cr";
    }
    .cj .pv-pasos, .cj .pv-paso { display: contents; }
    .cj .pv-render { grid-area: render; width: 100%; aspect-ratio: 3 / 2; position: relative; will-change: opacity; margin: 0; }
    .cj .pv-render img { height: 100%; }
    .cj .pv-render figcaption {
      display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .cj .pv-paso:not(:first-child) .pv-render { opacity: 0; }

    /* tira de miniaturas */
    .cj .pv-tira { grid-area: tira; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(100%, 460px); margin: 12px 0 0; justify-self: center; }
    .cj .pv-mini { position: relative; display: block; margin: 0; padding: 0; border: 0; background: var(--grid); cursor: pointer; aspect-ratio: 3 / 2; overflow: hidden; }
    .cj .pv-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .cj .pv-mini::after {
      content: ""; position: absolute; inset: 0; box-sizing: border-box; border: 2px solid var(--signal); opacity: 0; transition: opacity 250ms ease; pointer-events: none;
    }
    .cj .pv-mini.on::after { opacity: 1; }
    .cj .pv-mini:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }

    /* texto del paso (los cuatro apilados; solo se ve el activo) */
    .cj .pv-texto { grid-area: texto; margin-top: 14px; opacity: 0; transition: opacity 320ms ease; width: min(100%, 44ch); justify-self: center; text-align: center; }
    .cj .pv-texto.on { opacity: 1; }
    .cj .pv-texto h3 { margin: 0 0 6px; }
    .cj .pv-texto p:last-child { font-size: 0.95rem; line-height: 1.45; max-width: none; }

    /* rótulos fijos de las columnas y líneas verticales que se rellenan con el scroll */
    .cj .p61-rot {
      display: block; margin: 0; padding-bottom: 8px; align-self: start; z-index: 2;
      font-family: var(--mono); font-size: 0.75rem; line-height: 1.3; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg);
    }
    .cj .p61-rot-i { grid-area: cl; text-align: right; }
    .cj .p61-rot-d { grid-area: cr; text-align: left; }
    .cj .p61-r { display: none; }
    .cj .p61-lin { display: block; align-self: stretch; width: 2px; background: #c4c1ba; overflow: hidden; }
    .cj .p61-lin-i { grid-area: ll; }
    .cj .p61-lin-d { grid-area: lr; }
    .p61-lin i { display: block; width: 100%; height: 100%; background: var(--signal); transform-origin: 50% 0; transform: scaleY(0); }

    /* columnas de papeles: se apilan; el paso activo nítido y delante, los anteriores detrás en gris al 35 % */
    .cj .pv-material { position: relative; display: block; align-self: stretch; pointer-events: none; margin: 34px 0 0; }
    .cj .p61-cli { grid-area: cl; }
    .cj .p61-est { grid-area: cr; }
    .cj .pv-papel {
      position: absolute; left: var(--x, 0); top: var(--y, 0); width: var(--w, 50%); opacity: 0;
      transform: translate3d(-34px, 0, 0) rotate(var(--r, 0deg)); transition: opacity 260ms ease, transform 300ms ease;
    }
    .cj .p61-est .pv-papel { transform: translate3d(34px, 0, 0) rotate(var(--r, 0deg)); }
    .cj .pv-material.on .pv-papel, .cj .pv-material.ant .pv-papel { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
    .cj .pv-material.on .pv-papel {
      opacity: 1; transition: opacity 520ms ease var(--d, 0s), transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s);
    }
    .cj .pv-material.ant .pv-papel { opacity: 0.35; filter: grayscale(1); transition: opacity 420ms ease, transform 300ms ease; }
    .cj .pv-papel figcaption { font-size: 0.66rem; }
  }

  /* móvil y tableta (< 1000 px) con altura suficiente: sigue sticky; render, tira, texto y debajo las dos columnas */
  @media (max-width: 999px) and (min-height: 700px) {
    .cj .pv-pista { height: 360vh; height: 360svh; padding: 0; position: relative; }
    .cj .pv-escena {
      position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; overflow: clip;
      display: grid; align-content: start; padding: 70px var(--m) 14px;
      grid-template-columns: minmax(0, 1fr) 2px 2px minmax(0, 1fr); column-gap: 8px; row-gap: 0;
      grid-template-rows: auto auto auto auto minmax(0, 1fr);
      grid-template-areas: "render render render render" "tira tira tira tira" "texto texto texto texto" "hl ll lr hr" "cl ll lr cr";
    }
    .cj .pv-pasos, .cj .pv-paso { display: contents; }
    .cj .pv-render { grid-area: render; justify-self: center; width: min(100%, 54svh); aspect-ratio: 3 / 2; position: relative; will-change: opacity; margin: 0; }
    .cj .pv-render img { height: 100%; }
    .cj .pv-render figcaption {
      display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .cj .pv-paso:not(:first-child) .pv-render { opacity: 0; }
    .cj .pv-tira { grid-area: tira; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin: 8px 0 0; }
    .cj .pv-mini { position: relative; display: block; margin: 0; padding: 0; border: 0; background: var(--grid); cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden; }
    .cj .pv-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .cj .pv-mini::after {
      content: ""; position: absolute; inset: 0; box-sizing: border-box; border: 2px solid var(--signal); opacity: 0; transition: opacity 250ms ease; pointer-events: none;
    }
    .cj .pv-mini.on::after { opacity: 1; }
    .cj .pv-mini:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
    .cj .pv-texto { grid-area: texto; margin-top: 10px; opacity: 0; transition: opacity 320ms ease; width: min(100%, 44ch); justify-self: center; text-align: center; }
    .cj .pv-texto.on { opacity: 1; }
    .cj .pv-texto h3 { margin: 0 0 4px; font-size: 1.05rem; }
    .cj .pv-texto p:last-child { font-size: 0.85rem; line-height: 1.4; max-width: none; }
    .cj .p61-rot { display: block; margin: 10px 0 0; padding: 0 0 6px; font-family: var(--mono); font-size: 0.625rem; line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg); }
    .cj .p61-rot-i { grid-area: hl; }
    .cj .p61-rot-d { grid-area: hr; }
    .cj .p61-r { display: none; }
    .cj .p61-lin { display: block; align-self: stretch; width: 2px; background: #c4c1ba; overflow: hidden; margin-top: 10px; }
    .cj .p61-lin-i { grid-area: ll; }
    .cj .p61-lin-d { grid-area: lr; }
    .p61-lin i { display: block; width: 100%; height: 100%; background: var(--signal); transform-origin: 50% 0; transform: scaleY(0); }
    .cj .pv-material { position: relative; display: block; align-self: stretch; pointer-events: none; margin: 0; }
    .cj .p61-cli { grid-area: cl; }
    .cj .p61-est { grid-area: cr; }
    .cj .pv-papel {
      position: absolute; left: var(--x, 0); top: var(--y, 0); width: var(--w, 50%); opacity: 0; padding: 3px 3px 0;
      transform: translate3d(-24px, 0, 0) rotate(var(--r, 0deg)); transition: opacity 260ms ease, transform 300ms ease;
    }
    .cj .p61-est .pv-papel { transform: translate3d(24px, 0, 0) rotate(var(--r, 0deg)); }
    .cj .pv-material.on .pv-papel, .cj .pv-material.ant .pv-papel { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
    .cj .pv-material.on .pv-papel {
      opacity: 1; transition: opacity 520ms ease var(--d, 0s), transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s);
    }
    .cj .pv-material.ant .pv-papel { opacity: 0.35; filter: grayscale(1); transition: opacity 420ms ease, transform 300ms ease; }
    .cj .pv-papel figcaption { font-size: 0.625rem; padding: 3px 1px 4px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv-papel, .pv-texto, .pv-mini::after { transition: none; }
}