/* Entrar a un multiverso (una galaxia): su mundo en una escena panorámica que
   se mueve con el puntero y tiene sus propias partículas; su guardián; y la
   ruta de portales (un universo por lenguaje) con un panel que cuenta qué hay
   en el portal elegido. Todo con el color de la galaxia (--galaxia). */

.galaxia {
  display: grid;
  gap: var(--espacio-5);
}

/* ---------- La escena ---------- */
.galaxia-escena--quieta,
.galaxia-escena--quieta * {
  animation-play-state: paused !important;
}
.galaxia-escena {
  --px: 0;
  --py: 0;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 22rem;
  overflow: hidden;
  border-radius: 28px;
  color: #fff;
  box-shadow: 0 26px 50px -26px rgb(0 0 0 / 0.75), 0 0 0 1px color-mix(in srgb, var(--galaxia) 40%, transparent);
  container-type: inline-size;
}
.escena-galaxia {
  position: absolute;
  inset: -4%;
  z-index: -3;
  width: 108%;
  height: 108%;
}
.escena-galaxia .capa {
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.escena-galaxia .capa--lejos { transform: translate(calc(var(--px) * -5px), calc(var(--py) * -3px)); }
.escena-galaxia .capa--media { transform: translate(calc(var(--px) * -11px), calc(var(--py) * -6px)); }
.escena-galaxia .capa--cerca { transform: translate(calc(var(--px) * -20px), calc(var(--py) * -9px)); }
.galaxia-escena__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(4 6 22 / 0) 15%, rgb(4 6 22 / 0.5) 55%, rgb(4 6 22 / 0.9));
}
.galaxia-escena__contenido {
  position: relative;
  display: grid;
  gap: 0.45rem;
  max-width: 48rem;
  padding: 1.4rem 1.5rem 1.5rem;
}
.galaxia-escena .migas,
.galaxia-escena .migas a {
  color: rgb(255 255 255 / 0.8);
}
.galaxia-escena__codigo {
  margin: 0;
  color: color-mix(in srgb, var(--galaxia) 55%, #fff);
  font: 800 var(--t-0) / 1.2 var(--fuente-texto);
  letter-spacing: 0.02em;
}
.galaxia-escena__nombre {
  margin: 0;
  font: 800 clamp(2.4rem, 1.5rem + 3.4vw, 4.2rem) / 1 var(--fuente-rotulo);
  letter-spacing: -0.03em;
  text-shadow: 0 6px 30px rgb(0 0 0 / 0.55);
}
.galaxia-escena__descripcion {
  max-width: 62ch;
  margin: 0;
  color: rgb(255 255 255 / 0.88);
  line-height: 1.5;
}
.galaxia-escena__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.galaxia-escena__datos li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--radio-pildora);
  background: rgb(8 10 30 / 0.55);
  font: 600 var(--t-0) / 1.2 var(--fuente-texto);
}
.galaxia-escena__datos strong {
  font: 800 var(--t-1) / 1 var(--fuente-rotulo);
}
.galaxia-escena__datos .icono {
  color: color-mix(in srgb, var(--galaxia) 60%, #fff);
}
.galaxia-escena__dato--anomalia {
  border-color: color-mix(in srgb, var(--error) 70%, transparent) !important;
}
.galaxia-escena__dato--anomalia .icono {
  color: var(--error) !important;
}

/* Detalles animados dentro de la escena. */
.gx-titila { animation: gx-titila 2.4s ease-in-out infinite; }
.gx-titila--lenta { animation-duration: 3.4s; }
.gx-flota { animation: gx-flota 5s ease-in-out infinite; }
.gx-flota--lenta { animation-duration: 7s; }
.gx-flota--rapida { animation-duration: 3.6s; }
.gx-vuelo { animation: gx-vuelo 11s linear infinite; }
.gx-pulso {
  stroke-dasharray: 8 260;
  animation: gx-pulso 3s linear infinite;
}
.gx-flujo {
  stroke-dasharray: 30 90;
  animation: gx-flujo 4s linear infinite;
}
.gx-humo { animation: gx-humo 6s ease-in-out infinite; }
.gx-aurora { animation: gx-aurora 10s ease-in-out infinite alternate; }
.gx-aurora--lenta { animation-duration: 14s; }
.gx-rejilla { animation: gx-rejilla 1.4s linear infinite; }
.gx-nube { animation: gx-nube 16s ease-in-out infinite alternate; }
.gx-nube--lenta { animation-duration: 24s; }
.gx-rayo { animation: gx-rayo 4s steps(1) infinite; }
.gx-escudo { animation: gx-escudo 3s ease-in-out infinite; }

/* Partículas de cada galaxia. */
.galaxia-escena__particulas {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.galaxia-escena__particulas i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: block;
  animation-delay: var(--d);
  animation-duration: var(--t);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.galaxia-escena__particulas i:nth-child(1) { --x: 6%; --y: 18%; --d: -1s; --t: 7s; }
.galaxia-escena__particulas i:nth-child(2) { --x: 16%; --y: 62%; --d: -4s; --t: 9s; }
.galaxia-escena__particulas i:nth-child(3) { --x: 27%; --y: 34%; --d: -2s; --t: 8s; }
.galaxia-escena__particulas i:nth-child(4) { --x: 38%; --y: 76%; --d: -6s; --t: 10s; }
.galaxia-escena__particulas i:nth-child(5) { --x: 49%; --y: 12%; --d: -3s; --t: 7.5s; }
.galaxia-escena__particulas i:nth-child(6) { --x: 58%; --y: 48%; --d: -5s; --t: 9.5s; }
.galaxia-escena__particulas i:nth-child(7) { --x: 68%; --y: 70%; --d: -0.5s; --t: 8.5s; }
.galaxia-escena__particulas i:nth-child(8) { --x: 77%; --y: 26%; --d: -7s; --t: 11s; }
.galaxia-escena__particulas i:nth-child(9) { --x: 86%; --y: 58%; --d: -2.5s; --t: 7s; }
.galaxia-escena__particulas i:nth-child(10) { --x: 94%; --y: 40%; --d: -5.5s; --t: 9s; }
/* Paquetes de datos que cruzan. */
[data-tipo="paquete"] i {
  left: -3%;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: #9af3ff;
  box-shadow: 0 0 8px #3ce0ff;
  animation-name: gx-cruza;
}
/* Cristales y chispas que suben. */
[data-tipo="cristal"] i,
[data-tipo="brasa"] i {
  top: 104%;
  width: 7px;
  height: 7px;
  animation-name: gx-sube;
}
[data-tipo="cristal"] i {
  background: #e6d9ff;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
[data-tipo="brasa"] i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffb347;
  box-shadow: 0 0 8px #ff8a3d;
}
/* Pulsos, chispas y luciérnagas que titilan y vagan. */
[data-tipo="pulso"] i,
[data-tipo="chispa"] i,
[data-tipo="luciernaga"] i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  animation-name: gx-vaga;
  animation-timing-function: ease-in-out;
}
[data-tipo="pulso"] i { background: #7fffe8; box-shadow: 0 0 10px #7fffe8; }
[data-tipo="chispa"] i {
  width: 9px;
  height: 9px;
  border-radius: 0;
  background: #ffd1f0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
[data-tipo="luciernaga"] i { background: #d6ff7a; box-shadow: 0 0 10px 2px rgb(182 255 90 / 0.7); }
/* Nieve, píxeles y lluvia que caen. */
[data-tipo="copo"] i,
[data-tipo="pixel"] i,
[data-tipo="lluvia"] i {
  top: -6%;
  animation-name: gx-cae;
}
[data-tipo="copo"] i { width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: 0.85; }
[data-tipo="pixel"] i { width: 6px; height: 6px; background: #ffd25a; animation-duration: calc(var(--t) * 1.3); }
[data-tipo="lluvia"] i {
  width: 1.5px;
  height: 18px;
  background: linear-gradient(180deg, transparent, rgb(255 208 214 / 0.7));
  animation-name: gx-lluvia;
  animation-duration: calc(var(--t) / 7);
}

/* ---------- El guardián ---------- */
.galaxia-guardian {
  margin: 0;
}

/* ---------- La ruta de portales ---------- */
.galaxia-mapa {
  display: grid;
  gap: var(--espacio-4);
  padding: 1.2rem;
  border: 1px solid var(--linea-tenue);
  border-radius: 26px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--superficie-alta) 85%, transparent), color-mix(in srgb, var(--superficie) 85%, transparent));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}
.galaxia-mapa__cabecera {
  display: grid;
  gap: 0.2rem;
}
.galaxia-mapa__titulo {
  margin: 0;
  font: 800 var(--t-4) / 1.2 var(--fuente-rotulo);
}
.galaxia-mapa__cuerpo {
  display: grid;
  gap: var(--espacio-4);
}
.galaxia-ruta {
  position: relative;
  padding: 0.8rem 0;
}
.galaxia-ruta__linea {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.galaxia-ruta__fondo {
  fill: none;
  stroke: rgb(var(--linea-rgb) / 0.3);
  stroke-width: 3;
  stroke-dasharray: 2 9;
  stroke-linecap: round;
}
.galaxia-ruta__flujo {
  fill: none;
  stroke: var(--galaxia);
  stroke-width: 3;
  stroke-dasharray: 20 200;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px var(--galaxia));
  animation: ruta-flujo 3.2s linear infinite;
}
.galaxia-ruta__nodos {
  position: relative;
  display: grid;
  gap: 1.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* En el celular, los portales van en dos columnas, la derecha un poco más
   abajo: la ruta baja en zigzag sin ocupar tanto. */
.galaxia-ruta__nodos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 0.5rem;
  padding-bottom: 3.4rem;
}
.galaxia-ruta__nodos > li {
  justify-self: center;
}
.galaxia-ruta__nodos > li:nth-child(even) {
  translate: 0 3.4rem;
}
.galaxia-ruta__nodos--1 {
  grid-template-columns: 1fr;
  padding-bottom: 0;
}

/* Un portal. */
.nodo {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  text-align: center;
  animation: nodo-entra 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(min(var(--i), 8) * 40ms);
}
.nodo__portal {
  position: relative;
  display: grid;
  place-items: center;
  width: 6rem;
  height: 6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: scale 0.2s;
}
.nodo__portal:hover {
  scale: 1.07;
}
.nodo__portal[aria-pressed="true"] {
  scale: 1.12;
}
.nodo__portal:focus-visible {
  outline: 3px solid var(--luz);
  outline-offset: 4px;
}
.nodo__anillo,
.nodo__orbita,
.nodo__nucleo {
  position: absolute;
  border-radius: 50%;
}
.nodo__anillo {
  inset: 0;
  background: conic-gradient(var(--acento) 0 var(--avance), rgb(var(--linea-rgb) / 0.2) var(--avance) 100%);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%);
  mask: radial-gradient(circle, transparent 62%, #000 64%);
}
.nodo__orbita {
  inset: 7px;
  border: 2px dashed color-mix(in srgb, var(--acento) 65%, transparent);
  animation: sala-gira 14s linear infinite;
}
.nodo__nucleo {
  inset: 13px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 36% 28%, color-mix(in srgb, var(--acento) 30%, #fff), var(--acento) 45%, color-mix(in srgb, var(--acento) 45%, #000));
  box-shadow: inset 0 -6px 12px rgb(0 0 0 / 0.35), 0 0 22px color-mix(in srgb, var(--acento) 55%, transparent);
  transition: box-shadow 0.2s;
}
.nodo__nucleo .logo,
.nodo__nucleo .icono {
  width: 58%;
  height: 58%;
  padding: 7px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  color: #1a1745;
}
.nodo__portal[aria-pressed="true"] .nodo__nucleo {
  box-shadow: inset 0 -6px 12px rgb(0 0 0 / 0.35), 0 0 0 3px rgb(255 255 255 / 0.85), 0 0 30px var(--acento);
}
.nodo--actual .nodo__portal::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid var(--luz);
  border-radius: 50%;
  animation: nodo-pulso 2s ease-out infinite;
}
.nodo--completo .nodo__anillo {
  background: conic-gradient(#ffc857, #ffe6a8, #ffc857);
}
.nodo--cerrado .nodo__nucleo {
  filter: grayscale(0.85) brightness(0.6);
}
.nodo--cerrado .nodo__orbita {
  opacity: 0.4;
  animation: none;
}
.nodo__candado {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 2px solid var(--superficie);
  border-radius: 50%;
  background: var(--superficie-alta);
  color: var(--papel);
}
.nodo__candado .icono {
  width: 0.95rem;
  height: 0.95rem;
}
.nodo__aqui {
  position: absolute;
  top: -12px;
  left: 50%;
  translate: -50% 0;
  padding: 2px 9px;
  border-radius: var(--radio-pildora);
  background: linear-gradient(180deg, var(--luz-intensa), var(--luz));
  color: var(--texto-sobre-luz);
  font: 800 0.75rem / 1.3 var(--fuente-texto);
  box-shadow: 0 4px 12px -2px rgb(var(--luz-rgb) / 0.8);
  animation: nodo-aqui 1.6s ease-in-out infinite;
}
.nodo__nombre {
  font: 800 0.92rem / 1.2 var(--fuente-rotulo);
}
.nodo__dato {
  color: var(--linea);
  font: 600 0.75rem / 1.2 var(--fuente-texto);
}

/* ---------- El panel del universo elegido ---------- */
.galaxia-detalle {
  align-self: stretch;
  padding: 1.15rem;
  border: 1px solid color-mix(in srgb, var(--galaxia) 40%, transparent);
  border-radius: 22px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--galaxia) 12%, transparent), color-mix(in srgb, var(--tinta-profunda) 75%, transparent) 60%);
}
.galaxia-detalle--entra .galaxia-detalle__cuerpo {
  animation: detalle-entra 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.galaxia-detalle__cabecera {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.galaxia-detalle__logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 16px;
  background: rgb(255 255 255 / 0.94);
  color: #1a1745;
  box-shadow: 0 0 24px -6px var(--acento);
}
.galaxia-detalle__logo .logo,
.galaxia-detalle__logo .icono {
  width: 62%;
  height: 62%;
}
.galaxia-detalle__nombre {
  margin: 0;
  font: 800 var(--t-4) / 1.1 var(--fuente-rotulo);
}
.galaxia-detalle__estado {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 2px 9px;
  border-radius: var(--radio-pildora);
  background: color-mix(in srgb, var(--acento) 16%, transparent);
  color: color-mix(in srgb, var(--acento) 70%, var(--papel));
  font: 800 0.75rem / 1.3 var(--fuente-texto);
}
.galaxia-detalle__estado--cerrado {
  background: rgb(var(--linea-rgb) / 0.16);
  color: var(--linea);
}
.galaxia-detalle__estado--completo {
  background: color-mix(in srgb, var(--oro) 18%, transparent);
  color: var(--oro);
}
.galaxia-detalle__frase {
  margin: 0.75rem 0 0;
  color: var(--papel-suave);
  line-height: 1.5;
}
.galaxia-detalle__usos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.65rem 0 0;
  padding: 0;
  list-style: none;
}
.galaxia-detalle__usos li {
  padding: 0.25rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--acento) 45%, transparent);
  border-radius: var(--radio-pildora);
  background: color-mix(in srgb, var(--acento) 12%, transparent);
  font: 700 0.75rem / 1.3 var(--fuente-texto);
}
.galaxia-detalle__progreso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
  font-size: var(--t-0);
}
.galaxia-detalle__barra {
  height: 8px;
  overflow: hidden;
  border-radius: var(--radio-pildora);
  background: rgb(var(--linea-rgb) / 0.2);
}
.galaxia-detalle__barra span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--acento), var(--luz));
}
.galaxia-detalle__cerrado {
  margin: 0.8rem 0 0;
}
.galaxia-detalle__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

