/* ============================================================
 * scenes.css — Header global + escenas. (Home base; el resto del
 * recorrido se estiliza al construir cada escena.)
 * ============================================================ */

/* ---- Header global ---- */
.header {
  position: fixed; inset: 0 0 auto 0;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap);
  z-index: var(--z-header);
  padding-top: clamp(0.5rem, 1.2vw, 1rem);
  mix-blend-mode: normal;
}
/* Logo adaptativo: dos versiones apiladas, crossfade seamless por data-bg */
.header__logo { position: relative; display: block; height: 1.5rem; width: auto; }
.header__logo-img {
  height: 1.5rem; width: auto; display: block;
  transform-origin: left center;
  transition: opacity var(--dur) var(--ease-soft), transform var(--dur) var(--ease-soft);
}
/* En proyecto el logo se reduce para dar prioridad al proyecto */
[data-view='project'] .header__logo-img { transform: scale(0.82); }
.header__logo-img--dark { position: absolute; inset: 0; opacity: 0; }
[data-bg='dark'] .header__logo-img--light { opacity: 0; }
[data-bg='dark'] .header__logo-img--dark { opacity: 1; }

.header__tagline {
  text-align: right;
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: var(--ink);
  transition: color var(--dur) var(--ease-soft),
              opacity var(--dur) var(--ease-soft),
              transform var(--dur) var(--ease-soft);
}
.header__credit { display: block; font-weight: 400; color: var(--muted); }
[data-bg='dark'] .header__tagline { color: var(--ink-invert); }
[data-bg='dark'] .header__credit { color: rgba(255,255,255,0.6); }

/* Vol.3: la frase del header queda FIJA (no se mueve) y solo reacciona a su
   fondo (el color lo resuelven las reglas [data-bg='dark'] de arriba). */

/* ---- Switch de universo (centrado en el header; presente en todo momento) ---- */
.header__switch {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 0.7rem;
  pointer-events: auto;
}
.hsw {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--t-meta); letter-spacing: 0.06em;
  color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: color var(--dur) var(--ease-soft);
}
.hsw.is-active { color: var(--ink); cursor: default; }
.hsw:not(.is-active):hover { color: var(--ink); }
/* Riel + punto que indica el universo activo (verde acento) */
.hsw__track { position: relative; width: 30px; height: 1px; background: var(--ink); opacity: 0.35; }
.hsw__dot {
  position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); transform: translate(-50%, -50%);
  transition: left var(--dur) var(--ease-soft);
}
[data-studio='punkt'] .hsw__dot { left: 0; }
[data-studio='rd']    .hsw__dot { left: 100%; }
/* Color-adaptativo sobre fondo oscuro (igual que logo/tagline) */
[data-bg='dark'] .hsw { color: rgba(255, 255, 255, 0.5); }
[data-bg='dark'] .hsw.is-active,
[data-bg='dark'] .hsw:not(.is-active):hover { color: var(--ink-invert); }
[data-bg='dark'] .hsw__track { background: var(--ink-invert); }

/* ---- Velo de transición entre universos (cross-fade sutil) ---- */
.universe-veil {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: none; opacity: 0;
  will-change: opacity; pointer-events: none;
}

@media (max-width: 720px) {
  /* Móvil: prioridad logo + switch; la frase decorativa se oculta */
  .header__tagline { display: none; }
  .header__switch { gap: 0.5rem; }
  .hsw__track { width: 20px; }
  .hsw { font-size: 0.72rem; }
}

