/* =========================================================
   1905 · Portada con relato de scroll. Se carga solo en la portada (inc/home.php).

   Estados (la cabecera decide los tres primeros antes de pintar):
     sin clase      el estado final de cada acto: sin JS, con movimiento reducido o si GSAP no llega. Se ve todo.
     html.m-fx      hay movimiento: el acto 1 abre a sangre, las salas (3) y el encargo (6) van en escenario pegado,
                    también en móvil.
     html.m-desk    además, 900 px o más: medidas de escritorio de esos escenarios.
     html.m-paint   además, hay WebGL (motor de pintura, paint.js): el acto 4 es «The making», a pantalla completa.
     html.m-ready   home.js ya montó las escenas (la cabecera pasa a mandarla .site-header--over).
     html.m-exact   terminó la carga o hubo scroll: la obra exacta del acto 1 ya puede descargarse (home.js).
   Los escenarios van con position: sticky dentro de secciones altas (no con los fijados de ScrollTrigger, que
   pasan a position: fixed y Chrome lo cuenta como un salto de pantalla entera en el CLS).
   Si home.js no llega en 7 s, la cabecera quita las clases y queda el estado final.

   Índice: 0 Lenis y base · 1 La casa · 2 La idea · 3 Las salas · 4 El oficio · 5 Lo único · 6 Lo tuyo
           7 El atelier · 8 Movimiento reducido
   ========================================================= */

/* ---------------------------------------------------------
   0. Lenis (lo esencial de lenis.css: una petición menos) y base de la portada
   --------------------------------------------------------- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Reserva para el titular mientras llega Cormorant: Times con las medidas de Cormorant (ancho 0,967, medido aquí con
   Liberation Serif, que tiene las mismas métricas que Times New Roman). Sin ella, el cambio de fuente repartía el H1
   en otras líneas y movía la obra (CLS 0,07 en móvil con 4G lento). */
@font-face {
  font-family: "M1905 Cormorant Fallback";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("LiberationSerif");
  font-style: normal;
  size-adjust: 96.7%;
  ascent-override: 92.4%;
  descent-override: 28.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "M1905 Cormorant Fallback";
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("LiberationSerif-Italic");
  font-style: italic;
  size-adjust: 93%;
  ascent-override: 92.4%;
  descent-override: 28.7%;
  line-gap-override: 0%;
}

.home { display: block; }
.home:focus { outline: none; }
.home img { max-width: 100%; }

/* La cabecera sobre la obra a sangre ANTES de que home.js tome el mando (luego lo hace .site-header--over). Solo
   arriba del todo (.m-top, lo pone el script de la cabecera): si se baja antes de que llegue home.js, la cabecera
   es la normal y no queda crema sobre crema en el resto de la página. */
