/* ─────────────────────────────────────────────────────────────────────
 * Wonderland · EL CIELO PROFUNDO
 *
 * En astronomía, «cielo profundo» es lo que hay más allá del sistema
 * solar: nebulosas, cúmulos, galaxias. No es otro cielo — es el MISMO,
 * y está ahí siempre. Lo que hace falta para verlo no es mirar a otro
 * sitio: es más abertura y más tiempo de exposición.
 *
 * Eso es exactamente lo que pasa aquí. La constelación es una. El Gato
 * enciende las estrellas, Absolem las une, y cuando llevas suficiente
 * conversación encima —suficiente exposición— aparece lo que había
 * detrás todo el rato.
 *
 * Nada de esto gradúa nada. No hay ejes con marcas, ni leyendas de
 * escala, ni un color que signifique "más". El tamaño reparte; el
 * desenfoque dice "todavía no lo sé"; el anillo dice "esto lo dijimos
 * los dos". Y ya.
 * ───────────────────────────────────────────────────────────────────── */

.wlc,
.wlc-anfitrion,
.wlc-mando{
  --wlc-oro:      #b9955a;
  --wlc-oro-h:    #8a6f3e;
  --wlc-oro-c:    #d8bd86;
  --wlc-marfil:   #f5eedd;
  --wlc-apagado:  #3a4a58;
  --wlc-tenue:    #7d8f9e;
  --wlc-neb-1:    #1c3a4a;   /* el clima los sobreescribe */
  --wlc-neb-2:    #12253a;
}

/* ─────────────────────────────────────────────────────────────────────
 * MODO SOBRE · la madriguera
 * Una capa encima de la constelación que ya está. No se toca NADA de lo
 * que había: ni las estrellas, ni los trazos, ni el nombre en el centro.
 * Solo se añade lo nuevo, y solo cuando se pide.
 * ───────────────────────────────────────────────────────────────────── */
.wlc-capa{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;          /* dormida, la superficie sigue mandando */
  opacity:0;
  transition:opacity 1.2s ease;
  z-index:2;
}
.wlc-sumergido .wlc-capa{ opacity:1; pointer-events:auto; }

/* Al bajar, la superficie se retira — pero no se va. Sigue arriba,
   difuminada, porque sigue estando. Es profundidad, no otra pantalla. */
.wlc-anfitrion .constelacion,
.wlc-anfitrion .constelacion-nombre{
  transition:opacity 1.2s ease, filter 1.2s ease;
}
.wlc-anfitrion.wlc-sumergido .constelacion{ opacity:0.14; filter:blur(1px); }
.wlc-anfitrion.wlc-sumergido .constelacion-nombre{ opacity:0.35; }

/* LOS TRAZOS SOBREVIVEN. Son la bisagra: lo que Absolem unió es lo que
   te ha traído hasta aquí abajo, así que no se apagan con las estrellas.
   Al contrario: cuando todo lo demás baja, ellos suben. */
.wlc-anfitrion .constelacion-svg{ transition:opacity 1.2s ease; z-index:3; }
.wlc-anfitrion.wlc-sumergido .constelacion-svg{ opacity:1; }

/* El mando · debajo de la constelación, en el flujo normal. */
.wlc-mando{ text-align:center; margin:-1.4rem auto 2.2rem; max-width:520px; }
.wlc-mando .wlc-panel{
  max-height:0; opacity:0; overflow:hidden; padding-top:0; padding-bottom:0;
  border-left-color:transparent;
  transition:max-height 0.7s ease, opacity 0.7s ease, padding 0.7s ease;
}
.wlc-mando.abierto .wlc-panel{
  max-height:340px; opacity:1;
  padding-top:0.9rem; padding-bottom:0.9rem;
  border-left-color:var(--wlc-oro-h);
}

/* ─────────────────────────────────────────────────────────────────────
 * MODO PROPIO · el chat de Absolem
 * ───────────────────────────────────────────────────────────────────── */
.wlc{ display:block; width:100%; max-width:520px; margin:0 auto; }
.wlc-lienzo{
  position:relative; width:100%;
  border:1px solid rgba(185,149,90,0.2); border-radius:3px; overflow:hidden;
  background:radial-gradient(60% 60% at 50% 50%, rgba(185,149,90,0.10), transparent 70%), #0e1b28;
}
.wlc-svg{ display:block; width:100%; height:auto; }
.wlc-superficie{ transition:opacity 1.2s ease; }
.wlc-lienzo .wlc-hondo{ opacity:0; transition:opacity 1.2s ease; pointer-events:none; }
.wlc-lienzo.wlc-sumergido .wlc-hondo{ opacity:1; pointer-events:auto; }
.wlc-lienzo.wlc-sumergido .wlc-superficie{ opacity:0.14; }

