/* La ficha de viajero: tu perfil. Una tarjeta técnica con marco animado, tus
   evidencias (insignia destacada y sellos), tu registro y tus universos. Toma
   los colores del tema y se anima «a dos cuadros», como un cómic en
   movimiento. Se acomoda a su contenedor (container queries): una columna en
   el celular, dos desde 720 px. Los sellos son fichas hexagonales de cómic con
   glitch dimensional. La pantalla «Editar ficha» está al final. */

.perfil--ficha {
  display: grid;
  gap: var(--espacio-5);
}
.perfil__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espacio-3);
}
.perfil__encabezado {
  display: grid;
  gap: 0.3rem;
}
.perfil__titulo {
  margin: 0;
  font: 800 var(--t-6) / 1 var(--fuente-rotulo);
  letter-spacing: -0.02em;
}
.perfil__subtitulo {
  margin: 0;
  color: var(--papel-suave);
  font-weight: 600;
}
.perfil__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}
/* En el celular, los dos botones en una sola fila, del mismo ancho. */
@media (max-width: 720px) {
  .perfil__barra {
    display: grid;
    align-items: start;
  }
  .perfil__acciones {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    width: 100%;
  }
  .perfil__acciones .boton-hud {
    min-width: 0;
    padding-inline: 10px;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .perfil__acciones .texto-largo {
    display: none;
  }
  .perfil__acciones .texto-corto {
    display: inline;
  }
}

/* Tu perfil: el título y, a su derecha, dos botones discretos (como los
   «Editar perfil» de las redes): se ven, pero no compiten con la credencial. */
.perfil__barra--propia {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}
.perfil__acciones--discretas {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--espacio-2);
  width: auto;
}
.perfil__accion {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.35rem;
  padding: 0 0.9rem;
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-pildora);
  background: rgb(var(--linea-rgb) / 0.06);
  color: var(--papel);
  font: 700 0.85rem / 1 var(--fuente-texto);
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.perfil__accion .icono {
  width: 1rem;
  height: 1rem;
}
.perfil__accion:hover {
  border-color: var(--luz);
  background: var(--luz-suave);
  color: var(--papel);
}
.perfil__accion:focus-visible {
  outline: 2px solid var(--luz);
  outline-offset: 2px;
}
/* En el celular, la vista pública queda solo con su ícono (y su nombre para lectores de pantalla). */
@media (max-width: 720px) {
  .perfil__barra.perfil__barra--propia {
    display: flex;
    align-items: center;
  }
  .perfil__acciones.perfil__acciones--discretas {
    display: flex;
    width: auto;
  }
  .perfil__accion {
    min-height: 2.5rem;
    padding: 0 0.8rem;
  }
  .perfil__accion-texto {
    display: none;
  }
  .perfil__accion:has(.perfil__accion-texto) {
    width: 2.5rem;
    padding: 0;
    justify-content: center;
  }
}

/* ---------- Botones técnicos (los de la ficha y su editor) ---------- */
.boton-hud {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  background: rgb(var(--luz-rgb) / 0.14);
  color: var(--luz);
  font: 700 0.8rem/1 var(--fuente-hud);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.boton-hud .icono {
  width: 1rem;
  height: 1rem;
}
.boton-hud--luz {
  background: var(--luz);
  color: var(--texto-sobre-luz);
}
.boton-hud:hover {
  animation: ficha-glitch 0.6s steps(1) infinite;
}
.boton-hud:active {
  translate: 1px 1px;
}
.boton-hud:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--papel);
}
.boton-hud:disabled,
.boton-hud[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  animation: none;
}

/* ---------- La ficha ---------- */
.viajero-zona {
  container-type: inline-size;
  width: 100%;
}
.viajero {
  --ficha-radio: 22px;
  display: grid;
  grid-template-areas: "tarjeta" "destacada" "cifras" "sellos" "universos";
  gap: 12px;
  color: var(--papel);
}
.viajero__tarjeta { grid-area: tarjeta; }
.viajero__destacada { grid-area: destacada; }
.viajero__sellos { grid-area: sellos; }
.viajero__cifras { grid-area: cifras; }
.viajero__universos { grid-area: universos; }

.viajero__tarjeta {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 12px;
  padding: 18px 18px 16px;
  overflow: hidden;
  border-radius: var(--ficha-radio);
  background:
    radial-gradient(70% 60% at 100% 0%, rgb(var(--brillo-rgb) / 0.2), transparent 70%),
    linear-gradient(160deg, var(--superficie-alta), var(--superficie));
  box-shadow: 0 22px 44px -26px rgb(0 0 0 / 0.75), 0 18px 54px -30px var(--marco-halo, rgb(var(--luz-rgb) / 0.55));
}
.viajero__tarjeta > :not(.viajero__marco, .viajero__fx, .viajero__barrido) {
  position: relative;
  z-index: 1;
}
/* El marco: un aro fino del color del marco y una luz que lo recorre. Según
   el marco, pequeños detalles en el borde y un efecto en la franja de los
   bordes. El centro, donde van tus datos, siempre queda limpio. */
.viajero__marco {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
}
.viajero__marco::before,
.viajero__aro {
  position: absolute;
  inset: 0;
  padding: var(--marco-grosor, 1.5px);
  border-radius: inherit;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.viajero__marco::before {
  content: "";
  background: var(--marco-borde, linear-gradient(135deg, rgb(var(--luz-rgb) / 0.7), rgb(var(--brillo-rgb) / 0.3) 45%, rgb(var(--luz-rgb) / 0.45)));
}
/* El filo interior: una línea de luz arriba y un resplandor suave hacia dentro. */
.viajero__marco::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), inset 0 0 30px -16px var(--marco-interior, rgb(var(--luz-rgb) / 0.6));
}
/* La luz que recorre el aro: un cono grande que gira detrás de la máscara del
   aro. Solo cambia su giro, así que no repinta la página. */
.viajero__aro {
  overflow: hidden;
  padding: var(--aro-grosor, var(--marco-grosor, 1.5px));
}
.viajero__aro::before,
.viajero__aro::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(transparent 0 66%, var(--aro-luz, var(--luz)) 96%, transparent 100%);
  animation: marco-gira var(--aro-vuelta, 10s) linear infinite;
}
.viajero__aro::after {
  display: none;
}
.viajero__marco i {
  position: absolute;
  display: none;
}
.viajero__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask: linear-gradient(90deg, #000, transparent 16%, transparent 84%, #000), linear-gradient(#000, transparent 24%, transparent 76%, #000);
  mask: linear-gradient(90deg, #000, transparent 16%, transparent 84%, #000), linear-gradient(#000, transparent 24%, transparent 76%, #000);
}
.viajero__fx i {
  position: absolute;
  display: none;
}
/* Un reflejo que cruza la tarjeta de vez en cuando (oro y holográfico). */
.viajero__barrido {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.viajero__barrido::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--barrido, none);
  translate: -100% 0;
  animation: marco-barrido var(--barrido-tiempo, 9s) ease-in-out infinite;
}