.m-fx.m-top:not(.m-ready) .site-header {
  --hdr-bg: transparent;
  --hdr-fg: var(--on-room);
  --hdr-line: transparent;
  --hdr-brand: var(--gold-on-room);
  --hdr-accent: var(--gold-on-room);
  --hdr-cta-hover-fg: var(--ink);
  --focus: var(--gold-on-room);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.site-header--over .brand__mark { text-shadow: 0 1px 12px rgba(19,29,47,.25); }

/* Sobre la obra la cabecera lleva su propio velo de tinta (la etiqueta «Maison d'Art» en oro, de 12 px, bajaba a
   3,2:1 sobre el cielo) y no lleva filete. Cuando entra la luz del acto 1, su fondo crema entra con el mismo borde
   suave que la pared (--lit, home.js) y cada enlace pasa a tinta en cuanto la luz alcanza su centro (.is-lit).
   Al terminar la barrida, la cabecera ya es la normal y se quita .site-header--over sin salto. */
.site-header--over { --hdr-line: transparent; overflow: clip; }
.site-header--over::before,
.site-header--over::after,
.m-fx.m-top:not(.m-ready) .site-header::after {
  content: "";
  position: absolute; z-index: -1;
  pointer-events: none;
}
.site-header--over::before {
  top: 0; bottom: 0; right: 100%;
  width: calc(100% + var(--soft));
  /* Opaco (crema mezclada con el color de la sala, --hdr-room) para que no se vea a través el degradado de la pared,
     y con un escalón pequeño en la línea de la luz (del 56 al 36 %): entre esos dos valores ni la tinta ni la crema
     llegan a 4,5:1 con letra de 12 px, así que el fondo los salta justo donde cambia el color del texto. */
  background: linear-gradient(to right,
    color-mix(in srgb, var(--wall) 96%, var(--hdr-room, #131D2F)) 0,
    color-mix(in srgb, var(--wall) 96%, var(--hdr-room, #131D2F)) calc(100% - var(--soft)),
    color-mix(in srgb, var(--wall) 56%, var(--hdr-room, #131D2F)) calc(100% - var(--soft) / 2),
    color-mix(in srgb, var(--wall) 36%, var(--hdr-room, #131D2F)) calc(100% - var(--soft) / 2),
    var(--hdr-room, #131D2F) 100%);
  transform: translateX(calc(var(--lit) * 100%));
}
.site-header--over::after,
.m-fx.m-top:not(.m-ready) .site-header::after {
  /* El velo va por delante de la luz: más ancho que la cabecera, empieza donde acaba la capa iluminada (::before,
     que ya termina en el color de la sala) y se mueve con translateX, sin repintar. Sobre la obra es translúcido;
     cuando la obra se ha ido de debajo (home.js sube --hdr-dark a 1 antes de la luz) es el color opaco de la sala. */
  top: 0; bottom: 0; left: 0;
  width: calc(100% + var(--soft));
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--hdr-room, #131D2F) calc(56% + 44% * var(--hdr-dark, 0)), transparent),
    color-mix(in srgb, var(--hdr-room, #131D2F) calc(24% + 76% * var(--hdr-dark, 0)), transparent));
  -webkit-mask-image: linear-gradient(to right, transparent 0, transparent var(--soft), #000 var(--soft));
  mask-image: linear-gradient(to right, transparent 0, transparent var(--soft), #000 var(--soft));
  transform: translateX(calc(var(--lit) * 100% - var(--soft)));
}
/* El contenido de la cabecera, en crema solo en la parte oscura; la copia en tinta (.site-header__ink, home.js), solo
   en la iluminada. --lit-px es la línea de la luz en píxeles de la cabecera y --hdr-off dónde empieza su .shell. */
.site-header__ink { display: none; }
.site-header--over > .site-header__inner { clip-path: inset(0 0 0 max(0px, calc(var(--lit-px, -9999px) - var(--hdr-off, 0px)))); }
.site-header--over > .site-header__ink {
  --hdr-fg: var(--ink);
  --hdr-brand: var(--ink);   /* el oro de 12 px solo llega a 4,5:1 sobre la crema entera: vuelve al acabar la luz */
  --hdr-accent: var(--accent);
  --hdr-cta-hover-fg: var(--wall);
  display: block;
  position: absolute; inset: 0;
  color: var(--ink);
  clip-path: inset(0 max(0px, calc(100% - var(--lit-px, -9999px))) 0 0);
}
.site-header__ink .brand__mark { text-shadow: none; }
/* Mientras pasa la luz, la etiqueta del lado oscuro va en crema: el oro necesita un fondo más oscuro que el del borde. */
.site-header--over.is-sweeping { --hdr-brand: var(--on-room); }
.site-header__ink .site-header__inner { transition: none; }

/* ---------------------------------------------------------
   1. La casa (#obra): Riva Arrival, del cartel a la pared
   --------------------------------------------------------- */
.obra { position: relative; margin-top: calc(-1 * var(--header-h)); }
.obra__stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + var(--space-4)) 0 var(--space-5);
  background: var(--wall);
}
.obra__bg, .obra__wall, .obra__full, .obra__veil, .obra__cue { display: none; }

.obra__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  /* La misma rejilla que la cabecera y el resto de la casa: el titular empieza donde empieza el logo. */
  max-width: var(--shell);
}
.obra__text { position: relative; z-index: 4; }
.obra__title {
  font-family: "Cormorant Garamond", "M1905 Cormorant Fallback", Georgia, serif;
  font-weight: 400;
  font-size: min(var(--fs-h1), 6.6vw);
  line-height: .98;
  letter-spacing: -.015em;
  color: var(--ink);
}
.obra__title em { font-style: italic; color: var(--accent); }
.obra__w { display: inline-block; transform-origin: 0 0; }
.obra__wi { display: inline-block; }
/* La cartela, como en un museo: número en su colección, título, colección y técnica. */
.obra__cap {
  display: grid;
  justify-items: start;
  gap: .2rem;
  max-width: 26rem;
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline);
  font-family: var(--serif);
  line-height: 1.3;
  color: var(--text-body);
}
.obra__no {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--gold-text);
  font-variant-numeric: lining-nums;
}
.obra__name { font-size: var(--fs-lead); font-style: italic; color: var(--ink); }
.obra__col { font-family: var(--sans); font-size: var(--fs-small); color: var(--text-body); }
.obra__cap a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--moulding); text-underline-offset: .22em; transition: color var(--dur-1) var(--ease-out); }
.obra__cap a:hover { color: var(--accent); }
.obra__actions { align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
.obra__catalogue { padding-block: .75rem .2em; }

.obra__art { position: relative; z-index: 1; justify-self: end; }
.obra__frame { --frame-mat: clamp(14px, 2.1vw, 30px); display: block; }
.obra__frame .obra__img {
  width: auto;
  height: clamp(340px, calc(100svh - var(--header-h) - 12rem), 760px);
  aspect-ratio: 1650 / 2048;
}

@media (max-width: 899px) {
  .obra__stage { align-items: flex-start; padding: calc(var(--header-h) + var(--space-3)) 0 var(--space-4); }
  .obra__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-3); text-align: center; }
  .obra__text { display: contents; }
  .obra__title { order: 1; position: relative; z-index: 4; font-size: clamp(2.6rem, 1.6rem + 5vw, 3.6rem); }
  .obra__art { order: 2; justify-self: center; }
  .obra__cap { order: 3; position: relative; z-index: 4; justify-items: center; margin-top: 0; padding-top: var(--space-1); }
  .obra__actions { order: 4; position: relative; z-index: 4; justify-content: center; margin-top: 0; }
  .obra__frame { --frame-mat: 12px; }
  .obra__frame .obra__img { height: auto; width: min(66vw, 300px, calc((100svh - var(--header-h) - 22rem) * .806)); min-width: 200px; }
}
/* Tableta vertical (modo móvil): la obra colgada a su escala; con el tope del móvil quedaba de 336 px en 820×1180. */
@media (min-width: 700px) and (max-width: 899px) {
  .obra__frame { --frame-mat: 18px; }
  .obra__frame .obra__img { width: min(56vw, 470px, calc((100svh - var(--header-h) - 22rem) * .806)); }
}

/* ----- 1b. Con movimiento: abre a sangre dentro de la obra (estado inicial, sin esperar al JS) ----- */
/* El recorrido del acto: la sección mide el escenario más lo que dura el efecto y el escenario va pegado (sticky).
   Sin fijados de JS: nada salta de sitio al empezar ni al acabar (cero CLS) y la altura se sabe antes del JS. */
.m-fx .obra { height: calc(100vh * 1.7); height: calc(100svh * 1.7); }
.m-desk .obra { height: calc(100vh * 2.3); height: calc(100svh * 2.3); }
.m-fx .obra__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
.m-fx .obra__bg {
  display: block;
  position: absolute; inset: 0; z-index: 0;
  background: var(--obra-wall, var(--room));
}
/* La luz de la pared: una capa crema más ancha que el escenario, con el borde en degradado (16vw, con un filo
   cálido), que entra de izquierda a derecha con translateX. --lit (0 a 1) lo pone home.js en el escenario y en la
   cabecera; --lit-x es el centro del borde, la línea donde el titular pasa de crema a tinta (a mitad del degradado:
   ahí la pared está al 50 % y las dos letras quedan por encima de 3:1). */
.obra__stage, .site-header { --lit: 0; --soft: 16vw; --lit-x: calc(var(--lit) * (100% + var(--soft)) - var(--soft) / 2); }
.m-fx .obra__wall {
  display: block;
  position: absolute; top: 0; bottom: 0; right: 100%; z-index: 0;
  width: calc(100% + var(--soft));
  background: linear-gradient(to right, var(--wall) 0, var(--wall) calc(100% - var(--soft)), rgba(250,238,216,.5) calc(100% - var(--soft) / 2), rgba(255,236,204,0) 100%);
  transform: translateX(calc(var(--lit) * 100%));
  will-change: transform;
}
.m-fx .obra__full {
  --w0: max(100vw, 79.36vh);
  --h0: calc(var(--w0) * 1996 / 1584);
  /* Encuadre de apertura: la obra sube un 4,5 % de su alto (si sobra obra por debajo) para que la pareja salga
     hasta la cintura y el cielo siga detrás de «of travelling». home.js lee el desplazamiento de offsetTop. */
  --y0: max(0px, min(calc(var(--h0) * .045), calc(var(--h0) - 100vh)));
  display: block;
  position: absolute; top: calc(-1 * var(--y0)); z-index: 2;
  left: calc(50% - var(--w0) / 2);
  width: var(--w0);
  aspect-ratio: 1584 / 1996;
  clip-path: inset(var(--y0) 0 calc(100% - 100vh - var(--y0)) 0);
  transform-origin: 0 0;
  pointer-events: none;
}
@supports (height: 100svh) {
  .m-fx .obra__full {
    --w0: max(100vw, 79.36svh);
    --y0: max(0px, min(calc(var(--h0) * .045), calc(var(--h0) - 100svh)));
    clip-path: inset(var(--y0) 0 calc(100% - 100svh - var(--y0)) 0);
  }
}
.m-fx .obra__full picture, .m-fx .obra__full img { display: block; width: 100%; height: 100%; max-width: none; }
.m-fx .obra__veil {
  display: block;
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  /* Velo del oscuro de la propia obra (#1E3C65): 0,52 bajo la cabecera para AA en la letra pequeña, 0,2 para el titular. */
  background:
    linear-gradient(to bottom, rgba(30,60,101,.58) 0, rgba(30,60,101,.5) calc(var(--header-h) + 8px), rgba(30,60,101,.3) 34%, rgba(30,60,101,0) 52%),
    linear-gradient(to top, rgba(19,29,47,.74) 0, rgba(19,29,47,.6) 16%, rgba(19,29,47,0) 42%);
}
@media (max-width: 899px) {
  .m-fx .obra__veil:not(.obra__veil--side) {
    background:
      radial-gradient(120% 34% at 0 0, rgba(19,29,47,.42), rgba(19,29,47,0) 70%),
      linear-gradient(to bottom, rgba(30,60,101,.58) 0, rgba(30,60,101,.5) calc(var(--header-h) + 8px), rgba(30,60,101,.32) 30%, rgba(30,60,101,0) 48%),
      linear-gradient(to top, rgba(19,29,47,.78) 0, rgba(19,29,47,.62) 18%, rgba(19,29,47,0) 42%);
  }
}
.m-fx .obra__veil--side {
  opacity: 0;
  background: linear-gradient(to right, rgba(19,29,47,.66) 0, rgba(19,29,47,.52) 40%, rgba(19,29,47,.46) 100%);
}
@media (max-width: 899px) {
  .m-fx .obra__veil--side { background: rgba(19,29,47,.58); }
}
/* El titular, partido en las esquinas como un cartel, lo pone el CSS desde el primer pintado (no espera al JS).
   El H1 real pasa a ser una capa sobre el escenario con las palabras en las esquinas; una copia muda (.obra__ghost,
   aria-hidden e invisible) ocupa su sitio en la columna y le dice a home.js adónde tiene que viajar cada palabra.
   (Medir cambiando el position de las palabras recreaba sus cajas y Chrome lo contaba como CLS.) */
.obra__ghost, .obra__ink { display: none; }
.m-fx .obra__ghost { display: block; visibility: hidden; }
.m-fx .obra__grid, .m-fx .obra__text { position: static; }
/* El titular en crema y su copia en tinta, una encima de otra. La luz recorta las dos con la misma línea (--lit-x):
   la crema se queda en la sala oscura y la tinta en la pared iluminada, así que el color cambia letra a letra justo
   donde llega la luz (sin palabras en tinta sobre lo oscuro ni crema sobre crema). */
.m-fx :is(.obra__h1, .obra__ink) { display: block; position: absolute; inset: 0; z-index: 4; margin: 0; pointer-events: none; }
.m-fx .obra__h1 { color: var(--on-room); clip-path: inset(0 0 0 max(0px, var(--lit-x))); }
.m-fx .obra__h1 em { color: inherit; }
.m-fx .obra__ink { color: var(--ink); clip-path: inset(0 max(0px, calc(100% - var(--lit-x))) 0 0); }
.m-fx .obra__ink em { color: var(--ink); transition: color .7s var(--ease-out); }
/* «travelling» se queda en tinta mientras pasa la luz (el coral no llega a 3:1 en el borde suave) y toma su color
   cuando la obra queda colgada. */
.m-fx .obra.is-landed .obra__ink em { color: var(--accent); }
.m-fx :is(.obra__h1, .obra__ink) .obra__w { position: absolute; white-space: nowrap; }
.m-fx :is(.obra__h1, .obra__ink) [data-corner="tl"] { top: calc(var(--header-h) + 4.5vh); left: var(--gutter); }
.m-fx :is(.obra__h1, .obra__ink) [data-corner="tr"] { top: calc(var(--header-h) + 4.5vh); right: var(--gutter); }
.m-fx :is(.obra__h1, .obra__ink) [data-corner="bl"] { bottom: 8.5vh; left: var(--gutter); }
.m-fx .obra__wi { animation: m1905-rise 1.1s var(--ease-out) .15s both; }
.m-fx [data-corner="tr"] .obra__wi { animation-delay: .27s; }
.m-fx [data-corner="bl"] .obra__wi { animation-delay: .39s; }
@keyframes m1905-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) {
  /* Móvil: las dos primeras palabras juntas arriba a la izquierda, sobre el cielo y las palmeras. A la derecha caían
     sobre la fachada blanca de la villa (2:1 de contraste). */
  .m-fx :is(.obra__h1, .obra__ink) [data-corner="tl"] { top: calc(var(--header-h) + 2vh); }
  .m-fx :is(.obra__h1, .obra__ink) [data-corner="tr"] { top: calc(var(--header-h) + 2vh + 1em); right: auto; left: var(--gutter); }
  .m-fx :is(.obra__h1, .obra__ink) [data-corner="bl"] { bottom: 9vh; }
}
/* La cartela y los botones esperan a la obra colgada: invisibles y sin recibir clics ni toques (home.js pone
   .is-landed al final del acto; el foco de teclado sí entra y lleva el scroll al final). */
.m-fx .obra__cap, .m-fx .obra__actions { position: relative; z-index: 4; opacity: 0; }
.m-fx .obra:not(.is-landed) :is(.obra__cap, .obra__actions) { pointer-events: none; }
.m-fx .obra__frame { clip-path: inset(50% 50% 50% 50%); }
/* La exacta (lazy) fuera de la zona de carga hasta «load» o el primer scroll (html.m-exact, home.js): así no compite
   con el LCP (V1-01: desde que paint.js llega tarde, home.js arranca antes y la exacta se ponía a bajar con la obra a
   sangre). Solo hace falta al final del acto 1. Un transform no mueve el layout ni cuenta para el CLS; si home.js no
   llega, la cabecera quita .m-fx y se carga igual. */
.m-fx:not(.m-exact) .obra__img { transform: translateX(300vw); }
.m-fx .obra__cue {
  display: flex;
  position: absolute; left: 46%; bottom: 1.4rem; z-index: 4;   /* libre del titular y a la izquierda de la pareja */
  flex-direction: column; align-items: center; gap: .7rem;
  transform: translateX(-50%);
  font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--on-room);
  pointer-events: none;
}
.m-fx .obra__cue::after {
  content: "";
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, var(--on-room), rgba(237,231,218,0));
  transform-origin: top;
  animation: m1905-cue 2.4s var(--ease-out) infinite;
}
@media (max-width: 899px) { .m-fx .obra__cue { display: none; } }
@keyframes m1905-cue {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------------------------------------------------------
   2. La idea (#manifiesto): lectura iluminada
   --------------------------------------------------------- */
.idea {
  position: relative;
  overflow: hidden;
  padding: var(--space-6) 0 var(--space-7);
  background: var(--wall);
}
.idea__mark {
  /* En el cuadrante libre de abajo a la izquierda (el titular ocupa arriba y los párrafos van a la derecha). */
  position: absolute;
  left: -2vw;
  top: 44%;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(12rem, 34vw, 32rem);
  line-height: .84;
  letter-spacing: -.02em;
  font-variant-numeric: oldstyle-nums;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(180,147,90,.42);
  pointer-events: none;
  user-select: none;
}
.idea__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4) var(--space-3);
}
.idea__title {
  grid-column: 1 / span 9;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.5rem + 3.6vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: balance;
}
.idea__text {
  grid-column: 6 / span 6;
  max-width: 34ch;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.05rem + .8vw, 1.85rem);
  line-height: 1.38;
  color: var(--text);
}
.idea__text + .idea__text { margin-top: calc(-1 * var(--space-2)); }
@media (max-width: 899px) {
  .idea { padding: var(--space-6) 0; }
  .idea__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .idea__title, .idea__text { grid-column: 1; }
  .idea__text + .idea__text { margin-top: 0; }
  .idea__mark { left: auto; right: -8vw; top: auto; bottom: 2rem; margin: 0; font-size: 56vw; }
}

/* ---------------------------------------------------------
   3. Las salas de la Maison (#coleccion; desde el pulido de la segunda pasada van detrás de «The making», acto 4)
   Estado final (móvil, reducido, sin JS): introducción, carrusel nativo con scroll-snap e índice.
   --------------------------------------------------------- */
.rooms { position: relative; background: var(--wall); }
.rooms__stage { position: relative; }
.rooms__belt { position: relative; }
.rooms__intro {
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--space-6) var(--gutter) var(--space-4);
}
.rooms__lede {
  max-width: 34ch;
  margin-top: var(--space-3);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--text-body);
}
.rooms__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--moulding) transparent;
}
.room {
  position: relative;
  flex: 0 0 min(84vw, 560px);
  scroll-snap-align: center;
  color: var(--on-room);
  --focus: var(--gold-on-room);
  /* La pared: el color de su obra, con la luz de un aplique encima del cuadro. Sin junta: la pared de la sala
     anterior se funde con esta en el primer 16 % (--prev-wall), como al pasar de una sala a otra. */
  background:
    radial-gradient(ellipse 52% 62% at 38% 42%, rgba(255,236,204,.10), rgba(255,236,204,0) 70%),
    linear-gradient(to right, var(--prev-wall, var(--room-wall, var(--room))) 0, var(--room-wall, var(--room)) 16%);
}
.room__inner {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-5) clamp(1.5rem, 6vw, 3rem);
}
.room__art { perspective: 1400px; }
.room__frame { --frame-w: 6px; --frame-mat: 12px; display: inline-block; }
.room__frame .room__img { width: auto; height: clamp(260px, 44vh, 400px); }
.room__text { display: grid; gap: .55rem; justify-items: start; }
.room__num {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem);
  line-height: 1;
  color: var(--gold-on-room);
  font-variant-numeric: lining-nums;
}
.room__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--on-room);
}
.room__line {
  max-width: 24ch;
  margin-top: .2rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.3;
  color: var(--on-room);
}
.room__count {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-room-muted);
}
.room__enter {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 44px;
  margin-top: .3rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-on-room);
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-1) var(--ease-out);
}
.room__enter:hover { color: var(--on-room); }
.room__enter, .link-arrow { white-space: nowrap; }

