/* ==========================================================================
   MUTAR — Frames: layout por frame y por acto
   Cada bloque de abajo corresponde a un frame del deck, en orden.
   ========================================================================== */

/* ---- Frame base --------------------------------------------------------- */
.frame {
  position: relative;
  min-height: 100svh;
  /* el extra a la derecha es el pasillo del rail: nada de texto ahi debajo */
  padding: clamp(4.5rem, 9vh, 7rem) calc(var(--pad-x) + 3.5rem) clamp(4rem, 8vh, 6rem) var(--pad-x);
  display: grid;
  align-content: center;
  scroll-snap-align: center;
  scroll-snap-stop: normal;
}
.frame__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; }

/* Numeracion + label de acto, arriba a la izquierda de cada frame */
.frame__tag {
  position: absolute;
  /* mas abajo que la marca fija del chrome, que vive arriba a la izquierda */
  top: clamp(3.4rem, 8vh, 5.2rem);
  left: var(--pad-x);
  display: flex;
  gap: 1.1rem;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.frame__tag b { font-weight: 400; color: var(--accent-text); }

/* Tira de ticks tipo barcode, textura de pie (ref Supreme) */
.ticks {
  display: flex;
  gap: 3px;
  height: 0.9rem;
  align-items: flex-end;
  opacity: 0.5;
}
.ticks i { display: block; width: 2px; background: currentColor; height: var(--h, 60%); }

/* ---- 01 · Cover --------------------------------------------------------- */
/* El cuerpo se mide contra el CONTENEDOR (cqi), no contra el viewport.
   Con vw la palabra crecia mas rapido que la caja de --maxw y en pantallas
   anchas la R se caia a una segunda linea. "MUTAR" mide 3.19x su cuerpo,
   asi que 29cqi la deja en ~95% del ancho disponible a cualquier tamano.
   El nowrap es el seguro: preferimos que se achique antes que partirse.   */
/* El logotipo es un SVG: escala solo y nunca se parte en dos lineas, asi
   que ya no hace falta el calculo de cuerpo contra el contenedor.        */
.frame--cover .cover__word {
  display: block;
  margin: 0 auto;
  width: min(100%, 62rem);
  color: var(--brand);
}
.frame--credits .credits__logo {
  display: block;
  width: min(100%, 26rem);
  color: var(--fg);
  margin-bottom: clamp(1rem, 3vh, 2rem);
}
.frame--cover .cover__sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.4rem;
  margin-top: clamp(1rem, 3vh, 2.5rem);
  text-align: center;
}
.frame--cover .cover__sub span { white-space: nowrap; }
.frame--cover .cover__rule {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 6vh, 4rem);
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
}

/* ---- 02–04 · Preguntas -------------------------------------------------- */
.frame--question .frame__inner { max-width: 68rem; }
.frame--question .q {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.75rem, 8.2vw, 8.5rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
}
/* Cada pregunta se recuesta en un margen distinto: rompe la simetria */
.frame--q1 .frame__inner { margin-left: 0; }
.frame--q2 .frame__inner { margin-right: 0; text-align: right; }
.frame--q3 .frame__inner { margin: 0 auto; text-align: center; }
.frame--question .q__foot {
  margin-top: clamp(1.5rem, 4vh, 3rem);
  color: var(--fg-dim);
}