.viajero__cabecera {
  display: flex;
  align-items: center;
  gap: 8px;
}
.viajero__logo {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
}
.viajero__titulo {
  flex: 1;
  font: 700 0.95rem/1.1 var(--fuente-hud);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: ficha-glitch 4s steps(1) infinite;
}
.viajero__numero {
  overflow: hidden;
  max-width: 45%;
  color: var(--luz);
  font: 700 0.75rem/1 var(--fuente-hud);
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viajero__dimension {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -6px 0 0;
  color: var(--papel-suave);
  font: 600 0.75rem/1 var(--fuente-hud);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.viajero__dimension i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--exito);
  animation: ficha-led 1.6s steps(1) infinite;
}
.viajero__identidad {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}
.viajero__foto {
  position: relative;
  width: 104px;
  height: 104px;
  overflow: hidden;
  border: 1px solid rgb(var(--luz-rgb) / 0.5);
  border-radius: 18px;
  background: #0b0d26;
}
.viajero__foto > .avatar {
  width: 100%;
  height: 100%;
}
/* La foto de la ficha va siempre sobre fondo oscuro, como una foto de credencial. */
.avatar--ficha {
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--color-personaje) 40%, #1b1f4a), #0b0d26);
  color: #ffffff;
}
.avatar--ficha .icono {
  width: 58%;
  height: 58%;
}
.avatar--ficha .avatar__foto {
  border-radius: 0;
}
.viajero__lineas {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgb(var(--luz-rgb) / 0.14) 0 1px, transparent 1px 4px);
  pointer-events: none;
}
.viajero__quien {
  display: grid;
  justify-items: start;
  gap: 7px;
  min-width: 0;
}
.viajero__nombre {
  display: -webkit-box;
  overflow: hidden;
  font: 800 1.6rem/1.05 var(--fuente-rotulo);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.viajero__placa {
  display: inline-flex;
  padding: 4px 10px;
  border: 1px solid rgb(var(--brillo-rgb) / 0.7);
  border-radius: 8px;
  background: radial-gradient(circle, rgb(var(--brillo-rgb) / 0.55) 1.2px, transparent 1.7px) 0 0 / 6px 6px, rgb(var(--brillo-rgb) / 0.18);
  font: 700 0.75rem/1 var(--fuente-hud);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.viajero__lema {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--papel-suave);
  font: italic 600 0.9rem/1.35 var(--fuente-texto);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.viajero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.viajero__chips:not(:has(> :not([hidden]))) {
  display: none;
}
.viajero__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 8px;
  font: 700 0.75rem/1.2 var(--fuente-hud);
  letter-spacing: 0.04em;
}
.viajero__chip .icono {
  width: 0.9rem;
  height: 0.9rem;
}
.viajero__chip--equipo {
  background: var(--oro);
  color: var(--tinta);
}
.viajero__chip--puesto {
  border: 1px solid rgb(var(--luz-rgb) / 0.45);
  background: rgb(var(--luz-rgb) / 0.14);
  color: var(--luz);
}
.viajero__datos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgb(var(--linea-rgb) / 0.35);
}
.viajero__dato {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.viajero__etiqueta {
  color: var(--papel-suave);
  font: 700 0.75rem/1.2 var(--fuente-hud);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.viajero__dato b {
  overflow: hidden;
  font: 800 0.95rem/1.2 var(--fuente-rotulo);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viajero__favorito,
.viajero__ubicacion {
  display: flex;
  align-items: center;
  gap: 5px;
}
.viajero__favorito .logo,
.viajero__favorito .icono,
.viajero__ubicacion .icono {
  flex: none;
  width: 1.05em;
  height: 1.05em;
}
.viajero__ubicacion .icono {
  color: var(--luz);
}
.viajero__favorito span,
.viajero__ubicacion span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.viajero__ubicacion--oculta,
.viajero__ubicacion--oculta .icono {
  color: var(--papel-suave);
}

/* Evidencias y universos: paneles con el mismo cristal que la Central. */
.viajero__bloque {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgb(var(--linea-rgb) / 0.22);
  border-radius: var(--ficha-radio);
  background: linear-gradient(180deg, color-mix(in srgb, var(--superficie-alta) 70%, transparent), color-mix(in srgb, var(--superficie) 90%, transparent));
}
.viajero__seccion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.viajero__seccion h2 {
  margin: 0;
  font: 700 0.85rem/1 var(--fuente-hud);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.viajero__seccion span {
  color: var(--papel-suave);
  font-size: 0.75rem;
  font-weight: 600;
}
/* La destacada: lo que el viajero eligió lucir, en grande y con luz. */
.viajero__destacada {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  align-content: center;
  gap: 16px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--oro) 45%, transparent);
  background:
    radial-gradient(circle at 16% 50%, color-mix(in srgb, var(--oro) 20%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--superficie-alta) 70%, transparent), color-mix(in srgb, var(--superficie) 90%, transparent));
  color: inherit;
  text-decoration: none;
}
.viajero__destacada--sello {
  border-color: color-mix(in srgb, var(--luz) 45%, transparent);
  background:
    radial-gradient(circle at 16% 50%, rgb(var(--luz-rgb) / 0.2), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--superficie-alta) 70%, transparent), color-mix(in srgb, var(--superficie) 90%, transparent));
}
.viajero__destacada-arte {
  display: grid;
  place-items: center;
  width: 104px;
  aspect-ratio: 1;
}
.viajero__destacada-arte .insignia,
.viajero__destacada-arte .visado,
.viajero__destacada-arte .estampa {
  width: 100%;
  height: auto;
}
.viajero__destacada-texto {
  display: grid;
  justify-items: start;
  gap: 5px;
  min-width: 0;
}
.viajero__destacada-texto strong {
  font: 400 1.75rem/1 var(--fuente-comic);
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}
.viajero__destacada-texto > span:last-child {
  color: var(--papel-suave);
  font-size: 0.85rem;
  line-height: 1.35;
}
.viajero__destacada--vacia {
  border-style: dashed;
  cursor: pointer;
}
.viajero__destacada--vacia .viajero__destacada-arte {
  border-radius: 50%;
  background: color-mix(in srgb, var(--oro) 12%, transparent);
  color: var(--oro);
}
.viajero__destacada--vacia .viajero__destacada-arte .icono {
  width: 42%;
  height: 42%;
}
.viajero__destacada--vacia:hover,
.viajero__destacada--vacia:focus-visible {
  border-color: var(--oro);
}

/* Los sellos dimensionales: solo los elegidos, centrados. En el celular, de a
   tres por fila; en la computadora, todos en una fila y bien grandes. */