/* Anterior / siguiente del carrusel nativo: solo con ratón y sin el recorrido fijado (movimiento reducido o sin
   home.js). Sin JS no se enseñan (llevan hidden y home.js se lo quita). */
.rooms__nav { display: none; }
@media (pointer: fine) {
  html:not(.m-fx) .rooms__nav:not([hidden]) {
    display: flex; justify-content: flex-end; gap: .6rem;
    max-width: var(--shell); margin: 0 auto var(--space-2); padding-inline: var(--gutter);
  }
}
.rooms__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  font-size: 1.15rem; color: var(--ink);
  border: 1px solid rgba(21,23,47,.38); border-radius: 50%;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.rooms__btn:hover { background: var(--ink); border-color: var(--ink); color: var(--on-room); }
.rooms__btn:disabled { opacity: .35; cursor: default; background: transparent; color: var(--ink); }

.rooms__index {
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--space-5) var(--gutter) var(--space-6);
}
.rooms__index-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.1;
  color: var(--ink);
}
.rooms__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0 var(--space-4);
  margin: var(--space-3) 0 var(--space-4);
  border-top: 1px solid var(--hairline);
}
.rooms__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: .7rem 0;
  border-bottom: 1px solid var(--hairline);
  transition: color var(--dur-1) var(--ease-out);
}
.rooms__list-name { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; color: var(--ink); }
.rooms__list-n { flex: none; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); }
.rooms__list a:hover .rooms__list-name { color: var(--accent); }
.rooms__route { display: none; }

