/* ═══════════════════════════════════════════════════════════
   Espacio Arte — sistema visual
   Regla única de color: la página es cal, tinta y línea.
   TODO el color lo aportan las obras. No agregar acentos de marca.
   ═══════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Noah Head";
  src:url("../assets/noah-head-light.otf") format("opentype");
  font-weight:300;font-style:normal;font-display:swap;
}

:root{
  /* La sala está encalada: el fondo es cal y la tinta es lo que se apoya
     encima. Los bloques que van al revés llevan .invertido y redefinen
     estos mismos tokens; ninguna regla de abajo sabe en cuál está. */
  --fondo:#F4F2ED;
  --realce:#FCFBF8;
  --tinta:#101216;
  --tinta-rgb:16,18,22;        /* la misma tinta, para sombras con alfa */
  --humo:#62666E;   /* 4,9:1 sobre cal — con #6E727A daba 4,31 y el eyebrow va en 11 px */
  --linea:rgba(16,18,22,.16);
  --linea-fuerte:rgba(16,18,22,.34);
  --velo:244,242,237;          /* para los degradados sobre foto */

  --f-display:"Noah Head","Instrument Sans",system-ui,sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  --pad:clamp(20px,5vw,72px);
  --barra-h:64px;

  /* Movimiento: una sola curva de salida y dos duraciones.
     Estaban repetidas a mano en media docena de lugares, con cuatro
     duraciones distintas para el mismo tipo de gesto. */
  --ease-salida:cubic-bezier(.16,1,.3,1);
  --t-toque:.16s;   /* hover y press: arriba de 200 ms se siente lento */
  --t-suave:.55s;   /* cambios de estado que no responden al dedo */
}

/* Un bloque al revés: tinta de fondo, cal encima. Se usa en el umbral,
   en el archivo de muestras, en el pie y en el visor. */
.invertido{
  --fondo:#0A0B0D;
  --realce:#14161A;
  --tinta:#F2F0EB;
  --tinta-rgb:242,240,235;
  --humo:#8E9299;
  --linea:rgba(242,240,235,.17);
  --linea-fuerte:rgba(242,240,235,.36);
  --velo:10,11,13;
  background:var(--fondo);
  color:var(--tinta);
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;
  background:var(--fondo);
  color:var(--tinta);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
::selection{background:var(--tinta);color:var(--fondo)}

a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--tinta);outline-offset:4px}

.skip{
  position:absolute;left:-9999px;top:8px;z-index:200;
  background:var(--tinta);color:var(--fondo);padding:10px 16px;
}
.skip:focus{left:8px}

/* ── tipografía ── */
.titulo-xl,.titulo-l,.titulo-m{
  font-family:var(--f-display);font-weight:300;
  letter-spacing:-.018em;text-wrap:balance;margin:0;
}
.titulo-xl{font-size:clamp(56px,13vw,168px);line-height:.88}
.titulo-l{font-size:clamp(30px,5.2vw,62px);line-height:1.04}
.titulo-m{font-size:clamp(24px,3.4vw,40px);line-height:1.1}

.eyebrow{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--humo);margin:0;
}
.parrafo{margin:0;max-width:56ch;color:var(--tinta);opacity:.92}

/* máscaras de línea (revelado de texto) */
.ml{display:block;overflow:hidden}
.ln{display:block;will-change:transform}