/* ---- Home: fila editorial con hover expansivo (cabe en UNA pantalla) ---- */
.home {
  height: 100vh; box-sizing: border-box;
  padding-top: calc(var(--header-h) + clamp(1.5rem, 7vh, 4.5rem));
  padding-bottom: var(--margin);
  display: flex; align-items: center;
}
.home__row {
  --card-w: clamp(170px, 16vw, 255px);  /* Vol.3 (rev): portadas anchas */
  display: flex;
  align-items: flex-start;          /* metadatos alineados arriba en toda la fila */
  justify-content: center;          /* fila centrada con aire a los lados */
  gap: var(--gap);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

.hcard {
  position: relative;
  flex: 0 0 auto;                   /* ancho fijo: las vecinas no se comprimen */
  width: var(--card-w);
  display: flex; flex-direction: column; gap: 0.5rem;
  text-decoration: none; color: inherit;
  will-change: width;
}
/* Fallback sin JS — cuando GSAP está, .js-hover desactiva esto y el tween manda.
   Solo la enfocada crece; las demás conservan su ancho (no se apeñuzan). */
.home__row:not(.js-hover) .hcard { transition: width var(--dur) var(--ease-soft); }
.home__row:not(.js-hover) .hcard:hover { width: calc(var(--card-w) * 1.3); }

.hcard__index { display: block; }
.hcard__meta { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 0.35rem; }
.hcard__name {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  font-weight: 600; line-height: 1.1;
  margin: 0.05rem 0 0.15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Altura FIJA proporcional al ancho (aspecto ≈ portada 2161×2845 ≈ 0.76) para que
   NO se corte el logo/nombre. Ancho y alto escalan juntos por vw → aspecto constante.
   Altura fija (no aspect-ratio) → el hover ensancha sin crecer en alto (sin scrollbar). */
.hcard__cover {
  position: relative;
  height: clamp(224px, 21vw, 335px);
  overflow: hidden; background: var(--soft);
}
.hcard__cover .media, .hcard__cover .ph {
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform;
}
.home__row:not(.js-hover) .hcard__cover .media {
  transform: scale(1.001);
  transition: transform 1.2s var(--ease-soft);
}
.home__row:not(.js-hover) .hcard:hover .hcard__cover .media { transform: scale(1.05); }

.hcard--soon { opacity: 0.5; cursor: default; }
.hcard__soon { color: var(--accent); margin-top: 0.5rem; }

[data-bg='dark'] .hcard__cover { background: var(--near-black); }

@media (max-width: 900px) {
  .home { height: auto; min-height: 0; padding-top: calc(var(--header-h) + 1.5rem); padding-bottom: var(--margin); }
  .home__row { flex-wrap: wrap; gap: clamp(1.25rem, 4vw, 2rem) var(--gap); }
  .hcard,
  .home__row:not(.js-hover) .hcard:hover { width: calc(50% - var(--gap) / 2); }
  /* Aspecto de la portada → imagen completa sin recorte en móvil */
  .hcard__cover { height: auto; aspect-ratio: 2161 / 2845; }
}
@media (max-width: 560px) {
  .hcard,
  .home__row:not(.js-hover) .hcard:hover { width: 100%; }
  .hcard__name { white-space: normal; }
}

/* ============================================================
 * Recorrido de proyecto (6 escenas)
 * ============================================================ */
.pj { background: var(--bg); }
.pj [data-bg='dark'] { background: var(--bg-dark); color: var(--ink-invert); }

/* Bloque de título compartido (Apertura / Explicación) */
.pj-block { display: flex; flex-direction: column; justify-content: flex-end; }
/* Cuerpo ~20pt / interlineado ~24pt (1.2) / tracking 0.
   Vol.3: el cuerpo llega hasta donde finaliza el año (ancho completo de la columna). */
.pj-block__body {
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem); line-height: 1.2; letter-spacing: 0;
  color: var(--ink);
  max-width: none; margin: 0 0 1.4rem;
}
/* Título en UNA sola línea (fitTitles() ajusta el tamaño para que quepa) */
.pj-title {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: var(--t-title); line-height: 0.92; letter-spacing: var(--tracking-tight);
  white-space: nowrap; margin: 0;
}
.pj-block__foot {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 0.5rem;
}
.pj-block__loc, .pj-block__year {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-body);
}
/* Vol.3 — RD: título (Instrument Serif) SIN mayúscula sostenida; pie en DM Sans Regular */
[data-studio='rd'] .pj-title { text-transform: none; }
[data-studio='rd'] .pj-block__loc,
[data-studio='rd'] .pj-block__year { font-family: var(--font-body); font-weight: 400; }
/* Vol.3 — apertura sin recorte agresivo (p.ej. Doslugares): foto completa.
   El fondo oscuro del marco fusiona con las fotos sobre negro → sin barras visibles.
   Especificidad alta (.pj-apertura__media.pj-media--contain) para ganarle a la regla cover. */
.pj-apertura__media.pj-media--contain .media,
.pj-apertura__media.pj-media--contain .ph { object-fit: contain; }