@media (max-width: 899px) {
  .rooms__intro { padding-top: var(--space-5); }
  .rooms__index { padding: var(--space-4) var(--gutter) var(--space-5); }
  .rooms__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-3); }
  .rooms__list a { min-height: 44px; padding: .55rem 0; }
  .rooms__list-name { font-size: 1.1rem; }
  .rooms__list-n { display: none; }
  .room__inner { padding: var(--space-4) clamp(1.25rem, 5vw, 2rem) var(--space-4); gap: var(--space-3); }
}
@media (min-width: 900px) {
  .room { flex-basis: min(46vw, 640px); }
  .room__inner { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
}

/* ----- 3b. Con movimiento (escritorio y móvil): el recorrido horizontal fijado ----- */
/* El recorrido lo calcula home.js (un tramo de viaje y una pausa por sala, mientras su obra se pinta) y lo deja en
   --rooms-run; la estimación de aquí solo cuenta para el primer pintado. Escenario con svh: la barra de direcciones de
   iOS no lo redimensiona (si se esconde, lo que asoma debajo es el mismo fondo de la sala). */
.m-fx .rooms { height: calc(100vh + var(--rooms-run, var(--rooms-n, 6) * (52vw + 300px) + 500px)); height: calc(100svh + var(--rooms-run, var(--rooms-n, 6) * (52vw + 300px) + 500px)); background: var(--room-2); }
.m-desk .rooms { height: calc(100vh + var(--rooms-run, var(--rooms-n, 6) * (26vw + 200px) + 600px)); background: var(--wall); }
.m-fx .rooms__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; }  /* clip: el foco no puede desplazarlo por dentro */
.m-fx .rooms__belt { display: flex; height: 100%; width: max-content; }
.m-fx .rooms__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 0 auto;
  width: 86vw;
  max-width: none;
  margin: 0;
  padding: var(--header-h) var(--gutter) 5.5rem;
  background: var(--wall);
}
.m-fx .rooms__track { overflow: visible; scroll-snap-type: none; height: 100%; background: var(--room-2); }
/* 1 px de solape: con translateX fraccionario el hueco subpíxel entre salas dejaba ver una junta clara (V-02). */
.m-fx .room { flex: 0 0 calc(86vw + 1px); margin-right: -1px; height: 100%; }
.m-fx .room__inner {
  align-content: center;
  gap: var(--space-3);
  padding: calc(var(--header-h) + .5rem) clamp(1.25rem, 5vw, 2rem) 5.5rem;
}
/* Móvil: la obra arriba y la cartela debajo, en una pantalla. Alto: el menor de 46svh, lo que deja la cartela (unos
   21rem con el marco) y lo que permite el ancho del panel con la obra más ancha (4:5). */