/* ---------- Otras galaxias ---------- */
.galaxia-otras {
  display: grid;
  gap: var(--espacio-2);
}
.galaxia-otras__titulo {
  margin: 0;
  font: 800 var(--t-2) / 1.2 var(--fuente-rotulo);
}
.galaxia-otras ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.galaxia-otras__enlace {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.6rem;
  padding: 0.35rem 0.95rem;
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-pildora);
  color: var(--papel);
  font: 700 var(--t-0) / 1.2 var(--fuente-texto);
  text-decoration: none;
  transition: border-color 0.15s, translate 0.15s;
}
.galaxia-otras__enlace:hover {
  translate: 0 -2px;
  border-color: var(--galaxia);
}
.galaxia-otras__enlace i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--galaxia);
  box-shadow: 0 0 8px var(--galaxia);
}

/* ---------- La escena de la galaxia, detrás de cada universo ---------- */
.universo__escena {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.universo__escena .escena-galaxia {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}
.universo__escena::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tinta) 55%, transparent), var(--tinta) 92%);
}

/* ---------- Computadora ---------- */
@media (min-width: 900px) {
  .galaxia-escena {
    min-height: 26rem;
  }
  .galaxia-escena__contenido {
    padding: 2rem 2.2rem 2.2rem;
  }
  .galaxia-mapa {
    padding: 1.6rem;
  }
  .galaxia-mapa__cuerpo {
    grid-template-columns: minmax(0, 1.6fr) minmax(19rem, 1fr);
    align-items: center;
  }
  .galaxia-ruta {
    padding: 2.2rem 0;
  }
  .galaxia-ruta__nodos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 1.6rem 0.5rem;
    min-height: 15rem;
  }
  .galaxia-ruta__nodos {
    padding-bottom: 0;
  }
  .galaxia-ruta__nodos > li:nth-child(odd) {
    translate: 0 -2rem;
  }
  .galaxia-ruta__nodos > li:nth-child(even) {
    translate: 0 2rem;
  }
  .galaxia-ruta__nodos--1 > li {
    translate: none !important;
  }
  .nodo__portal {
    width: 6.6rem;
    height: 6.6rem;
  }
}

