/* ─────────────────────────────────────────────────────────────
   CONTENIDO DEL CASO
   Plantilla reutilizable: copia esta estructura en cada proyecto.
   Vive dentro de una ventana (.window__content), que pone el
   margen interior y el aire final.
   ───────────────────────────────────────────────────────────── */

.window__content {
  padding: var(--pad, 2rem);
  /* Aire final: deja que el ultimo bloque suba lo bastante para revelarse. */
  padding-bottom: clamp(4rem, 12vh, 8rem);
}

/* Bloque de entrada: portada a la izquierda, titular y ficha a la derecha. */
.case__intro {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(1.5rem, 2.6vw, 2.5rem);
  align-items: start;
}

/* La rejilla coloca las piezas; los margenes van uno a uno para que la
   estructura pueda ser plana y el reveal las anime por separado. */
.case__intro > * + * { margin-top: 0; }

/* La portada solo cubre dos filas si hay parrafo de entrada bajo el titulo;
   sin el, se quedaria una fila vacia colgando entre la portada y la ficha. */
.case__intro:has(.case__lead) > .case__cover { grid-row: 1 / span 2; }
.case__intro > .case__head { grid-column: 2; }
.case__intro > .case__lead { grid-column: 2; margin-top: 1.5em; }
.case__intro > .case__facts { grid-column: 1 / -1; margin-top: 2.5em; }
.case__intro > .case__text { grid-column: 1 / -1; margin-top: 2.5em; }

/* Alineacion optica: el borde superior de la caja de texto queda por encima
   de las mayusculas. Se sube el titulo esa diferencia para que su altura de
   mayuscula case con el borde de la portada. Va en em: escala con el titulo. */
.case__intro .case__title { margin-top: -.166em; }

.case__cover {
  width: clamp(7rem, 11vw, 10.5rem);
  aspect-ratio: 1;
  margin: 0;
  border-radius: 1em;
  overflow: hidden;
  background-color: var(--bg-media);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08);
}

.case__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A todo el ancho el texto se volveria ilegible: se limita a una medida
   comoda, mientras las imagenes si aprovechan el panel entero. */
.case__head,
.case__lead,
.case__text,
.case__subtitle { max-width: 68ch; }

.case { font-size: clamp(0.875rem, 1.02vw, 1rem); line-height: 1.6; }

/* Ritmo: aire entre bloques, menos entre piezas del mismo bloque. */
.case > * + * { margin-top: 2.5em; }
.case__block > * + * { margin-top: 1.5em; }
.case__block > .case__figure + *,
.case__block > .case__row + *,
.case__block > * + .case__figure,
.case__block > * + .case__row,
.case__block > * + .case__grid { margin-top: 2.5em; }

.case__head { margin-top: 0; }

.case__title {
  margin: 0;
  font-size: 3.4em;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.case__kicker {
  margin: .5em 0 0;
  font-size: .82em;
  letter-spacing: .02em;
  opacity: .5;
}

.case__lead {
  margin-bottom: 0;
  color: var(--ink-2);
  font-size: 1.2em;
  line-height: 1.45;
  letter-spacing: -0.015em;
}

.case__text { margin-bottom: 0; color: var(--ink-muted); }

.case__subtitle {
  margin-bottom: 0;
  color: var(--ink-muted);
  font-size: .875em;
}

.case__subtitle + .case__text { margin-top: .6em; }

/* Ficha de datos */
.case__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1.25em;
  margin-bottom: 0;
  padding: 1.1em 0;
  border-top: .5px solid var(--hairline);
  border-bottom: .5px solid var(--hairline);
}

.case__facts dt {
  color: var(--ink-muted);
  font-size: .8125em;
}

.case__facts dd { margin: .2em 0 0; }

/* Medios: imagen, gif o video, mismo tratamiento */
.case__figure { margin: 0; }

.case__figure img,
.case__figure video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1em;
  background-color: var(--bg-media);
  /* Filete finisimo: las piezas con fondo blanco no se pierden en el panel. */
  box-shadow: 0 0 0 .5px var(--hairline);
}

.case__figure figcaption {
  margin-top: .7em;
  color: var(--ink-muted);
  font-size: .8125em;
  line-height: 1.4;
}

/* Dos medios en paralelo */
.case__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}

/* Variante apilada: una pieza partida en tramos (un mural muy apaisado),
   con separacion corta para que se lea como una sola. */
.case__row--stack {
  grid-template-columns: 1fr;
  gap: .5em;
}

/* Titulo de cada trabajo dentro de un caso: por debajo del titulo del caso,
   pegado a su etiqueta ("Trabajo 01"). */