/* ---- 05 · Tesis (el momento tipografico mas grande) --------------------- */
.frame--thesis .thesis {
  font-family: var(--font-display);
  font-weight: 600;
  /* el titular paso de nueve a trece palabras el 17/09 ("patrimonial y
     colaborativo"): a 9.5vw se comia el frame entero en cuatro lineas */
  font-size: clamp(2.5rem, 6.4vw, 6.8rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.frame--thesis .thesis em { font-style: normal; }

/* ---- Cita destacada (frames 05 y 06) ------------------------------------- */
.pull {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 3.2rem);
  line-height: 1;
  color: var(--accent-text);
  max-width: 22ch;
}

/* ---- 08 · Divisor de acto ----------------------------------------------- */
.frame--divider { align-content: center; text-align: center; }
.frame--divider .div__word {
  font-family: var(--font-bubble);
  font-size: clamp(3rem, 14vw, 15rem);
  line-height: 0.82;
}
.frame--divider .div__word:nth-child(2) { color: var(--accent-text); }

/* ---- 09 · Track horizontal con scrub ------------------------------------ */
/* El frame es alto; adentro un viewport sticky que traslada el rail.       */
.frame--track {
  /* Cuatro tramos de ~50vh: cada step se centra, se sostiene un momento y
     recien entonces viaja al siguiente. Antes era un barrido continuo donde
     4000px de scroll movian 1500px de riel y se sentia vacio. */
  height: 300vh;
  min-height: 0;
  padding: 0;
  display: block;
  scroll-snap-align: none;
  /* .frame trae align-content:center y Chrome ya lo aplica tambien en layout
     de bloque: eso centraba el stage sticky dentro de los 300vh del track y
     lo empujaba un viewport entero hacia abajo. El resultado era una pantalla
     vacia antes de las tarjetas y el step 1 consumiendose sin verse. */
  align-content: start;
}
.track__viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  /* tres franjas: titulo arriba, riel al medio, progreso abajo. Antes el
     riel flotaba solo en el centro y sobraba aire por todos lados. */
  display: grid;
  /* la columna se fija al ancho del viewport: si no, el grid la estira al
     ancho del riel (2700px) y el encabezado se va fuera de pantalla */
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr auto;
  /* deja pasar el tag del frame, que va absoluto arriba a la izquierda */
  padding: clamp(5.75rem, 11vh, 8rem) 0 clamp(3.5rem, 7vh, 5rem);
}
.track__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 calc(var(--pad-x) + 3.5rem) 0 var(--pad-x);
}
.track__count {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  color: var(--fg-dim);
  white-space: nowrap;
}
.track__count b { font-weight: 400; color: var(--accent-text); }
.track__rail {
  align-self: center;
  display: flex;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: 0 calc(var(--pad-x) + 3.5rem) 0 var(--pad-x);
  will-change: transform;
}
.step {
  flex: 0 0 min(80vw, 29rem);
  display: grid;
  gap: 0.6rem;
  align-content: start;
  min-height: min(58vh, 27rem);
  padding: clamp(1.5rem, 3.5vh, 2.25rem) clamp(1.5rem, 2.5vw, 2rem) clamp(1.75rem, 4vh, 2.5rem);
  border-radius: 1.5rem 2.25rem 1.75rem 2rem;
  border: 1px solid var(--hairline);
  /* los que no son el paso activo se apagan: siempre hay un solo foco */
  opacity: 0.3;
  transform: scale(0.94);
  transform-origin: center bottom;
  transition: opacity 0.5s var(--ease-soft),
              transform 0.6s var(--ease-back),
              border-color 0.5s var(--ease-soft),
              background-color 0.5s var(--ease-soft);
}
.step.is-active {
  opacity: 1;
  transform: none;
  border-color: color-mix(in srgb, var(--step, var(--accent)) 55%, transparent);
  background: color-mix(in srgb, var(--step, var(--accent)) 7%, transparent);
}
.step__icon {
  display: block;
  width: clamp(2.75rem, 4.5vw, 3.8rem);
  color: var(--step, var(--accent));
  margin-bottom: 0.2rem;
}
.step__icon svg { display: block; width: 100%; height: auto; }
.step__n {
  font-family: var(--font-bubble);
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 0.75;
  color: var(--step, var(--accent));
}
.step__title {
  font-family: var(--font-grotesk);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.step__quote { color: var(--step, var(--accent-text)); font-size: var(--t-body); }
.step__desc  { color: var(--fg-dim); max-width: 32ch; }
.track__progress {
  display: flex;
  gap: 0.5rem;
  padding: 0 calc(var(--pad-x) + 3.5rem) 0 var(--pad-x);
}
.track__progress i {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: var(--hairline);
  transition: background-color 0.4s var(--ease-soft);
}
.track__progress i.is-on { background: var(--accent); }

/* ---- 10 · Pipeline (escalera tipografica) ------------------------------- */
.ladder { display: grid; gap: 0; margin-top: clamp(1rem, 3vh, 2rem); }
.ladder__row {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0.75rem 1rem;
  align-items: baseline;
  padding: clamp(0.4rem, 1.1vh, 0.75rem) 0;
  border-top: 1px solid var(--hairline);
  /* la sangria crece: la escalera baja hacia la derecha */
  padding-left: calc(var(--i, 0) * clamp(0px, 1.4vw, 22px));
}
.ladder__row:last-child { border-bottom: 1px solid var(--hairline); }
.ladder__n { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--accent-text); letter-spacing: var(--track-meta); }
.ladder__name {
  font-family: var(--font-grotesk);
  font-weight: 800;
  font-size: clamp(1.1rem, 2.6vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.ladder__note { grid-column: 2; color: var(--fg-dim); font-size: var(--t-small); }
@media (min-width: 62rem) {
  .ladder__row { grid-template-columns: 3.2rem minmax(0, 22rem) 1fr; }
  .ladder__note { grid-column: 3; justify-self: end; text-align: right; max-width: 30ch; }
}

/* ---- 11 · El happening (diagrama tipografico) --------------------------- */
.figures {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-top: clamp(1.5rem, 4vh, 3rem);
}
.figure__n {
  font-family: var(--font-bubble);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 0.8;
  /* los rangos con guion (10-15, 20-30) no se parten */
  white-space: nowrap;
  color: var(--accent-text);
}
.figure__label { margin-top: 0.5rem; color: var(--fg-dim); }
.hero-fact {
  font-weight: 600;
  margin-top: clamp(1.5rem, 4vh, 3rem);
  padding: clamp(1rem, 2.5vw, 2rem);
  border-radius: 2rem 1.25rem 2.25rem 1.5rem;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 2.6rem);
  line-height: 1.15;
}

/* ---- 12 · Cinturon de herramientas (chips) ------------------------------ */
.chips { display: flex; flex-wrap: wrap; gap: clamp(0.6rem, 1.6vw, 1.2rem); margin-top: clamp(1.5rem, 4vh, 3rem); }
.chip {
  display: inline-flex;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  font-family: var(--font-grotesk);
  font-weight: 800;
  font-size: clamp(1rem, 2vw, 1.7rem);
  letter-spacing: -0.01em;
  transform: rotate(var(--rot, 0deg));
  transition: transform var(--dur-fast) var(--ease-back), background-color var(--dur-fast);
}
.chip:nth-child(odd)  { --rot: -2.5deg; }
.chip:nth-child(even) { --rot:  2deg; }
.chip:hover { transform: rotate(0deg) scale(1.04); background: var(--accent); color: var(--ink); border-color: transparent; }
.chip small { display: block; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 400; letter-spacing: var(--track-meta); text-transform: uppercase; opacity: 0.6; }

/* ---- 13 · Mismos objetos, 30 resultados --------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.5rem;
  margin-top: clamp(1.5rem, 4vh, 3rem);
  /* acotado a proposito: tiene que leerse como un bloque de resultados,
     no como una barra de 15 columnas */
  max-width: 52rem;
}
.tile {
  position: relative;
  aspect-ratio: 1;
  margin: 0;
  padding: 0.3rem;
  border-radius: 0.75rem 1.1rem 0.85rem 1rem;
  border: 1px solid var(--hairline);
  color: var(--fg);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.4s var(--ease-soft),
              transform 0.5s var(--ease-back),
              background-color 0.3s, border-color 0.3s;
  transition-delay: var(--d, 0s);
}
.tiles.is-in .tile { opacity: 1; transform: none; }
.tile svg { display: block; width: 100%; height: 100%; }
.tile figcaption {
  position: absolute;
  left: 0.45rem; top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
}
/* la ganadora: la unica que se construye de verdad */
.tile.is-winner {
  background: var(--accent);
  color: var(--ink);
  border-color: transparent;
}
.tile.is-winner figcaption { color: color-mix(in srgb, var(--ink) 70%, transparent); }

