/* ─────────────────────────────────────────────────────────────────────
 * Wonderland · EL CIELO DE LA CARTA
 * Azul noche y oro. Las luces laten con las mismas ondas concéntricas que
 * las estrellas de la constelación — porque son lo mismo mirando afuera.
 * Ni chinchetas, ni globos, ni sombras: esto no es una aplicación de mapas.
 * ───────────────────────────────────────────────────────────────────── */

.mapa-luces{
  position:relative;
  background:radial-gradient(ellipse at 50% 40%, #14263a 0%, #0d1a26 70%);
  border:1px solid rgba(201,168,76,0.18);
  border-radius:6px;
  padding:0.6rem 0.6rem 1rem;
  overflow:hidden;
}
.mapa-luces .ml-svg{
  display:block; width:100%; height:auto;
  /* ── `none`, Y NO `pan-y` · probado y descartado ─────────────────────
   * El dedo manda dentro del mapa: arrastrar mueve el cielo y el pellizco
   * lo acerca. Nada de scroll de página mientras tanto.
   *
   * Probé `pan-y` para que la página se pudiera recorrer con el dedo
   * encima del mapa, y fue peor: `pan-y` le REGALA al navegador todos los
   * gestos verticales, y en cuanto decide que un arrastre va hacia abajo
   * se queda con él. Resultado: el mapa dejaba de moverse con el dedo y
   * solo respondía al pellizco.
   *
   * O sea que no es un ajuste, es una disyuntiva: o se arrastra el mapa o
   * se recorre la página por encima de él. Gana el mapa, que es lo que la
   * gente viene a tocar — y el sitio para recorrer la página se resuelve
   * dejándole márgenes al cielo (ver `.cielo` en encuentros.html). */
  touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none;
}
.mapa-luces .ml-svg:active{ cursor:grabbing; }

/* Aquí vivió un cartel de «toca el mapa para acercarte», que acompañaba a
   un candado sobre la rueda del ratón. Los dos fuera: el candado no era
   intuitivo, y este fichero ya resolvía ese mismo problema para el dedo
   dejándole márgenes al cielo en vez de bloquear el gesto. */

/* ── EL GROSOR NO SE ESCALA ────────────────────────────────────────────
   La cámara es un `scale` sobre un <g>, y un scale escala TODO: posición,
   tamaño y también el grosor del trazo. A escala 0,1 una calle de 0,8
   pasaba a 0,08 y desaparecía; por eso al alejarse las líneas se veían
   tenuísimas y los peldaños de provincia y país no se veían en absoluto.
   No es que no se dibujaran — es que se dibujaban con un pelo.

   `non-scaling-stroke` le dice al navegador que el grosor se mida en
   píxeles de PANTALLA, pase lo que pase con la transformada. Una calle
   mide lo mismo de cerca que de lejos, que es lo que quiere cualquiera
   que mire un mapa.

   De paso desaparece un apaño: había reglas `.ml-cerca` que adelgazaban
   los trazos a mano para compensar el zoom de acercamiento. Ya no hacen
   falta, y una compensación menos es una cosa menos que se puede
   desajustar. */
.mapa-luces .ml-agua,
.mapa-luces .ml-agua-fino,
.mapa-luces .ml-via,
.mapa-luces .ml-calle,
.mapa-luces .ml-frontera{ vector-effect:non-scaling-stroke; }

/* Las ondas también. El tamaño de la luz ya se compensa por transformada
   (ver escalaLuz en el .js), pero el GROSOR del anillo no iba en esa cuenta:
   alejándose quedaba en un pelo y los círculos concéntricos desaparecían
   aunque siguieran ahí, expandiéndose. */
.mapa-luces .ml-onda{ vector-effect:non-scaling-stroke; }

/* Lejos, la luz no tiene mapa contra el que competir — hay costa y poco
   más— así que el halo puede ser más contenido. Lo que NO se toca es el
   radio: de eso se encarga la transformada, y tocarlo aquí pelearía con
   ella. (Antes este bloque encogía la luz a r:3, que era justo lo
   contrario de lo que hace falta.) */
.mapa-luces .ml-svg.ml-lejos .ml-ultima .ml-nucleo{
  filter:drop-shadow(0 0 7px rgba(255,240,200,1))
         drop-shadow(0 0 18px rgba(201,168,76,0.7));
}

/* El agua · un trazo dorado finísimo. Lo justo para reconocer la ciudad;
   ni una calle, ni un nombre, ni un edificio. */
/* El agua manda: es lo que hace reconocible la ciudad de un vistazo. */
.mapa-luces .ml-agua{
  fill:none;
  stroke:rgba(201,168,76,0.72);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(201,168,76,0.28));
}
/* ── LOS PELDAÑOS DE ARRIBA · cuando la carta se ha ido lejos ──────────
   Las fronteras son una convención humana, no un accidente del terreno:
   por eso van en trazo discontinuo y más apagadas que la costa. Lo que se
   reconoce de un vistazo es dónde acaba la tierra, no dónde acaba un país.

   Y a escala de continente el trazo tiene que ser MÁS FINO que en la
   ciudad, no más grueso: hay diez veces más línea en pantalla, y con el
   grosor de una calle el mundo se convierte en una mancha dorada. */