/* Los sellos siempre centrados, pongas uno, dos o cinco: hasta tres por fila en
   el celular y todos en una fila en pantallas anchas; la última fila también
   queda al centro. */
.viajero__huecos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.viajero__hueco {
  display: grid;
  flex: 0 0 calc((100% - 20px) / 3);
  place-items: center;
  max-width: 118px;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--hondo-rgb) / 0.55), transparent 70%);
}
.viajero__hueco .visado,
.viajero__hueco .estampa {
  width: 100%;
  height: auto;
}
.viajero__sellos--vacio {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-style: dashed;
  color: inherit;
  text-decoration: none;
}
.viajero__sellos--vacio > .icono {
  width: 2rem;
  height: 2rem;
  color: var(--luz);
}
.viajero__sellos--vacio span {
  display: grid;
  gap: 2px;
}
.viajero__sellos--vacio:hover,
.viajero__sellos--vacio:focus-visible {
  border-color: var(--luz);
}
.viajero__cifras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.viajero__cifra {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgb(var(--linea-rgb) / 0.25);
  border-radius: 14px;
  background: rgb(var(--hondo-rgb) / 0.3);
}
.viajero__cifra b {
  font: 700 1.7rem/1 var(--fuente-hud);
  font-variant-numeric: tabular-nums;
}
.viajero__cifra span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--papel-suave);
  font-size: 0.75rem;
  font-weight: 600;
}
.viajero__cifra .icono {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
}
/* En tu perfil, cada cifra es un enlace a su página. */
.viajero__cifra:has(.viajero__cifra-enlace) {
  padding: 0;
}
.viajero__cifra-enlace {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
  transition: background 0.2s;
}
.viajero__cifra-enlace:hover {
  background: rgb(var(--luz-rgb) / 0.1);
}
.viajero__cifra:has(.viajero__cifra-enlace):hover {
  border-color: var(--luz);
}
.viajero__cifra--racha b { color: var(--oro); }
.viajero__cifra--cartas b { color: var(--luz); }
.viajero__cifra--anomalias b { color: var(--error); }
.viajero__cifra--sellos b { color: var(--papel); }
.viajero__cifra b small {
  margin-left: 2px;
  color: var(--papel-suave);
  font-size: 0.55em;
}
.viajero__lista {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.viajero__universo {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 6px;
  border-radius: 10px;
  background: rgb(var(--hondo-rgb) / 0.35);
}
.viajero__universo .insignia {
  width: 34px;
  height: auto;
}
.viajero__universo-texto {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.viajero__universo-texto strong {
  overflow: hidden;
  font: 700 0.85rem/1 var(--fuente-hud);
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viajero__barra {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: rgb(var(--linea-rgb) / 0.2);
}
.viajero__barra span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--acento, var(--luz)), var(--luz));
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}
.viajero__universo > b {
  font: 700 0.95rem/1 var(--fuente-hud);
}
/* Desde 720 px de ancho: la tarjeta a la izquierda y las evidencias a la derecha. */
@container (min-width: 720px) {
  .viajero {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    grid-template-areas: "tarjeta destacada" "tarjeta cifras" "sellos sellos" "universos universos";
    align-items: stretch;
    gap: 14px;
  }
  /* Sin destacada (en la credencial de otro), los universos suben a la derecha. */
  .viajero:not(:has(.viajero__destacada)) {
    grid-template-areas: "tarjeta cifras" "tarjeta universos" "sellos sellos";
  }
  .viajero__tarjeta {
    align-self: start;
  }
  .viajero__destacada-arte {
    width: 128px;
  }
  .viajero__destacada-texto strong {
    font-size: 2.1rem;
  }
  .viajero__huecos {
    gap: 14px;
  }
  .viajero__hueco {
    flex-basis: calc((100% - 56px) / 5);
    max-width: 156px;
  }
  .viajero__cifra {
    align-content: center;
  }
  .viajero__universos .viajero__lista {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
  .viajero__tarjeta {
    gap: 16px;
    padding: 24px 24px 20px;
  }
  .viajero__identidad {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 18px;
  }
  .viajero__foto {
    width: 140px;
    height: 140px;
  }
  .viajero__nombre {
    font-size: 2.1rem;
  }
  .viajero__bloque {
    padding: 18px;
  }
}

/* ---------- Los marcos de la ficha ----------
   Cada uno define su aro (--marco-borde, --marco-grosor), su luz (--aro-luz y
   --aro-vuelta), su resplandor (--marco-halo y --marco-interior) y, si tiene,
   un detalle propio. Las mismas reglas pintan las miniaturas del editor. */
[data-funda="tema"] {
  --aro-luz: rgb(var(--luz-rgb) / 0.95);
}

/* Interferencia: dos señales, cian y magenta, que se cruzan en el borde. */
[data-funda="interferencia"] {
  --marco-borde: linear-gradient(90deg, rgb(60 224 255 / 0.5), rgb(155 107 255 / 0.3), rgb(255 79 184 / 0.5));
  --marco-halo: rgb(255 79 184 / 0.4);
  --marco-interior: rgb(60 224 255 / 0.4);
  --aro-luz: #3ce0ff;
  --aro-vuelta: 7s;
  --aro-grosor: 2px;
}
[data-funda="interferencia"] .viajero__marco::after {
  box-shadow: inset 1px 0 0 rgb(60 224 255 / 0.22), inset -1px 0 0 rgb(255 79 184 / 0.22), inset 0 0 30px -16px rgb(255 79 184 / 0.45);
}
[data-funda="interferencia"] .viajero__aro::after {
  display: block;
  background: conic-gradient(transparent 0, #ff4fb8 4%, transparent 34%, transparent 100%);
  animation-direction: reverse;
}

/* Constelación: polvo de estrellas que titila en los bordes y dos astros. */
[data-funda="nebulosa"] {
  --marco-borde: linear-gradient(135deg, rgb(182 156 255 / 0.6), rgb(60 224 255 / 0.22) 50%, rgb(182 156 255 / 0.5));
  --marco-halo: rgb(155 107 255 / 0.45);
  --marco-interior: rgb(155 107 255 / 0.55);
  --aro-luz: #e6deff;
  --aro-vuelta: 14s;
}
[data-funda="nebulosa"] .viajero__fx {
  background:
    radial-gradient(55% 60% at 0% 100%, rgb(155 107 255 / 0.22), transparent 70%),
    radial-gradient(40% 50% at 100% 0%, rgb(60 224 255 / 0.12), transparent 70%);
}
[data-funda="nebulosa"] .viajero__fx i {
  display: block;
  inset: 0;
  background: radial-gradient(1.3px 1.3px at 18px 22px, #ffffff 60%, transparent 75%) 0 0 / 96px 84px;
  animation: marco-titila 6s ease-in-out infinite;
}
[data-funda="nebulosa"] .viajero__fx i:nth-child(2) {
  background: radial-gradient(1px 1px at 70px 40px, #dfe8ff 60%, transparent 75%) 0 0 / 128px 106px;
  animation-delay: -2s;
}
[data-funda="nebulosa"] .viajero__fx i:nth-child(3) {
  background: radial-gradient(1.6px 1.6px at 30px 70px, #cbbcff 60%, transparent 75%) 0 0 / 74px 118px;
  animation-delay: -4s;
}
[data-funda="nebulosa"] .viajero__marco i:nth-of-type(1),
[data-funda="nebulosa"] .viajero__marco i:nth-of-type(2) {
  display: block;
  width: 11px;
  height: 11px;
  background: #ffffff;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  animation: marco-astro 4s ease-in-out infinite;
}
[data-funda="nebulosa"] .viajero__marco i:nth-of-type(1) { top: 3px; left: 68%; }
[data-funda="nebulosa"] .viajero__marco i:nth-of-type(2) { bottom: 3px; left: 24%; animation-delay: -2s; }

/* Escáner: una luz rápida que da la vuelta y una línea que baja por los lados. */
[data-funda="escaner"] {
  --marco-borde: linear-gradient(180deg, rgb(111 240 255 / 0.55), rgb(47 107 255 / 0.35));
  --marco-halo: rgb(60 224 255 / 0.5);
  --marco-interior: rgb(60 224 255 / 0.5);
  --aro-vuelta: 4s;
  --aro-grosor: 2px;
}
[data-funda="escaner"] .viajero__aro::before {
  background: conic-gradient(transparent 0 80%, rgb(154 243 255 / 0.5) 97%, #ffffff 99.5%, transparent 100%);
}
[data-funda="escaner"] .viajero__fx {
  background:
    repeating-linear-gradient(0deg, rgb(60 224 255 / 0.09) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgb(60 224 255 / 0.06) 0 1px, transparent 1px 9px);
}
[data-funda="escaner"] .viajero__fx i:nth-child(1) {
  display: block;
  inset: 0;
  background: linear-gradient(180deg, transparent calc(50% - 1px), rgb(154 243 255 / 0.75) 50%, transparent calc(50% + 1px));
  animation: marco-escanea 4s ease-in-out infinite alternate;
}

/* Aurora: el aro entero fluye en verdes y violetas, con luces arriba. */
[data-funda="aurora"] {
  --marco-grosor: 2px;
  --marco-halo: rgb(93 255 201 / 0.4);
  --marco-interior: rgb(93 255 201 / 0.45);
  --aro-vuelta: 16s;
}
[data-funda="aurora"] .viajero__aro::before {
  background: conic-gradient(#2fe6a8, #2f8fd9, #7a55e8, #c86bff, #2fe6a8, #2f8fd9, #7a55e8, #2fe6a8);
}
[data-funda="aurora"] .viajero__fx i {
  display: block;
  top: -30%;
  width: 65%;
  height: 60%;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.4;
  animation: marco-deriva 14s ease-in-out infinite alternate;
}
[data-funda="aurora"] .viajero__fx i:nth-child(1) { left: -10%; background: #2fe6a8; }
[data-funda="aurora"] .viajero__fx i:nth-child(2) { right: -10%; background: #7a55e8; animation-delay: -7s; }

/* Señal perdida: la luz busca la señal, el aro late y las barras la cuentan. */
[data-funda="senal"] {
  --marco-borde: linear-gradient(90deg, rgb(255 176 0 / 0.5), rgb(255 122 26 / 0.35));
  --marco-halo: rgb(255 176 0 / 0.32);
  --marco-interior: rgb(255 176 0 / 0.45);
  --aro-luz: #ffc44d;
}
[data-funda="senal"] .viajero__aro::before {
  animation: marco-busca 5s ease-in-out infinite alternate;
}
[data-funda="senal"] .viajero__aro::after {
  display: block;
  background: rgb(255 176 0 / 0.8);
  animation: marco-late 2.8s ease-out infinite;
}
[data-funda="senal"] .viajero__marco i:nth-of-type(-n+3) {
  display: block;
  bottom: 7px;
  width: 3px;
  border-radius: 1px;
  background: #ffb000;
  animation: marco-barra 2.4s ease-in-out infinite;
}
[data-funda="senal"] .viajero__marco i:nth-of-type(1) { right: 17px; height: 4px; }
[data-funda="senal"] .viajero__marco i:nth-of-type(2) { right: 12px; height: 7px; animation-delay: 0.2s; }
[data-funda="senal"] .viajero__marco i:nth-of-type(3) { right: 7px; height: 10px; animation-delay: 0.4s; }

/* Anomalía roja: una luz roja y un eco cian en sentido contrario, una grieta
   en el borde y un brillo rojo que respira en las esquinas. */
[data-funda="anomalia"] {
  --marco-borde: linear-gradient(135deg, rgb(255 59 90 / 0.7), rgb(120 10 30 / 0.5) 50%, rgb(255 59 90 / 0.6));
  --marco-grosor: 2px;
  --marco-halo: rgb(255 59 90 / 0.5);
  --marco-interior: rgb(255 59 90 / 0.55);
  --aro-luz: #ff5a6e;
  --aro-vuelta: 5s;
}
[data-funda="anomalia"] .viajero__aro::after {
  display: block;
  background: conic-gradient(transparent 0, rgb(60 224 255 / 0.75) 3%, transparent 22%, transparent 100%);
  animation-direction: reverse;
}
[data-funda="anomalia"] .viajero__fx {
  background:
    radial-gradient(45% 55% at 100% 0%, rgb(255 59 90 / 0.25), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgb(255 59 90 / 0.18), transparent 70%);
  animation: marco-respira 3.2s ease-in-out infinite;
}
[data-funda="anomalia"] .viajero__marco i:nth-of-type(1) {
  display: block;
  top: 0;
  right: 22%;
  width: 9px;
  height: 16px;
  background: #ff5a6e;
  clip-path: polygon(35% 0, 70% 0, 48% 38%, 82% 52%, 30% 100%, 50% 60%, 16% 46%);
  animation: marco-respira 1.6s ease-in-out infinite;
}

/* Oro estelar: aro de oro cepillado, un destello que lo recorre y un reflejo. */
[data-funda="oro"] {
  --marco-borde: linear-gradient(135deg, #fff1b5, #e9b33a 30%, #8a5a0c 55%, #f7d36b 80%, #b27a16);
  --marco-grosor: 2.5px;
  --marco-halo: rgb(255 200 87 / 0.45);
  --marco-interior: rgb(255 200 87 / 0.4);
  --aro-vuelta: 7s;
  --barrido: linear-gradient(110deg, transparent 36%, rgb(255 244 196 / 0.1) 47%, rgb(255 255 255 / 0.16) 50%, rgb(255 244 196 / 0.1) 53%, transparent 64%);
}
[data-funda="oro"] .viajero__aro::before {
  background: conic-gradient(transparent 0 76%, rgb(255 251 230 / 0.95) 92%, transparent 100%);
  animation-timing-function: ease-in-out;
}
[data-funda="oro"] .viajero__barrido,
[data-funda="holo"] .viajero__barrido {
  display: block;
}

/* Holográfico: el aro gira en todos los colores y un reflejo tornasol cruza. */
[data-funda="holo"] {
  --marco-grosor: 2px;
  --marco-halo: rgb(255 79 184 / 0.4);
  --marco-interior: rgb(155 107 255 / 0.5);
  --aro-vuelta: 8s;
  --barrido: linear-gradient(115deg, transparent 30%, rgb(60 224 255 / 0.09) 42%, rgb(255 79 184 / 0.09) 50%, rgb(255 200 87 / 0.08) 58%, transparent 70%);
  --barrido-tiempo: 7s;
}
[data-funda="holo"] .viajero__aro::before {
  background: conic-gradient(#3ce0ff, #9b6bff, #ff4fb8, #ffc857, #5dffc9, #3ce0ff);
}

/* ---------- Los sellos: letreros de neón (dibujo y gestos en letreros.css) ---------- */
.visado {
  position: relative;
  display: inline-grid;
  place-items: center;
  rotate: var(--giro, 0deg);
  transition: scale 0.2s steps(2), rotate 0.2s steps(2);
}
.visado:hover {
  scale: 1.06;
  rotate: 0deg;
}
.visado .estampa {
  display: block;
  overflow: visible;
}
/* La sombra de la placa: fija, detrás del letrero (no se recalcula al animar). */
.visado::before {
  content: "";
  position: absolute;
  inset: 1.7%;
  z-index: -1;
  border-radius: 20%;
  box-shadow: 0 3px 6px rgb(0 0 0 / 0.4);
  pointer-events: none;
}

/* La rareza en una pastilla de cómic. */
.rareza {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 2px solid #141414;
  border-radius: var(--radio-pildora);
  font: 400 0.85rem/1.2 var(--fuente-comic);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.rareza--bronce { background: #FFD23F; color: #141414; }
.rareza--plata { background: #3CE0FF; color: #141414; }
.rareza--oro { background: #FF2A6A; color: #ffffff; }
.rareza--holo { background: linear-gradient(90deg, #FFD23F, #B9E4F2, #DCE8FF, #7AE582); color: #141414; }

/* El candado de un sello que todavía no ganas. */
.sello-candado {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--superficie-alta);
  color: var(--papel);
  box-shadow: 0 0 0 3px var(--superficie), 0 2px 4px rgb(0 0 0 / 0.4);
}
.sello-candado .icono {
  width: 13px;
  height: 13px;
}
.sello-ficha--cerrada .visado,
.catalogo-sello:not(.catalogo-sello--ganado) .visado {
  opacity: 0.45;
  filter: grayscale(1) brightness(0.85);
}
.sello-ficha--cerrada .visado,
.sello-ficha--cerrada .visado *,
.catalogo-sello:not(.catalogo-sello--ganado) .visado,
.catalogo-sello:not(.catalogo-sello--ganado) .visado * {
  animation: none !important;
}

/* ---------- El catálogo de sellos (pestaña Sellos) ---------- */
.catalogo-sellos {
  display: grid;
  gap: var(--espacio-5);
}
.catalogo-sellos__rarezas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.catalogo-sellos__rareza {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-pildora);
  font: 700 var(--t-0) / 1.2 var(--fuente-texto);
}
.catalogo-sellos__rareza i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6);
}
.catalogo-sellos__rareza--bronce i { background: #FFD23F; }
.catalogo-sellos__rareza--plata i { background: #3CE0FF; }
.catalogo-sellos__rareza--oro i { background: #FF2A6A; }
.catalogo-sellos__rareza--holo i { background: conic-gradient(#FFD23F, #B9E4F2, #DCE8FF, #7AE582, #FFD23F); }
.catalogo-sellos__cabecera {
  display: grid;
  gap: 2px;
}
.catalogo-sellos__cabecera h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font: 800 var(--t-3) / 1.2 var(--fuente-rotulo);
}
.catalogo-sellos__cuenta {
  color: var(--papel-suave);
  font: 700 var(--t-0) / 1 var(--fuente-texto);
  font-variant-numeric: tabular-nums;
}
.catalogo-sellos__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.6rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}
.catalogo-sello {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.4rem;
  padding: 0.9rem 0.6rem;
  border: 1px solid var(--linea-tenue);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--superficie-alta), var(--superficie));
  text-align: center;
}
.catalogo-sello--ganado.catalogo-sello--oro {
  border-color: rgb(255 42 106 / 0.55);
}
.catalogo-sello--ganado.catalogo-sello--holo {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, var(--superficie-alta), var(--superficie)) padding-box,
    conic-gradient(from var(--angulo-holo), #3ce0ff, #9b6bff, #ff4fb8, #ffc857, #3ce0ff) border-box;
  animation: borde-holo 6s linear infinite;
}
.catalogo-sello__arte {
  position: relative;
}
.catalogo-sello__nombre {
  font: 800 0.88rem / 1.2 var(--fuente-rotulo);
}
.catalogo-sello__descripcion {
  color: var(--papel-suave);
  font-size: 0.78rem;
  line-height: 1.35;
}
.catalogo-sello__hecho {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--exito);
  font: 800 0.75rem / 1 var(--fuente-texto);
}
.catalogo-sello__barra {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 1.15rem;
  overflow: hidden;
  border-radius: var(--radio-pildora);
  background: rgb(var(--linea-rgb) / 0.16);
}
.catalogo-sello__barra span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--luz), var(--brillo));
  opacity: 0.55;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}
.catalogo-sello__barra em {
  position: relative;
  color: var(--papel);
  font: 700 0.75rem / 1 var(--fuente-texto);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

/* ---------- Sellos ganados (perfil público) ---------- */
.sellos-ganados {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 1rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sellos-ganados__item {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  font: 700 0.8rem / 1.25 var(--fuente-texto);
  text-align: center;
}
.rarezas-ganadas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* ---------- Lo que el pasaporte no dice: cifras y lenguajes ---------- */
.cifras-cortas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cifras-cortas__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem 0.35rem 0.6rem;
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-pildora);
  background: rgb(var(--hondo-rgb) / 0.35);
  color: var(--papel-suave);
  font-size: var(--t-1);
}
.cifras-cortas__item .icono {
  width: 1rem;
  height: 1rem;
  color: var(--luz);
}
.cifras-cortas__item b {
  color: var(--papel);
  font: 800 1rem / 1 var(--fuente-rotulo);
  font-variant-numeric: tabular-nums;
}
.lenguajes-viajero {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lenguaje-viajero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "insignia texto nivel"
    "insignia barra barra"
    "insignia falta falta";
  align-items: center;
  column-gap: 0.8rem;
  row-gap: 0.3rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--acento) 22%, var(--linea-tenue));
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--acento) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--superficie-alta), var(--superficie));
}
.lenguaje-viajero .insignia {
  grid-area: insignia;
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.35));
}
.lenguaje-viajero__texto {
  grid-area: texto;
  display: grid;
  gap: 1px;
  min-width: 0;
}
.lenguaje-viajero__texto strong {
  overflow: hidden;
  font: 800 1rem / 1.2 var(--fuente-rotulo);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lenguaje-viajero__rango {
  overflow: hidden;
  color: var(--papel-suave);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lenguaje-viajero__nivel {
  grid-area: nivel;
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  font: 800 1.45rem / 1 var(--fuente-rotulo);
  font-variant-numeric: tabular-nums;
}
.lenguaje-viajero__nivel small {
  color: var(--papel-suave);
  font: 700 0.75rem / 1 var(--fuente-texto);
}
.lenguaje-viajero__barra {
  grid-area: barra;
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radio-pildora);
  background: rgb(var(--linea-rgb) / 0.16);
}
.lenguaje-viajero__barra span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--acento) 70%, #fff), var(--acento));
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}
.lenguaje-viajero__falta {
  grid-area: falta;
  color: var(--papel-suave);
  font-size: 0.78rem;
}

/* Bloques del perfil público y la cabecera de un grupo con su botón. */
.perfil__bloque {
  display: grid;
  gap: var(--espacio-4);
  padding: var(--espacio-5);
  border: 1px solid var(--linea-tenue);
  border-radius: 24px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--superficie-alta) 70%, transparent), color-mix(in srgb, var(--superficie) 88%, transparent));
}
.perfil__bloque-cabeza,
.perfil__grupo-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
}
.perfil__bloque-cabeza .perfil__grupo-titulo,
.perfil__grupo-cabeza .perfil__grupo-titulo {
  margin: 0;
}
.perfil__sellos-plegados > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
  list-style: none;
  cursor: pointer;
}
.perfil__sellos-plegados > summary::-webkit-details-marker {
  display: none;
}
.perfil__sellos-plegados .perfil__grupo-titulo {
  margin: 0;
}
.perfil__flecha {
  width: 1.2rem;
  height: 1.2rem;
  margin-left: auto;
  color: var(--papel-suave);
  transition: rotate 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.perfil__sellos-plegados[open] .perfil__flecha {
  rotate: 180deg;
}
.perfil__sellos-plegados:not([open]) {
  padding-block: var(--espacio-4);
}

/* ---------- Editar ficha ---------- */
.editor-pas {
  display: grid;
  gap: var(--espacio-4);
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
}
.editor-pas__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3) var(--espacio-4);
}
.editor-pas__titulo {
  margin: 0;
  font: 800 var(--t-6) / 1 var(--fuente-rotulo);
  letter-spacing: -0.02em;
}
.editor-pas__cuerpo {
  display: grid;
  gap: var(--espacio-4);
}
.editor-pas__vista {
  display: grid;
  gap: var(--espacio-3);
}
.editor-pas__ver {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--linea-tenue);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--superficie-alta), var(--superficie));
  color: var(--papel);
  font: 700 var(--t-1) / 1.2 var(--fuente-texto);
  cursor: pointer;
}
.editor-pas__ver .icono {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--luz);
}
.editor-pas__flecha {
  margin-left: auto;
  transition: rotate 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.editor-pas--vista-abierta .editor-pas__flecha {
  rotate: 180deg;
}
.editor-pas__lienzo {
  display: none;
}
.editor-pas--vista-abierta .editor-pas__lienzo {
  display: block;
  animation: aparecer 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.editor-pas__panel {
  display: grid;
  align-content: start;
  gap: var(--espacio-4);
  min-width: 0;
  padding: var(--espacio-4);
  border: 1px solid var(--linea-tenue);
  border-radius: 24px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--superficie-alta) 80%, transparent), color-mix(in srgb, var(--superficie) 92%, transparent));
}
.editor-pas__pestanas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3rem;
  padding: 0.3rem;
  border-radius: 16px;
  background: var(--tinta-profunda);
}
.editor-pas__pestana {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--papel-suave);
  font: 700 0.8rem / 1 var(--fuente-hud);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.editor-pas__pestana .icono {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}