/* ---- 14 · Votacion ------------------------------------------------------ */
.vote { display: grid; gap: clamp(1rem, 3vw, 2.5rem); }
@media (min-width: 62rem) { .vote { grid-template-columns: 1.2fr 1fr; align-items: end; } }
.bars { display: grid; gap: 0.6rem; }
.bar { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.9rem; align-items: center; font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: var(--track-meta); }
.bar i {
  display: block; height: 1.1rem;
  border-radius: 999px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-back);
  transition-delay: var(--d, 0s);
}
.reveal.is-in .bar i, .is-in .bar i { transform: scaleX(var(--v, 0.5)); }

/* ---- 15 · Construccion fisica ------------------------------------------- */
.frame--build .build__line {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 6.5vw, 6.5rem);
  line-height: 0.95;
}
.frame--build .build__line--fade { color: var(--fg-dim); }

/* ---- 16 · Ciudades ------------------------------------------------------ */
.cities { display: grid; gap: 0; margin-top: clamp(1rem, 3vh, 2rem); }
.city {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.4rem, 1.2vh, 0.85rem) 0;
  border-top: 1px solid var(--hairline);
  cursor: default;
  transition: padding-left var(--dur-fast) var(--ease-back), color var(--dur-fast);
}
.city:last-child { border-bottom: 1px solid var(--hairline); }
.city__id {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1.8vw, 1.6rem);
  min-width: 0;
}
/* La silueta va siempre en el color de la ciudad ya oscurecido: el lima y el
   amarillo puros sobre hueso no se leen. */
.city__icon {
  flex: none;
  width: clamp(2.2rem, 4.6vw, 4rem);
  color: color-mix(in srgb, var(--city) 70%, var(--ink));
}
.city__icon svg { display: block; width: 100%; height: auto; }
.city__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 6vw, 5.5rem);
  line-height: 0.9;
  transition: color var(--dur-fast) var(--ease-soft);
}
.city:hover { padding-left: clamp(0.5rem, 2vw, 2rem); }
.city:hover .city__name { color: color-mix(in srgb, var(--city) 70%, var(--ink)); }
.city__meta { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--fg-dim); white-space: nowrap; }

/* ---- 17 · Escalabilidad ------------------------------------------------- */
.scale-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.8rem;
  margin-top: clamp(1rem, 3vh, 2rem);
}
.scale-line span {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.95;
  /* cada escalon es mas grande que el anterior: la escala se ve, no se lee */
  font-size: calc(clamp(1rem, 2.3vw, 2rem) + var(--s, 0) * clamp(0.35rem, 1.1vw, 1rem));
}
.scale-line b { font-weight: 400; color: var(--fg-dim); font-family: var(--font-mono); font-size: var(--t-meta); }
.uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1px; margin-top: clamp(1.5rem, 4vh, 3rem); background: var(--hairline); border: 1px solid var(--hairline); border-radius: 1rem; overflow: hidden; }
.use { background: var(--ground); padding: clamp(0.9rem, 2vw, 1.4rem); transition: background-color var(--dur-fast); }
.use:hover { background: var(--accent); color: var(--ink); }
.use h3 { font-family: var(--font-grotesk); font-weight: 800; font-size: clamp(1rem, 1.6vw, 1.35rem); letter-spacing: -0.01em; }
.use p { color: var(--fg-dim); font-size: var(--t-small); margin-top: 0.25rem; }
.use:hover p { color: color-mix(in srgb, var(--ink) 65%, transparent); }

/* ---- 18 · Impacto ------------------------------------------------------- */
.impact { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(1.5rem, 4vh, 3rem); }
.impact h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 2rem);
  line-height: 1;
  color: var(--accent-text);
}
.impact p { color: var(--fg-dim); font-size: var(--t-small); margin-top: 0.5rem; }

/* ---- 19 · Cierre -------------------------------------------------------- */
.frame--closing { text-align: center; }
.frame--closing .close__line {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 5vw, 5rem);
  line-height: 1;
}
.frame--closing .close__line + .close__line { margin-top: clamp(0.75rem, 2.5vh, 1.75rem); }
.frame--closing .close__final { color: var(--accent-text); }

/* ---- 20 · Creditos ------------------------------------------------------ */
.credits { display: grid; gap: clamp(1rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-top: clamp(1.5rem, 4vh, 3rem); }
.credits dt { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--fg-dim); }
.credits dd { margin: 0.35rem 0 0; font-family: var(--font-grotesk); font-weight: 800; font-size: clamp(1rem, 1.8vw, 1.5rem); letter-spacing: -0.01em; }

/* ==========================================================================
   INTERLUDIOS — scroll libre entre actos
   ========================================================================== */
.interlude {
  position: relative;
  z-index: 1;
  padding: clamp(3rem, 12vh, 9rem) 0;
  --pad-r: calc(var(--pad-x) + 3.5rem);
  scroll-snap-align: none;
}