/* ---------- Celular ---------- */
@media (max-width: 720px) {
  .galaxia-escena {
    min-height: 19rem;
    border-radius: 24px;
  }
  .galaxia-escena__contenido {
    padding: 1.1rem 1.1rem 1.2rem;
  }
  .galaxia-escena__descripcion {
    font-size: var(--t-1);
  }
  .galaxia-mapa {
    padding: 1rem;
  }
}

@keyframes gx-titila {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@keyframes gx-flota {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes gx-vuelo {
  from { transform: translateX(-60px); }
  to { transform: translateX(560px); }
}
@keyframes gx-pulso {
  to { stroke-dashoffset: -268; }
}
@keyframes gx-flujo {
  to { stroke-dashoffset: -240; }
}
@keyframes gx-humo {
  0% { transform: translateY(0); opacity: 0.7; }
  100% { transform: translateY(-20px); opacity: 0; }
}
@keyframes gx-aurora {
  from { transform: translateX(-14px); }
  to { transform: translateX(14px); }
}
@keyframes gx-rejilla {
  from { transform: translateY(0); }
  to { transform: translateY(8px); }
}
@keyframes gx-nube {
  from { transform: translateX(-20px); }
  to { transform: translateX(30px); }
}
@keyframes gx-rayo {
  0%, 88% { opacity: 0; }
  89%, 92% { opacity: 1; }
  93%, 95% { opacity: 0; }
  96%, 97% { opacity: 1; }
  98%, 100% { opacity: 0; }
}
@keyframes gx-escudo {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}
@keyframes gx-cruza {
  from { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  to { transform: translateX(105cqw); opacity: 0.6; }
}
@keyframes gx-sube {
  from { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  to { transform: translateY(-460px) rotate(180deg); opacity: 0; }
}
@keyframes gx-cae {
  from { transform: translateY(0); }
  to { transform: translateY(480px); }
}
@keyframes gx-lluvia {
  from { transform: translate(0, 0) rotate(14deg); }
  to { transform: translate(-110px, 480px) rotate(14deg); }
}
@keyframes gx-vaga {
  0%, 100% { transform: translate(0, 0); opacity: 0.3; }
  25% { transform: translate(14px, -10px); opacity: 1; }
  50% { transform: translate(-8px, -22px); opacity: 0.5; }
  75% { transform: translate(6px, 8px); opacity: 0.9; }
}
@keyframes ruta-flujo {
  to { stroke-dashoffset: -220; }
}
@keyframes nodo-entra {
  from { opacity: 0; scale: 0.6; }
  to { opacity: 1; scale: 1; }
}
@keyframes nodo-pulso {
  from { opacity: 0.9; scale: 1; }
  to { opacity: 0; scale: 1.35; }
}
@keyframes nodo-aqui {
  0%, 100% { translate: -50% 0; }
  50% { translate: -50% -4px; }
}
@keyframes detalle-entra {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .galaxia *,
  .galaxia *::before,
  .galaxia *::after,
  .universo__escena * {
    animation: none !important;
    transition: none !important;
  }
  .galaxia-escena__particulas {
    display: none;
  }
}

/* ---------- Celular: todo a la vista sin bajar tanto ----------
   Primero la galaxia (más compacta), enseguida sus universos en una fila que
   se desliza de lado y, justo debajo, el panel del elegido: tocas un portal y
   lo ves sin bajar. El guardián y las otras galaxias van después. */
@media (max-width: 720px) {
  .galaxia {
    gap: var(--espacio-4);
  }
  .galaxia-escena {
    min-height: 0;
  }
  .galaxia-escena__contenido {
    gap: 0.45rem;
    padding-top: 1.8rem;
  }
  .galaxia-escena__nombre {
    font-size: clamp(2.2rem, 11vw, 3rem);
  }
  .galaxia-escena__descripcion {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .galaxia-escena__datos {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .galaxia-escena__datos::-webkit-scrollbar {
    display: none;
  }
  .galaxia-escena__datos li {
    flex: none;
  }
  .galaxia-mapa {
    order: 2;
  }
  .galaxia-guardian {
    order: 3;
  }
  .galaxia-otras {
    order: 4;
  }
  .galaxia-mapa__cabecera .nota {
    font-size: var(--t-0);
  }
  .galaxia-ruta {
    padding: 0;
  }
  .galaxia-ruta__linea {
    display: none;
  }
  /* Los portales, en fila: una línea punteada los une de punta a punta. */
  .galaxia-ruta__nodos,
  .galaxia-ruta__nodos--1 {
    display: flex;
    gap: 0.35rem;
    margin-inline: -0.4rem;
    padding: 1.15rem 0.6rem 0.4rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.6rem;
    scrollbar-width: none;
    background:
      repeating-linear-gradient(90deg, rgb(var(--linea-rgb) / 0.35) 0 4px, transparent 4px 12px)
      0 calc(1.15rem + 2.3rem) / 100% 2px no-repeat local;
  }
  .galaxia-ruta__nodos::-webkit-scrollbar {
    display: none;
  }
  .galaxia-ruta__nodos > li,
  .galaxia-ruta__nodos > li:nth-child(even),
  .galaxia-ruta__nodos > li:nth-child(odd) {
    flex: 0 0 5.4rem;
    translate: none;
    scroll-snap-align: center;
  }
  .nodo__portal {
    width: 4.6rem;
    height: 4.6rem;
  }
  .nodo__nombre {
    font-size: 0.8rem;
    line-height: 1.15;
  }
  .nodo__dato {
    font-size: 0.68rem;
  }
  /* La fila se desliza por dentro: no puede ensanchar la página. */
  .galaxia-mapa,
  .galaxia-ruta {
    min-width: 0;
  }
  .galaxia-mapa__cuerpo {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espacio-3);
  }
}

/* Un universo que tu rumbo no necesita. */
.galaxia-detalle__opcional {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-pildora);
  color: var(--papel-suave);
  font-size: 0.72rem;
  font-weight: 700;
}