.case__chapter {
  margin: 0;
  font-size: 1.7em;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.case__block > .case__subtitle + .case__chapter { margin-top: .35em; }

/* Serie de piezas del mismo formato, todas en una fila: asi la serie entera
   cabe de alto en el panel y se lee de un vistazo. En movil, a cuatro por
   fila quedarian diminutas: pasa a 2x2 (no a una columna, que serian cuatro
   pantallas de scroll). */
.case__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
}

@media (max-width: 767px) {
  .case__grid { grid-template-columns: 1fr 1fr; }
}

.case__grid .case__figure video { aspect-ratio: 848 / 1056; object-fit: cover; }

/* Pieza vertical suelta (9:16): a todo el ancho del panel seria una pared de
   video. Se centra y se limita a una medida que quepa de alto en pantalla. */
.case__figure--portrait {
  width: min(100%, 24rem);
  margin-inline: auto;
}

.case__figure--portrait video { aspect-ratio: 720 / 1280; }

/* Pieza vertical con su referencia al lado: el video manda el alto y la
   imagen de partida ocupa el ancho que sobraba, en vez de dejarlo en blanco. */
.case__pair {
  display: grid;
  grid-template-columns: minmax(0, 24rem) 1fr;
  gap: 1em;
  align-items: stretch;
}

/* Dentro del par ya no se centra: la rejilla la coloca. */
.case__pair > .case__figure--portrait { width: auto; margin-inline: 0; }

/* La referencia llega recortada y con fondo transparente: se le da una caja
   propia para que no flote sobre el blanco del panel. */
.case__ref {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 2em;
  border-radius: 1em;
  background-color: var(--bg-media);
}

.case__ref img { display: block; width: min(100%, 18rem); height: auto; }

.case__block > * + .case__pair { margin-top: 2.5em; }

/* Pieza que acompana a una fila de dos: ocupa lo mismo que una de ellas y
   se centra debajo, en vez de estirarse a todo el ancho. */
.case__figure--half {
  width: calc((100% - 1em) / 2);
  margin-inline: auto;
}

.case__row + .case__figure--half { margin-top: 1em; }

@media (max-width: 767px) {
  .case__pair { grid-template-columns: 1fr; }
  .case__ref { padding: 2.5em; }
}

/* Credito al pie del bloque: pequeño y apagado, como un pie de foto. */
.case__note {
  margin-bottom: 0;
  color: var(--ink-muted);
  font-size: .8125em;
  line-height: 1.4;
}

.case__block > .case__grid + .case__note { margin-top: 1.25em; }

@media (max-width: 767px) {
  .case__row { grid-template-columns: 1fr; }
  .case__intro { grid-template-columns: 1fr; }
  .case__cover { grid-row: auto; }
  .case__intro > .case__head { grid-column: 1; margin-top: 1.5em; }
  .case__intro > .case__lead { grid-column: 1; }
}

/* ─────────────────────────────────────────────────────────────
   CV
   Reutiliza la intro y la ficha de los casos. Cada seccion es una rejilla:
   la etiqueta a la izquierda y las entradas a la derecha, separadas por
   lineas de medio pixel, como la ficha.
   ───────────────────────────────────────────────────────────── */

.cv > * + * { margin-top: 3.5em; }

.case__facts a { color: inherit; text-decoration: none; text-underline-offset: .2em; }
.case__facts a:hover { text-decoration: underline; }

.cv__section {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) 1fr;
  column-gap: clamp(1.5rem, 2.6vw, 2.5rem);
  align-items: start;
}

.cv__section > * + * { margin-top: 0; }
.cv__section > :not(.cv__heading) { grid-column: 2; }

.cv__heading {
  grid-row: 1;
  margin: 0;
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* La entrada ocupa todo el ancho (fecha alineada con la ficha); solo el
   texto largo se limita a una medida comoda. */
.cv__item {
  padding: 1.1em 0;
  border-top: .5px solid var(--hairline);
}

.cv__heading + .cv__item { padding-top: .2em; border-top: 0; }

.cv__item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5em;
}

.cv__role { margin: 0; font-size: 1em; font-weight: 500; }

.cv__date {
  flex: none;
  margin: 0;
  color: var(--ink-muted);
  font-size: .875em;
  font-variant-numeric: tabular-nums;
}

.cv__org { margin: .15em 0 0; color: var(--ink-muted); }
.cv__desc { max-width: 62ch; margin: .6em 0 0; color: var(--ink-2); }

.cv__skills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1.5em;
  max-width: 62ch;
  padding-top: .2em;
}