/* ── barra ── */
.barra{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--barra-h);
  display:flex;align-items:center;gap:24px;
  padding-inline:var(--pad);
  /* casi opaca arriba y difuminada abajo: la barra lleva su propio piso, así
     el logo nunca queda partido en el borde entre un bloque claro y uno oscuro */
  background:linear-gradient(to bottom,rgba(var(--velo),.97) 0%,rgba(var(--velo),.95) 58%,rgba(var(--velo),0) 100%);
  pointer-events:none;
}
.barra > *{pointer-events:auto}
/* 44 px de alto: es un enlace y en el teléfono hay que poder tocarlo */
.barra-logo{display:flex;align-items:center;gap:11px;min-height:44px}
/* el isotipo se recorta por CSS del lockup horizontal: evita un archivo más */
.isotipo{
  display:block;width:33px;height:35px;overflow:hidden;flex:none;
}
.isotipo img{width:125px;max-width:none;height:auto}
/* sobre un tramo oscuro la barra se da vuelta entera */
.barra.en-oscuro{color:#F2F0EB;--velo:10,11,13}
.barra.en-oscuro .isotipo img{filter:invert(1) brightness(1.12)}
.barra.en-oscuro .barra-nav a{color:#8E9299}
.barra.en-oscuro .barra-nav a:hover{color:#F2F0EB}
.barra.en-oscuro .indice{color:#8E9299}
.barra.en-oscuro .ruedo{border-color:rgba(242,240,235,.22)}
.barra.en-oscuro .ruedo i{background:conic-gradient(#F2F0EB calc(var(--p,0)*1%),transparent 0)}
.barra-marca{
  font-family:var(--f-display);font-weight:300;
  font-size:13px;line-height:1.06;letter-spacing:.02em;
}
.barra-nav{
  margin-left:auto;display:flex;gap:22px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
/* el enlace medía 12 px de alto: se ve igual, pero ahora se puede pegar */
.barra-nav a{
  color:var(--humo);padding-block:10px;
  transition:color var(--t-toque) var(--ease-salida);
}
.barra-nav a:hover{color:var(--tinta)}

/* progreso: la planta del redondel */
.ruedo{
  width:24px;height:24px;border-radius:50%;
  border:1px solid var(--linea);flex:none;position:relative;
}
.ruedo i{
  position:absolute;inset:2px;border-radius:50%;display:block;
  background:conic-gradient(var(--tinta) calc(var(--p,0)*1%),transparent 0);
  mask:radial-gradient(circle,transparent 52%,#000 54%);
  -webkit-mask:radial-gradient(circle,transparent 52%,#000 54%);
}

/* ═══════════ 01 · PORTADA ═══════════ */
/* Dos tramos: el logo se arma (≈78vh) y después la cámara lo atraviesa
   (≈107vh). Fue 320vh y sobraba: el vuelo terminaba antes que la sección y
   quedaba pantalla en blanco hasta el bloque siguiente. Si volvés a tocar
   esta altura, revisá el reparto de tramos en redondel.js: los dos tienen
   que cerrar juntos. */
.portada{height:285vh;position:relative}
.portada-pin{
  height:100vh;position:sticky;top:0;
  display:grid;place-items:center;overflow:hidden;
}
#lienzo{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;opacity:0;transition:opacity 1.2s ease;
}
#lienzo.listo{opacity:1}
.portada-poster{
  position:absolute;top:50%;left:50%;width:190px;height:auto;
  transform:translate(-50%,-58%);opacity:.85;
}
#lienzo.listo ~ .portada-poster{display:none}

.sello{
  position:absolute;top:50%;left:50%;
  width:min(74vmin,560px);height:min(74vmin,560px);
  transform:translate(-50%,-50%);
  color:var(--humo);opacity:.5;pointer-events:none;
}
.sello text{
  font-family:var(--f-mono);font-size:9.6px;letter-spacing:.26em;
  fill:currentColor;text-transform:uppercase;
}
.sello-gira{transform-origin:50% 50%;animation:gira 52s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

.portada-texto{
  position:relative;z-index:2;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  padding-inline:var(--pad);
  mix-blend-mode:normal;
}
.portada-texto .eyebrow{font-size:10.5px}
.portada-bajada{
  margin:0;max-width:26ch;font-size:clamp(16px,2.1vw,20px);
  color:var(--humo);line-height:1.45;
}
.pista{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  margin:0;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--humo);
}
.pista span{display:inline-block;animation:respira 2.6s ease-in-out infinite}
@keyframes respira{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}

/* ── rótulo de sección: la regla se dibuja sola con el scroll ──
   Reemplaza al border-top que separaba las secciones: es la misma
   línea, pero llega dibujándose en vez de estar puesta de antemano. */
.rotulo{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px)}
.regla{
  display:block;height:1px;width:100%;background:var(--linea-fuerte);
  transform:scaleX(0);transform-origin:0 50%;
}

/* ═══════════ 02 · EL LUGAR ═══════════
   Acá no hay ninguna foto a propósito: la sección es una declaración
   que se enciende palabra por palabra a medida que bajás. */
.lugar{
  display:flex;flex-direction:column;gap:clamp(48px,7vw,110px);
  padding:clamp(80px,11vw,165px) var(--pad) clamp(70px,9vw,130px);
}
.lugar .titulo-l{max-width:15ch}

/* Una sola columna de contenido y, al lado, la columna de la marca.
   Antes eran dos bandas apiladas y la marca vivía en la de arriba: se movía
   con el scroll y desaparecía a mitad de sección. Ahora la marca tiene su
   propia columna de punta a punta y se queda quieta mientras el relato pasa. */
.lugar-cuerpo{display:flex;flex-direction:column;gap:clamp(40px,5.5vw,88px)}
@media(min-width:900px){
  .lugar{
    display:grid;align-items:start;
    grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
    column-gap:clamp(40px,5vw,80px);
    row-gap:clamp(56px,7vw,104px);
  }
  .lugar-cuerpo{grid-column:1;grid-row:1}
  /* Arriba, a la altura del titular — no centrada contra toda la columna.
     Centrada quedaba demasiado abajo: el logotipo se salía por el pie de la
     ventana y solo se veía el aro. Anclada al principio, la marca entera
     entra en el primer cuadro, que es donde tiene que leerse. */
  .lugar-marca-hueco{
    grid-column:2;grid-row:1;align-self:start;
    margin-top:clamp(0px,1.4vw,22px);
  }
  .cifras{grid-column:1 / -1;grid-row:2}
}

.lugar-decir{display:flex;flex-direction:column;gap:clamp(26px,3.8vw,54px)}
.declaracion{
  margin:0;font-family:var(--f-display);font-weight:300;
  font-size:clamp(22px,3.3vw,46px);line-height:1.12;letter-spacing:-.018em;
  max-width:26ch;
}

/* ── la marca de la Plaza ──
   Queda quieta mientras el texto pasa por al lado: no la mueve el scroll,
   gira sola. El canvas es transparente, así que se apoya sobre la cal.

   El tamaño es deliberado: la marca ACOMPAÑA al texto, no compite con él.
   Con la caja más grande el logotipo quedaba más alto que el titular y la
   sección pasaba a ser sobre la marca en vez de sobre el lugar. */
.lugar-marca{
  position:relative;
  height:min(52vh,420px);
  margin-inline:auto;
  width:min(100%,320px);
}

/* ── en su lugar, y nada más ──
   La marca ocupa su hueco en la columna y se queda ahí: scrollea con la
   página como cualquier otro elemento. El único movimiento que tiene es el
   giro, que corre solo y no depende del scroll.

   NO va con `sticky` ni con `fixed`. Las dos la despegan del documento y la
   hacen viajar con la ventana, que es exactamente lo que no se quiere: se
   probaron las dos y las dos se sienten como que la marca te sigue. */
@media(min-width:900px){
  /* 72vh y no 88: la marca arranca a la altura del titular, o sea ya un
     buen tramo abajo del borde. Con 88 el logotipo se salía por el pie de la
     ventana en pantallas bajas y solo se veía el aro. El tope de altura tiene
     que dejar lugar a lo que la empuja desde arriba. */
  .lugar-marca{width:100%;height:min(72vh,720px)}
}
#ruedo,.lugar-marca-plana{
  position:absolute;inset:0;width:100%;height:100%;
}
#ruedo{display:none;opacity:0;transition:opacity 1.2s ease}
#ruedo.listo{opacity:1}
.lugar-marca-plana{object-fit:contain;opacity:.92}

/* El volumen solo donde vale la pena, y ahí el plano no va.
   Se decide por el media query, NO por la clase .listo: atado al estado, el
   plano desaparecía en el mismo cuadro en que el canvas empezaba a aparecer
   y quedaba 1,2 s de hueco. La red por si WebGL falla es .sin3d, que la pone
   el JS igual que .hay3d en el recorrido. */
@media(min-width:900px) and (prefers-reduced-motion:no-preference){
  #ruedo{display:block}
  .lugar-marca:not(.sin3d) .lugar-marca-plana{display:none}
}

/* ── ciento once años, contados ──
   El año enorme entre las dos declaraciones. Números tabulares: al contar
   de 1912 a 2021 no puede saltar de ancho. La línea se dibuja con scaleX
   desde la izquierda (main.js, contarAnios). */
.lugar-anios{
  margin:0;display:flex;flex-direction:column;gap:clamp(10px,1.2vw,16px);
  max-width:26ch;
}
.lugar-anios-n{
  display:block;font-family:var(--f-display);font-weight:300;
  font-size:clamp(84px,13vw,196px);line-height:.92;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;color:var(--tinta);will-change:transform,opacity;
}
.lugar-anios-linea{display:block;height:1px;background:var(--linea-fuerte);transform-origin:0 50%}

.cifras{
  margin:0;display:flex;flex-wrap:wrap;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
}
.cifra{
  flex:1 1 132px;padding:16px 20px 18px;
  display:flex;flex-direction:column;gap:4px;
  border-left:1px solid var(--linea);
}
.cifra:first-child{border-left:0}
.cifra dt{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--humo);
}
.cifra dd{
  margin:0;font-family:var(--f-display);font-weight:300;
  font-size:clamp(26px,3vw,36px);line-height:1;
  font-variant-numeric:tabular-nums;
}
.cifra dd em{font-family:var(--f-mono);font-style:normal;font-size:13px;color:var(--humo)}

/* ═══════════ 03 · MANIFIESTO ═══════════ */
.manifiesto{
  padding:clamp(70px,10vw,150px) var(--pad);
  display:flex;flex-direction:column;gap:clamp(24px,3.5vw,44px);
}
.manifiesto-cols{display:grid;gap:clamp(20px,3vw,48px);grid-template-columns:1fr}
@media(min-width:820px){.manifiesto-cols{grid-template-columns:1fr 1fr}}

/* ═══════════ CAPAS ═══════════
   La página es una pila de hojas, no un scroll plano. Cada bloque grande
   monta unos píxeles sobre el anterior, con la esquina redondeada y una
   sombra corta: se lee como una hoja apoyada encima, no como un borde.
   Es solo apariencia — no cambia el flujo ni el orden del documento. */
.hoja{
  position:relative;
  border-top-left-radius:var(--radio-hoja,18px);
  border-top-right-radius:var(--radio-hoja,18px);
  margin-top:calc(var(--monta,34px) * -1);
  box-shadow:0 -1px 0 var(--linea), 0 -18px 40px -24px rgba(16,18,22,.45);
}
/* cada una por encima de la anterior, o la sombra quedaría tapada */
.muestras{z-index:2}
.recorrido{z-index:3}
.visitar{z-index:4}
.pie{z-index:5}
@media(max-width:767px){
  :root{--radio-hoja:12px;--monta:20px}
}

/* ═══════════ 04 · MUESTRAS (el índice del archivo) ═══════════
   Sin fotos: las muestras se listan como fichas de catálogo y las
   imágenes se ven de una sola forma en todo el sitio, caminando el
   pasillo de la sección siguiente. */
.muestras{background:var(--fondo)}

.fichas{
  list-style:none;margin:0;counter-reset:f;
  padding:0 var(--pad);
}
.ficha{
  counter-increment:f;
  display:grid;grid-template-columns:1fr;gap:8px;
  padding:clamp(22px,2.7vw,34px) 0;
  border-top:1px solid var(--linea);
  /* una sola encendida por vez, como pasaba con el riel */
  opacity:.42;transition:opacity var(--t-suave) var(--ease-salida);
}
.ficha:last-child{border-bottom:1px solid var(--linea)}
/* una vez leída no vuelve a apagarse del todo: lo que ya pasó se distingue */
.ficha.visto{opacity:.62}
.ficha.foco{opacity:1}
.ficha::before{
  content:counter(f,decimal-leading-zero);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  color:var(--humo);font-variant-numeric:tabular-nums;
}
@media(min-width:900px){
  .ficha{
    grid-template-columns:54px 168px minmax(0,.85fr) minmax(0,1.15fr) 104px;
    gap:0 clamp(20px,2.2vw,34px);align-items:start;
  }
  .ficha::before{padding-top:.6em}
}
.ficha-fecha{
  margin:0;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--humo);padding-top:.7em;
}
.ficha-titulo{
  margin:0;font-family:var(--f-display);font-weight:300;
  font-size:clamp(22px,2.5vw,32px);line-height:1.06;letter-spacing:-.014em;
  transition:transform var(--t-suave) var(--ease-salida);
}
.ficha.foco .ficha-titulo{transform:translateX(6px)}
.ficha-cuerpo{display:flex;flex-direction:column;gap:7px}
.ficha-artista{margin:0;font-size:14px;color:var(--humo)}
.ficha-copy{margin:0;font-size:14.5px;line-height:1.55;opacity:.82;max-width:52ch}
.ficha-marca{
  margin:0;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--humo);padding-top:.9em;
}
@media(min-width:900px){.ficha-marca{text-align:right}}
/* el punto marca las que se pueden recorrer adentro de la sala */
.ficha-marca::before{
  content:"";display:inline-block;width:5px;height:5px;margin-right:8px;
  border-radius:50%;background:var(--tinta);vertical-align:.12em;
}
.ficha-marca-vacia{opacity:.55}
.ficha-marca-vacia::before{background:none;border:1px solid var(--humo)}

.fichas-pie{
  margin:0;padding:clamp(26px,3vw,40px) var(--pad) clamp(70px,9vw,130px);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--humo);
}
.fichas-pie-flecha{color:var(--tinta);opacity:.75}
.fichas-pie-flecha{animation:respira 3.2s ease-in-out infinite}

/* ═══════════ 06 · VISITAR ═══════════ */
.visitar{padding:clamp(90px,11vw,165px) var(--pad) clamp(70px,10vw,150px);background:var(--fondo)}
.visitar-grid{display:grid;gap:clamp(32px,5vw,72px);grid-template-columns:1fr}
@media(min-width:900px){.visitar-grid{grid-template-columns:1fr 1fr}}

/* ── con el apoyo de ──
   Diez marcas en un solo color: cada logo es una máscara (mask-image con
   el archivo) pintada con currentColor. Descansan en humo y pasan a tinta
   al pasar la mano, levantándose apenas. --ratio y --alto vienen del HTML. */
.apoyos{margin-top:clamp(64px,8vw,120px);display:flex;flex-direction:column;gap:clamp(26px,3.4vw,44px)}
.apoyos-lista{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(22px,3vw,40px) clamp(28px,4vw,64px);
}
/* La mano las despierta: main.js (campoDeTinta) les escribe --cerca de 0 a 1
   según la distancia al puntero, dentro de 170 px. Con eso cada marca sube
   hasta 8 px y pasa de humo a tinta de forma continua: al barrer la fila con
   el mouse se levantan en ola, como teclas. GSAP anima el <a> (entrada);
   el CSS mueve la <i> de adentro, así no se pisan. */
.apoyo{position:relative;display:inline-flex;align-items:center;color:var(--humo)}
.apoyo-marca{
  display:block;height:var(--alto,32px);width:calc(var(--alto,32px) * var(--ratio,3));
  color:color-mix(in srgb,var(--tinta) calc(var(--cerca,0) * 100%),var(--humo));
  background:currentColor;
  -webkit-mask:var(--marca) center / contain no-repeat;mask:var(--marca) center / contain no-repeat;
  transform:translateY(calc(var(--cerca,0) * -8px)) scale(calc(1 + var(--cerca,0) * .05));
  transition:transform .14s ease-out,color .14s ease-out;
}
/* el nombre aparece debajo al pasar la mano o al enfocar con el teclado */
.apoyo::after{
  content:attr(data-nombre);position:absolute;left:0;top:100%;margin-top:9px;white-space:nowrap;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta);
  opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity var(--t-toque) ease,transform var(--t-toque) var(--ease-salida);
}
@media (hover:hover) and (pointer:fine){
  .apoyo:hover::after,.apoyo:focus-visible::after{opacity:1;transform:none}
}
a.apoyo:active .apoyo-marca{transform:translateY(-2px) scale(.96)}

/* ── los estandartes (escritorio) ──
   Las diez marcas cuelgan alrededor del ruedo. Es CSS 3D: la lista es el
   aro (rotateY según --giro, que escribe main.js), cada <li> se pone en su
   ángulo con rotateY(a) translateZ(r) y se vuelve a girar -a para mirar
   siempre al frente (si no, los del fondo se verían al revés). La planta del
   redondel tumbada (rotateX 80°) es el piso. --prof (0 atrás, 1 enfrente) lo
   escribe main.js cada cuadro: da la opacidad y el color de cada uno. */
.apoyos-foco,.apoyos-guia,.apoyos-piso{display:none}
@media (min-width:768px){
  .apoyos-escena{
    position:relative;height:clamp(420px,60vh,600px);
    perspective:1200px;perspective-origin:50% 30%;
    touch-action:pan-y;user-select:none;-webkit-user-select:none;
    cursor:grab;
  }
  .apoyos-escena.arrastrando{cursor:grabbing}
  .apoyos-piso{
    display:block;position:absolute;left:50%;top:50%;width:calc(var(--r) * 2.4);height:auto;
    margin-left:calc(var(--r) * -1.2);margin-top:calc(var(--r) * -1.2);
    transform:translateY(110px) rotateX(76deg) rotate(180deg);
    color:var(--tinta);opacity:.26;pointer-events:none;
  }
  .piso-anillo{fill:none;stroke:currentColor;stroke-width:.006}
  .piso-cuna{fill:currentColor;opacity:.22}
  .apoyos-escena{--r:min(34vw,340px)}
  /* el aro se ve un poco desde arriba: los de atrás quedan más altos y
     más chicos, y no se pisan con los de adelante */
  .apoyos-lista{
    position:absolute;inset:0;display:block;margin:0;padding:0;
    transform-style:preserve-3d;transform:rotateX(-16deg);
  }
  .apoyos-lista > li{
    position:absolute;left:50%;top:50%;
    transform-style:preserve-3d;
    transform:translate(-50%,-50%)
              rotateY(calc((var(--a,0) + var(--giro,0)) * 1deg))
              translateZ(var(--r))
              rotateY(calc((var(--a,0) + var(--giro,0)) * -1deg));
    opacity:calc(.22 + .78 * var(--prof,1));
    will-change:transform,opacity;
  }
  .apoyos-lista > li .apoyo-marca{
    color:color-mix(in srgb,var(--tinta) calc(max(var(--prof,0) * var(--prof,0) * 100%, var(--cerca,0) * 100%)),var(--humo));
  }
  /* el alambre del que cuelga cada estandarte, como las obras del pasillo */
  .apoyos-lista > li .apoyo::before{
    content:"";position:absolute;left:50%;bottom:calc(100% + 10px);width:1px;height:96px;
    background:linear-gradient(to top,var(--linea-fuerte),transparent);
  }
  .apoyos-lista > li .apoyo::after{display:none} /* el nombre va en el centro, abajo */
  .apoyos-foco{
    display:block;margin:0;text-align:center;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--tinta);min-height:1.4em;
  }
  .apoyos-foco .ml{height:1.3em}
  .apoyos-guia{
    display:block;margin:10px 0 0;text-align:center;
    font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--humo);transition:opacity .6s ease;
  }
  .apoyos-guia.fuera{opacity:0}
}
@media(max-width:767px){
  .apoyos-lista{gap:22px 28px}
  .apoyo-marca{height:calc(var(--alto,32px) * .78);width:calc(var(--alto,32px) * .78 * var(--ratio,3))}
}
.datos{margin:0;display:flex;flex-direction:column}
.dato{
  padding:18px 0;border-top:1px solid var(--linea);
  display:grid;gap:4px 24px;grid-template-columns:1fr;
}
@media(min-width:560px){.dato{grid-template-columns:200px 1fr}}
.dato:last-child{border-bottom:1px solid var(--linea)}
.dato dt{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--humo);padding-top:3px;
}
.dato dd{margin:0}
.dato a{
  /* inline-block con alto mínimo: en línea medían 21 px de alto y son lo
     único que la página pide hacer, con tráfico que llega de Instagram */
  display:inline-block;min-height:44px;padding-top:10px;margin-top:-10px;
  border-bottom:1px solid var(--linea-fuerte);
  transition:border-color var(--t-toque) var(--ease-salida),
             opacity var(--t-toque) var(--ease-salida);
}
.dato a:hover{border-color:var(--tinta)}
/* entradas e Instagram son la única acción que pide la página: en touch,
   sin :active, no acusa recibo de nada */
