@charset "utf-8";
/* ==========================================================================
   color.css · La paleta de caricatura
   --------------------------------------------------------------------------
   🎨 AQUÍ Y SOLO AQUÍ ENTRA EL COLOR. Lo decidió Kiko el 16 de septiembre al
   pedir el dibujo «con estilo caricaturesco y muy sencillo y de colores»,
   sabiendo que choca con «blanca, muy clara, muy limpia, muy impoluta». La
   frontera está escrita en NORMAS § 1 y es literal:

     · el dibujo de la película   → color plano de caricatura
     · el mapa, los datos, el texto y el fondo → blanco impoluto

   🚨 LA PRUEBA DE QUE ESTO ESTÁ BIEN HECHO: si quitas el dibujo, lo que queda
   tiene que seguir pareciendo la misma web impoluta de antes. El color entra en
   los personajes, no en la página.

   🚨 Y SIN DEGRADADOS, SIN SOMBRAS Y SIN FILTROS. Además de ser la estética
   elegida, un `filter` de SVG animado hunde el rendimiento en un móvil, y el
   acto 3 es el que más elementos mete en pantalla.
   ========================================================================== */

#dibujo {
  /* El trazo de todo el dibujo. Uno solo, para que las piezas parezcan de la
     misma mano aunque se dibujen en semanas distintas. */
  --trazo: #23282e;
  --grosor: 2.6;

  /* El tren. ⚠️ LA BANDA NO ES EL COLOR DE UNA LÍNEA: los de Keio y JR East
     están sin verificar (PENDIENTE W4) y en esta web el color de una línea es
     un dato. Esto es caricatura. */
  --c-tren: #e6ebf0;
  --c-tren-banda: #3f7fa8;
  --c-cristal: #cfe2ee;
  --c-metal: #aeb7c0;

  /* Los cuatro. Sin rasgos: no tienen estilo propio todavía. */
  --c-piel: #f0c9a4;
  --c-ropa-1: #c8503f;
  --c-ropa-2: #3f7fa8;
  --c-ropa-3: #4f8f6a;
  --c-ropa-4: #d99b2b;
  --c-pata: #414a54;

  /* El mostrador */
  --c-mueble: #c98f52;
  --c-mueble-hondo: #a9743f;
  --c-cartel: #f4f6f8;

  /* La llave y su halo */
  --c-llave: #d99b2b;
  --c-llave-hondo: #b07c1c;
  --c-halo: #e8b94b;

  /* El coche */
  --c-coche: #c8503f;
  --c-coche-cristal: #cfe2ee;
  --c-rueda: #2e343b;
  --c-llanta: #aeb7c0;
  --c-luz: #ffd75e;

  /* La ciudad y el bosque */
  --c-edificio-lejos: #cfd6de;
  --c-edificio-cerca: #9fadbb;
  --c-ventana: #f2f5f8;
  --c-arbol: #4f8f6a;
  --c-arbol-hondo: #3c6f52;
  --c-tronco: #7d5a3c;

  /* ❄️ LA NIEVE NO ES BLANCA, y tiene que ser así.
     Sobre papel blanco impoluto, la nieve blanca no existe: no se ve un solo
     copo. Se resuelve con un azul frío, que además es el tinte que el acto 4
     ya tenía asignado en NORMAS § 9. */
  --c-nieve: #a9c9de;
  --c-nieve-manto: #dcebf5;
  --c-nieve-trazo: #8fb4cd;

  /* 🏂 El acto 4. La montaña reutiliza el manto y el trazo de la nieve de
     arriba a propósito: es la misma nieve, amontonada. Lo único nuevo es el
     monigote, y va con el rojo del primero de los cuatro, que es de quien se
     supone que es. La tabla, con el amarillo de la llave del acto 3: es el
     único color cálido que hay en toda la nieve y por eso se ve. */
  --c-mono-ropa: #c8503f;
  --c-mono-gorro: #3f7fa8;
  --c-tabla: #d99b2b;

  /* ♨️ El acto 5. La roca es el único gris de piedra de toda la nieve, y así
     se distingue del manto a la primera.
     🚨 Y EL AGUA DEL ONSEN NO PUEDE SER AZUL. Sobre una pantalla de nieve azul
     pálido, un agua azul es más nieve: lo que hace falta es que se lea que
     está CALIENTE. Se va a un verde de aguas termales —el único verde azulado
     de la película— y se remata con dos hilillos de vaho. */
  --c-roca: #97a0aa;
  --c-roca-hondo: #6f7982;
  --c-agua: #7fc6bd;
  --c-agua-trazo: #4e9a92;
  --c-vaho: #b8c6cf;

  /* 🐒 El acto 6. El mono de Jigokudani.
     🚨 LA CARA ROJA ES EL DATO, NO LA DECORACIÓN. Un macaco japonés se
     reconoce por tres cosas —la cara roja, el pelo gris pardo y la cola
     cortísima— y sin la primera esto es un oso pequeño. Y da la casualidad de
     que es el único rojo de piel de toda la película: el rojo que ya había
     (--c-ropa-1) es tela, y va en el muñeco y en el coche.
     💭 El pelo tira a pardo cálido a propósito: sobre una pantalla entera de
     nieve azul pálido, un gris frío se funde con el fondo y el mono deja de
     tener silueta. Es el mismo problema que la nieve blanca sobre papel
     blanco, resuelto al revés. */
  /* La montaña del fondo: más pálida que la nieve de delante, que es lo único
     que la manda lejos en un dibujo sin sombras ni degradados */
  --c-monte-lejos: #eef4f9;
  /* Y la montaña de los monos, que está DELANTE de todo: más oscura que la del
     fondo por lo mismo, al revés. Es roca vista, no nieve */
  --c-monte-cerca: #b9c6d2;
  --c-monte-cerca-hondo: #94a4b3;

  /* 🏨 よろづや · el 桃山風呂, acto 6.
     🚨 SON LOS COLORES DEL EDIFICIO, NO LOS DE LA FOTO. La foto que pasó Kiko
     es de noche y con focos: fondo negro azulado y madera naranja
     incandescente. Aquí es de día y está nevando, y el fondo de esta web es
     blanco impoluto y no se toca (NORMAS § 1). Así que se respeta el color de
     la MADERA —marrón rojizo cálido, el que tiene a cualquier hora— y el ámbar
     de los shoji iluminados, que es lo que da el aire de la foto y además es lo
     único cálido en una pantalla llena de nieve azul pálido.
     El tejado va gris oscuro porque es lo que es: 鉄板葺, plancha de hierro. */
  --c-madera: #9a5b36;
  --c-madera-hondo: #6f3f26;
  --c-hierro: #4a4a52;
  --c-shoji: #f3ddb0;
  /* 稲田石, el granito gris claro de la bañera de verdad */
  --c-inada: #c9ccc9;

  /* 🏯 松本城 · el castillo de Matsumoto, final del acto 6.
     🚨 LOS COLORES SON UN DATO Y ESTÁN VERIFICADOS: las paredes llevan los dos
     tercios de abajo en tabla lacada NEGRA (下見板張) y el tercio de arriba en
     estuco BLANCO (白漆喰). Por eso lo llaman 烏城, el castillo cuervo. Y el
     único color de todo el edificio es el BERMELLÓN (朱塗) de la galería del
     月見櫓, el torreón de la luna: es lo que lo hace reconocible de un vistazo.
     Ver la cabecera de arte/matsumoto.svg. */
  --c-castillo-negro: #2b2f36;
  --c-castillo-blanco: #f2f2ee;
  --c-castillo-teja: #59606b;
  --c-bermellon: #c0392b;
  --c-silleria: #9aa3a9;

  --c-mono-pelo: #a8998a;
  --c-mono-pelo-hondo: #8a7c6e;
  --c-mono-cara: #d2705f;
  --c-mono-hocico: #e09a8b;
}