.mapa-luces .ml-frontera{
  fill:none; stroke:rgba(201,168,76,0.28); stroke-width:0.5;
  stroke-dasharray:2 2.5; stroke-linecap:round;
}
/* Las provincias · más tenues que las fronteras de país, porque son una
   división de dentro. Van las últimas en el orden de dibujo, o sea debajo
   de todo: dan forma al territorio sin discutirle el sitio a nada. Y con
   el trazo más corto y espaciado, para que a un vistazo se distingan de
   una frontera sin tener que pararse a mirar. */
.mapa-luces .ml-provincia{
  fill:none; stroke:rgba(201,168,76,0.17); stroke-width:0.4;
  stroke-dasharray:1 3; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
/* Los ríos grandes · presentes pero por debajo de la costa */
.mapa-luces .ml-agua-fino{
  fill:none; stroke:rgba(201,168,76,0.4); stroke-width:0.7;
  stroke-linecap:round; stroke-linejoin:round;
}
/* A escala de mundo y de país el agua es la costa: mucho más trazo que la
   ría de Bilbao, así que se adelgaza y se le quita el halo — si no, los
   continentes se emborronan y las luces dejan de mandar. */
.mapa-luces .ml-svg.ml-lejos .ml-agua{
  stroke-width:1; filter:none; stroke:rgba(201,168,76,0.62);
}
/* Aquí ponía `r:3` · encogía la luz al alejarse, que es exactamente lo
   contrario de lo que hace falta: lejos, las luces son lo único que hay que
   mirar. Del tamaño se encarga ahora la transformada (escalaLuz en el .js),
   y una regla de radio aquí pelearía con ella. */

/* Las vías grandes · la Gran Vía, los puentes, lo que orienta */
.mapa-luces .ml-via{
  fill:none; stroke:rgba(201,168,76,0.5); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
/* La trama menor · las manzanas no se dibujan: son el hueco entre calles.
   Fina, pero no invisible: tiene que dar referencia. El equilibrio se
   sostiene por la JERARQUÍA (agua > vías > trama), no por apagarla —
   mientras las tres se distingan entre sí, las luces siguen mandando. */
.mapa-luces .ml-calle{
  fill:none; stroke:rgba(201,168,76,0.32); stroke-width:0.8;
  stroke-linecap:round; stroke-linejoin:round;
}
/* En un móvil a plena luz —que es donde mira esto quien acaba de encontrar
   una carta en la calle— el trazo fino se desvanece. Ahí, más cuerpo. */
@media (max-width:600px){
  .mapa-luces .ml-calle{ stroke:rgba(201,168,76,0.38); stroke-width:0.9; }
  .mapa-luces .ml-via{ stroke:rgba(201,168,76,0.56); stroke-width:1.5; }
  .mapa-luces .ml-agua{ stroke-width:3.2; }
}

/* ── LA LUZ ───────────────────────────────────────────────────────────
   Un núcleo que respira y dos ondas que se abren. La luz tiene que ganarle
   al mapa siempre: la ciudad es el fondo, el encuentro es lo que importa.
   Por eso el núcleo late (no solo las ondas) y lleva su propio halo — así
   se ve incluso cuando la trama de calles está debajo. */
.mapa-luces .ml-nucleo{
  fill:#fff3d2;
  filter:drop-shadow(0 0 5px rgba(255,226,150,0.95))
         drop-shadow(0 0 14px rgba(201,168,76,0.6));
  animation:mlRespirar 4.2s ease-in-out infinite;
}
@keyframes mlRespirar{
  0%,100% { opacity:0.82; }
  50%     { opacity:1; }
}
/* OJO CON EL `opacity:0` · no es decorativo, arregla algo.
   Las tres ondas van escalonadas con `animation-delay`, y durante ese
   retraso el navegador NO aplica el fotograma inicial: aplica el estado
   normal del elemento. Con el estado normal visible, las dos ondas que
   esperan su turno se quedaban QUIETAS y a la vista, pegadas al punto —
   así que en vez de un latido se veía un anillo expandiéndose y dos
   círculos parados encima de la luz. Invisibles en reposo, solo se ve lo
   que de verdad está latiendo. */
.mapa-luces .ml-onda{
  fill:none; stroke:rgba(255,226,150,0.85); stroke-width:1.6;
  opacity:0;
  transform-origin:center; transform-box:fill-box;
  animation:mlLatir 4.2s ease-out infinite;
}
/* Las de detrás, algo más tenues que la primera pero no fantasmas: tienen
   que leerse como tres anillos saliendo del mismo sitio, no como uno y dos
   sombras. El grosor sube un poco porque un anillo grande y fino se pierde
   contra la trama de calles. */
.mapa-luces .ml-onda-2{ stroke:rgba(230,200,130,0.7); stroke-width:1.3; }
/* Las tres ondas ESTÁN, pero solo se veía una — y no era un fallo de
   dibujo sino de esta curva. Se apagaban demasiado pronto: a mitad del
   recorrido ya iban por 0,22 de opacidad, así que el anillo de dentro se
   veía y los dos de fuera eran fantasmas. Ahora aguantan encendidas casi
   todo el viaje y se apagan al final, cuando ya están lejos. También se
   acorta el alcance (34 en vez de 40): un anillo que se estira demasiado
   se adelgaza tanto que desaparece solo. */
@keyframes mlLatir{
  0%   { r:5;  opacity:0;    }
  12%  { opacity:0.95; }
  70%  { opacity:0.55; }
  100% { r:34; opacity:0;    }
}
/* ── EL RASTRO Y EL PRESENTE ───────────────────────────────────────────
   Dos maneras de estar en el mapa, y se distinguen sin leer nada:

     · por donde pasó  → titila. Pequeña, intermitente, memoria.
     · donde está      → encendida y quieta, irradiando sus ondas.

   Lo que irradia está; lo que titila estuvo. Las ondas son presencia, no
   eco — por eso las lleva la última y solo la última. */
.mapa-luces .ml-luz:not(.ml-ultima) .ml-nucleo{
  r:4;
  animation:mlTitila 3.4s ease-in-out infinite;
  filter:drop-shadow(0 0 6px rgba(255,226,150,0.9))
         drop-shadow(0 0 14px rgba(201,168,76,0.5));
}
@keyframes mlTitila{
  0%, 100% { opacity:0.32; }
  50%      { opacity:0.95; }
}
/* Antes había una máscara que apagaba el mapa alrededor, y contra ese
   fondo casi negro cualquier luz resaltaba. Quitada la máscara, la ciudad
   entera se dibuja debajo y la luz tiene que ganarle a un callejero: por
   eso crece y el halo se hace más ancho. La luz manda siempre — la ciudad
   es el fondo, el encuentro es lo que importa. */
.mapa-luces .ml-ultima .ml-nucleo{
  r:7; fill:#fffdf6; animation:none; opacity:1;
  filter:drop-shadow(0 0 9px rgba(255,240,200,1))
         drop-shadow(0 0 26px rgba(255,226,150,0.9))
         drop-shadow(0 0 48px rgba(201,168,76,0.55));
}
/* Las ondas concéntricas son de la última y de nadie más. El rastro
   titila; solo el presente irradia. (Las demás luces ni siquiera las
   llevan en el dibujo — ver wonderland-mapa-luces.js.) */
.mapa-luces .ml-palo{ pointer-events:none; }
.mapa-luces .ml-palo{
  font-family:'Cinzel',serif; font-size:13px; font-weight:600;
  fill:var(--gold-light,#e8d5a3); text-anchor:middle;
  paint-order:stroke;
  /* Un filo del azul del fondo alrededor, para que el símbolo se lea
     aunque caiga justo encima de una calle dorada. */
  stroke:#0d1a26; stroke-width:2.5; stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(201,168,76,0.7));
  /* El giro NO se hace aquí. Va en el propio SVG, con <animateTransform> y
     el centro dicho a mano — ver wonderland-mapa-luces.js.

     En CSS habría que fiarse de que el navegador calcule el centro del
     glifo (`transform-box:fill-box`), y donde eso falla el símbolo orbita
     alrededor del origen del lienzo en vez de girar sobre su eje: sale
     despedido fuera de la carta. Con el centro explícito no hay margen de
     interpretación.

     Aquí queda solo la respiración, que es opacidad y no tiene ese
     problema. Nueve segundos por vuelta: lento para que no parezca un
     «cargando», vivo para que se note. Es el único elemento del cielo que
     gira, y por eso funciona. */
  animation:mlPaloRespira 4.2s ease-in-out infinite;
}
@keyframes mlPaloRespira{
  0%,100% { opacity:0.85; }
  50%     { opacity:1; }
}
/* Al acercarse, el símbolo no debe engordar con el zoom: se compensa. */
.mapa-luces .ml-svg.ml-cerca .ml-palo{ font-size:9px; stroke-width:1.8; }
.mapa-luces .ml-svg.ml-lejos .ml-palo{ font-size:15px; }

/* El área que se toca · invisible, generosa, para el dedo */
.mapa-luces .ml-tocar{ fill:transparent; cursor:pointer; }

/* Aquí vivió una transición de cámara de medio segundo, para que enfocar
   una carta no pareciera un teletransporte. Fuera: animar la transformada
   obliga al navegador a rasterizar miles de caminos en cada fotograma, y a
   escala de continente eso dejaba la página congelada decenas de segundos.
   Si algún día vuelve, habrá que animar la PROYECCIÓN, no la transformada. */

/* ── LOS LAZOS · las luces de una misma carta, atadas ──────────────────
   No son una ruta: son la misma cosa en varios sitios. Por eso el trazo es
   el de la constelación —dorado, finísimo, intermitente— y no una flecha.
   Se tejen uno a uno con un retraso escalonado, como Absolem uniendo
   estrellas, y luego respiran muy despacio para que no se olviden. */
/* El trazo tiene que competir con un callejero entero dibujado en oro
   debajo. Empezó a 1,2px con hueco de siete y se perdía entre las calles:
   era más fino que ellas y del mismo color. Ahora es más grueso, más claro
   y con los puntos más juntos (guión de cinco, hueco de cuatro: más línea
   que aire), y lleva un halo que lo despega del fondo. Las calles son el
   papel; esto es la tinta. */
.mapa-luces .ml-lazo{
  stroke:rgba(240,222,170,0.95);
  stroke-width:2.2;
  stroke-dasharray:5 4;
  stroke-linecap:round;
  fill:none;
  vector-effect:non-scaling-stroke;   /* no engorda ni adelgaza con el zoom */
  filter:drop-shadow(0 0 4px rgba(255,226,150,0.55));
  opacity:0;
  animation:mlLazoTejer 0.75s ease-out forwards,
            mlLazoRespira 5.5s ease-in-out 1.2s infinite;
}
/* Lejos, más fino · lo mismo que le pasa al agua. Los 2,2 se calcularon
   contra un callejero entero dibujado en oro por debajo: ahí el lazo tenía
   que ganarle a las calles o no se veía. En el cielo de las 54, a escala de
   país, no hay calles contra las que competir —solo costa muy tenue y mucho
   negro— y el mismo trazo pasa de ser tinta a ser un cable. */
.mapa-luces .ml-svg.ml-lejos .ml-lazo{
  stroke-width:1.2;
  stroke-dasharray:4 3.5;
  stroke:rgba(240,222,170,0.8);
  filter:drop-shadow(0 0 3px rgba(255,226,150,0.45));
}
@keyframes mlLazoTejer{
  from{ opacity:0; stroke-dashoffset:26 }
  to  { opacity:1; stroke-dashoffset:0  }
}
@keyframes mlLazoRespira{
  0%,100%{ opacity:1    }
  50%    { opacity:0.72 }
}
@media (prefers-reduced-motion: reduce){
  .mapa-luces .ml-lazo{ animation:none; opacity:0.7; }
}

/* ── ONDAS Y PALO · SOLO DONDE SIGNIFICAN ALGO ─────────────────────────
   Se dibujan en todas las luces (ver el .js) pero nacen apagados.

   EL PALO sale en las tres maneras de estar encendida, y esto era un
   fallo: lo tenía solo la luz TOCADA, así que al pulsar un punto salía el
   símbolo y al pulsar una carta no. Dos caminos y dos comportamientos para
   la misma pregunta. Ahora, si una luz está encendida, lleva su emblema —
   y cuando una carta enciende varias, todas llevan el mismo, que junto con
   los lazos es justo lo que se quiere decir: son la misma.

     .ml-ultima  donde está la carta AHORA · solo en el cielo de una carta
     .ml-brilla  una de las luces de la carta que has tocado
     .viva       la luz concreta que has tocado

   LAS ONDAS no: son «esto irradia ahora», y eso solo puede ser una. Se
   quedan en la última y en la tocada.

   `display:none` y no `opacity:0` a propósito: un elemento con display
   none no anima, así que treinta luces ocultas no cuestan nada. */
.mapa-luces .ml-onda,
.mapa-luces .ml-palo{ display:none; }
.mapa-luces .ml-ultima .ml-palo,
.mapa-luces .ml-luz.ml-brilla .ml-palo,
.mapa-luces .ml-luz.viva .ml-palo{ display:block; }
.mapa-luces .ml-ultima .ml-onda,
.mapa-luces .ml-luz.ml-ultima-suya .ml-onda,
.mapa-luces .ml-luz.viva .ml-onda{ display:block; }
/* `.ml-ultima-suya` · la parada más reciente DE LA CARTA QUE HAS TOCADO.
   En el cielo de una sola carta ese papel lo hace `.ml-ultima`, pero en el
   de las 54 esa clase no se pone —allí marcaba TU última carta encontrada,
   que no dice nada cuando estás mirando el viaje de otra— y sus luces se
   encendían mudas, sin latido. Dentro de una carta la pregunta sí tiene
   respuesta, y es esta. Sigue irradiando UNA sola: si luego tocas una luz
   concreta, el JS quita esta clase y manda `.viva`. */

/* LA LUZ QUE TOCAS SE CONVIERTE EN LA PROTAGONISTA.
   Antes solo crecía un píxel (de r:4 a r:5) y cambiaba de blanco: se veía
   cambiar el texto de abajo y en el mapa no pasaba nada. Ahora hace lo
   mismo que la última —crece, se queda quieta, irradia y saca su palo
   encima—, que además en el cielo de las 54 es la única manera de saber
   DE QUÉ CARTA es el punto que acabas de tocar. */
.mapa-luces .ml-luz.viva .ml-nucleo{
  fill:#fffdf6; r:8; animation:none; opacity:1;
  filter:drop-shadow(0 0 9px rgba(255,240,200,1))
         drop-shadow(0 0 26px rgba(255,226,150,0.9))
         drop-shadow(0 0 48px rgba(201,168,76,0.55));
  transition:r 0.35s cubic-bezier(.2,.8,.3,1);
}
.mapa-luces .ml-luz.viva .ml-onda{ animation-duration:2.6s; }

/* ── LAS LUCES DE UNA SOLA CARTA ───────────────────────────────────────
   En el cielo de la baraja entera, al tocar un naipe sus paradas salen al
   frente y las demás se retiran. No se borran: el resto del cielo sigue
   ahí, callado, porque media gracia de esta página es ver el viaje de UNA
   dentro del de todas.

   El color es de verdad OTRO, no un dorado más brillante. Contra un mapa
   entero de oro, otro oro —aunque sea el doble de grande— se lee como
   «esta es más importante», no como «estas son las suyas». Una luz fría
   sobre un mapa cálido no se confunde con nada.

   Se cambia aquí, en una línea, si el frío no acaba de gustar. */
/* UN SOLO COLOR, Y ES EL DE LA CASA.
 *
 * Aquí hubo un turquesa para distinguir «tuya», y se ha ido del proyecto:
 * era el único color frío de Wonderland y se leía como interfaz. Lo que
 * distingue una carta tuya es el polvo de estrellas sobre el naipe, que no
 * es un color sino una textura y por eso no compite con el oro.
 *
 * En el mapa, además, la distinción sobraba: si estás viendo las luces de
 * una carta es porque acabas de tocarla, así que ya sabes si es tuya. Lo
 * único que hace falta aquí es que las suyas salgan al frente — y eso lo
 * consigue que las demás se retiren, no ponerles otro color. */
.mapa-luces{
  --ml-resalte:#fff8e2;           /* la carta que miras · blanco cálido */
  --ml-resalte-halo:255,231,170;
}

/* Las que NO son suyas · se quedan, pero se apartan. Sin `filter`, que es
   lo que les da el halo: sin halo y con poca opacidad, se hunden solas. */
.mapa-luces .ml-svg.ml-resaltando .ml-luz:not(.ml-brilla) .ml-nucleo{
  opacity:0.16; filter:none; animation:none;
}
/* `display:none`, no `opacity:0` · esto ponía opacidad cero y NO apagaba
   nada, porque las ondas llevan una animación corriendo y en la cascada
   una propiedad animada le gana siempre a una declaración normal. El
   resultado era que las luces «apartadas» seguían latiendo con sus
   círculos mientras la encendida se quedaba quieta: la atención se iba a
   la luz equivocada.
   Y `display:none` además las detiene del todo — que es el mismo criterio
   que ya usa este fichero más arriba, por el mismo motivo. */
.mapa-luces .ml-svg.ml-resaltando .ml-luz:not(.ml-brilla) .ml-onda,
.mapa-luces .ml-svg.ml-resaltando .ml-luz:not(.ml-brilla) .ml-palo{
  display:none;
}
/* Y entre las SUYAS, solo irradia la última · si no, una carta con tres
   paradas latiría por triplicado y «esto está aquí ahora» dejaría de
   querer decir nada. */
.mapa-luces .ml-svg.ml-resaltando .ml-brilla:not(.ml-ultima-suya):not(.viva) .ml-onda{
  display:none;
}

/* Las suyas · más grandes y de otro color. El radio se toca AQUÍ y no con
   una transformada: el `transform` de cada luz se lo reescribe el zoom en
   cada cuadro y le pasaría por encima. */
.mapa-luces .ml-svg.ml-resaltando .ml-brilla .ml-nucleo{
  r:9; fill:var(--ml-resalte); opacity:1; animation:none;
  filter:drop-shadow(0 0 8px rgba(var(--ml-resalte-halo),1))
         drop-shadow(0 0 22px rgba(var(--ml-resalte-halo),0.85))
         drop-shadow(0 0 44px rgba(var(--ml-resalte-halo),0.45));
  transition:r 0.45s cubic-bezier(.2,.8,.3,1), fill 0.45s ease;
}
/* Y laten · las ondas ya solo las lleva la última parada de cada carta, así
   que aquí no hay noventa círculos: hay los de esta. */
.mapa-luces .ml-svg.ml-resaltando .ml-brilla .ml-onda{
  stroke:rgba(var(--ml-resalte-halo),0.9); animation-duration:3s;
}
.mapa-luces .ml-svg.ml-resaltando .ml-brilla .ml-palo{
  fill:var(--ml-resalte); filter:drop-shadow(0 0 6px rgba(var(--ml-resalte-halo),0.8));
}

@media (prefers-reduced-motion: reduce){
  .mapa-luces .ml-nucleo{ animation:none; opacity:1; }
  .mapa-luces .ml-svg.ml-resaltando .ml-brilla .ml-nucleo{ transition:none; }
}

.mapa-luces .ml-pie,
.mapa-luces .ml-cargando{
  font-family:'Cinzel',serif; font-size:0.55rem; letter-spacing:0.24em;
  text-transform:uppercase; color:rgba(201,168,76,0.5);
  text-align:center; margin:0.5rem 0 0;
}
.mapa-luces .ml-vacio{
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:300;
  font-size:clamp(1.1rem,3vw,1.4rem); line-height:1.5;
  color:var(--gold-pale,#f5eedc); text-align:center;
  margin:0; padding:2.6rem 1rem;
}

/* ── EL ESLABÓN · lo que cuenta una luz cuando la tocas ────────────────
 *
 * SIN `.mapa-luces` DELANTE, y es un arreglo, no un descuido.
 *
 * El eslabón vive A PROPÓSITO fuera del mapa —en la baraja viajera y en
 * jugamos cuelga debajo, para que el texto no le quite sitio al cielo ni
 * se mueva con el zoom—, pero estas reglas pedían tenerlo DENTRO. O sea
 * que en los dos únicos sitios donde de verdad se usa, no se aplicaba
 * ninguna: al tocar una luz salía texto pelado, sin tipografía ni color.
 *
 * Los nombres `ml-*` son de este componente y de nadie más, así que
 * quitarles el ancestro no puede pisar nada de fuera. */
.ml-eslabon{
  margin-top:0.9rem; padding-top:0.9rem;
  border-top:1px dashed rgba(201,168,76,0.2);
  text-align:center;
}
/* De qué carta era esa luz · solo en el cielo de toda la baraja, donde es
   lo primero que quieres saber al tocar un punto. */
.ml-cual{
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
  font-size:1.05rem; color:var(--gold-light,#e8d5a3);
  margin:0 0 0.35rem;
}
.ml-sitio{
  font-family:'Cinzel',serif; font-size:0.6rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--gold,#c9a84c); margin:0 0 0.5rem;
}
.ml-verso{
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
  font-size:1.02rem; line-height:1.5; color:var(--gold-pale,#f5eedc); margin:0 0 0.5rem;
}
.ml-firma{
  font-family:'IM Fell English',serif; font-style:italic;
  font-size:0.78rem; color:rgba(245,238,220,0.45); margin:0;
}

@media (prefers-reduced-motion: reduce){
  /* Quietas, pero sin apilar tres anillos idénticos encima de la luz: se
     queda UNO, como un halo, y las otras dos desaparecen. La última luz
     tiene que seguir distinguiéndose del rastro también aquí — que alguien
     prefiera no ver movimiento no significa que deba ver menos. */
  .mapa-luces .ml-onda{ animation:none; opacity:0; }
  .mapa-luces .ml-ultima .ml-onda:first-of-type{ opacity:0.45; r:13; }
  .mapa-luces .ml-palo{ animation:none; opacity:1; }
}