.dato a:active{opacity:.55}

/* ═══════════ PIE ═══════════ */
.pie{
  padding:clamp(50px,7vw,90px) var(--pad);
  border-top:1px solid var(--linea);
  display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;
}
.pie-logo{width:150px;height:auto;filter:invert(1) brightness(1.12);opacity:.85}
.pie-linea{
  margin:0;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--humo);
}

/* ═══════════ CELULAR: versión simple ═══════════
   Sin pin y sin scrub. El índice de muestras ya es una lista: en
   celular se apila sola y no necesita ninguna versión aparte. */
@media(max-width:767px){
  body{font-size:16px}
  .barra-nav{display:none}
  .barra-logo img{width:112px}

  .portada{height:auto}
  .portada-pin{height:88vh;min-height:520px}
  .sello{width:min(84vmin,420px);height:min(84vmin,420px)}

  .declaracion{max-width:none}
  .ficha{opacity:1}
  .ficha-titulo{font-size:24px}
}

/* ═══════════ MOVIMIENTO REDUCIDO ═══════════ */
@media (prefers-reduced-motion:reduce){
  .sello-gira,.pista span{animation:none}
  .dato a,.barra-nav a{transition:none}
  .portada{height:auto}
  .portada-pin{height:100vh;position:relative}
  .regla{transform:none}
  .visor-cerrar:active{transform:none}
  .ficha{opacity:1;transition:none}
  .ficha-titulo{transition:none}
}