.m-fx .room__frame .room__img { width: auto; height: max(180px, min(46svh, calc(100svh - var(--header-h) - 26.5rem), calc((86vw - 4.75rem) * 1.22))); }
.m-fx .room__art { perspective: none; transform-style: preserve-3d; }
.m-fx .room__inner { perspective: 1400px; }
.m-fx .rooms__index {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 0 0 auto;
  width: 100vw;
  max-width: none;
  margin: 0;
  padding: var(--header-h) var(--gutter) 5.5rem;
  background: var(--wall);
}
.m-fx .rooms__list { width: 100%; }
/* El índice monta 2 px sobre la última sala: con translateX fraccionario asomaba una línea gris en su borde (V-10). */
.m-fx .rooms__index { position: relative; margin-left: -2px; }

/* La línea de ruta: un cartel ferroviario al pie de la sala */
.m-fx .rooms__route {
  display: block;
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 1rem var(--gutter) .95rem;
  background: var(--room-2);
  border-top: 1px solid rgba(180,147,90,.4);
  color: var(--on-room);
}
.rooms__line { position: relative; height: 1px; margin: 0 0 .85rem; background: rgba(237,231,218,.28); }
.rooms__fill {
  position: absolute; left: 0; right: 0; top: -1px;
  height: 3px;
  background: var(--gold-on-room);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.rooms__stops { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 1.25rem; margin: 0; padding: 0; list-style: none; }
.rooms__stop {
  position: relative;
  display: flex; align-items: baseline; gap: .55rem;
  min-width: 0;
  font-size: var(--fs-label); font-weight: 500; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase;
  color: var(--on-room-muted);
  transition: color .35s var(--ease-out);
}
.rooms__stop::before {
  content: "";
  position: absolute; left: 0; top: calc(-.85rem - 4px);
  width: 7px; height: 7px;
  background: var(--room-2);
  border: 1px solid rgba(237,231,218,.5);
  transform: rotate(45deg);
  transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.rooms__stop-n { font-family: var(--serif); font-size: .95rem; letter-spacing: .04em; color: var(--gold-on-room); }
.rooms__stop-n { flex: none; }
/* El nombre entero, en dos líneas si hace falta («Noches de / Coral»): en un cartel de estación no se corta. */
.rooms__stop-name { min-width: 0; overflow-wrap: break-word; }
.rooms__stop.is-passed::before { background: var(--gold-on-room); border-color: var(--gold-on-room); }
.rooms__stop.is-current { color: var(--on-room); }
.rooms__stop.is-current::before { background: var(--gold-on-room); border-color: var(--gold-on-room); box-shadow: 0 0 0 4px rgba(215,188,126,.22); }
/* Móvil: solo los numerales (el nombre de la sala ya está grande en su pared). */
@media (max-width: 899px) {
  .m-fx .rooms__route { padding: .9rem var(--gutter) calc(.85rem + env(safe-area-inset-bottom, 0px)); }
  .m-fx .rooms__stops { gap: 0 .5rem; }
  .m-fx .rooms__stop-name { display: none; }
  .m-fx .rooms__stop-n { font-size: 1rem; }
  .m-fx .room__num { font-size: 2rem; }
  .m-fx .room__name { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.5rem); }
  .m-fx .room__line { font-size: 1.15rem; }
  .m-fx .room__text { gap: .4rem; }
}

/* Escritorio: las medidas del recorrido de la primera pasada (introducción de 40vw, salas de 58vw con la obra y la
   cartela lado a lado). */
.m-desk .rooms__intro {
  width: 40vw;
  padding: var(--header-h) var(--space-5) 6rem max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
}
.m-desk .room { flex: 0 0 calc(58vw + 1px); }
.m-desk .room__inner {
  grid-template-columns: auto minmax(0, 21rem);
  align-content: center;
  justify-content: center;
  gap: clamp(2rem, 4.5vw, 5rem);
  padding: var(--header-h) 4vw 6rem;
  perspective: 1600px;
}
.m-desk .room__frame .room__img { height: min(56vh, 540px); }
.m-desk .rooms__index { width: 58vw; padding: var(--header-h) 7vw 6rem 6vw; }
.m-desk .rooms__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------------------------------------------------------
   4. The making (#oficio; desde el pulido va justo después del manifiesto, acto 3): Formentor Passage, del primer trazo a la pared
   Estado final (sin movimiento, sin WebGL o sin JS): las cuatro fases con su imagen fija.
   --------------------------------------------------------- */
.craft { position: relative; background: var(--wall); padding: var(--space-6) 0; }
.craft__stage {
  position: relative;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.craft__intro { max-width: 34ch; margin-bottom: var(--space-5); }
.craft__eyebrow {
  margin-bottom: var(--space-2);
  font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--gold-text);
}
.making { display: none; }
.craft__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) clamp(2rem, 6vw, 6rem);
  margin: 0; padding: 0; list-style: none;
}
.craft__step { display: grid; gap: var(--space-3); align-content: start; }
.craft__fig { position: relative; margin: 0; max-width: 400px; }
.craft__fig > img { width: 100%; height: auto; box-shadow: var(--shadow-hang); }
.craft__fig--framed { padding-bottom: 14%; }
.craft__fig-frame { --frame-w: 7px; --frame-mat: 16px; display: block; width: 80%; }
/* El certificado solo asoma por la esquina: la obra manda (verificación V-08). */
.craft__fig-cert {
  position: absolute; right: 0; bottom: 0;
  width: 44%; height: auto;
  box-shadow: var(--shadow-lift);
  transform: rotate(-3deg);
}
.craft__no {
  display: block;
  font-family: var(--serif);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--gold-text);
  font-variant-numeric: lining-nums;
}
.craft__step-title {
  margin-top: .45rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.1;
  color: var(--ink);
}
.craft__step-text { max-width: 34ch; margin-top: .55rem; color: var(--text-body); }