/* ---- Fragmentos cortos (concepto / definicion) ---------------------------
   La idea entra en tres golpes, no en dos parrafos. Es lo que hace que el
   deck se lea como estructura y no como documento.                        */
.beats {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}
@media (min-width: 62rem) { .beats { grid-template-columns: repeat(3, 1fr); } }
.beat {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding-top: 0.9rem;
  border-top: 2px solid var(--accent);
}
.beat__n {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  color: var(--accent-text);
}
.beat__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.9rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

/* ---- Interludio B · el carrete -------------------------------------------
   Tantas cosas que ninguna se puede elegir. El fondo son objetos escaneados
   y al scrollear la camara retrocede y entran mas: el zoom-out es el
   argumento, no un efecto. La escena la arma js/scan.js.

   OJO: nada de overflow:hidden en .interlude--reel. Lo convierte en
   contenedor de scroll y anula el sticky del stage. El overflow va aca
   abajo, en .reel__stage.                                                */
.interlude--reel { height: 240vh; padding: 0; }
.reel__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* El canvas de los objetos escaneados. Va con alpha, asi que lo que se ve
   por detras del monton es el --ground del deck y el cross-fade de grounds
   lo sigue tomando gratis. */
.scan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Fallback: sin WebGL, en file:// o con reduced-motion, scan.js se saca de
   encima el canvas y marca el stage. La seccion pasa a ser un render fijo
   del monton, que dice lo mismo aunque no se mueva. */
.reel__stage--flat {
  background: var(--ground) url("../img/scan/poster.webp") center / cover no-repeat;
}
/* El velo deja pasar el monton pero garantiza que el texto se lea */
.reel__veil {
  position: absolute;
  inset: 0;
  /* deja ver el mar de imagenes, pero garantiza que el texto del centro
     tenga contraste suficiente */
  background:
    radial-gradient(ellipse 58% 44% at center,
      color-mix(in srgb, var(--ground) 90%, transparent) 0%,
      color-mix(in srgb, var(--ground) 68%, transparent) 46%,
      color-mix(in srgb, var(--ground) 12%, transparent) 100%);
}
/* En vertical el mismo elipse tapa mucho mas alto y deja el monton lavado.
   Se achata para que el texto siga teniendo su colchon y el monton de abajo
   conserve el color. */
@media (max-aspect-ratio: 1/1) {
  .reel__veil {
    background:
      radial-gradient(ellipse 92% 26% at center,
        color-mix(in srgb, var(--ground) 90%, transparent) 0%,
        color-mix(in srgb, var(--ground) 62%, transparent) 52%,
        color-mix(in srgb, var(--ground) 8%, transparent) 100%);
  }
}
.reel__punch {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 6.5vw, 6rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.reel__copy {
  position: relative;
  text-align: center;
  padding: 0 var(--pad-x);
  max-width: 62rem;
}
.reel__answer {
  margin: clamp(1rem, 3vh, 2rem) auto 0;
  max-width: 46ch;
  color: var(--fg-dim);
}

/* ---- Los creadores ------------------------------------------------------- */
.creators { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: clamp(1.5rem, 4vh, 2.5rem); }
@media (min-width: 62rem) { .creators { grid-template-columns: 1fr 1fr; } }
.creator {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding-top: 1rem;
  border-top: 2px solid var(--accent);
}
/* Retrato. La foto va de background: si el archivo no esta, queda el
   placeholder punteado y el layout no se mueve. Poner los archivos en
   img/team/gervasio.jpg y img/team/federico.jpg.                        */
/* Retrato grande: la cara es lo primero que se lee de cada uno. */
.creator__photo {
  position: relative;
  display: block;
  width: clamp(9rem, 17vw, 15rem);
  aspect-ratio: 1;
  margin-bottom: 0.6rem;
  border-radius: 50%;
  overflow: hidden;
  background-image: var(--foto);
  background-size: cover;
  background-position: center 25%;
  box-shadow: 0 0 0 3px var(--ground), 0 0 0 5px var(--accent);
}
.creator__credits { display: grid; gap: 0.4rem; margin-top: 0.2rem; }
.creator__credits li {
  font-size: var(--t-small);
  color: var(--fg-dim);
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent);
}
.creator__credits b { color: var(--fg); font-family: var(--font-grotesk); font-weight: 800; }