/* ═══════════════════════════════════════════════════════════
   CAPA DE MOVIMIENTO
   Todo lo que sigue se agregó en la segunda pasada: la entrada,
   la luz de sala, la cinta de nombres y el foco del índice.
   Mismo sistema de color: cal, tinta y línea. Ningún acento.
   ═══════════════════════════════════════════════════════════ */

/* ── 00 · UMBRAL (la entrada) ──────────────────────────────
   Dos hojas que se abren, como el portón del redondel.
   El fallback CSS lo saca solo si el JS nunca corre. */
.umbral{position:fixed;inset:0;z-index:300;pointer-events:none;
  animation:umbral-solo .5s ease 3.4s forwards}
html.js .umbral{animation:none}
@keyframes umbral-solo{to{opacity:0;visibility:hidden}}
.umbral.fuera{display:none}

.umbral-hoja{
  position:absolute;left:-1px;right:-1px;height:50.4%;
  background:var(--fondo);will-change:transform;
}
.umbral-arriba{top:0}
.umbral-abajo{bottom:0}

.umbral-centro{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;padding-inline:var(--pad);
}
.umbral-marca{
  margin:0;font-family:var(--f-display);font-weight:300;
  font-size:clamp(28px,5vw,52px);line-height:1;letter-spacing:-.015em;
}
.umbral-riel{
  margin:0;width:min(52vw,420px);height:1px;
  background:var(--linea);overflow:hidden;
}
.umbral-riel i{display:block;height:100%;width:0;background:var(--tinta)}
.umbral-anio{
  margin:0;font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;
  color:var(--humo);font-variant-numeric:tabular-nums;
}

/* ── luz de sala: sigue al puntero ──
   Se pinta en blanco y se mezcla por diferencia, igual que la gota de
   tinta: sobre la cal deja una sombra tenue, sobre la tinta un halo
   claro. Un solo degradado alcanza para los dos fondos; con multiply
   (como estaba) en los bloques oscuros no se veía nada. */
.luz{
  position:fixed;top:0;left:0;width:960px;height:960px;
  margin:-480px 0 0 -480px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.09),rgba(255,255,255,.035) 42%,transparent 68%);
  pointer-events:none;z-index:90;opacity:0;
  mix-blend-mode:difference;will-change:transform;
}
@media (hover:hover) and (pointer:fine){.luz.viva{opacity:1;transition:opacity .8s ease}}
/* adentro de la sala no hay linterna: estás dentro de la escena */
.luz.apagada{opacity:0}

/* ── palabras y letras que suben con el scroll ──
   Los títulos de sección (escritorio) se parten en palabras .lt dentro de
   la máscara de cada línea; la firma del pie, en letras. La rotación
   nace en la esquina de abajo a la izquierda: la palabra cae en su lugar. */
.lt{display:inline-block;transform-origin:0 100%;will-change:transform}
.rotulo .eyebrow{will-change:clip-path}

/* ── acuse de recibo al pasar la mano ──
   Cerca de la mano la tinta se humedece: las palabras partidas (.lt, .pl)
   reciben --cerca de 0 a 1 según la distancia (main.js, campoDeTinta) y
   les crece una sombra difusa del color de la tinta. Se pone en una clase
   aparte para que las lejanas no paguen una sombra de alfa cero. Y lo que
   se puede tocar se levanta apenas al pasar. */