.craft__close {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.craft__facts {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem 0;
  margin: 0; padding: var(--space-3) 0 0;
  border-top: 1px solid var(--hairline);
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1rem + .6vw, 1.6rem);
  line-height: 1.25;
  color: var(--ink);
}
.craft__facts li { display: inline-flex; align-items: center; }
.craft__facts li + li::before {
  content: ""; flex: none;
  width: 6px; height: 6px; margin-inline: 1.1em;
  background: var(--moulding); transform: rotate(45deg);
}
.craft__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1) var(--space-4); }
@media (max-width: 899px) { .craft__links { justify-content: flex-start; } }
@media (max-width: 899px) {
  .craft { padding: var(--space-5) 0 var(--space-5); }
  .craft__intro { margin-bottom: var(--space-4); }
  .craft__steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .craft__step { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); align-items: center; gap: var(--space-3); }
  .craft__fig { max-width: none; }
  .craft__fig--framed { padding-bottom: 16%; }
  .craft__fig-frame { --frame-w: 4px; --frame-mat: 7px; width: 86%; }
  .craft__fig-cert { width: 52%; }
  .craft__no { font-size: 1.75rem; }
  .craft__step-title { font-size: 1.35rem; }
  .craft__step-text { font-size: 1rem; line-height: 1.5; }
  .craft__facts { flex-direction: column; align-items: flex-start; gap: .6rem; }
  /* Un rombo delante de cada hecho (la regla de «li + li» de escritorio ganaba y solo lo llevaba el primero). */
  .craft__facts li::before, .craft__facts li + li::before { content: ""; display: block; flex: none; width: 6px; height: 6px; margin: 0 .9em 0 0; background: var(--moulding); transform: rotate(45deg); }
}

/* ----- 4b. «The making» (html.m-fx.m-paint): la obra se pinta con el scroll a pantalla completa ----- */
/* El escenario (sticky, 100svh) es el taller: pared algo más honda que la de la casa, para que la hoja de algodón se lea
   encima. La obra va en una caja del tamaño de la pantalla bajo la cabecera (object-fit: contain); el motor pone su
   lienzo encima y la cámara (zoom y encuadre) va dentro del lienzo. home.js escala la caja entera para colgarla. */
.m-paint.m-fx .has-making { padding: 0 0 var(--space-6); background: var(--wall); }
.m-paint.m-fx .has-making .craft__run { height: calc(100vh * 5.2); height: calc(100svh * 5.2); }
.m-paint.m-fx .has-making .craft__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  max-width: none;
  padding: 0;
  overflow: hidden; overflow: clip;
  /* La franja de arriba (bajo la cabecera) es de la pared de la casa: al llegar desde el manifiesto no asoma una
     banda más oscura entre su crema y la hoja (V-10). */
  background:
    linear-gradient(var(--wall), var(--wall)) top / 100% var(--header-h) no-repeat,
    radial-gradient(90% 70% at 50% 42%, rgba(255,250,238,.55), rgba(255,250,238,0) 72%),
    var(--wall-2);
}
.m-paint.m-fx .has-making .making { display: block; position: absolute; inset: 0; }
/* La pared de la casa, que entra cuando la obra se cuelga (--wall-on, home.js). */
.making::before { content: ""; position: absolute; inset: 0; background: var(--wall); opacity: var(--wall-on, 0); }
.making__art {
  position: absolute; left: 0; right: 0; top: var(--header-h); bottom: 0;
  container-type: size;
  transform-origin: 50% 50%;
}
.making__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
/* Antes de que el lienzo esté listo (o al volver, mientras se recargan las texturas) se ve la hoja en blanco, nunca la
   obra terminada que luego «se despinta». */