.creator__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
.creator__role {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--accent-text);
}
.creator__bio { font-size: var(--t-small); color: var(--fg-dim); max-width: 44ch; }
.creator__work { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.creator__work span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  white-space: nowrap;
}
.creator__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin-top: 0.2rem; }
.creator__links a {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.creator__links a:hover { color: var(--accent-text); border-color: var(--accent); }

/* --------------------------------------------------------------------------
   EXPORT · layout de las paginas 16:9
   Cada frame pasa a ser una caja fija de 1280x720. El track horizontal, que
   en pantalla es un stage pegajoso, se aplana a cinco columnas.
   -------------------------------------------------------------------------- */
body.export .frame {
  padding: 3.5rem 4.5rem 3rem;
  align-content: center;
  font-size: 1.05rem;
}
body.export .frame__tag { top: 2rem; left: 4.5rem; }

body.export .frame--track    { height: var(--page-h); display: grid; }
body.export .track__viewport { position: static; height: 100%; overflow: hidden; }
body.export .track__rail {
  align-self: center;
  transform: none !important;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  padding: 0 4.5rem;
}
/* en export no hay step activo: los cinco valen igual */
body.export .step          { flex: initial; opacity: 1; transform: none; }
body.export .step__title   { font-size: 1.3rem; }
body.export .step__quote,
body.export .step__desc    { font-size: 0.78rem; }
body.export .track__head   { padding: 0 4.5rem; }
body.export .track__progress { display: none; }

body.export .tiles { grid-template-columns: repeat(10, 1fr); max-width: none; }
/* En export no hay escena: el stage muestra el poster y listo. */
body.export .scan  { display: none !important; }

/* --------------------------------------------------------------------------
   EXPORT · escala tipografica fija
   En pantalla los cuerpos se calculan con vw, que mide la ventana del
   navegador — no la pagina de 1280x720. Para que el PDF salga siempre igual,
   en export todo pasa a medidas fijas pensadas para esa caja.
   -------------------------------------------------------------------------- */
body.export {
  --pad-x: 4rem;
  --t-mega: 9rem;
  --t-huge: 5rem;
  --t-xl: 3rem;
  --t-lg: 1.75rem;
  --t-body: 1rem;
  --t-small: 0.85rem;
  --gap: 1.5rem;
}
body.export .frame--cover .cover__word { font-size: 14rem; }
body.export .frame--question .q        { font-size: 4.2rem; }
body.export .frame--thesis .thesis     { font-size: 4.4rem; }
body.export .frame--divider .div__word { font-size: 6.5rem; }
body.export .pull                      { font-size: 1.9rem; }
body.export .ladder__name              { font-size: 1.5rem; }
body.export .ladder__row               { padding-left: calc(var(--i, 0) * 16px); }
body.export .figure__n                 { font-size: 3rem; }
body.export .hero-fact                 { font-size: 1.5rem; }
body.export .chip                      { font-size: 1.05rem; }
body.export .city__name                { font-size: 2.6rem; }
body.export .scale-line span           { font-size: calc(1.1rem + var(--s, 0) * 0.5rem); }
body.export .impact h3                 { font-size: 1.4rem; }
body.export .frame--build .build__line { font-size: 3.4rem; }
body.export .frame--closing .close__line { font-size: 2.5rem; }
body.export .reel__punch               { font-size: 3rem; }
body.export .credits dd                { font-size: 1.15rem; }
body.export .tile                      { font-size: 0.6rem; }
body.export .beat__text                { font-size: 1.35rem; }
body.export .creator__name             { font-size: 1.7rem; }
body.export .creator__bio              { font-size: 0.82rem; }

/* --------------------------------------------------------------------------
   PANTALLAS ANGOSTAS
   El rail se reduce a pips, el chrome deja de competir por las esquinas y
   la tipografia gigante gana aire. Nada de clipear: el cuerpo ya es fluido.
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  .rail        { right: 0.5rem; gap: 0.45rem; }
  .rail__label { display: none; }
  /* el numero de frame va absoluto a ~68px del borde; con 9vh de padding el
     titular le entraba por debajo en cuanto el contenido no era corto */
  .frame       { padding-right: calc(var(--pad-x) + 1.5rem); padding-top: clamp(6.5rem, 15vh, 8.5rem); }
  .track__rail { padding-right: calc(var(--pad-x) + 1.5rem); }
  .chrome--br  { display: none; }
  .cover__rule { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .cover__rule .ticks { display: none; }
  .frame--q2 .frame__inner { text-align: left; }
  .ladder__row { padding-left: 0; }
  .step        { flex-basis: 82vw; }
}

/* Frames que no entran en 720px con la escala de pantalla: se compactan */
body.export .track__viewport { padding: 2.5rem 0 1.75rem; }
body.export .step           { min-height: 0; padding: 1rem 1.1rem 1.25rem; }
body.export .step__icon     { width: 2rem; }
body.export .step__n        { font-size: 2.6rem; }
body.export .ladder__row    { padding-top: 0.12rem; padding-bottom: 0.12rem; }
body.export .ladder__name   { font-size: 0.95rem; }
body.export .ladder__note   { font-size: 0.72rem; }
body.export .frame--pipeline .t-lg { font-size: 1.25rem; }
body.export .creators       { gap: 1.5rem; }
body.export .creator        { gap: 0.4rem; }
body.export .creator__bio   { font-size: 0.75rem; }
body.export .creator__work span { font-size: 0.55rem; padding: 0.2rem 0.5rem; }
body.export .city__icon { width: 1.9rem; }

/* ==========================================================================
   PIEZAS INTERACTIVAS
   Quedo una: el anillo que se orbita, al lado de los treinta resultados.
   Los objetos arrastrables de la portada y el pintar por encima salieron el
   17/09 — "no sirven para nada" / "no se entiende". El markup lo genera
   js/play.js.
   ========================================================================== */

/* ---- Anillo que orbita --------------------------------------------------- */
.orbita {
  position: relative;
  height: clamp(8rem, 19vh, 12rem);
  margin-top: clamp(0.75rem, 2vh, 1.25rem);
  touch-action: none;
  cursor: grab;
}
.orbita.is-drag { cursor: grabbing; }
.orbita__item {
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(3.5rem, 6vw, 5.5rem);
  aspect-ratio: 1;
  margin: -2.75rem 0 0 -2.75rem;
  color: var(--accent);
  will-change: transform, opacity;
}
.orbita__item svg { display: block; width: 100%; height: auto; }


/* En export la pieza interactiva se muestra quieta, sin invitacion */
body.export .orbita { height: 9rem; }
body.export .orbita__item { opacity: 1 !important; }

/* ---- Iconos dentro de beats y chips -------------------------------------- */
.beat__icon {
  display: block;
  width: clamp(1.9rem, 3vw, 2.5rem);
  color: var(--accent-text);
  margin-bottom: 0.55rem;
}
.beat__icon svg { display: block; width: 100%; height: auto; }

.chip { align-items: center; gap: 0.6rem; }
.chip__icon {
  display: block;
  width: 1.5rem;
  flex: none;
  color: currentColor;
  opacity: 0.85;
}
.chip__icon svg { display: block; width: 100%; height: auto; }
body.export .beat__icon { width: 1.6rem; margin-bottom: 0.35rem; }
body.export .chip__icon { width: 1.1rem; }

/* ==========================================================================
   REUNIÓN DEL 17/09/2026
   Lo que se agrego o se rehizo ese dia. Va al final y no intercalado en el
   orden de frames de arriba porque el deck se reordeno entero: los numeros
   de las secciones anteriores ya no coinciden con su posicion.
   ========================================================================== */

/* ---- 05 · El concepto: cuatro beats y las citas firmadas -----------------
   El cuarto beat entro el 17/09 ("hoy en dia podemos crear cualquier cosa en
   segundos"). A tres columnas el cuarto caia solo en una fila nueva.       */
@media (min-width: 62rem) {
  .beats--four { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 40rem) and (max-width: 61.99rem) {
  .beats--four { grid-template-columns: repeat(2, 1fr); }
}

.quotes {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}
@media (min-width: 52rem) { .quotes { grid-template-columns: 1fr 1fr; } }

/* .pull ya trae el cuerpo grande; aca solo se le cuelga la firma */
.pull p { margin: 0; }
.pull cite {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  font-style: normal;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.pull cite i { font-style: italic; text-transform: none; letter-spacing: 0.04em; }

/* ---- 07 · Por que los objetos cargan historia ----------------------------
   Dos columnas porque son dos historias distintas, no una lista.          */
.twin {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}
@media (min-width: 52rem) { .twin { grid-template-columns: 1fr 1fr; } }
.twin__label {
  color: var(--accent-text);
  margin-bottom: 0.7rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--hairline);
}
.twin__col .t-body { max-width: 42ch; }

/* ---- 10 · El ciclo -------------------------------------------------------
   18/09: la espiral no se entendia. Ahora es una escalera: diez columnas que
   suben de izquierda a derecha y se van llenando de color, agrupadas en las
   tres fases del proyecto. Se lee como avance, no como una rueda. La vuelta
   al principio la dice el pie de abajo.                                     */
.cycle { position: relative; margin: clamp(1.25rem, 3vh, 2rem) 0 0; }
.cycle__ring {
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: clamp(0.3rem, 0.6vw, 0.6rem);
  align-items: end;
  height: clamp(15rem, 44vh, 24rem);
  border-bottom: 2px solid var(--hairline);
}
.cycle__stage {
  position: relative;
  height: calc(36% + var(--i) * 7.1%);
  border-radius: 0.9rem 0.9rem 0 0;
  border-top: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) calc(6% + var(--i) * 6.5%), transparent);
  transform-origin: bottom;
  animation: cycle-grow 0.9s var(--ease-soft) both;
  animation-delay: calc(var(--i) * 70ms);
  animation-play-state: paused;
}
.frame--cycle.is-active .cycle__stage,
.frame--cycle:has(.is-in) .cycle__stage { animation-play-state: running; }
@keyframes cycle-grow { from { transform: scaleY(0.15); opacity: 0; } to { transform: none; opacity: 1; } }
.cycle__stage:last-child { background: var(--accent); }
.cycle__stage:last-child .cycle__n,
.cycle__stage:last-child .cycle__name,
.cycle__stage:last-child .cycle__note { color: var(--ink); }
.cycle__card { display: block; padding: 0.65rem clamp(0.4rem, 0.8vw, 0.75rem); }
.cycle__n {
  display: block;
  font-family: var(--font-bubble);
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  line-height: 1;
  font-weight: 400;
  color: var(--accent-text);
}
.cycle__name {
  display: block;
  font-family: var(--font-grotesk);
  font-weight: 800;
  font-size: clamp(0.72rem, 1.05vw, 0.95rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: 0.35rem;
  hyphens: auto;
}
.cycle__note {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(0.5rem, 0.62vw, 0.6rem);
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: var(--fg-dim);
  margin-top: 0.3rem;
}
/* las tres fases, debajo de la base */
.cycle__phases {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: clamp(0.3rem, 0.6vw, 0.6rem);
  margin-top: 0.7rem;
}
.cycle__phase {
  padding-top: 0.5rem;
  border-top: 1px solid var(--fg-dim);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.cycle__phase:nth-child(1) { grid-column: 1 / 6; }
.cycle__phase:nth-child(2) { grid-column: 6 / 8; color: var(--accent-text); border-color: var(--accent); }
.cycle__phase:nth-child(3) { grid-column: 8 / 11; }
.cycle__hub { display: none; }
.frame--cycle .cycle + .cycle__phases + p { margin-top: clamp(1.25rem, 3.5vh, 2.25rem); }
body.export .cycle__ring { height: 20rem; }
body.export .cycle__stage { animation: none; }

/* En pantalla chica el circulo no entra: vuelve a ser una lista. */
@media (max-width: 48rem) {
  .cycle { height: auto; }
  .cycle__ring { position: static; display: grid; gap: 0.9rem; }
  .cycle__stage {
    position: static;
    width: auto;
    margin: 0;
    transform: none;
    text-align: left;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    align-items: baseline;
    gap: 0.5rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--hairline);
  }
  .cycle__card { display: contents; }
  .cycle__name, .cycle__note { text-align: left; }
  .cycle__note { grid-column: 2; }
  .cycle__hub { display: none; }
  .cycle__ring { height: auto; border: 0; }
  .cycle__stage { height: auto; background: none; border-radius: 0; border-top: 0; animation: none; }
  .cycle__stage:last-child { background: none; }
  .cycle__stage:last-child .cycle__name { color: var(--fg); }
  .cycle__n { font-size: 1.1rem; }
  .cycle__phases { display: none; }
}

/* ---- 11 · La convocatoria ------------------------------------------------
   La ficha de ejemplo. Gervasio la pidio con "una carita con la siluetita",
   no con una foto: el que dona es una persona, no un retrato de stock.    */
.avatar {
  display: grid;
  place-items: center;
  width: clamp(2.6rem, 4vw, 3.4rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: color-mix(in srgb, var(--fg) 62%, transparent);
  flex: none;
}
.avatar svg { display: block; width: 62%; height: auto; }

.entry {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  border: 1.5px dashed color-mix(in srgb, var(--fg) 28%, transparent);
  border-radius: 1.5rem 1.1rem 1.6rem 1.25rem;
}
@media (min-width: 52rem) {
  .entry { grid-template-columns: auto 8rem 1fr; }
  .entry__fields { grid-column: 1 / -1; }
}
.entry__who { display: flex; align-items: center; gap: 0.75rem; }
.entry__name {
  font-family: var(--font-grotesk);
  font-weight: 800;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
}
.entry__meta { color: var(--fg-dim); margin-top: 0.15rem; }
.entry__obj {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  color: color-mix(in srgb, var(--fg) 55%, transparent);
}
.entry__obj svg { width: 72%; height: auto; }
.entry__quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  line-height: 1.25;
  max-width: 34ch;
}
.entry__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
  color: var(--fg-dim);
}
.entry__fields li::before { content: "· "; }