/* ---- 1 · Apertura: texto izq · imagen dcha ---- */
.pj-apertura { min-height: 100vh; display: flex; align-items: center;
  padding-top: calc(var(--header-h) + clamp(1rem, 4vh, 2.5rem)); padding-bottom: var(--margin); }
.pj-apertura__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2.5rem);
  align-items: stretch; width: 100%;
}
.pj-apertura .pj-block { padding-bottom: 0.2rem; }
.pj-apertura__media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-dark); }
.pj-apertura__media .media, .pj-apertura__media .ph { width: 100%; height: 100%; object-fit: cover; }

/* ---- 2 · Mosaico: fila de 4 sobre negro. Al hacer hover una crece y las
   demás CONSERVAN su tamaño (se salen por los laterales, recortadas) ---- */
.pj-mosaico { min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: clamp(3rem, 10vh, 7rem) 0; }
.pj-mos__row {
  --mos-w: clamp(200px, 21vw, 360px);   /* Vol.3 (rev): cajas más anchas ("gorditas") */
  display: flex; align-items: center; justify-content: center;
  gap: var(--gap); width: 100%; max-width: var(--maxw); margin-inline: auto;
}
/* Altura fija + ancho base fijo: solo la enfocada crece; el resto conserva tamaño */
.pj-mos__cell {
  flex: 0 0 auto;
  width: var(--mos-w);
  height: min(54vh, 560px);
  overflow: hidden; background: var(--near-black);
  will-change: width;
}
.pj-mos__cell .media, .pj-mos__cell .ph {
  width: 100%; height: 100%; object-fit: cover; will-change: transform;
}
/* Fallback sin JS — solo la enfocada crece (SOLO Punkt: el mosaico horizontal de
   RD no debe tener hover). Acotado con :not(.pj-mosaico--h). */
.pj-mosaico:not(.pj-mosaico--h) .pj-mos__row:not(.js-hover) .pj-mos__cell { transition: width var(--dur) var(--ease-soft); }
.pj-mosaico:not(.pj-mosaico--h) .pj-mos__row:not(.js-hover) .pj-mos__cell:hover { width: calc(var(--mos-w) * 1.2); }
/* RD horizontal: jamás cambia de ancho por hover */
.pj-mosaico--h .pj-mos__cell:hover { width: min(80vw, 1100px); }

/* ---- Mosaico RD: scroll-jack HORIZONTAL (equivalente al Brandbook, sin hover) ---- */
.pj-mosaico--h { overflow: hidden; padding: 0; }
.pj-mosh__pin { height: 100vh; display: flex; align-items: center; overflow: hidden; }
.pj-mosh__viewport { width: 100%; overflow: hidden; }
.pj-mosaico--h .pj-mosh__track {
  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--gap);
  width: max-content; will-change: transform;
}
.pj-mosaico--h .pj-mos__cell {
  flex: 0 0 auto;
  width: min(80vw, 1100px);    /* una imagen grande a la vez; la siguiente asoma */
  height: min(74vh, 760px);
}

/* ---- 3 · Explicación: imagen izq · texto dcha ---- */
.pj-explica { min-height: 100vh; display: flex; align-items: center;
  padding-top: calc(var(--header-h) + clamp(1rem, 4vh, 2.5rem)); padding-bottom: var(--margin); }
.pj-explica__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2.5rem);
  align-items: stretch; width: 100%;
}
.pj-explica__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--soft); }
.pj-explica__media .media, .pj-explica__media .ph { width: 100%; height: 100%; object-fit: cover; }

/* ---- 4 · Brandbook: scroll-jack VERTICAL con rótulo fijo.
   La página se ancla; el scroll desplaza las 7 láminas en vertical
   (sin necesidad de mover el cursor); al terminar continúa el recorrido. ---- */