.making.is-blank .making__img,
.making__img:not([src]),
.m-paint.m-fx:not(.m-ready) .making__img { opacity: 0; }
/* Con el lienzo a la vista, el <img> no asoma por sus bordes cuando la cámara desplaza la obra. */
.making.is-live .making__img, .making.is-live .making__frame { opacity: 0; }
.making.is-blank .making__art,
.m-paint.m-fx:not(.m-ready) .making__art { background: #FBF6E7; }
/* El marco de la casa alrededor de la obra (la caja usa object-fit: contain: la obra mide el menor de los dos lados).
   Grosores divididos por la escala de colgado (--hs, home.js), que la caja entera reduce al final. */
.making__frame {
  --aw: min(100cqw, 100cqh * 1650 / 2048);
  --ah: calc(var(--aw) * 2048 / 1650);
  --fw: calc(var(--mk-fw, 9px) / var(--hs, .72));
  --fm: calc(var(--mk-fm, 24px) / var(--hs, .72));
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--aw) + 2 * (var(--fw) + var(--fm)));
  height: calc(var(--ah) + 2 * (var(--fw) + var(--fm)));
  margin: calc(-.5 * var(--ah) - var(--fw) - var(--fm)) 0 0 calc(-.5 * var(--aw) - var(--fw) - var(--fm));
  background: var(--mat);
  border: var(--fw) solid var(--moulding);
  border-color: var(--moulding-edges);
  box-shadow: inset 0 0 0 calc(1.5px / var(--hs, .72)) var(--ink), 0 2px 4px rgba(21,23,47,.10), 0 40px 80px -44px rgba(21,23,47,.5);
  clip-path: inset(calc(var(--fw) + var(--fm)));
}
.making__cert {
  position: absolute; z-index: 3;
  left: var(--cert-x, 8vw); top: var(--cert-y, 60vh);
  width: var(--cert-w, 22vw); height: auto; max-width: none;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  pointer-events: none;
}
/* El título, sobre la hoja en blanco: la portada del cuaderno antes del primer trazo. */
.m-paint.m-fx .has-making .craft__intro {
  position: absolute; z-index: 4;
  inset: var(--header-h) 0 0 0;
  display: grid; place-content: center; justify-items: center;
  max-width: none; margin: 0; padding: 0 var(--gutter) 6vh;
  text-align: center;
  pointer-events: none;
}
.m-paint.m-fx .has-making .craft__title { max-width: 14ch; font-size: clamp(2.6rem, 1.4rem + 3.8vw, 5.25rem); line-height: 1; text-wrap: balance; }
/* Los rótulos: cartelas de museo que se relevan (una a la vista), a los lados en escritorio y abajo en móvil. */
.m-paint.m-fx .has-making .craft__steps { display: block; position: absolute; inset: 0; z-index: 5; margin: 0; pointer-events: none; }
.m-paint.m-fx .has-making .craft__step {
  position: absolute; top: calc(50% + var(--header-h) / 2);
  width: min(21rem, 27vw);
  gap: 0;
  visibility: hidden;
  pointer-events: auto;
}
.m-paint.m-fx .has-making .craft__step--left { left: calc(var(--gutter) * .8); }
.m-paint.m-fx .has-making .craft__step--right { right: calc(var(--gutter) * .8); }
.m-paint.m-fx .has-making .craft__fig { display: none; }
.m-paint.m-fx .has-making .craft__label {
  padding: 1.35rem 1.5rem 1.45rem;
  background: var(--mat);
  border: 1px solid rgba(180,147,90,.45);
  box-shadow: var(--shadow-lift);
}
.m-paint.m-fx .has-making .craft__no { font-size: clamp(2.6rem, 1.8rem + 1.6vw, 3.5rem); }
.m-paint.m-fx .has-making .craft__step-text { font-size: 1.0625rem; line-height: 1.5; }
/* La regla de las cuatro fases (01 a 04), que se llena con la pintura. */
.making__rail {
  position: absolute; z-index: 5;
  left: 50%; bottom: 1.25rem;
  display: flex; gap: .9rem;
  padding: .5rem 1rem;
  background: var(--mat);
  border: 1px solid rgba(180,147,90,.35);
  border-radius: 999px;
  transform: translateX(-50%);
  opacity: 0;
}
.making__seg { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-label); font-weight: 500; letter-spacing: .1em; color: var(--text-muted); font-variant-numeric: lining-nums; }
.making__seg.is-on { color: var(--ink); }
.making__seg-line { position: relative; width: 2.6rem; height: 1px; background: rgba(21,23,47,.2); }
.making__seg-line i { position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--moulding); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 899px) {
  .m-paint.m-fx .has-making .craft__intro { padding-bottom: 14vh; }
  .m-paint.m-fx .has-making .craft__title { font-size: clamp(2.4rem, 1.6rem + 4vw, 3.2rem); }
  /* Móvil: una cartela abajo, a todo el ancho; el motor sube su ancla para que lo que se pinta quede encima. */
  .m-paint.m-fx .has-making .craft__step,
  .m-paint.m-fx .has-making .craft__step--left,
  .m-paint.m-fx .has-making .craft__step--right {
    display: block;
    top: auto; left: var(--gutter); right: var(--gutter);
    bottom: calc(.9rem + env(safe-area-inset-bottom, 0px));
    width: auto;
  }
  .making__frame { --mk-fw: 6px; --mk-fm: 14px; }
  .m-paint.m-fx .has-making .craft__label {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: start;
    padding: .9rem 1.1rem 1rem;
  }
  .m-paint.m-fx .has-making .craft__no { grid-row: span 2; font-size: 2.4rem; }
  .m-paint.m-fx .has-making .craft__step-title { margin-top: .1rem; font-size: 1.3rem; }
  .m-paint.m-fx .has-making .craft__step-text { margin-top: .3rem; font-size: .9375rem; line-height: 1.45; }
  .making__rail { top: calc(var(--header-h) + .75rem); bottom: auto; gap: .6rem; padding: .4rem .8rem; }
  .making__seg-line { width: 1.6rem; }
}
.m-paint.m-fx .has-making .craft__close { margin-top: var(--space-5); padding-inline: var(--gutter); }
/* La obra y su precio, al pie de la cartela 04 (C5 de la crítica): el final de la escena lleva a la obra. */
.craft__buy { margin-top: .85rem; padding-top: .75rem; border-top: 1px solid var(--hairline); }
.craft__buy a { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; min-height: 44px; color: var(--ink); }
.craft__buy-name { font-family: var(--serif); font-style: italic; font-size: 1.15rem; }
.craft__buy-price { font-variant-numeric: lining-nums; color: var(--text-body); }
.craft__buy-go { margin-left: auto; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-text); }
.craft__buy a:hover .craft__buy-go, .craft__buy a:focus-visible .craft__buy-go { color: var(--ink); }
@media (max-width: 899px) {
  .m-paint.m-fx .has-making .craft__buy { grid-column: 2; margin-top: .5rem; padding-top: .45rem; }
  .m-paint.m-fx .has-making .craft__buy a { min-height: 40px; }
  .craft__buy-name { font-size: 1.05rem; }
}
/* Móvil apaisado: la cartela a un lado y arriba, sin tapar media obra (H14; home.js usa la misma condición). */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) {
  .m-paint.m-fx .has-making .craft__step,
  .m-paint.m-fx .has-making .craft__step--right { top: calc(var(--header-h) + .6rem); bottom: auto; left: auto; right: calc(var(--gutter) * .6); width: min(18rem, 36vw); }
  .m-paint.m-fx .has-making .craft__step--left { left: calc(var(--gutter) * .6); right: auto; }
  .m-paint.m-fx .has-making .craft__label { padding: .7rem .9rem .75rem; }
  .m-paint.m-fx .has-making .craft__no { font-size: 1.9rem; }
  .m-paint.m-fx .has-making .craft__step-title { font-size: 1.1rem; }
  .m-paint.m-fx .has-making .craft__step-text { font-size: .875rem; line-height: 1.4; }
  .making__rail { display: none; }
}

/* ---------------------------------------------------------
   5. Lo único (#ediciones): la sala oscura y el telón
   --------------------------------------------------------- */
.eds { background: var(--wall); }
.eds__room {
  position: relative;
  padding: var(--space-7) 0 var(--space-6);
  background: var(--room);
}
.eds__room::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 55% at 50% 0%, rgba(180,147,90,.16), rgba(180,147,90,0) 62%);
  pointer-events: none;
}
.eds__room > .shell { position: relative; }
.eds__head { max-width: 44rem; margin: 0 auto var(--space-5); text-align: center; }
.eds__title { color: var(--on-room); }
.eds__lede {
  margin-top: var(--space-2);
  text-wrap: balance;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.35;
  color: var(--on-room-muted);
}
.eds__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-5) clamp(1.5rem, 4vw, 4.5rem);
  margin: 0; padding: 0; list-style: none;
}
.ed__link { display: grid; justify-items: center; gap: var(--space-3); color: var(--on-room); }
.ed__frame { --frame-w: 7px; --frame-mat: 16px; display: block; }
.ed__curtain { position: relative; display: block; }
/* El nicho detrás del telón: terciopelo oscuro con pliegues, del tamaño exacto de la obra. */
.ed__frame::before {
  content: "";
  position: absolute; inset: var(--frame-mat);
  background:
    linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.32)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 7px, rgba(0,0,0,.16) 7px 15px, rgba(255,255,255,.02) 15px 22px),
    #3A1620;
  box-shadow: inset 0 0 18px rgba(0,0,0,.55);
}
.ed__frame .ed__img { width: auto; height: clamp(300px, 46vh, 460px); }
.ed__link:hover .ed__frame { transform: translateY(-3px); box-shadow: inset 0 0 0 var(--frame-fillet) var(--ink), var(--shadow-lift); }
.ed__frame { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.ed__link:focus-visible { outline: none; }
.ed__link:focus-visible .ed__frame { outline: 2px solid var(--gold-on-room); outline-offset: 6px; }
.ed__meta { display: grid; justify-items: center; gap: .3rem; text-align: center; }
.ed__no { font-size: var(--fs-label); font-weight: 500; letter-spacing: .12em; color: var(--gold-on-room); font-variant-numeric: lining-nums; }
.ed__name { font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.1; color: var(--on-room); }
.ed__state { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--on-room-muted); }
.ed__price { font-style: normal; color: var(--on-room); font-variant-numeric: lining-nums; }
/* Vendida: la obra se queda tal cual (sin velarla); el estado lo dice la cartela, con el punto rojo de galería. */
.ed.is-sold .ed__state { display: inline-flex; align-items: center; gap: .55em; color: var(--gold-on-room); }
.ed.is-sold .ed__state::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #E0644B; }
.eds__cta { margin-top: var(--space-5); text-align: center; }
@media (max-width: 899px) {
  .eds__room { padding: var(--space-6) 0 var(--space-5); }
  .eds__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .ed__frame .ed__img { height: auto; width: min(56vw, 260px); }
  .ed__link { gap: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) { .ed__link:hover .ed__frame { transform: none; } }

/* ---------------------------------------------------------
   6. Lo tuyo (#crea): la idea que se convierte en cuadro
   --------------------------------------------------------- */
.commission { position: relative; background: var(--wall); padding: var(--space-6) 0 var(--space-6); }
.commission__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}
.commission__lede {
  max-width: 40ch;
  margin-top: var(--space-3);
  font-family: var(--serif);
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--text-body);
}
/* La idea como cita escrita sobre el papel de la casa (no como un campo de formulario). */
.commission__idea {
  max-width: 32rem;
  margin: var(--space-4) 0;
  padding: .2rem 0 .3rem var(--space-3);
  border-left: 1px solid var(--moulding);
}
.commission__label {
  font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--gold-text);
}
.commission__quote { margin: .5rem 0 0; }
.commission__quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.35rem);
  line-height: 1.18;
  color: var(--ink);
}
.commission__quote p::before { content: "\201C"; }
/* La comilla de cierre va dentro del texto (front-page.php), pegada a la última palabra: con ::after caía sola en otra
   línea en 360 px (V-02), y así se escribe al final de la idea. */