.lt.cerca,.pl.cerca{
  text-shadow:0 0 calc(var(--cerca,0) * 12px) rgba(var(--tinta-rgb),calc(var(--cerca,0) * .65));
}
@media (hover:hover) and (pointer:fine){
  .cifra dd,.cinta-grupo b,.dato dt,.ficha-fecha,.pie-logo{transition:transform var(--t-suave) var(--ease-salida),color var(--t-toque) ease}
  .cifra:hover dd{transform:translateY(-4px)}
  .cinta-grupo b:hover{transform:translateY(-4px)}
  .dato:hover dt,.ficha:hover .ficha-fecha{color:var(--tinta)}
  .pie-logo:hover{transform:scale(1.03)}
  .ficha:hover{opacity:1}
  .ficha:hover .ficha-titulo{transform:translateX(6px)}
  /* el enlace se subraya en tinta de izquierda a derecha, encima de su
     línea gris; el borde ya no se oscurece, o quedaban dos líneas */
  .dato a{
    background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 0 1px;
    transition:background-size var(--t-suave) var(--ease-salida),
               opacity var(--t-toque) var(--ease-salida);
  }
  .dato a:hover{border-color:var(--linea-fuerte);background-size:100% 1px}
}

/* ── la gota de tinta: el cursor ──
   Lienzo WebGL a pantalla completa (js/tinta.js). Va por diferencia y en
   blanco: la hoja decide el color. Por ENCIMA de la barra (100), así al
   pasar por un enlace la gota lo da vuelta —texto claro adentro de la
   tinta—; debajo del visor (250): la gota no se mete en la obra que estás
   mirando en grande. */
.tinta{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:110;
  mix-blend-mode:difference;
  opacity:0;transition:opacity .6s ease;
}
.tinta.lista{opacity:1}

/* ── la mira: el cursor ──
   Un anillo fino y un punto, blancos por diferencia: tinta sobre cal, cal
   sobre tinta. El punto va pegado a la mano y el anillo llega después
   (main.js, armarMira). Sobre algo que se puede tocar el anillo se abre y
   el punto se apaga; si el elemento dice data-mira, el rótulo lo cuenta.
   Mientras la mira está viva la flecha del sistema se esconde. */
.mira{position:fixed;inset:0;z-index:110;pointer-events:none;mix-blend-mode:difference;
  opacity:0;transition:opacity .35s ease}
.mira.viva{opacity:1}
/* GSAP mueve el span de afuera (x/y) y el CSS escala la <i> de adentro:
   al escribir un transform, GSAP pone `scale:none` en línea y pisaría
   cualquier `scale` propio del mismo elemento. */
.mira-anillo,.mira-punto,.mira-rotulo{position:absolute;top:0;left:0;width:0;height:0;will-change:transform}
.mira-anillo i,.mira-punto i,.mira-rotulo i{position:absolute;display:block}
/* Tenue y difusa a pedido de Mathias: el anillo al 55 % y apenas borroso,
   el punto es un halo con degradado en vez de un disco duro. Sigue siendo
   blanco por diferencia, así que "55 %" es medio gris sobre cal. */
.mira-anillo i{
  width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);box-sizing:border-box;
  filter:blur(.6px);
  transition:transform .32s var(--ease-salida),border-color .2s ease;
}
.mira-punto i{width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.85),rgba(255,255,255,0) 70%);
  filter:blur(.8px);
  transition:transform .2s var(--ease-salida),opacity .2s ease}
.mira-rotulo i{
  margin:16px 0 0 -40px;width:80px;text-align:center;font-style:normal;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.85);opacity:0;transform:translateY(6px);
  transition:opacity .22s ease,transform .22s var(--ease-salida);
}
.mira.sobre .mira-anillo i{transform:scale(1.9);border-color:rgba(255,255,255,.75)}
.mira.sobre .mira-punto i{transform:scale(0);opacity:0}
.mira.con-rotulo .mira-anillo i{transform:scale(2.3)}
.mira.con-rotulo .mira-rotulo i{opacity:1;transform:translateY(20px)}
.mira.apretada .mira-anillo i{transform:scale(.8)}
.mira.sobre.apretada .mira-anillo i{transform:scale(1.55)}
@media (hover:hover) and (pointer:fine){
  html.con-mira,html.con-mira body,html.con-mira a,html.con-mira button,html.con-mira [role=button],
  html.con-mira canvas{cursor:none !important}
}

/* ── barra: hover con máscara + índice de escena ── */
.nt{display:block;overflow:hidden;height:1.05em;position:relative}
.nt span{display:block;transition:transform var(--t-toque) var(--ease-salida)}
@media (hover:hover) and (pointer:fine){
  .barra-nav a:hover .nt span,.barra-nav a:focus-visible .nt span{transform:translateY(-100%)}
}
.indice{
  margin:0 4px 0 0;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.14em;color:var(--humo);font-variant-numeric:tabular-nums;
}
.indice .ml{height:1.1em}

/* ── cinta: los nombres que pasaron, corriendo ── */
.cinta{
  overflow:hidden;border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
  padding:clamp(16px,2.4vw,26px) 0;
}
.cinta-riel{display:flex;width:max-content;will-change:transform}
.cinta-grupo{
  display:flex;align-items:center;gap:clamp(20px,3vw,40px);
  padding-right:clamp(20px,3vw,40px);flex:none;
}
.cinta-grupo b{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(20px,3.2vw,40px);line-height:1;
  letter-spacing:-.01em;color:var(--humo);white-space:nowrap;
}
.cinta-grupo i{
  width:5px;height:5px;border-radius:50%;
  background:var(--linea-fuerte);flex:none;
}

/* ── manifiesto: el texto se enciende palabra por palabra ── */
.pl{display:inline-block;opacity:.2}
/* la declaración del lugar es un bloque grande: apagada tiene que leerse
   como gris, no como casi nada */
.declaracion .pl{opacity:.24}

/* ── pie: la marca grande, cortada por el borde ── */
.pie-marca{
  margin:clamp(20px,4vw,50px) 0 calc(-.16em - 1px);
  width:100%;text-align:center;
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(52px,15.5vw,240px);line-height:.82;
  letter-spacing:-.03em;color:var(--tinta);opacity:.13;
  white-space:nowrap;
}
.pie{overflow:hidden}
.pie-marca .ml{height:.82em}

/* ── celular: la capa de movimiento, simple ── */
@media(max-width:767px){
  .luz,.tinta,.mira{display:none}
  .cinta-grupo b{font-size:22px}
  .recorrido.hay3d{height:auto}
  .recorrido.hay3d .recorrido-pin{display:none}
  .recorrido.hay3d .sala-lista{display:block}
  .umbral-riel{width:66vw}
  .pie-marca{opacity:.16}
}

/* ── movimiento reducido ── */
@media (prefers-reduced-motion:reduce){
  .umbral{display:none}
  .luz,.tinta,.mira{display:none}
  .nt span{transition:none}
  .pl{opacity:1}
  .cinta-riel{transform:none !important}
  .recorrido.hay3d{height:auto}
  .recorrido.hay3d .recorrido-pin{display:none}
  .recorrido.hay3d .sala-lista{display:block}
  .visor{backdrop-filter:none}
}