.pj-bb__pin { height: 100vh; display: flex; align-items: stretch; overflow: hidden; }
.pj-bb__aside {
  flex: 0 0 clamp(220px, 26vw, 360px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--margin) clamp(1rem, 2vw, 2rem) var(--margin) var(--margin);
}
.pj-bb__label {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: var(--t-h2); line-height: 0.95; margin: 0 0 0.8rem;
}
.pj-bb__body {
  font-family: var(--font-body); font-weight: 300;
  font-size: var(--t-meta); line-height: 1.5; color: var(--ink); max-width: 34ch; margin: 0;
}
.pj-bb__viewport { flex: 1 1 auto; overflow: hidden; }
.pj-bb__track {
  display: flex; flex-direction: column; align-items: center; gap: var(--gap);
  will-change: transform;
}
.pj-bb__slide {
  flex: 0 0 auto; margin: 0;
  width: min(100%, 150vh); aspect-ratio: 16 / 9;
  overflow: hidden; background: var(--soft);
}
.pj-bb__slide .media { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-bb__slide .ph { width: 100%; height: 100%; }

/* ---- 5 · Cierre: imagen centrada sobre negro, tagline oculto ---- */
.pj-cierre { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.pj-cierre__stage {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--header-h) + var(--margin)) var(--margin) var(--gap);
}
.pj-cierre__img, .pj-cierre__stage .ph {
  max-width: min(1100px, 90vw); max-height: 78vh; width: auto; height: auto; object-fit: contain;
}
.pj-cierre__stage .ph { width: 70vw; height: 60vh; }
.pj-cierre__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding-bottom: var(--margin); gap: var(--gap);
}
.pj-cierre__home { text-decoration: none; color: inherit; }
.pj-cierre__next { text-decoration: none; color: inherit; text-align: right; display: flex; flex-direction: column; gap: 0.4rem; }
/* Sobre fondo negro el meta gris no se leía: aclarar etiquetas del cierre */
.pj-cierre .u-meta { color: rgba(255, 255, 255, 0.6); }
/* Nombre del siguiente proyecto: medium (más elegante que bold), no uppercase */
.pj-cierre__next-name {
  font-family: var(--font-display); font-size: var(--t-h2); font-weight: 500;
  letter-spacing: var(--tracking-tight); line-height: 1;
  transition: color var(--dur) var(--ease-soft);
}
.pj-cierre__next:hover .pj-cierre__next-name { color: var(--accent); }

@media (max-width: 760px) {
  /* ---- Apertura / Explicación: una columna, imagen arriba ---- */
  .pj-apertura, .pj-explica { min-height: 0; padding-top: calc(var(--header-h) + 2rem); }
  .pj-apertura__inner, .pj-explica__inner { grid-template-columns: 1fr; gap: 1.25rem; }
  .pj-apertura__media, .pj-explica__media { order: -1; }
  .pj-block__body { margin-bottom: 1rem; }

  /* ---- Mosaico Punkt: 2×2 ---- */
  .pj-mosaico { min-height: 0; padding: 3rem 0; }
  .pj-mos__row { flex-wrap: wrap; }
  .pj-mos__cell,
  .pj-mosaico:not(.pj-mosaico--h) .pj-mos__row:not(.js-hover) .pj-mos__cell:hover {
    width: calc(50% - var(--gap) / 2); height: 40vh;
  }

  /* ---- Brandbook (Punkt): láminas apiladas, sin pin ---- */
  .pj-bb__pin { height: auto; display: block; overflow: visible; }
  .pj-bb__aside { padding: calc(var(--header-h) + 1.5rem) var(--margin) 1.5rem; }
  .pj-bb__body { max-width: none; }
  .pj-bb__viewport { overflow: visible; }
  .pj-bb__track { transform: none !important; flex-direction: column; gap: var(--gap);
    padding: 0 var(--margin) var(--margin); }
  .pj-bb__slide { width: 100%; }

  /* ---- Mosaico RD: imágenes apiladas, sin scroll-jack horizontal ---- */
  .pj-mosaico--h { padding: 3rem 0; }
  .pj-mosh__pin { height: auto; display: block; overflow: visible; }
  .pj-mosh__viewport { overflow: visible; }
  .pj-mosaico--h .pj-mosh__track { transform: none !important; flex-direction: column;
    width: auto; gap: var(--gap); padding: 0 var(--margin); }
  .pj-mosaico--h .pj-mos__cell,
  .pj-mosaico--h .pj-mos__cell:hover { width: 100%; height: auto; aspect-ratio: 16 / 9; }

  /* ---- Cierre: pie apilado ---- */
  .pj-cierre__foot { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .pj-cierre__next { text-align: left; }
  .pj-cierre__img, .pj-cierre__stage .ph { max-height: 62vh; }
}