/* ---- 12 · La libreria: las cinco voces -----------------------------------
   Gervasio: "cinco caritas... I feel attached to this object because it was
   from my grandfather... there's people telling their stories".           */
.voices__lead {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  color: var(--accent-text);
}
.voices {
  display: grid;
  gap: clamp(0.85rem, 2vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  margin-top: 0.9rem;
}
.voice {
  display: grid;
  gap: 0.5rem;
  padding: 0.9rem 0.95rem 1.05rem;
  border: 1px solid var(--hairline);
  border-radius: 1.1rem 0.85rem 1.2rem 0.9rem;
}
.voice__name {
  font-family: var(--font-grotesk);
  font-weight: 800;
  font-size: 0.95rem;
}
.voice__quote {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--fg-dim);
}

/* ---- 21 · Treinta resultados: votos y el anillo --------------------------
   "Que tenga 20 likes o 20 votes, que se note que la gente ya esta votando",
   y a la derecha un objeto que se pueda orbitar.                          */
.outcomes {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(1.25rem, 3vh, 2rem);
  align-items: start;
}
@media (min-width: 62rem) { .outcomes { grid-template-columns: 1.55fr 1fr; } }
.outcomes__aside { display: grid; gap: 0.5rem; }
.outcomes__aside .t-body { max-width: 34ch; font-size: clamp(0.9rem, 1vw, 1.05rem); }