.editor-pas__pestana:hover {
  color: var(--papel);
}
.editor-pas__pestana[aria-selected="true"] {
  background: linear-gradient(180deg, var(--luz-intensa), var(--luz) 45%, var(--brillo));
  color: var(--texto-sobre-luz);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 6px 14px -8px rgb(var(--luz-rgb) / 0.8);
}
.editor-pas__cuenta {
  padding: 1px 6px;
  border-radius: var(--radio-pildora);
  background: rgb(var(--hondo-rgb) / 0.35);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.editor-pas__parte {
  display: grid;
  gap: var(--espacio-5);
  min-width: 0;
  animation: aparecer 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.editor-pas__subtitulo {
  margin: 0;
  font: 800 var(--t-3) / 1.2 var(--fuente-rotulo);
}
.editor-pas__cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espacio-3);
}
.editor-pas__cabeza .nota {
  margin: 0.25rem 0 0;
}
.editor-pas__contador {
  flex: none;
  padding: 0.25rem 0.75rem;
  border: 1px solid rgb(var(--luz-rgb) / 0.45);
  border-radius: var(--radio-pildora);
  background: rgb(var(--luz-rgb) / 0.14);
  color: var(--luz);
  font: 800 var(--t-0) / 1.2 var(--fuente-texto);
  font-variant-numeric: tabular-nums;
}
.sacude {
  animation: elegir-sacude 0.4s;
}

