/* La página de un universo (un lenguaje). Cada uno se ve distinto: su color
   (--acento), sus símbolos flotando de fondo y su consola, que escribe un
   fragmento típico del lenguaje y muestra lo que produce. Debajo, tres bloques
   (para qué sirve, su guardián y el examen de nivelación) y la ruta de temas
   como tarjetas. */

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

/* ---------- Encabezado: identidad y consola ---------- */
.u-heroe {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--espacio-5);
  overflow: hidden;
  padding: clamp(1.1rem, 3vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--acento) 38%, transparent);
  border-radius: 28px;
  background:
    radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--acento) 22%, transparent), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, var(--galaxia, var(--acento)) 18%, transparent), transparent 70%),
    var(--superficie);
}
.u-heroe__glifos {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.u-heroe__glifos i {
  position: absolute;
  top: var(--y);
  left: var(--x);
  color: var(--acento);
  font: 700 clamp(0.9rem, 1.6vw, 1.35rem) / 1 var(--fuente-codigo);
  font-style: normal;
  white-space: nowrap;
  opacity: 0.13;
  animation: u-glifo 9s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.8s);
}
.u-heroe__glifos i:nth-child(3n) {
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  opacity: 0.09;
  animation-duration: 12s;
}
.u-heroe__identidad {
  display: grid;
  align-content: start;
  gap: var(--espacio-3);
  min-width: 0;
}
.u-heroe__fila {
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
  min-width: 0;
}
.u-heroe__portal {
  flex: none;
}
.u-heroe__titulos {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}
.u-heroe__galaxia {
  margin: 0;
  color: var(--acento);
  font: 700 0.78rem / 1.2 var(--fuente-hud);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Nombres largos («Ciberseguridad», «Matemáticas») se achican con la pantalla. */
.u-heroe__nombre {
  margin: 0;
  font: 400 clamp(2.6rem, 1.8rem + 4.2vw, 5.2rem) / 0.9 var(--fuente-comic);
  letter-spacing: 0.02em;
  text-shadow: 3px 3px 0 color-mix(in srgb, var(--acento) 45%, transparent);
  overflow-wrap: anywhere;
}
.u-heroe__frase {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
  font-weight: 600;
}
.u-heroe__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.u-heroe__datos li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgb(var(--linea-rgb) / 0.18);
  border-radius: var(--radio-pildora);
  background: rgb(var(--hondo-rgb) / 0.35);
  color: var(--papel-suave);
  font-size: var(--t-1);
  font-weight: 600;
}
.u-heroe__datos strong {
  color: var(--papel);
}
.u-heroe__datos .icono {
  width: 1rem;
  height: 1rem;
  color: var(--acento);
}
.u-heroe__datos .insignia {
  margin-block: -0.35rem;
}
.u-heroe__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
  margin-top: var(--espacio-2);
}
.u-heroe__jugar > span {
  display: grid;
  text-align: left;
  line-height: 1.2;
}
.u-heroe__jugar small {
  font-size: var(--t-0);
  font-weight: 600;
  opacity: 0.85;
}
.u-heroe__bloqueo,
.u-heroe__listo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
  margin: var(--espacio-2) 0 0;
}
.u-heroe__bloqueo p {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
}