/* el numero va abajo a la derecha: arriba a la izquierda vive el figcaption */
.tile__votes {
  position: absolute;
  right: 0.3rem;
  bottom: 0.28rem;
  padding: 0.05rem 0.3rem 0.08rem;
  border-radius: 999px;
  /* cae sobre la silueta: sin fondo propio no se lee */
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
}
.tile__votes::before {
  content: "";
  display: inline-block;
  width: 0.34rem;
  height: 0.34rem;
  margin-right: 0.22rem;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.04rem;
}
.tile.is-winner .tile__votes {
  background: color-mix(in srgb, var(--ink) 16%, transparent);
  color: var(--ink);
  font-weight: 500;
}

/* ---- Export -------------------------------------------------------------- */
/* a diez columnas los tiles miden un tercio: el voto no entra */
body.export .tile__votes { display: none; }
/* en la pagina 16:9 el circulo se achica, pero el nodo tiene que achicarse
   mas que el radio o dos etapas vecinas se pisan */
body.export .cycle__name { font-size: 0.72rem; }
body.export .cycle__note { font-size: 0.48rem; }
body.export .entry { break-inside: avoid; }

/* ---- 11 · La convocatoria: el titular no puede comerse la ficha ---------- */
.frame--opencall .t-xl { font-size: clamp(2rem, 4.6vw, 4rem); }
.frame--opencall .hero-fact { font-size: clamp(1.1rem, 2.2vw, 1.9rem); }

/* ---- Los frames densos en pantalla chica --------------------------------
   Con mucho contenido, align-content:center empuja el titular hacia arriba
   hasta meterse abajo del numero de frame, que va absoluto. En los frames
   nuevos (que son los mas cargados) el contenido arranca donde termina el
   padding y listo.                                                        */
@media (max-width: 48rem) {
  .frame--cycle,
  .frame--library,
  .frame--opencall,
  .frame--outcomes,
  .frame--visit,
  .frame--stories { align-content: start; }
}

/* ==========================================================================
   IMAGEN EN LOS FRAMES (pase para enviar, 18/09)
   ========================================================================== */

/* 04 · la tesis comparte el ancho con la obra en sala */
.frame--thesis .duo .thesis { font-size: clamp(2.2rem, 4.3vw, 4.8rem); }
.fig__frame { max-height: 74vh; }

/* 15 · la planta */
.plan { background: var(--ink); }
.fig--plan figcaption { color: color-mix(in srgb, var(--bone) 75%, transparent); }

/* 23 · la obra fisica, sobre la plaza de noche */
.frame--build .frame__inner { text-shadow: 0 1px 24px var(--bone); }

/* 30 · contacto: un mail por linea */
.credits__mail { display: grid; gap: 0.2rem; font-size: clamp(0.9rem, 1.3vw, 1.15rem) !important; }
.credits a { text-decoration: none; border-bottom: 1px solid var(--hairline); }
.credits a:hover { color: var(--accent-text); border-color: var(--accent); }