/* Identidad */
.editor-pas__foto {
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--linea-tenue);
  border-radius: 18px;
  background: rgb(var(--hondo-rgb) / 0.35);
}
.editor-pas__avatar .avatar--enorme {
  width: 5rem;
  height: 5rem;
}
.editor-pas__foto-acciones {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}
.editor-pas__foto-acciones .nota {
  margin: 0;
  font-size: 0.82rem;
}
.editor-pas__botones-foto {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.editor-pas__campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-3) var(--espacio-4);
}
.editor-pas__campos .campo--ancho {
  grid-column: 1 / -1;
}
.campo__contador {
  float: right;
  color: var(--papel-suave);
  font-size: 0.78rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.editor-pas__grupo {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.editor-pas__grupo legend {
  margin-bottom: 0.6rem;
  padding: 0;
  font-weight: 700;
}

/* Visados: los seis lugares, los filtros y todos los sellos. */
.editor-pas__ranuras {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0;
  padding: 0.7rem;
  border: 1px dashed rgb(var(--linea-rgb) / 0.3);
  border-radius: 18px;
  background: rgb(var(--hondo-rgb) / 0.4);
  list-style: none;
}
.editor-pas__ranura {
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
}
.editor-pas__ranura--vacia b {
  display: grid;
  place-items: center;
  width: 72%;
  aspect-ratio: 1;
  border: 2px dashed rgb(var(--linea-rgb) / 0.35);
  border-radius: 50%;
  color: rgb(var(--linea-rgb) / 0.7);
  font: 800 0.85rem / 1 var(--fuente-rotulo);
}
.editor-pas__ranura-boton {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: none;
  cursor: pointer;
}
.editor-pas__ranura .visado {
  rotate: 0deg;
}
.editor-pas__ranura .estampa {
  width: 100%;
  max-width: 58px;
  height: auto;
}
.editor-pas__quitar {
  position: absolute;
  top: -2px;
  right: -2px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--superficie-alta);
  color: var(--papel);
  box-shadow: 0 0 0 2px var(--superficie), 0 2px 4px rgb(0 0 0 / 0.4);
}
.editor-pas__quitar .icono {
  width: 12px;
  height: 12px;
}
.editor-pas__ranura-boton:hover .editor-pas__quitar,
.editor-pas__ranura-boton:focus-visible .editor-pas__quitar {
  background: var(--error);
  color: #fff;
}
.editor-pas__filtros {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
  scrollbar-width: none;
}
.editor-pas__filtro {
  flex: none;
  min-height: 2.4rem;
  padding: 0 0.95rem;
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-pildora);
  background: transparent;
  color: var(--papel-suave);
  font: 700 var(--t-0) / 1 var(--fuente-texto);
  cursor: pointer;
}
.editor-pas__filtro[aria-checked="true"] {
  border-color: transparent;
  background: linear-gradient(180deg, var(--luz-intensa), var(--luz) 45%, var(--brillo));
  color: var(--texto-sobre-luz);
}
.editor-pas__sellos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr));
  gap: 1rem 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sello-ficha {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--papel);
  font: 700 0.78rem / 1.2 var(--fuente-texto);
  text-align: center;
  cursor: pointer;
}
.sello-ficha__caja {
  position: relative;
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border: 1.5px solid var(--linea-tenue);
  border-radius: 20px;
  background: radial-gradient(circle at 50% 35%, var(--superficie-alta), var(--tinta-profunda));
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sello-ficha:hover .sello-ficha__caja {
  border-color: rgb(var(--luz-rgb) / 0.5);
}
.sello-ficha[aria-pressed="true"] .sello-ficha__caja {
  border-color: var(--luz);
  background: radial-gradient(circle at 50% 35%, rgb(var(--luz-rgb) / 0.22), var(--tinta-profunda));
  box-shadow: 0 0 0 3px rgb(var(--luz-rgb) / 0.18), 0 8px 18px -10px rgb(var(--luz-rgb) / 0.9);
}
.sello-ficha:focus-visible {
  outline: none;
}
.sello-ficha:focus-visible .sello-ficha__caja {
  outline: 3px solid var(--luz);
  outline-offset: 3px;
}
.sello-ficha__puesto {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--luz-intensa), var(--luz));
  color: var(--texto-sobre-luz);
  font: 800 0.75rem / 1 var(--fuente-texto);
  box-shadow: 0 0 0 3px var(--superficie), 0 2px 4px rgb(0 0 0 / 0.35);
}
.sello-ficha__nombre {
  max-width: 100%;
}
.sello-ficha--cerrada {
  color: var(--papel-suave);
  cursor: help;
}
.sello-ficha__avance {
  color: var(--papel-suave);
  font: 700 0.75rem / 1 var(--fuente-texto);
  font-variant-numeric: tabular-nums;
}