/* La consola: una ventana de código que se escribe sola. */
.u-consola {
  display: grid;
  align-self: center;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--acento) 35%, rgb(var(--linea-rgb) / 0.2));
  border-radius: 18px;
  background: #0b0d1f;
  box-shadow: 0 24px 50px -28px rgb(0 0 0 / 0.9), 0 0 0 6px color-mix(in srgb, var(--acento) 8%, transparent);
  color: #e7e9ff;
}
.u-consola__barra {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  background: rgb(255 255 255 / 0.04);
}
.u-consola__barra i {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: #ff5f57;
}
.u-consola__barra i:nth-child(2) {
  background: #febc2e;
}
.u-consola__barra i:nth-child(3) {
  background: #28c840;
}
.u-consola__barra span {
  margin-left: 0.4rem;
  color: rgb(231 233 255 / 0.6);
  font: 600 0.78rem / 1 var(--fuente-codigo);
}
.u-consola__codigo {
  min-height: 7.5rem;
  margin: 0;
  padding: 0.9rem 1rem 1rem;
  overflow-x: auto;
  font: 500 clamp(0.78rem, 0.72rem + 0.25vw, 0.92rem) / 1.65 var(--fuente-codigo);
  white-space: pre;
  tab-size: 2;
}
.u-tok--cadena { color: #a5e3a1; }
.u-tok--numero { color: #ffcb6b; }
.u-tok--comentario { color: #7f87b5; font-style: italic; }
.u-tok--etiqueta { color: #7fd4ff; }
.u-tok--clave { color: var(--acento); font-weight: 700; }
.u-consola__cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--acento);
  animation: u-cursor 1s steps(1) infinite;
}
.u-consola--lista .u-consola__cursor {
  opacity: 0.6;
}
.u-consola__vista,
.u-consola__terminal {
  display: grid;
  gap: 0.35rem;
  padding: 0.8rem 1rem 1rem;
  border-top: 1px dashed rgb(255 255 255 / 0.14);
  animation: u-salida 0.4s ease-out;
}
.u-consola__vista[hidden],
.u-consola__terminal[hidden] {
  display: none;
}
.u-consola__rotulo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgb(231 233 255 / 0.55);
  font: 700 0.7rem / 1 var(--fuente-hud);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.u-consola__rotulo .icono {
  width: 0.85rem;
  height: 0.85rem;
}
.u-consola__linea {
  font: 500 0.88rem / 1.5 var(--fuente-codigo);
  color: #e7e9ff;
  white-space: pre-wrap;
}
.u-consola__pagina {
  display: grid;
  justify-items: start;
  gap: 0.4rem;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  background: #fbfbff;
  color: #1c1d2b;
  font-family: Georgia, "Times New Roman", serif;
}
.u-consola__pagina > * {
  margin: 0;
}
.u-consola__h1 {
  font-size: 1.5rem;
  font-weight: 700;
}
.u-consola__h2 {
  font-size: 1.25rem;
  font-weight: 700;
}
.u-consola__a {
  color: #1a0dab;
  text-decoration: underline;
}

/* ---------- Información: para qué sirve, el guardián y el examen ---------- */
.u-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--espacio-4);
}
.u-info__bloque {
  display: grid;
  align-content: start;
  gap: var(--espacio-3);
  padding: var(--espacio-4) var(--espacio-5);
  border: 1px solid var(--linea-tenue);
  border-radius: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--superficie-alta) 70%, transparent), color-mix(in srgb, var(--superficie) 90%, transparent));
}
.u-info__bloque h2 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font: 700 0.85rem / 1.2 var(--fuente-hud);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.u-info__bloque h2 .icono {
  color: var(--acento);
}
.u-info__bloque p {
  margin: 0;
}
.u-info__usos {
  display: grid;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.u-info__usos li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 600;
}
.u-info__usos li::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--acento);
  rotate: 45deg;
}
.u-info__quien {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}
.u-info__quien > span {
  display: grid;
}
.u-info__examen {
  border-color: color-mix(in srgb, var(--acento) 45%, transparent);
  background:
    radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--acento) 16%, transparent), transparent 70%),
    var(--superficie);
}
.u-info__examen .boton {
  justify-self: start;
}

/* ---------- La ruta: un tema por tarjeta ---------- */
.u-ruta {
  display: grid;
  gap: var(--espacio-4);
}
.u-ruta__cabecera h2 {
  margin: 0;
  font: 400 clamp(1.7rem, 3vw, 2.3rem) / 1 var(--fuente-comic);
  letter-spacing: 0.02em;
}
.u-ruta__cabecera .nota {
  margin: 0.3rem 0 0;
}
.u-ruta__rango,
.u-ruta__futuro {
  display: grid;
  gap: var(--espacio-3);
}
.u-ruta__rotulo {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  font: 700 0.85rem / 1 var(--fuente-hud);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.u-ruta__rotulo small {
  color: var(--papel-suave);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}
.u-estaciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--espacio-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: estacion;
}
.estacion {
  --estado: rgb(var(--linea-rgb) / 0.55);
  position: relative;
  animation: u-estacion 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(min(var(--i), 10) * 25ms);
}
.estacion--progreso { --estado: var(--acento); }
.estacion--rara { --estado: var(--luz); }
.estacion--legendaria { --estado: var(--oro); }
.estacion--glitch { --estado: var(--error); }
.estacion__boton {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas: "numero icono texto" "avance avance avance";
  align-items: center;
  gap: 0.6rem 0.75rem;
  width: 100%;
  height: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid rgb(var(--linea-rgb) / 0.18);
  border-left: 4px solid var(--estado);
  border-radius: 16px;
  background: rgb(var(--hondo-rgb) / 0.35);
  color: var(--papel);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background-color 0.15s;
}
.estacion__boton:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--estado) 60%, transparent);
  background: color-mix(in srgb, var(--estado) 8%, rgb(var(--hondo-rgb) / 0.35));
}
.estacion__boton:active {
  transform: translateY(0) scale(0.99);
}
.estacion__numero {
  grid-area: numero;
  color: var(--papel-suave);
  font: 700 0.85rem / 1 var(--fuente-hud);
}
.estacion__icono {
  grid-area: icono;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--estado) 18%, transparent);
  color: var(--estado);
}
.estacion__icono .icono {
  width: 1.15rem;
  height: 1.15rem;
}
.estacion__texto {
  grid-area: texto;
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.estacion__texto strong {
  overflow-wrap: anywhere;
}
.estacion__estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.5rem;
  color: var(--papel-suave);
  font-size: 0.8rem;
  font-weight: 600;
}
.estacion__estado em {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--exito);
  font-style: normal;
}
.estacion__estado .icono {
  width: 0.85rem;
  height: 0.85rem;
}
.estacion__avance {
  grid-area: avance;
  display: flex;
  gap: 4px;
}
.estacion__avance i {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: rgb(var(--linea-rgb) / 0.2);
}
.estacion__avance i.hecha {
  background: var(--estado);
}
.estacion--bloqueada .estacion__boton {
  opacity: 0.62;
}
.estacion--actual .estacion__boton {
  border-color: color-mix(in srgb, var(--acento) 70%, transparent);
  box-shadow: 0 0 0 1px var(--acento), 0 10px 26px -14px var(--acento);
}
.estacion__aqui {
  position: absolute;
  top: -0.55rem;
  right: 0.8rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radio-pildora);
  background: var(--acento);
  color: var(--tinta);
  font: 700 0.7rem / 1.2 var(--fuente-hud);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: u-aqui 2s ease-in-out infinite;
}