.cv__skills h4 {
  margin: 0 0 .5em;
  color: var(--ink-muted);
  font-size: .875em;
  font-weight: 400;
}

.cv__skills ul { margin: 0; padding: 0; list-style: none; }
.cv__skills li { line-height: 1.75; }

@media (max-width: 767px) {
  .cv__section { grid-template-columns: 1fr; }
  .cv__section > :not(.cv__heading) { grid-column: 1; }
  .cv__heading { margin-bottom: .75em; }
  .cv__item-head { flex-direction: column; gap: .15em; }
}

/* ─────────────────────────────────────────────────────────────
   ARCHIVO
   ───────────────────────────────────────────────────────────── */

/* Dentro: rejilla densa y sin jerarquia. Ni titulo, ni ficha, ni pies.
   Los casos son documentos; esto es un cajon, y se lee como tal. */
.window__content.archive {
  padding-bottom: var(--pad, 2rem);
}

/* Mosaico en columnas (masonry): cada pieza conserva su proporcion, sin
   recortes. Tres columnas en escritorio, dos en movil. */
.archive__grid {
  column-count: 3;
  column-gap: .75em;
  margin: 0;
}

@media (max-width: 767px) {
  .archive__grid { column-count: 2; }
}

/* Con js/masonry.js: columnas reales, repartidas a la mas corta. */
.archive__grid.is-masonry {
  display: flex;
  align-items: flex-start;
  gap: .75em;
  column-count: auto;
}

.archive__col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: .75em;
  min-width: 0;
}

.archive__grid.is-masonry img { margin-bottom: 0; }

.archive__grid img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: .75em;
  break-inside: avoid;
  border-radius: .75em;
  background-color: var(--bg-media);
  box-shadow: 0 0 0 .5px var(--hairline);
}

/* ── DISCO 3D (Puro Chanela) ──
   Escena de Three.js (js/vinyl.js) sobre un escenario en el rojo del disco.
   Hasta que carga se ve la portada plana, centrada. */

.case__block > * + .vinyl { margin-top: 2.5em; }

.vinyl__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 1em;
  overflow: hidden;
  /* El rojo de la identidad (el de los retratos), igual en claro y oscuro:
     la funda blanca necesita contraste y asi el bloque es del disco. */
  background:
    radial-gradient(ellipse 65% 60% at 50% 38%, #ff5a5c 0%, transparent 100%),
    #fe4042;
}

.vinyl__stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .6s ease;
  cursor: grab;
  touch-action: pan-y;       /* en movil, arrastrar en vertical sigue haciendo scroll */
}

.vinyl__stage canvas:active { cursor: grabbing; }

.vinyl__poster {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 62%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .3);
  transform: translate(-50%, -50%);
  transition: opacity .6s ease;
  pointer-events: none;
}

.vinyl.is-ready canvas { opacity: 1; }
.vinyl.is-ready .vinyl__poster { opacity: 0; }

.vinyl__controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5em;
  margin-top: 1.25em;
}

.vinyl__btn {
  padding: .55em 1.1em;
  border: 0;
  border-radius: 99px;
  background-color: var(--fill);
  color: var(--ink);
  font-size: .875em;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}

.vinyl__btn:hover { background-color: var(--fill-hover); }
.vinyl__btn:focus-visible { outline: 2px solid var(--select); outline-offset: 2px; }
.vinyl__btn:disabled { opacity: .4; cursor: default; }

@media (max-width: 767px) {
  .vinyl__stage { aspect-ratio: 1; }
}

/* Piezas impresas (catalogo): esquinas rectas, como el papel. */
.case--print .case__figure img { border-radius: 0; }

/* ─────────────────────────────────────────────────────────────
   CLICK TO ZOOM (Osmo, basic)
   Las imagenes de los proyectos se amplian al pulsarlas. La capa
   va por encima de ventanas, barra y dock; solo el loader la tapa.
   ───────────────────────────────────────────────────────────── */

img[data-click-zoom],
[data-click-zoom] img,
[data-click-zoom-article] img {
  cursor: zoom-in;
}

/* Portada de cabecera y poster del vinilo: no se amplian. */
[data-click-zoom-article] .case__cover img,
[data-click-zoom-article] [data-vinyl] img {
  cursor: auto;
}

[data-click-zoom-lightbox] > img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 0.75em;
}

.click-zoom__lightbox {
  z-index: 1500;
  cursor: zoom-out;
  background-color: #000000e6;
  justify-content: center;
  align-items: center;
  padding: 3em;
  display: none;
  position: fixed;
  inset: 0%;
}

@media screen and (max-width: 767px) {
  .click-zoom__lightbox { padding: 1em; }
}