/* Marco: tarjetas con la miniatura animada de cada uno. */
.editor-pas__marcos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.7rem;
}
.marco {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.55rem 0.55rem 0.7rem;
  border: 1.5px solid var(--linea-tenue);
  border-radius: 18px;
  background: color-mix(in srgb, var(--superficie) 85%, transparent);
  color: var(--papel);
  font: 700 0.85rem / 1.2 var(--fuente-texto);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, translate 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s;
}
.marco:hover:not(.marco--cerrado) {
  translate: 0 -2px;
  border-color: rgb(var(--luz-rgb) / 0.6);
}
.marco[aria-checked="true"] {
  border-color: var(--luz);
  box-shadow: 0 0 0 3px rgb(var(--luz-rgb) / 0.18), 0 10px 22px -12px rgb(var(--luz-rgb) / 0.8);
}
.marco:focus-visible {
  outline: 3px solid var(--luz);
  outline-offset: 3px;
}
.marco--cerrado {
  color: var(--papel-suave);
  cursor: not-allowed;
}
.marco--cerrado .marco__muestra {
  filter: grayscale(0.8) brightness(0.6);
}
.marco--cerrado .marco__muestra * {
  animation-play-state: paused !important;
}
/* La miniatura: una tarjeta pequeña con el marco puesto. */
.marco__muestra {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
}
.marco__tarjeta {
  position: absolute;
  inset: 0;
  align-content: center;
  padding: 14px;
  border-radius: 14px;
}
.marco__hoja {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
}
.marco__hoja i {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: rgb(var(--linea-rgb) / 0.35);
}
.marco__hoja i:nth-child(1) {
  width: 55%;
  background: var(--luz);
}
.marco__hoja i:nth-child(3) {
  width: 75%;
}
.marco__nombre {
  line-height: 1.2;
}
.marco__estado {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: var(--papel-suave);
  font: 600 0.75rem / 1.3 var(--fuente-texto);
}
.marco[aria-checked="true"] .marco__estado {
  color: var(--luz);
  font-weight: 800;
}
.marco__estado .icono {
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
}