/* ==========================================================================
   Las piezas
   --------------------------------------------------------------------------
   Manchas planas y un trazo. `vector-effect: non-scaling-stroke` para que el
   trazo mida lo mismo con la pieza grande o pequeña: sin él, el coche al
   centrarse engordaba de línea y parecía otro dibujo.
   ========================================================================== */
/* El tamaño de cada pieza lo pone actos/03-al-coche.css: aquí solo el color.

   🚨 `non-scaling-stroke` SOLO EN LAS PIEZAS, que son las que se escalan. Las
   bandas de fondo no cambian nunca de tamaño, y aplicárselo eran cuatrocientos
   nodos pagando un cálculo de trazo por fotograma para nada. */
.d-pieza svg * { vector-effect: non-scaling-stroke; }

/* --- El tren --- */
.t-cuerpo { fill: var(--c-tren); stroke: var(--trazo); stroke-width: var(--grosor); }
.t-banda  { fill: var(--c-tren-banda); }
.t-cristal { fill: var(--c-cristal); stroke: var(--trazo); stroke-width: 1.8; }
.t-bajos  { fill: var(--c-metal); }
.t-rueda  { fill: var(--c-rueda); }
.t-hueco  { fill: #6c7781; }
.t-hoja   { fill: var(--c-tren); stroke: var(--trazo); stroke-width: 1.8; }

/* 🚨 LAS PUERTAS VAN ATADAS AL SCROLL, no a una animación con duración propia.
   Con una `transition` de por medio, parar de bajar dejaba las puertas a medio
   abrir y luego se movían solas: es la ley 6 del lienzo. */
.t-puerta-i { transform: translateX(calc(var(--puertas, 0) * -46px)); }
.t-puerta-d { transform: translateX(calc(var(--puertas, 0) * 46px)); }

/* --- Los cuatro --- */
.c-cabeza { fill: var(--c-piel); stroke: var(--trazo); stroke-width: var(--grosor); }
.c-cuerpo { stroke: var(--trazo); stroke-width: var(--grosor); }
.c-uno    .c-cuerpo { fill: var(--c-ropa-1); }
.c-dos    .c-cuerpo { fill: var(--c-ropa-2); }
.c-tres   .c-cuerpo { fill: var(--c-ropa-3); }
.c-cuatro .c-cuerpo { fill: var(--c-ropa-4); }
.c-pata   { fill: var(--c-pata); }

/* --- El mostrador --- */
.m-cabeza { fill: var(--c-piel); stroke: var(--trazo); stroke-width: var(--grosor); }
.m-cuerpo { fill: var(--c-ropa-2); stroke: var(--trazo); stroke-width: var(--grosor); }
.m-brazo  { fill: var(--c-ropa-2); stroke: var(--trazo); stroke-width: 1.8; }
.m-tabla  { fill: var(--c-mueble-hondo); }
.m-frente { fill: var(--c-mueble); stroke: var(--trazo); stroke-width: var(--grosor); }
.m-veta   { fill: var(--c-mueble-hondo); opacity: .55; }
.m-cartel { fill: var(--c-cartel); stroke: var(--trazo); stroke-width: var(--grosor); }
.m-poste  { fill: var(--c-metal); }

/* --- La llave --- */
.l-mando  { fill: var(--c-llave); stroke: var(--trazo); stroke-width: var(--grosor); }
.l-boton  { fill: var(--c-llave-hondo); }
.l-anilla { fill: none; stroke: var(--c-metal); stroke-width: 5; }
.l-caña, .l-diente { fill: var(--c-metal); }

/* El halo: tres anillos que se abren con --halo. Cero filtros. */
.l-halo { opacity: var(--halo, 0); }
.l-anillo {
  fill: none;
  stroke: var(--c-halo);
  stroke-width: 3;
  transform-origin: 80px 80px;
  transform: scale(calc(.55 + var(--halo, 0) * .45));
}
.l-anillo-1 { opacity: .9; }
.l-anillo-2 { opacity: .55; }
.l-anillo-3 { opacity: .3; }

/* --- El coche --- */
.v-cuerpo  { fill: var(--c-coche); stroke: var(--trazo); stroke-width: var(--grosor); }
.v-cristal { fill: var(--c-coche-cristal); stroke: var(--trazo); stroke-width: 1.8; }
.v-rueda   { fill: var(--c-rueda); }
.v-llanta  { fill: var(--c-llanta); }
.v-suelo   { fill: var(--trazo); opacity: .18; }
/* Las luces parpadean con --luces, que también escribe el scroll */
.v-luz { fill: var(--c-luz); stroke: var(--trazo); stroke-width: 1.6; opacity: var(--luces, 0); }

/* --- La ciudad y el bosque ---
   🚨 Las clases van EN EL ELEMENTO, no en un grupo por tipo. Las bandas están
   agrupadas por RANURA —una casa entera, un árbol entero— porque la ciudad se
   convierte en bosque casa a casa, y para eso cada pieza tiene que poder
   encenderse y apagarse sola. Ver arte/ciudad.svg. */
.b-lejos   { fill: var(--c-edificio-lejos); }
.b-cerca   { fill: var(--c-edificio-cerca); }
.b-ventana { fill: var(--c-ventana); }
.b-tronco  { fill: var(--c-tronco); }
.b-copa    { fill: var(--c-arbol); }
/* La copa de abajo, más oscura: da volumen sin un solo degradado */
.b-copa + .b-copa { fill: var(--c-arbol-hondo); }
.b-mata    { fill: var(--c-arbol-hondo); }
.b-suelo   { fill: var(--trazo); opacity: .35; }

.b-copa-nevada { fill: #eef6fb; stroke: var(--c-nieve-trazo); stroke-width: 2; }
.b-copa-nevada + .b-copa-nevada { fill: var(--c-nieve-manto); }
.b-mata-nevada { fill: var(--c-nieve-manto); stroke: var(--c-nieve-trazo); stroke-width: 2; }
.b-manto { fill: var(--c-nieve-manto); }
.a-bosque-nevado .b-suelo { fill: var(--c-nieve-trazo); opacity: .5; }

/* --- La montaña de nieve del acto 4 ---
   🚨 UN SOLO TRAZADO ABIERTO. El relleno lo cierra con una recta por la base y
   el trazo no la dibuja, así que la montaña se apoya en el paisaje sin una
   línea por debajo. Y es la misma curva que muestrea motor/dibujo.js para
   saber por dónde va el monigote: ver arte/monte.svg. */
.mo-perfil {
  fill: var(--c-nieve-manto);
  stroke: var(--c-nieve-trazo);
  stroke-width: var(--grosor);
  stroke-linecap: round;
}

/* --- El monigote, que baja la montaña en tabla ---
   🚨 Trazo de 1.6 y no --grosor: con non-scaling-stroke el trazo mide lo mismo
   en pantalla para todas las piezas, y esta es la más pequeña de las once. */
.e-cabeza { fill: var(--c-piel); stroke: var(--trazo); stroke-width: 1.6; }
.e-cuerpo { fill: var(--c-mono-ropa); stroke: var(--trazo); stroke-width: 1.6; }
.e-brazo  { fill: var(--c-mono-ropa); stroke: var(--trazo); stroke-width: 1.6; }
/* El brazo de atrás, un pelo más apagado: es lo único que da profundidad en un
   dibujo sin una sola sombra (NORMAS § 1) */
.e-brazo-atras { opacity: .72; }
.e-pierna { fill: var(--c-pata); }
.e-bota   { fill: var(--trazo); }
.e-gorro  { fill: var(--c-mono-gorro); stroke: var(--trazo); stroke-width: 1.6; }
.e-pompon { fill: var(--c-mono-gorro); stroke: var(--trazo); stroke-width: 1.6; }
.e-tabla  { fill: var(--c-tabla); stroke: var(--trazo); stroke-width: 1.6; }

/* --- Las TRES posturas del monigote (actos 4, 5 y 6) ---
   🚨 AQUÍ NO HAY NI UNA REGLA POR POSTURA, Y ESA ES LA GRACIA.

   Hasta el acto 6 esto eran dos reglas atadas a una variable `--pose` de 0 a 1:
   `.e-pose-tabla { opacity: calc(1 - var(--pose)) }` y su pareja. Funcionaba
   con dos posturas y se rompía con tres, y para el acto 6 la salida fácil era
   añadir un `--corre` al lado. Lo paró Kiko antes de que se escribiera: «es
   otra lista que crece; el acto 7 añadirá otra postura y habrá tres variables
   que nadie apaga».

   Ahora el acto declara la postura que SÍ enseña —`postura('monigote',
   'corre')`— y el motor apaga las demás con `display`, buscándolas por su
   `data-postura` dentro del propio dibujo. O sea que **la lista de posturas
   está en el .svg y en ningún otro sitio**: añadir una es dibujarla, y este
   archivo no se entera. Ver motor/dibujo.js, `postura()`.

   Lo único que queda aquí es el estado de reposo, para el fotograma que va
   entre que la pieza llega por fetch y el primer pintado: se ve la de tabla,
   que es la primera que aparece en la película. */
.a-monigote .e-pose-onsen,
.a-monigote .e-pose-corre { display: none; }

/* --- El mono de Jigokudani (acto 6) ---
   🚨 La cara roja va SIN trazo oscuro alrededor, al revés que todo lo demás de
   esta paleta: con el trazo de 1,6 puesto, a 22 unidades de ancho la cara se
   convertía en una mancha oscura y el rojo desaparecía. Es la pieza más
   pequeña que tiene un color que hay que reconocer. */
.m-pelo   { fill: var(--c-mono-pelo); stroke: var(--trazo); stroke-width: 1.6; }
.m-cuerpo { fill: var(--c-mono-pelo); stroke: var(--trazo); stroke-width: 1.6; }
.m-brazo  { fill: var(--c-mono-pelo-hondo); stroke: var(--trazo); stroke-width: 1.6; }
.m-pierna { fill: var(--c-mono-pelo-hondo); stroke: var(--trazo); stroke-width: 1.6; }
/* El brazo de atrás, un pelo más apagado: lo mismo que en el monigote, y es lo
   único que da profundidad en un dibujo sin una sola sombra */
.m-brazo-atras { opacity: .72; }
.m-pie    { fill: var(--trazo); }
.m-oreja  { fill: var(--c-mono-cara); stroke: var(--trazo); stroke-width: 1.4; }
.m-cara   { fill: var(--c-mono-cara); }
.m-hocico { fill: var(--c-mono-hocico); }
.m-ojo    { fill: var(--trazo); }
.m-cola   { fill: none; stroke: var(--c-mono-pelo-hondo); stroke-width: 6; stroke-linecap: round; }
/* Su caperuza de nieve, la misma que la de la roca del acto 5 */
.m-nieve  { fill: var(--c-nieve-manto); stroke: var(--c-nieve-trazo); stroke-width: 1.4; }

/* --- La montaña de la derecha (acto 6) ---
   🚨 VA MÁS PÁLIDA Y CON EL TRAZO MÁS FINO QUE TODO LO DEMÁS, y no es un
   descuido: es el fondo del fondo, más lejos que el bosque. En esta película no
   hay sombras ni degradados (NORMAS § 1), así que la profundidad solo se puede
   hacer con el peso del trazo. Con el trazo normal, la montaña se ponía a la
   misma distancia que el coche y la escena se quedaba plana. */
/* --- Los Alpes japoneses, al fondo de Matsumoto (acto 6) ---
   🚨 LA DE DETRÁS ES EL MISMO DIBUJO MÁS PÁLIDO, y eso es todo lo que hay para
   decir «está más lejos» en una película sin sombras ni degradados. Si algún
   día se le pone trazo a la de atrás, las dos filas se ponen a la misma
   distancia y la cordillera se convierte en una valla. */
.s-roca  { fill: var(--c-monte-lejos); stroke: var(--c-nieve-trazo); stroke-width: 1.1; }
.s-nieve { fill: #fbfdff; stroke: none; }
.a-sierra-lejos .s-roca  { fill: #f6fafd; stroke: #cfe0ec; stroke-width: .9; }
.a-sierra-lejos .s-nieve { fill: #ffffff; }

/* --- 松本城 · el castillo de Matsumoto (acto 6) --- */
.ma-tejado  { fill: var(--c-castillo-teja); stroke: var(--trazo); stroke-width: 1.8; stroke-linejoin: round; }
.ma-negro   { fill: var(--c-castillo-negro); stroke: var(--trazo); stroke-width: 1.4; }
.ma-blanco  { fill: var(--c-castillo-blanco); stroke: var(--trazo); stroke-width: 1.4; }
.ma-hafu    { fill: var(--c-castillo-blanco); stroke: var(--trazo); stroke-width: 1.6; }
.ma-vano    { fill: var(--c-castillo-blanco); }
.ma-shachi  { fill: var(--c-llave); }
/* 🚨 El único color del castillo, y no es decoración: la galería del 月見櫓 va
   laqueada en bermellón por sus tres lados. Sin esto no se le reconoce. */
/* 🚨 Y EL NIVEL DE DETALLE DE ESTA PIEZA ES EL MAS ALTO DE LA PELICULA, a
   proposito. Kiko: «con mas nivel de detalle, no tan minimalista como hemos
   acostumbrado a hacer los dibujos». Lo que sube es la CANTIDAD de piezas
   dibujadas —hiladas de tabla, troneras, mensulas, rejas—, no el acabado:
   siguen siendo manchas planas y trazo, sin un solo degradado ni sombra
   (NORMAS § 1). Todo lo de aqui abajo es esa diferencia. */
.ma-tabla   { fill: none; stroke: #4a5058; stroke-width: 1.1; opacity: .8; }
.ma-junta   { fill: none; stroke: #7d868d; stroke-width: 1.1; }
.ma-reja    { fill: none; stroke: var(--c-castillo-negro); stroke-width: 1.6; }
.ma-tronera { fill: var(--c-castillo-blanco); stroke: var(--trazo); stroke-width: 1.2; }
.ma-mensula { fill: var(--c-castillo-negro); }
.ma-caballete { fill: var(--c-castillo-teja); stroke: var(--trazo); stroke-width: 1.4; }
.ma-hafu-ojo { fill: var(--c-castillo-negro); }
/* 🚨 La barandilla del ultimo piso, en BERMELLON: es el unico color del
   castillo y lo que lo hace reconocible de un vistazo. Estaba en el 月見櫓 de
   la version anterior; al quedarse solo la torre, se queda en su galeria. */
.ma-baranda { fill: none; stroke: var(--c-bermellon); stroke-width: 3.4; stroke-linecap: round; }
.ma-piedra  { fill: var(--c-silleria); stroke: var(--trazo); stroke-width: 1.6; }
.ma-nieve   { fill: var(--c-nieve-manto); stroke: var(--c-nieve-trazo); stroke-width: 1.4; }

.p-roca  { fill: var(--c-monte-lejos); stroke: var(--c-nieve-trazo); stroke-width: 1.1; }
.p-nieve { fill: var(--c-nieve-manto); stroke: none; }
.p-veta  { fill: none; stroke: var(--c-nieve-trazo); stroke-width: 1; stroke-linecap: round; opacity: .55; }

/* --- La poza de los monos (acto 6) ---
   El agua es la misma que la del onsen del acto 5 —el mismo verde de aguas
   termales— porque es la misma clase de agua; lo que cambia es el borde: allí
   son piedras labradas y aquí son rocas sueltas, que es lo que separa una poza
   de pueblo de una charca de montaña. */
/* 🚨 La orilla del charco: es la nieve de la cima, y es lo que tapa al mono
   hundido. Sin trazo por arriba, que ahi la tapa el agua. */
.z-orilla { fill: var(--c-nieve-manto); stroke: var(--c-nieve-trazo); stroke-width: 1.4; }
.z-roca  { fill: var(--c-roca); stroke: var(--trazo); stroke-width: 1.6; }
.z-nieve { fill: var(--c-nieve-manto); stroke: var(--c-nieve-trazo); stroke-width: 1.4; }

/* --- La montaña de los monos (acto 6) ---
   Al revés que la del fondo: está DELANTE de todo, así que va más oscura y con
   el trazo normal. Es roca vista con nieve encima, no una silueta lejana. */
.mm-roca    { fill: var(--c-monte-cerca); stroke: var(--trazo); stroke-width: 1.8; }
.mm-nieve   { fill: var(--c-nieve-manto); stroke: none; }
.mm-repecho { fill: var(--c-nieve-manto); stroke: var(--c-nieve-trazo); stroke-width: 1.4; }
.mm-veta    { fill: none; stroke: var(--c-monte-cerca-hondo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* --- よろづや · el 桃山風呂 (acto 6) ---
   🚨 LO QUE HACE RECONOCIBLE EL EDIFICIO ES EL KARAHAFU, el frontón curvo de la
   entrada. Va con la madera más oscura y con su canto perfilado para que esa
   doble curva se lea a 88 unidades de ancho, que es lo que mide en pantalla.
   Y los shoji van ENCENDIDOS: es lo único cálido de toda la nieve, y es lo que
   hace que el edificio se lea como un sitio donde se duerme y no como un muro. */
.y-tejado   { fill: var(--c-hierro); stroke: var(--trazo); stroke-width: 1.8; stroke-linejoin: round; }
.y-cuerpo   { fill: var(--c-madera); stroke: var(--trazo); stroke-width: 1.8; }
.y-karahafu { fill: var(--c-madera-hondo); stroke: var(--trazo); stroke-width: 1.8; stroke-linejoin: round; }
.y-karafilo { fill: none; stroke: var(--c-madera); stroke-width: 4; stroke-linejoin: round; }
.y-remate   { fill: var(--c-llave); stroke: var(--trazo); stroke-width: 1.6; }
.y-rotulo   { fill: var(--c-cartel); stroke: var(--trazo); stroke-width: 1.6; }
.y-viga     { fill: var(--c-madera-hondo); stroke: var(--trazo); stroke-width: 1.8; }
.y-mensula  { fill: var(--c-madera-hondo); }
.y-shoji    { fill: var(--c-shoji); stroke: var(--trazo); stroke-width: 1.8; }
.y-reja     { fill: none; stroke: var(--c-madera-hondo); stroke-width: 2.2; }
.y-cuerda   { fill: none; stroke: var(--trazo); stroke-width: 1.6; }
.y-farol    { fill: var(--c-halo); stroke: var(--trazo); stroke-width: 1.6; }
.y-zocalo   { fill: var(--c-inada); stroke: var(--trazo); stroke-width: 1.8; }
.y-roca     { fill: var(--c-roca); stroke: var(--trazo); stroke-width: 1.8; }
.y-nieve    { fill: var(--c-nieve-manto); stroke: var(--c-nieve-trazo); stroke-width: 1.4; }

/* --- La roca del acto 5 ---
   Piedra gris fría, que es lo único que no es ni nieve ni personaje en toda la
   secuencia. Y su caperuza de nieve con el mismo manto que la montaña: lleva
   nevando tres actos, lo que está quieto tiene nieve encima. */
.r-piedra { fill: var(--c-roca); stroke: var(--trazo); stroke-width: 1.6; }
.r-grieta { fill: none; stroke: var(--c-roca-hondo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.r-nieve  { fill: var(--c-nieve-manto); stroke: var(--c-nieve-trazo); stroke-width: 1.4; }

/* --- El onsen del acto 5, sus dos mitades ---
   🚨 LAS DOS SE PINTAN IGUAL, y tienen que seguir pintándose igual: son un solo
   dibujo partido por la cintura del muñeco (ver arte/onsen.svg). Por eso las
   reglas valen para las dos clases a la vez y no hay ni un color que solo tenga
   una de ellas.
   🚨 EL AGUA NO ES AZUL DE NIEVE. Sobre una pantalla llena de nieve azul
   pálido, un agua azul es más nieve: se va a un verde de aguas termales, que es
   el único sitio de toda la película donde entra ese color. */
.o-agua  { fill: var(--c-agua); stroke: var(--c-agua-trazo); stroke-width: 1.6; }
.o-borde { fill: none; stroke: var(--c-roca); stroke-width: 7; stroke-linecap: round; }
.o-riza  { fill: none; stroke: var(--c-agua-trazo); stroke-width: 1.8; stroke-linecap: round; }
/* El vaho, lo único de todo el dibujo que va a media tinta: es vapor */
.o-vaho  { fill: none; stroke: var(--c-vaho); stroke-width: 2.6; stroke-linecap: round; opacity: .65; }

/* ==========================================================================
   🚃 EL ACTO 7 · los trenes vistos desde arriba
   --------------------------------------------------------------------------
   🚨 ESTE ACTO SE SALE DEL COLOR A PROPÓSITO, y lo dice NORMAS § 9: «blanco
   otra vez, dos barras verticales y los datos a un lado». Después de cuatro
   actos de nieve azul, el tren a Kioto es la pantalla más limpia de la
   película — y por eso el poco color que queda tiene que estar bien puesto.

   Los trenes reutilizan la paleta del cercanías del acto 3 (--c-tren,
   --c-tren-banda, --c-cristal): es el mismo país, la misma mano y el mismo
   material. Lo único nuevo es el suelo por el que corren.

   ⚠️ Y LA BANDA NO ES LA LIBREA DE NINGUNA LÍNEA REAL. Los colores de línea de
   este viaje siguen sin verificar (PENDIENTE W4), y en esta web el color de una
   línea es un dato. Esto es caricatura, igual que el tren del acto 3.
   ========================================================================== */
#dibujo {
  /* La vía. El balasto va apenas más oscuro que el papel: tiene que decir «por
     aquí pasa algo» sin convertirse en una mancha gris que parta la pantalla */
  --c-balasto: #eef1f4;
  /* 🚨 LAS TRAVIESAS SON LO ÚNICO QUE SE MUEVE EN LA PANTALLA, así que hay que
     verlas — pero no pueden pesar más que el tren, que es lo que hay que mirar.
     La primera versión las tenía tan marcadas que la vía se leía como una
     ESCALERA y competía con el tren entero. Se vio en la captura. */
  --c-traviesa: #d9e0e7;
  --c-carril: #8d979f;
  --c-poste: #6f7981;

  /* El andén. La losa es gris de hormigón, y el amarillo es el 点字ブロック:
     el pavimento táctil del borde, que es lo que lo hace un andén japonés y no
     un rectángulo cualquiera. */
  --c-anden: #dfe4e9;
  --c-tactil: #e8b93a;
  --c-marquesina: #f4f7fa;
}

/* --- Los dos trenes (acto 7) ---
   🚨 LAS DOS PIEZAS SE PINTAN EXACTAMENTE IGUAL, y es la mitad de la decisión
   que tomó Kiko: *mismo tamaño, morro distinto*. Si alguien le da un color
   propio a uno de los dos, en el transbordo dejan de leerse como un espejo y la
   escena pasa a ser «dos trenes» en vez de «el cambio de tren». Lo único que
   los distingue es la forma de la punta. */
.v7-cuerpo  { fill: var(--c-tren); stroke: var(--trazo); stroke-width: var(--grosor); stroke-linejoin: round; }
.v7-cristal { fill: var(--c-cristal); stroke: var(--trazo); stroke-width: 1.8; }
.v7-banda   { fill: var(--c-tren-banda); }
.v7-lomo    { fill: var(--c-metal); opacity: .55; }
.v7-junta   { fill: var(--c-metal); }
.v7-equipo  { fill: var(--c-metal); opacity: .75; }
.v7-puerta  { fill: var(--c-cristal); }
/* 🚨 EL PANTÓGRAFO ES LA FIRMA DE UN TREN ELÉCTRICO VISTO DESDE ARRIBA, pero no
   puede pesar más que el tren. La primera versión eran dos brazos en V con
   trazo grueso y en pantalla salía una FLECHA negra apuntando hacia delante: a
   24 unidades de ancho, tres de trazo son una señal de tráfico. Ahora es el
   marco carenado en gris y solo la PLETINA —la barra que roza el cable— va con
   el trazo oscuro, que es lo único que de verdad hay que reconocer. */
.v7-panto    { fill: var(--c-carril); }
.v7-pletina  { fill: var(--trazo); }

/* --- La vía (acto 7) ---
   🚨 SIN TRAZO NEGRO EN NINGUNA DE SUS PARTES, y esto es deliberado: la vía se
   repite decenas de veces en pantalla y corre deprisa. Con el contorno de todo
   el dibujo, la pantalla entera vibraba y se comía al tren, que es lo único que
   hay que mirar. Es el mismo criterio que la nieve: lo que se repite mucho va
   a media tinta. */
.v7-balasto  { fill: var(--c-balasto); }
.v7-traviesa { fill: var(--c-traviesa); }
.v7-carril   { fill: var(--c-carril); }
/* 🚨 EL POSTE LLEVA SU BRAZO, y no es un adorno: sin él, en una pantalla ancha
   —donde la unidad mide el doble que en un móvil— los postes se leían como
   bloques grises sueltos flotando al lado de la vía. Un mástil con su ménsula
   sobre el carril se reconoce; un rectángulo suelto, no. Se vio en la captura
   de escritorio, no en la del móvil. */
.v7-poste    { fill: var(--c-poste); }
.v7-brazo    { fill: var(--c-poste); opacity: .55; }

/* --- El andén (acto 7) --- */
.v7-anden      { fill: var(--c-anden); stroke: var(--trazo); stroke-width: 1.6; }
.v7-tactil     { fill: var(--c-tactil); }
.v7-marquesina { fill: var(--c-marquesina); stroke: var(--c-carril); stroke-width: 1.4; }
.v7-viga       { fill: var(--c-carril); opacity: .6; }
.v7-banco      { fill: var(--c-madera); }
.v7-escalera   { fill: var(--c-marquesina); stroke: var(--c-carril); stroke-width: 1.4; }
.v7-escalera rect + rect { fill: var(--c-carril); stroke: none; }