/* ═══════════ 05 · EL RECORRIDO ═══════════
   Por defecto se ve la grilla: eso es lo que queda sin JS, sin WebGL,
   con movimiento reducido y en celular. El JS agrega .hay3d y recién
   ahí aparece la sala caminable. */
.recorrido{position:relative;background:var(--fondo)}
.recorrido-pin{display:none}

/* El largo del paseo crece con la cantidad de obras: 22,75vh por obra,
   que con las 29 originales daba los 660vh con los que se afinó el ritmo.
   main.js escribe --obras al prender la sala. */
.recorrido.hay3d{--obras:29;height:calc(var(--obras) * 22.75vh)}
.recorrido.hay3d .sala-lista{display:none}
.recorrido.hay3d .recorrido-pin{
  display:block;height:100vh;position:sticky;top:0;overflow:hidden;
  background:var(--fondo);
}
#sala{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1s ease;
}
#sala.listo{opacity:1}

.recorrido-hud{
  position:absolute;left:var(--pad);bottom:clamp(28px,6vh,58px);
  z-index:2;pointer-events:none;max-width:min(46ch,60vw);
}
.recorrido-muestra{
  margin:10px 0 6px;font-family:var(--f-display);font-weight:300;
  font-size:clamp(24px,3.6vw,44px);line-height:1;letter-spacing:-.018em;
}
/* la máscara recorta a una línea: el nombre no puede envolver */
.recorrido-muestra .ln{white-space:nowrap}
.recorrido-muestra .ml{height:1.02em}
.recorrido-nota{margin:0;font-size:14.5px;color:var(--humo);line-height:1.45}

.recorrido-cuenta{
  position:absolute;right:var(--pad);bottom:clamp(28px,6vh,58px);z-index:2;
  margin:0;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
  color:var(--humo);font-variant-numeric:tabular-nums;pointer-events:none;
}
.recorrido-cuenta b{font-weight:400;color:var(--tinta)}
.recorrido-cuenta i{font-style:normal;margin:0 6px;opacity:.5}

.recorrido-guia{
  position:absolute;left:50%;transform:translateX(-50%);
  top:calc(var(--barra-h) + 18px);z-index:2;margin:0;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--humo);opacity:.7;
  pointer-events:none;text-align:center;
  transition:opacity .6s ease;
}
/* apenas mirás alrededor la instrucción sobra */
.recorrido-guia.ida{opacity:0}

/* ── la grilla (respaldo y celular) ── */
.sala-lista{padding:clamp(60px,8vw,110px) var(--pad) clamp(50px,7vw,100px)}
.sala-cabecera{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(28px,4vw,48px)}
.sala-grilla{columns:1;column-gap:18px}
@media(min-width:640px){.sala-grilla{columns:2}}
@media(min-width:1040px){.sala-grilla{columns:3;column-gap:22px}}
.sala-obra{margin:0 0 18px;break-inside:avoid;display:flex;flex-direction:column;gap:8px}
.sala-obra img{width:100%;height:auto;border:1px solid var(--linea)}
/* Es la vista principal en celular: 29 fotos que aparecían de un saque al
   terminar de decodificar. Cada una entra cuando está lista.
   Dos candados, porque acá esconder algo sale caro:
     · .js — si el JS no corre nunca se agrega .cargada y quedarían en negro;
     · no-preference dentro del @media — si el override viviera suelto en otra
       parte del archivo, ganaría el que esté más abajo. Ya pasó. */
@media (prefers-reduced-motion:no-preference){
  .js .sala-obra img{opacity:0;transition:opacity .5s var(--ease-salida)}
  .js .sala-obra img.cargada{opacity:1}
}
.sala-obra figcaption{display:flex;flex-direction:column;gap:2px}
.sala-obra b{
  font-family:var(--f-mono);font-weight:400;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--humo);
}
.sala-obra span{font-size:14px;line-height:1.4;opacity:.9}

/* ── el visor ── */
.visor{
  position:fixed;inset:0;z-index:250;
  background:rgba(10,11,13,.96);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(40px,6vh,72px) var(--pad);
}
.visor[hidden]{display:none}
.visor-marco{
  margin:0;display:flex;flex-direction:column;gap:14px;
  max-width:min(1100px,100%);max-height:100%;
}
.visor-marco img{
  max-width:100%;max-height:calc(100vh - 168px);
  width:auto;height:auto;object-fit:contain;
  border:1px solid var(--linea);margin-inline:auto;
}
.visor-marco figcaption{display:flex;flex-direction:column;gap:4px;text-align:center}
.visor-marco b{
  font-family:var(--f-mono);font-weight:400;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--humo);
}
.visor-marco span{font-size:15px;opacity:.92}
.visor-cerrar{
  position:absolute;top:clamp(16px,3vh,30px);right:var(--pad);
  background:none;border:1px solid var(--linea-fuerte);color:var(--tinta);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;padding:11px 18px;cursor:pointer;
  min-height:44px;
  transition:border-color var(--t-toque) var(--ease-salida),
             background var(--t-toque) var(--ease-salida),
             transform var(--t-toque) var(--ease-salida);
}
.visor-cerrar:hover{border-color:var(--tinta);background:rgba(var(--velo),.08)}
.visor-cerrar:active{transform:scale(.96)}

/* ═══════════ 03 · EL ARCHIVO (la entrada al índice) ═══════════
   Antes de listar nada se dibujan diez paneles vacíos: es lo que son
   las muestras antes de montarse. Recién después llega el índice. */
.archivo{
  padding:clamp(70px,10vw,140px) 0 clamp(34px,4.5vw,62px);
  display:flex;flex-direction:column;gap:clamp(32px,4.6vw,58px);
}
.archivo-texto{
  padding-inline:var(--pad);
  display:flex;flex-direction:column;gap:clamp(18px,2.6vw,30px);
}
.archivo-planos{padding-inline:var(--pad)}
.planos-svg{
  width:100%;height:clamp(88px,12vw,152px);display:block;overflow:visible;
}
.planos-svg rect,.planos-svg circle{
  fill:none;stroke:var(--linea-fuerte);stroke-width:1.1;
  vector-effect:non-scaling-stroke;
}
.archivo-cuenta{
  margin:16px 0 0;display:flex;align-items:baseline;gap:11px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--humo);
}
.archivo-cuenta .num{
  font-family:var(--f-display);font-weight:300;line-height:1;
  font-size:clamp(30px,4.2vw,50px);letter-spacing:-.02em;color:var(--tinta);
  font-variant-numeric:tabular-nums;
}

/* La barra NO transiciona el color al darse vuelta, y es a propósito.
   El fondo se arma con --velo, que es una custom property y no interpola:
   salta en un cuadro. Lo mismo el filter del logo y el conic-gradient del
   anillo. Si el color tardara 350 ms, durante ese rato el texto quedaría a
   mitad de camino sobre un piso ya invertido: un bajón de contraste, cuatro
   veces por visita. El vuelco es un borde duro, tiene que verse como un corte. */

@media(max-width:767px){
  .planos-svg{height:74px}
}
@media (prefers-reduced-motion:reduce){
  .planos-svg rect,.planos-svg circle{stroke-dashoffset:0 !important}
}