/* Mientras se escribe, el cursor va pegado a la última letra; al terminar (y en el estado fijo) no hay cursor. */
.commission__typed .char.is-caret { box-shadow: 2px 0 0 var(--accent); }
.commission__actions { margin-top: var(--space-2); }
.commission__art { justify-self: center; text-align: center; }
.commission__frame { display: inline-block; }
.commission__frame .commission__img { width: auto; height: clamp(320px, 62vh, 580px); }
.commission__cap { margin-top: var(--space-3); font-family: var(--serif); font-size: 1.15rem; color: var(--text-body); }
.commission__cap span:first-child { font-style: italic; color: var(--ink); }
.commission__more { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.commission__strip-title { margin-bottom: var(--space-3); text-align: center; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-text); }
.commission__strip-title a { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; border-bottom: 1px solid currentColor; transition: color var(--dur-1); }
.commission__strip-title a:hover { color: var(--ink); }
.commission__strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* El marco de la casa en pequeño: moldura, filete y paspartú (no una tarjeta blanca). */
.commission__thumb img {
  width: auto;
  height: clamp(120px, 13vw, 190px);
  padding: 6px;
  background: var(--mat);
  border: 4px solid var(--moulding);
  border-color: var(--moulding-edges);
  box-shadow: inset 0 0 0 1px var(--ink), var(--shadow-hang);
}
@media (max-width: 899px) {
  .commission { padding: var(--space-6) 0 var(--space-5); }
  .commission__grid { grid-template-columns: minmax(0, 1fr); }
  .commission__frame .commission__img { height: auto; width: min(72vw, 330px); }
  .commission__strip { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: thin; scrollbar-color: var(--moulding) transparent; }
  .commission__thumb { flex: none; scroll-snap-align: start; }
  .commission__thumb img { height: 150px; }
}

/* ----- 6b. Con movimiento: el escenario se queda fijo mientras la idea se escribe y la obra se pinta ----- */
/* Si el escenario es más alto que la pantalla (móvil: título, idea, botones y obra), se pega por abajo: el título
   sube y se va, y lo que queda fijo es la idea, los botones y la obra. home.js mide el alto (--cm-h) y el tope
   (--cm-top). */
.m-fx .commission { padding: 0 0 var(--space-6); }
.m-fx .commission__run { height: calc(var(--cm-h, 100svh) + var(--cm-run, 130svh)); }
.m-fx .commission__stage {
  position: sticky; top: var(--cm-top, 0px);
  display: flex; align-items: center;
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--header-h) + var(--space-3)) 0 var(--space-4);
}
.m-fx .commission__stage > .commission__grid { width: 100%; }
@media (max-width: 899px) {
  .m-fx .commission__stage { padding: var(--space-6) 0 var(--space-3); }
  .m-fx .commission__idea { margin: var(--space-3) 0; }
  .m-fx .commission__quote p { font-size: clamp(1.45rem, 1.1rem + 1.3vw, 1.9rem); }
  .m-fx .commission__frame .commission__img { width: min(60vw, 280px, calc((100svh - var(--header-h) - 22rem) * .83)); min-width: 180px; }
  .m-fx .commission__cap { margin-top: var(--space-2); }
}

/* ----- Pintura (paint.js) en los actos 4 (salas), 5 y 6 ----- */
/* Mientras una obra espera a pintarse y su lienzo aún no está, se ve la hoja en blanco (el paspartú del marco), no la
   obra terminada que luego «se despintaría» (home.js, paintTo). En la sala oscura, la hoja es papel, no el nicho. */
.home img.is-blank { opacity: 0; }
.eds__room.is-painting .ed__curtain { background: #FBF8F1; }

/* ---------------------------------------------------------
   7. El atelier (#contacto): el catálogo privado
   --------------------------------------------------------- */
.atelier { background: var(--wall-2); padding: var(--space-6) 0; }
.atelier__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: var(--space-4) clamp(2rem, 7vw, 7rem);
}
.atelier__lede { max-width: 34ch; margin-top: var(--space-3); font-family: var(--serif); font-size: var(--fs-lead); line-height: 1.4; color: var(--text-body); }
.atelier__form { display: grid; gap: var(--space-3); }
.atelier__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.atelier__submit { justify-self: start; min-width: 15rem; }
/* Campos subrayados sobre el papel (no cajas blancas de formulario de serie). La línea, a 3,4:1 sobre --wall-2. */
.atelier .field input, .atelier .field select, .atelier .field textarea {
  padding: .65em 0 .55em;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgba(21,23,47,.5);
  border-radius: 0;
  font-size: 1.0625rem;
}
.atelier .field select { padding-right: 2em; background-position: calc(100% - 10px) 1.15em, calc(100% - 4px) 1.15em; }
.atelier .field textarea { min-height: 5.5rem; }
.atelier .field input:focus, .atelier .field select:focus, .atelier .field textarea:focus { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.atelier .field [aria-invalid="true"] { border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.atelier__note { margin: 0; }
@media (max-width: 899px) {
  .atelier { padding: var(--space-5) 0; }
  .atelier__grid, .atelier__row { grid-template-columns: minmax(0, 1fr); }
  .atelier__submit { justify-self: stretch; }
}

/* ---------------------------------------------------------
   8. Movimiento reducido: todo en su estado final (por si alguna clase quedara puesta)
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .obra__cue::after, .obra__wi { animation: none; }
}

/* Acto 6: mientras se escribe, el cursor va pegado a la última letra (o al principio si aún no hay ninguna). */
.commission__quote.is-empty .commission__typed { box-shadow: inset 2px 0 0 var(--accent); }

/* Relevo de la cabecera sin transición (home.js, headerOver). */
.site-header.is-instant, .site-header.is-instant * { transition: none !important; }