/* La barra de guardar: siempre a mano, abajo. */
.editor-pas__pie {
  position: sticky;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: 0.65rem 0.7rem 0.65rem 1.1rem;
  border: 1px solid var(--linea-tenue);
  border-radius: 20px;
  background: color-mix(in srgb, var(--superficie-alta) 97%, transparent);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.8);
  transition: border-color 0.2s;
}
.editor-pas--con-cambios .editor-pas__pie {
  border-color: rgb(var(--luz-rgb) / 0.55);
}
.editor-pas__estado {
  color: var(--papel-suave);
  font-size: var(--t-1);
}
.editor-pas--con-cambios .editor-pas__estado {
  color: var(--papel);
  font-weight: 700;
}
.editor-pas__acciones {
  display: flex;
  gap: 0.5rem;
}

@property --angulo-holo {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* Editar ficha en pantallas anchas: la vista previa fija a la izquierda, a
   escala (es la ficha completa, a 900 px), y el editor a la derecha. */
@media (min-width: 1100px) {
  .editor-pas__cuerpo {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--espacio-5);
  }
  .editor-pas__vista {
    position: sticky;
    top: 5rem;
  }
  .editor-pas__ver {
    display: none;
  }
  .editor-pas__lienzo {
    display: block;
    zoom: var(--zoom, 0.6);
  }
  .editor-pas__lienzo .viajero-zona {
    width: 900px;
  }
}