/* El camino a Maestro: los rangos que vienen, cerrados. */
.u-puertas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.u-puerta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--espacio-3);
  padding: 0.7rem 0.9rem;
  border: 1px dashed rgb(var(--linea-rgb) / 0.28);
  border-radius: 14px;
  color: var(--papel-suave);
}
.u-puerta > span:last-child {
  display: grid;
  gap: 0.15rem;
  font-size: 0.85rem;
}
.u-puerta strong {
  color: var(--papel);
}
.u-puerta__icono .icono {
  width: 1rem;
  height: 1rem;
}

/* ---------- Computadora: identidad a la izquierda, consola a la derecha ---------- */
@media (min-width: 900px) {
  .u-heroe {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    min-height: 23rem;
  }
}

/* ---------- Celular ---------- */
@media (max-width: 720px) {
  .u-heroe {
    border-radius: 22px;
  }
  .u-heroe__fila {
    gap: var(--espacio-3);
  }
  .u-heroe__portal {
    --ancho: 4.2rem;
  }
  .u-consola__codigo {
    min-height: 0;
    font-size: 0.74rem;
  }
  .u-estaciones {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espacio-2);
  }
  .u-info {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espacio-3);
  }
  .u-info__bloque {
    padding: var(--espacio-4);
  }
}

@keyframes u-glifo {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-14px) rotate(4deg); }
}
@keyframes u-cursor {
  50% { opacity: 0; }
}
@keyframes u-salida {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes u-estacion {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes u-aqui {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}

@media (prefers-reduced-motion: reduce) {
  .u-heroe__glifos i,
  .u-consola__cursor,
  .estacion,
  .estacion__aqui,
  .u-consola__vista,
  .u-consola__terminal {
    animation: none;
  }
}

/* «El camino a Maestro», plegado. */
.u-ruta__plegable > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  color: var(--luz);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.u-ruta__plegable > summary::-webkit-details-marker {
  display: none;
}
.u-ruta__flecha {
  transition: rotate 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.u-ruta__plegable[open] .u-ruta__flecha {
  rotate: 180deg;
}
.u-ruta__plegable > .nota {
  margin-bottom: var(--espacio-3);
}

/* La base de Lógica y los universos opcionales para tu rumbo. */
.u-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
  max-width: 40rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgb(var(--brillo-rgb) / 0.45);
  border-radius: 14px;
  background: rgb(var(--brillo-rgb) / 0.12);
}
.u-base p {
  flex: 1 1 16rem;
  margin: 0;
  font-size: 0.92rem;
}
.u-base__icono {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  color: rgb(var(--brillo-rgb));
}
.u-base--lista {
  border-color: color-mix(in srgb, var(--exito) 55%, transparent);
  background: color-mix(in srgb, var(--exito) 12%, transparent);
}
.u-base--lista .u-base__icono {
  color: var(--exito);
}
.u-heroe__opcional {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--papel-suave);
  font-size: 0.88rem;
}
.u-heroe__opcional .icono {
  width: 1rem;
  height: 1rem;
}