/* ═══════════════════════════════════════════════════════════════════════
   CELULAR (≤767px) — no es la web achicada

   El teléfono tiene su propia versión de las tres escenas grandes, y por eso
   ni siquiera baja Three.js (ver el bloque de <script> al final del HTML):

     · portada  → la planta del redondel dibujándose en SVG, en vez del
                  volumen 3D, que acá quedaba congelado en media pose;
     · marca    → no va: la planta de la portada ya es el isotipo;
     · pasillo  → la misma grilla de obras vuelta riel horizontal imantado.
                  Se camina con el dedo, que es el gesto que corresponde.

   Va AL FINAL del archivo a propósito. Estas reglas pisan a las de arriba
   con la misma especificidad, así que tienen que llegar después. Poner un
   override de celular a mitad del archivo ya rompió cosas antes.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:767px){

  /* ── base ── */
  html{-webkit-text-size-adjust:100%}
  body{font-size:16px}
  /* el destello gris de Android en cada toque pelea con el press propio */
  a,button,.ficha,.sala-obra{-webkit-tap-highlight-color:transparent}
  :root{--pad:20px}

  /* ── la barra: se va cuando bajás, vuelve cuando subís ──
     Es una página de nueve mil píxeles y la barra tapaba texto todo el
     tiempo. Escondiéndola al bajar, la lectura queda limpia; al subir
     vuelve sola, que es cuando la vas a querer. */
  .barra{
    height:calc(56px + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
    gap:12px;
    background:linear-gradient(to bottom,
      rgba(var(--velo),.99) 0%, rgba(var(--velo),.97) 64%, rgba(var(--velo),0) 100%);
    transform:translate3d(0,0,0);
    transition:transform .34s var(--ease-salida);
  }
  .barra.escondida{transform:translate3d(0,-105%,0)}
  /* con el índice abierto la barra se queda: ahí vive el botón de cerrar */
  .barra.fija{transform:translate3d(0,0,0) !important}
  .barra-nav{display:none}
  .barra-logo img{width:112px}
  .barra-marca{font-size:12px}
  /* sin la nav, el índice y el aro se amontonaban contra el logo */
  .indice{margin-left:auto}

  .barra-menu{
    -webkit-appearance:none;appearance:none;
    display:flex;align-items:center;gap:8px;
    min-height:44px;padding:0 2px 0 10px;margin:0;
    background:none;border:0;color:var(--humo);
    font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;
    text-transform:uppercase;cursor:pointer;
  }
  .barra-menu span{display:block}
  /* dos rayas: la de arriba más corta, para que se lea como un índice
     y no como el menú de una app cualquiera */
  .barra-menu i{
    display:block;position:relative;width:17px;height:9px;flex:none;
  }
  .barra-menu i::before,.barra-menu i::after{
    content:"";position:absolute;left:0;height:1px;background:currentColor;
    transition:width var(--t-toque) var(--ease-salida),
               transform var(--t-toque) var(--ease-salida);
  }
  .barra-menu i::before{top:2px;width:17px}
  .barra-menu i::after{bottom:2px;width:11px}
  .barra.en-oscuro .barra-menu{color:#8E9299}
  .barra-menu[aria-expanded="true"]{color:var(--tinta)}
  .barra-menu[aria-expanded="true"] i::before{top:4px;transform:rotate(45deg);width:15px}
  .barra-menu[aria-expanded="true"] i::after{bottom:4px;transform:rotate(-45deg);width:15px}

  /* ── la hoja del índice ──
     Los destinos van abajo, en el tramo donde llega el pulgar; arriba
     queda el aire. */
  /* z-index 90: DEBAJO de la barra, que va en 100. La barra tiene que
     quedar arriba de la hoja porque ahí está el botón que la cierra —y se
     da vuelta sola al fondo oscuro, así que se lee igual. */
  .indice-hoja{
    position:fixed;inset:0;z-index:90;
    display:flex;flex-direction:column;justify-content:flex-end;
    gap:30px;
    padding:calc(70px + env(safe-area-inset-top)) var(--pad)
            calc(38px + env(safe-area-inset-bottom));
    opacity:0;
    transition:opacity .26s var(--ease-salida);
  }
  .indice-hoja.abierta{opacity:1}
  .indice-lista{list-style:none;margin:0;padding:0}
  .indice-lista a{
    display:flex;align-items:baseline;gap:16px;
    padding:13px 0;min-height:52px;
    border-bottom:1px solid var(--linea);
  }
  .indice-lista li:first-child a{border-top:1px solid var(--linea)}
  .indice-lista b{
    font-family:var(--f-mono);font-weight:400;font-size:10.5px;
    letter-spacing:.16em;color:var(--humo);
    font-variant-numeric:tabular-nums;flex:none;
  }
  .indice-lista span{
    font-family:var(--f-display);font-weight:300;
    font-size:29px;line-height:1;letter-spacing:-.018em;
  }
  .indice-pie{
    margin:0;display:flex;gap:26px;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--humo);
  }
  .indice-pie a{
    min-height:44px;display:flex;align-items:center;
    border-bottom:1px solid var(--linea-fuerte);
  }

  /* ═══ 01 · PORTADA ═══
     El canvas y el póster se van: la planta ocupa su lugar. */
  #lienzo,.portada-poster,.sello{display:none}
  .portada{height:168vh}
  .portada-pin{height:100vh;min-height:0}
  @supports (height:100svh){
    .portada{height:168svh}
    .portada-pin{height:100svh}
  }
  /* Un lockup apilado: la planta arriba, el nombre abajo. Es el mismo orden
     que tiene el logo de la Plaza, y deja de haber texto encima de líneas.
     Antes la planta iba centrada detrás del título y las dos cosas se
     estorbaban. */
  .portada-pin{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:clamp(20px,5vh,40px);
  }
  .portada-texto{gap:15px}
  /* la línea entera entra en dos renglones: con el tracking de escritorio
     se partía en cuatro */
  .portada-texto .eyebrow{font-size:9.5px;letter-spacing:.11em;max-width:none;text-wrap:balance}
  .portada-bajada{font-size:16.5px;max-width:24ch}
  .pista{bottom:calc(24px + env(safe-area-inset-bottom))}

  /* En el flujo, no absoluta: el hueco que ocupa es el que separa la marca
     del nombre. El scroll le anima la escala, así que no puede traer un
     transform propio de posicionamiento. */
  .planta{
    display:block;position:relative;flex:none;
    width:min(56vw,260px);aspect-ratio:1;height:auto;
    color:var(--tinta);opacity:.62;pointer-events:none;
  }
  /* El grosor va en unidades del viewBox y NO con vector-effect. Con
     non-scaling-stroke el punteado del trazado se calcula en píxeles de
     pantalla: stroke-dasharray:1 pasa a ser una rayita de 1 px y el dibujo
     entero sale punteado en vez de con líneas enteras. Además, así el
     trazo engorda cuando el scroll agranda la planta, que es lo que se
     quiere al entrar. */
  .planta-anillo{fill:none;stroke:currentColor;stroke-width:.0088}
  /* Macizas, como en el logo. Dibujadas como contorno se leían igual que los
     anillos: la marca perdía lo único que la hace reconocible de lejos. */
  .planta-cuna{fill:currentColor;stroke:none}
  /* El viewBox de la planta arranca en 0 0 —y no en -1,06 -1,06— para que
     `transform-origin: 50% 50%` caiga en el centro del dibujo. Con el
     viewBox centrado en el origen, Chrome resolvía ese 50% como coordenada
     absoluta de usuario y el giro quedaba anclado en la esquina: la marca
     ORBITABA, corriéndose fuera de la pantalla a lo largo de los 120 s de
     la vuelta. Era exactamente lo que se veía raro.
     Si algún día se regenera el SVG, el centro tiene que seguir en 1,06. */
  .planta-gira{transform-box:view-box;transform-origin:50% 50%}

  /* ═══ 02 · EL LUGAR ═══
     El hueco de la marca reservaba 420 px de nada: acá no hay marca 3D. */
  .lugar-marca-hueco{display:none}
  .lugar{
    gap:44px;
    padding:78px var(--pad) 62px;
  }
  .lugar-cuerpo{gap:38px}
  .lugar-decir{gap:24px}
  .declaracion{max-width:none;font-size:23px}
  .manifiesto{padding-top:70px}

  /* ═══ 03 · MUESTRAS ═══ */
  .ficha{opacity:1}
  .ficha-titulo{font-size:24px}

  /* ═══ 04 · EL RECORRIDO, CAMINADO CON EL DEDO ═══
     Misma grilla, mismo HTML, mismas fotos: en el teléfono se lee como un
     riel horizontal con imantado. El scroll es nativo, así que la inercia
     es la del sistema y no hay nada que pueda trabarse. */
  .sala-lista{padding:54px 0 44px}
  .sala-cabecera{padding-inline:var(--pad);margin-bottom:20px;gap:10px}

  .sala-paso{
    display:grid;grid-template-columns:auto 1fr;align-items:center;
    gap:8px 14px;padding:0 var(--pad) 18px;
  }
  .sala-cuenta{
    margin:0;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
    color:var(--humo);font-variant-numeric:tabular-nums;
  }
  .sala-cuenta b{font-weight:400;color:var(--tinta)}
  .sala-cuenta i{font-style:normal;margin:0 5px;opacity:.5}
  .sala-guia{
    margin:0;justify-self:end;
    font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--humo);
    transition:opacity var(--t-suave) var(--ease-salida);
  }
  /* apenas diste el primer paso, la instrucción sobra */
  .sala-paso.andando .sala-guia{opacity:0}
  .sala-riel{
    grid-column:1 / -1;margin:0;position:relative;
    height:1px;background:var(--linea);overflow:hidden;
  }
  .sala-riel i{
    position:absolute;inset:0;display:block;background:var(--tinta);
    transform:scaleX(0);transform-origin:0 50%;
  }

  .sala-grilla{
    columns:auto;column-gap:normal;
    display:flex;flex-wrap:nowrap;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-padding-inline:var(--pad);
    padding:0 var(--pad) 6px;
    scrollbar-width:none;
  }
  .sala-grilla::-webkit-scrollbar{display:none}

  .sala-obra{
    flex:0 0 auto;width:min(76vw,330px);
    margin:0 12px 0 0;
    /* imantado por el borde de arranque y no por el centro: la obra que
       estás mirando queda pegada al margen izquierdo, siempre en el mismo
       lugar, y la siguiente asoma. Centrado, la primera y la última nunca
       llegan a su punto y la cuenta miente. */
    scroll-snap-align:start;
    gap:11px;
    /* el JS le pone escala y opacidad según lo lejos del centro que esté:
       lo que mirás está adelante y el resto se corre para atrás */
    /* la escala se toma del borde izquierdo, que es donde imanta */
    transform-origin:0 46%;
    will-change:transform,opacity;
  }
  .sala-obra img{
    aspect-ratio:4 / 5;object-fit:cover;height:auto;
    background:var(--realce);
  }
  .sala-obra b{font-size:9.5px}
  .sala-obra span{font-size:13.5px;line-height:1.35}

  /* el remate: después de la última obra, la salida de la sala */
  .sala-fin{
    display:flex;flex:0 0 auto;
    width:min(58vw,250px);margin:0;
    scroll-snap-align:start;
    flex-direction:column;justify-content:flex-end;gap:7px;
    aspect-ratio:4 / 5;padding:20px;
    border:1px solid var(--linea-fuerte);
    background:var(--realce);
  }
  .sala-fin b{
    font-family:var(--f-mono);font-weight:400;font-size:9.5px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--humo);
  }
  .sala-fin span{
    font-family:var(--f-display);font-weight:300;
    font-size:21px;line-height:1.1;letter-spacing:-.018em;
  }

  /* ═══ 06 · VISITAR y pie ═══ */
  .visitar{padding:78px var(--pad) 70px}
  .pie{padding-bottom:calc(46px + env(safe-area-inset-bottom))}

  /* ═══ el toque: todo lo que se puede tocar responde ═══ */
  .ficha:active,.sala-obra:active,.sala-fin:active,
  .dato a:active,.indice-lista a:active{
    transform:scale(.985);
  }
  .ficha,.sala-fin,.dato a,.indice-lista a{
    transition:transform var(--t-toque) var(--ease-salida);
  }
}