/* ---- 12 · La estanteria de objetos reales -------------------------------- */
.shelf {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  align-items: stretch;
}
@media (min-width: 52rem) { .shelf { grid-template-columns: 1.6fr 1fr; } }
.shelf__stage { --ar: 16 / 10; background: var(--ink); }
.visor__stage { position: relative; aspect-ratio: 1; }
.shelf__stage canvas,
.visor__stage canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  cursor: grab;
  touch-action: pan-y;
}
.shelf__stage canvas:active,
.visor__stage canvas:active { cursor: grabbing; }
.visor__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visor__stage .visor__poster { position: relative; }
.is-3d .visor__poster { display: none; }
.shelf__now {
  position: absolute;
  left: 1rem; bottom: 0.9rem;
  z-index: 1;
  color: var(--bone);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 60%, transparent);
}
.shelf__now:empty { display: none; }
.shelf__side { display: grid; align-content: start; gap: 0.8rem; }
.shelf__title { color: var(--accent-text); }
.shelf__list { display: grid; gap: 0.1rem; }
.shelf__list button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  width: 100%;
  padding: 0.55rem 0.2rem;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  cursor: pointer;
  transition: color var(--dur-fast), padding var(--dur-fast) var(--ease-soft);
}
.shelf__list button b {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-meta);
  color: var(--fg-dim);
}
.shelf__list button:hover,
.shelf__list button:focus-visible { color: var(--accent-text); padding-left: 0.6rem; }
.shelf__list button.is-active { color: var(--accent-text); padding-left: 0.6rem; }
.shelf__list button.is-active b { color: var(--accent-text); }
/* sin 3D la lista no elige nada: queda como indice */
.shelf:not(.is-3d) .shelf__list button { cursor: default; }
.shelf:not(.is-3d) .shelf__hint { display: none; }

/* ---- 21 · El visor de la escultura --------------------------------------- */
.visor { position: relative; }
.visor.is-3d .visor__stage {
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent);
}

body.export .shelf__hint,
body.export .shelf__now { display: none; }

/* 07 · titular, las dos historias y la pila al costado */
.duo--stories .twin { grid-template-columns: 1fr; gap: 1.25rem; }
.duo--stories .t-xl { font-size: clamp(2.1rem, 4.4vw, 4.6rem); }
.duo--stories .fig__frame { --ar: 4 / 5; }
/* banda: nunca mas alta que un tercio de pantalla, asi el frame entra entero */
.fig--band .fig__frame { aspect-ratio: auto; height: clamp(9rem, 30vh, 17rem); }
.duo--stories .t-body { font-size: clamp(0.95rem, 1.1vw, 1.1rem); }
.duo--stories .hero-fact { font-size: clamp(1.05rem, 1.7vw, 1.6rem); margin-top: 1.5rem; }
.duo--stories .twin { margin-top: 1.25rem; }

/* ---- Dentro de un .duo todo baja un escalon: la mitad del ancho ---------- */
@media (min-width: 62rem) {
  .duo .t-xl { font-size: clamp(2rem, 4.2vw, 4.4rem); }
  .duo .chips { gap: 0.45rem; margin-top: 1.25rem; }
  .duo .chip { font-size: clamp(0.85rem, 1.05vw, 1.05rem); padding: 0.45rem 0.95rem; }
  .duo .hero-fact { font-size: clamp(1rem, 1.55vw, 1.45rem); margin-top: 1.25rem; padding: 1rem 1.25rem; }
  .duo .t-body { font-size: clamp(0.95rem, 1.1vw, 1.12rem); }
  .duo .beat__text { font-size: clamp(0.92rem, 1.05vw, 1.08rem); }
}

/* 12 · la estanteria al lado de los numeros: escenario arriba, lista en pildoras */
.duo--library .shelf { grid-template-columns: 1fr; margin-top: 0; gap: 0.7rem; }
.duo--library .shelf__title { display: none; }
.duo--library .shelf__list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.duo--library .shelf__list button {
  width: auto;
  padding: 0.32rem 0.8rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 0.85rem;
}
.duo--library .shelf__list button b { display: none; }
.duo--library .shelf__list button:hover,
.duo--library .shelf__list button.is-active { padding-left: 0.8rem; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.duo--library .figures { gap: 0.8rem 1.5rem; }
.duo--library .figure__n { font-size: clamp(2.2rem, 4vw, 3.8rem); }
.frame--library .voices__lead { margin-top: clamp(1rem, 2.5vh, 1.75rem); }
.frame--library .voice { padding: 0.7rem 0.85rem 0.8rem; gap: 0.35rem; }
.frame--library .voice .avatar { width: 2rem; height: 2rem; }

/* 28 · foto grande al lado del nombre; bio y creditos debajo, a todo el ancho */
.creator { grid-template-columns: auto 1fr; column-gap: clamp(1rem, 2vw, 1.75rem); row-gap: 0.55rem; }
.creator > * { grid-column: 1 / -1; }
.creator > .creator__photo { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: clamp(7.5rem, 12vw, 11.5rem); margin: 0; }
.creator > .creator__role { grid-column: 2; grid-row: 1; align-self: end; }
.creator > .creator__name { grid-column: 2; grid-row: 2; align-self: start; }
.creator__bio { max-width: 60ch; }
.frame--creators .t-xl { font-size: clamp(2rem, 4.5vw, 4.4rem); }
.frame--divider .div__word { text-shadow: 0 0.04em 0.4em rgba(0,0,0,.45); }
body.export .visor__stage { aspect-ratio: auto; }