/* ── EL CLIMA · solo tiñe el fondo ─────────────────────────────────── */
.wlc-nebulosa{ opacity:0; transition:opacity 1.4s ease; }
.wlc-sumergido .wlc-nebulosa{ opacity:0.55; animation:wlcOndas 16s ease-in-out infinite; }
@keyframes wlcOndas{ 0%,100%{opacity:0.42} 50%{opacity:0.62} }

.cl-calma  { --wlc-neb-1:#1c3a4a; }
.cl-marea  { --wlc-neb-1:#173a58; }
.cl-marea.wlc-sumergido   .wlc-nebulosa{ animation-duration:9s; }
.cl-niebla { --wlc-neb-1:#2a3a44; }
.cl-niebla .wlc-capa,
.cl-niebla .wlc-svg{ filter:saturate(0.75); }
.cl-tormenta{ --wlc-neb-1:#1a1f3d; }
.cl-tormenta.wlc-sumergido .wlc-nebulosa{ animation-duration:4.5s; }
.cl-raso   { --wlc-neb-1:#16354a; }
.cl-raso.wlc-sumergido    .wlc-nebulosa{ opacity:0.3; }
.cl-viento { --wlc-neb-1:#4a3626; }
.cl-viento.wlc-sumergido  .wlc-hondo{ animation:wlcMecer 7s ease-in-out infinite; }
@keyframes wlcMecer{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(2px)} }

/* ── LOS EJES CONECTÁNDOSE ─────────────────────────────────────────────
   No aparecen hechos: se dibujan de un polo al otro, escalonados, cuando
   bajas. Es literalmente lo que ocurre — los ejes no estaban ahí, salen
   de unir lo que el Gato encendió. Por eso el trazo VIAJA en vez de
   encenderse: un interruptor no contaría nada. */
.wlc-eje{
  stroke:var(--wlc-oro-h); stroke-width:0.4; opacity:0.22;
  stroke-dasharray:var(--wlc-largo) var(--wlc-largo);
  stroke-dashoffset:var(--wlc-largo);
}
.wlc-sumergido .wlc-eje{
  animation:wlcTender 1.1s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:var(--wlc-turno, 0s);
}
@keyframes wlcTender{ to{ stroke-dashoffset:0; } }

/* ── LAS LUCES · dos gemelas balanceándose ────────────────────────────
   Las dos luces de un eje respiran en contrafase: cuando una crece la
   otra mengua, como los platillos de una balanza que no acaba de pararse
   del todo. Eso hace que un eje se lea como un reparto vivo y no como dos
   puntos clavados. La amplitud es mínima a propósito: si se notara mucho
   parecería que el dato cambia, y el dato no cambia. */
.wlc-luz{ cursor:pointer; outline:none; }
.wlc-tocar{ fill:transparent; }
.wlc-nucleo{
  fill:var(--wlc-oro-c);
  filter:drop-shadow(0 0 2px rgba(216,189,134,0.9)) drop-shadow(0 0 5px rgba(185,149,90,0.55));
  transform-origin:center; transform-box:fill-box;
  animation:wlcBalanceo 6.4s ease-in-out infinite;
  animation-delay:var(--wlc-fase, 0s);
  transition:fill 0.3s ease;
}
@keyframes wlcBalanceo{
  0%,100% { transform:scale(0.94); opacity:0.86; }
  50%     { transform:scale(1.08); opacity:1;    }
}
.wlc-luz.borrosa .wlc-nucleo{ filter:blur(1.4px); opacity:0.75; }
.wlc-confirmado{ fill:none; stroke:var(--wlc-oro-c); stroke-width:0.6; opacity:0.9; }
.wlc-luz:hover .wlc-nucleo,
.wlc-luz:focus-visible .wlc-nucleo{ fill:#fff4dd; }
.wlc-luz:focus-visible .wlc-tocar{ stroke:var(--wlc-oro-c); stroke-width:0.5; }
/* La que estás leyendo se queda quieta y encendida: deja de balancearse
   para que se entienda que es la que estás leyendo abajo. */
.wlc-luz.viva .wlc-nucleo{ fill:#fff4dd; animation:none; transform:scale(1.14); opacity:1; }

/* ── EL ANDAMIO ────────────────────────────────────────────────────── */
.wlc-anillo{ fill:none; stroke:var(--wlc-oro-h); stroke-width:0.6; opacity:0.35; }
.wlc-hueco{ opacity:0.2; }
.wlc-tri{ fill:none; stroke:var(--wlc-oro-h); stroke-width:0.4; opacity:0.35; }
/* Solo en modo propio · en la madriguera los trazos son los suyos */
.wlc-trazo{ stroke:var(--wlc-oro); stroke-width:0.7; opacity:0.5; stroke-dasharray:1.2 2.4; }

/* ── LA SUPERFICIE · solo en modo propio ───────────────────────────── */
.wlc-estrella{
  fill:var(--wlc-oro-c);
  filter:drop-shadow(0 0 2px rgba(216,189,134,0.9));
  opacity:calc(0.4 + 0.6 * var(--wlc-i, 1));
}
.wlc-onda{ fill:none; stroke:var(--wlc-oro); opacity:calc(0.25 * var(--wlc-i, 1)); }
/* Una estrella que no se ha encendido no está rota ni pendiente: no le ha
   tocado todavía. Se dibuja igual, solo que sin luz. */
.wlc-est.apagada .wlc-estrella{ fill:var(--wlc-apagado); filter:none; opacity:1; }
.wlc-etiqueta{
  font-family:Cinzel,serif; fill:var(--wlc-oro-c);
  letter-spacing:0.08em; text-anchor:middle; opacity:0.85;
}
.wlc-etiqueta.tenue{ fill:var(--wlc-tenue); opacity:0.7; }

/* ── EL PANEL · lo que cuenta una luz ──────────────────────────────── */
.wlc-panel{
  margin-top:0.9rem; padding:0.9rem 1rem;
  border-left:2px solid var(--wlc-oro-h);
  background:rgba(255,255,255,0.022);
  text-align:left;
}
.wlc-p-n{
  font-family:Cinzel,serif; font-size:0.74rem; letter-spacing:0.1em;
  color:var(--wlc-oro-c);
}
.wlc-p-t{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.1rem; font-style:italic; line-height:1.5; margin:0.4rem 0;
  color:var(--wlc-marfil);
}
.wlc-p-quieta{ color:var(--wlc-tenue); }
.wlc-p-f{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:0.82rem; color:#8fa0af; line-height:1.5;
}
.wlc-p-vacio{
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
  color:var(--wlc-tenue); margin:0;
}

.wlc-btn{
  display:inline-block; margin:0 auto;
  font-family:Cinzel,serif; font-size:0.62rem; letter-spacing:0.28em;
  text-transform:uppercase; color:var(--wlc-oro-c);
  background:none; border:1px solid rgba(185,149,90,0.55);
  padding:0.65rem 1.3rem; cursor:pointer;
  transition:background 0.3s ease, letter-spacing 0.3s ease;
}
.wlc-btn:hover{ background:rgba(185,149,90,0.12); letter-spacing:0.31em; }
.wlc-lienzo + .wlc-btn{ display:block; margin:0.9rem auto 0; }

.wlc-pie,
.wlc-cargando{
  font-family:Cinzel,serif; font-size:0.55rem; letter-spacing:0.24em;
  text-transform:uppercase; color:rgba(185,149,90,0.5);
  text-align:center; margin:0.9rem 0 0;
}
.wlc-vacio{
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:300;
  font-size:clamp(1.05rem,3vw,1.35rem); line-height:1.55;
  color:var(--wlc-marfil); text-align:center; margin:0; padding:2.6rem 1rem;
}

/* Aquí se escondía todo en móvil, y con razón: la madriguera deshacía la
   constelación en una lista vertical y esta capa, que se apoya en las
   posiciones de las estrellas, no tenía dónde apoyarse.

   Desde el 16/09/2026 la constelación mantiene su forma también en móvil
   (se van las frases, no las estrellas), así que el cielo profundo ya cabe.
   Lo único que hace falta es que respire un poco más: en una pantalla
   pequeña, el mismo trazo se ve más fino y las luces más juntas. */
@media (max-width: 700px){
  .wlc-eje{ stroke-width:0.6; opacity:0.3; }
  .wlc-nucleo{ filter:drop-shadow(0 0 3px rgba(216,189,134,0.95)); }
  .wlc-mando{ margin-top:-0.6rem; }
  .wlc-panel{ padding:0.8rem 0.9rem; }
  .wlc-p-t{ font-size:1rem; }
}

@media (prefers-reduced-motion: reduce){
  .wlc-nebulosa,
  .wlc-nucleo,
  .cl-viento.wlc-sumergido .wlc-hondo{ animation:none; }
  .wlc-nucleo{ opacity:1; }
  .wlc-sumergido .wlc-eje{ animation:none; stroke-dashoffset:0; }
  .wlc-capa, .wlc-superficie, .wlc-hondo{ transition:none; }
}