/* Fuera del teléfono nada de esto existe. Va en su propio media query y no
   como regla suelta: suelta, al estar más abajo que el bloque de celular, le
   ganaría por orden y escondería la planta y el riel en el teléfono. */
@media (min-width:768px){
  .planta,.sala-fin,.barra-menu,.indice-hoja{display:none}
}
.indice-hoja[hidden]{display:none !important}

/* ── cómo se arma la planta ──
   Dos gestos, no veintiséis. Antes cada path salía por su cuenta y el
   conjunto se leía como un garabato: veintiséis líneas creciendo a la vez,
   en un orden que no significaba nada.

     1 · los anillos se trazan de adentro hacia afuera, un anillo por paso
         (los tramos de un mismo radio arrancan juntos: son seis pasos, no
         dieciocho);
     2 · recién ahí se enciende el abanico de cuñas, una atrás de otra,
         girando apenas hasta su lugar.

   Arranca a 1,5 s, que es cuando las hojas del umbral ya se están abriendo:
   la marca se está armando cuando la ves aparecer, no dos segundos después.
   No depende del JS — si main.js no llegara a correr, se dibuja igual. */
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
  /* los destinos entran uno atrás de otro, de arriba hacia abajo */
  .indice-lista li{
    opacity:0;transform:translate3d(0,12px,0);
    transition:opacity .3s var(--ease-salida), transform .42s var(--ease-salida);
  }
  .indice-hoja.abierta .indice-lista li{opacity:1;transform:none}
  .indice-lista li:nth-child(1){transition-delay:.03s}
  .indice-lista li:nth-child(2){transition-delay:.07s}
  .indice-lista li:nth-child(3){transition-delay:.11s}
  .indice-lista li:nth-child(4){transition-delay:.15s}
  .indice-lista li:nth-child(5){transition-delay:.19s}
  .indice-lista li:nth-child(6){transition-delay:.23s}
  .indice-pie{
    opacity:0;transition:opacity .3s var(--ease-salida) .26s;
  }
  .indice-hoja.abierta .indice-pie{opacity:1}

  .js .planta-anillo{
    stroke-dasharray:1;stroke-dashoffset:1;
    animation:trazo 1.15s var(--ease-salida) forwards;
    animation-delay:calc(1.5s + var(--i) * .11s);
  }
  .js .planta-cuna{
    opacity:0;
    /* gira alrededor del centro del redondel, no del centro de la cuña */
    transform-box:view-box;transform-origin:50% 50%;
    animation:abanico .62s var(--ease-salida) forwards;
    animation-delay:calc(2.16s + var(--i) * .07s);
  }
  .planta-gira{animation:gira 120s linear infinite}
}
@keyframes trazo{to{stroke-dashoffset:0}}
@keyframes abanico{
  from{opacity:0;transform:rotate(-7deg)}
  to{opacity:1;transform:none}
}