/* ---------- Celular ---------- */
@media (max-width: 720px) {
  .perfil__titulo,
  .editor-pas__titulo {
    font-size: var(--t-5);
  }
  .perfil__bloque {
    padding: var(--espacio-4);
  }
  .lenguaje-viajero {
    column-gap: 0.7rem;
    row-gap: 0.2rem;
    padding: 0.6rem 0.75rem;
    border-radius: 16px;
  }
  .lenguaje-viajero .insignia {
    width: 44px;
    height: auto;
  }
  .lenguaje-viajero__nivel {
    font-size: 1.25rem;
  }
  .editor-pas__panel {
    padding: var(--espacio-3);
  }
  .editor-pas__pie {
    padding: 0.55rem;
  }
  .editor-pas__estado {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .editor-pas__acciones {
    flex: 1;
  }
  .editor-pas__acciones > * {
    flex: 1;
  }
  .editor-pas__acciones .boton-hud--luz {
    flex: 2;
  }
  body.en-editor {
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.en-editor .barra-inferior {
    display: none;
  }
}
@media (max-width: 560px) {
  .editor-pas__campos {
    grid-template-columns: minmax(0, 1fr);
  }
  .editor-pas__pestana {
    flex-direction: column;
    gap: 0.15rem;
    min-height: 3.2rem;
    font-size: 0.75rem;
  }
  .editor-pas__cuenta {
    display: none;
  }
}
@media (max-width: 380px) {
  .viajero__identidad {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
  }
  .viajero__foto {
    width: 84px;
    height: 84px;
  }
  .viajero__nombre {
    font-size: 1.35rem;
  }
  .viajero__huecos {
    gap: 6px;
  }
}

/* Las pestañas del perfil, con la letra de la ficha. */
.perfil--ficha .solapas__boton {
  font-family: var(--fuente-hud);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes ficha-glitch {
  0%, 90% { transform: none; text-shadow: none; }
  91% { transform: translateX(-2px); text-shadow: 2px 0 var(--error), -2px 0 var(--luz); }
  93% { transform: translateX(2px); text-shadow: -2px 0 var(--error), 2px 0 var(--luz); }
  95%, 100% { transform: none; text-shadow: none; }
}
@keyframes ficha-led {
  50% { opacity: 0.3; }
}
@keyframes marco-gira {
  to { rotate: 1turn; }
}
@keyframes marco-barrido {
  0%, 55% { translate: -100% 0; }
  85%, 100% { translate: 100% 0; }
}
@keyframes marco-titila {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}
@keyframes marco-astro {
  0%, 100% { opacity: 0.55; scale: 0.7; }
  50% { opacity: 1; scale: 1; }
}
@keyframes marco-escanea {
  from { translate: 0 -50%; }
  to { translate: 0 50%; }
}
@keyframes marco-deriva {
  from { translate: -6% 0; scale: 1; }
  to { translate: 10% 8%; scale: 1.15; }
}
@keyframes marco-busca {
  from { rotate: -40deg; }
  to { rotate: 220deg; }
}
@keyframes marco-late {
  0%, 100% { opacity: 0; }
  10% { opacity: 0.9; }
  22% { opacity: 0.15; }
  32% { opacity: 0.7; }
  60% { opacity: 0; }
}
@keyframes marco-barra {
  0%, 100% { opacity: 0.25; }
  30%, 60% { opacity: 1; }
}
@keyframes marco-respira {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@keyframes borde-holo {
  to { --angulo-holo: 360deg; }
}
@keyframes elegir-sacude {
  0%, 100% { translate: 0 0; }
  25% { translate: -4px 0; }
  75% { translate: 4px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .viajero *,
  .viajero *::before,
  .viajero *::after,
  .marco__muestra *,
  .marco__muestra *::before,
  .marco__muestra *::after,
  .visado,
  .visado *,
  .catalogo-sello,
  .editor-pas *,
  .boton-hud,
  .sacude {
    animation: none !important;
  }

  .viajero__barrido {
    display: none;
  }
}

/* ---------- Sellos que se tocan ---------- */
.sello-tocable {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 24%;
  background: none;
  color: inherit;
  cursor: pointer;
}
.sello-tocable:focus-visible,
.catalogo-sello:focus-visible,
.sellos-ganados__item:focus-visible {
  outline: 3px solid var(--luz);
  outline-offset: 4px;
}
.viajero__destacada-arte .sello-tocable {
  width: auto;
}
.catalogo-sello,
.sellos-ganados__item {
  width: 100%;
  height: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, translate 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.sellos-ganados__item {
  padding: 0.4rem;
  border: 0;
  border-radius: 14px;
  background: none;
}
.catalogo-sello:hover,
.sellos-ganados__item:hover {
  translate: 0 -2px;
}
.catalogo-sello:hover {
  border-color: rgb(var(--luz-rgb) / 0.55);
}
.catalogo-sellos__filtros {
  margin-bottom: calc(-1 * var(--espacio-2));
}
.catalogo-sellos__pastilla {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.catalogo-sellos__pastilla .catalogo-sellos__cuenta {
  font-size: 0.75rem;
  opacity: 0.8;
}
.catalogo-sellos__descripcion {
  margin: 0;
}

/* La ventana de un sello. */
.hoja--sello {
  width: min(28rem, calc(100vw - 2rem));
}
.hoja-sello__cabecera {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}
.hoja-sello__categoria {
  margin: 0 0 0.2rem;
  color: var(--linea);
  font: 700 0.75rem / 1.2 var(--fuente-hud);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hoja-sello__arte {
  display: grid;
  place-items: center;
  padding: var(--espacio-3) 0;
}
.hoja-sello__datos {
  display: grid;
  gap: var(--espacio-3);
  margin: 0;
}
.hoja-sello__datos > div {
  display: grid;
  gap: 0.3rem;
}
.hoja-sello__datos dt {
  color: var(--linea);
  font: 700 0.75rem / 1.2 var(--fuente-hud);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hoja-sello__datos dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  line-height: 1.45;
}
.hoja-sello__datos .hoja-sello__ganado {
  flex-wrap: nowrap;
  align-items: flex-start;
}
.hoja-sello__ganado .icono {
  flex: none;
  margin-top: 0.2em;
  color: var(--exito);
}
.hoja-sello__datos .catalogo-sello__barra {
  flex: 1 1 100%;
}
@media (max-width: 720px) {
  .hoja--sello {
    width: 100%;
  }
  /* En la hoja del celular la X sigue a la vista. */
  .hoja--sello .hoja__cabecera > .hoja-sello__cerrar {
    display: inline-flex;
  }
}