/* ---------- Los sellos: letreros de neón de la Central ----------
   Cada letrero tiene la forma de lo que significa, en tubos de luz sobre una
   placa, y se mueve con su gesto (cuenta/letreros.js). La categoría decide la
   luz de su dimensión (--n1 el tubo principal, --n2 el de los detalles). Las
   clases van con «p-» para no chocar con el resto de la página. */
.letrero .p-placa {
  fill: #0a0b1c;
  stroke: rgb(255 255 255 / 0.08);
  stroke-width: 1.5;
}
/* El brillo del neón, suave: una sola vez por capa. */
.letrero .p-neon {
  filter: url(#letrero-brillo);
}
.letrero .p-f,
.letrero .p-f2 {
  fill: color-mix(in srgb, var(--n1) 14%, transparent);
  stroke: var(--n1);
  stroke-width: 3;
  stroke-linejoin: round;
}
.letrero .p-trama,
.letrero .p-lineas {
  display: none;
}
.letrero .p-d,
.letrero .p-ps,
.letrero .p-franja,
.letrero .p-aura,
.letrero .p-lineas {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.letrero .p-d { stroke: var(--n1); stroke-width: 2; opacity: 0.9; }
.letrero .p-d--fino { stroke-width: 1.5; }
.letrero .p-d--grueso { stroke-width: 3.2; }
.letrero .p-d--puntada { stroke-dasharray: 3 3; }
.letrero .p-ps { stroke: var(--n2); stroke-width: 3.5; }
.letrero .p-ps--grueso { stroke-width: 5; }
.letrero .p-pf { fill: var(--n2); }
.letrero .p-pf--2 { fill: var(--n1); }
.letrero .p-c1 { fill: #ff5a6e; }
.letrero .p-c2 { fill: #ffd23f; }
.letrero .p-c3 { fill: #3cd0ff; }
.letrero .p-tx {
  fill: var(--n1);
  font-family: var(--fuente-hud);
  font-weight: 700;
  text-anchor: middle;
}
.letrero .p-h { fill: #0a0b1c; stroke: var(--n1); stroke-width: 2; }
.letrero .p-ojo { fill: #0a0b1c; }
.letrero .p-franja { stroke: var(--n2); stroke-width: 4; stroke-dasharray: 10 32.4; }
.letrero .p-aura { stroke: var(--n2); stroke-width: 3; stroke-dasharray: 4 6; }
.letrero .p-brillo-luz { fill: #ffffff; opacity: 0.85; }
.letrero .p-grieta {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.2;
  stroke-dasharray: 5 3;
  filter: drop-shadow(0 0 2px rgb(255 46 136 / 0.7));
}

/* La luz de cada dimensión. */
.letrero .p-e-viaje { --n1: #ffc6e0; --n2: #9fe3ff; }
.letrero .p-e-viaje .p-placa { fill: url(#letrero-lavado); }
.letrero .p-e-racha { --n1: #ff8a3d; --n2: #ffe066; }
.letrero .p-e-racha .p-f {
  animation: letrero-zumbido 4s steps(1) infinite;
  animation-delay: var(--fase, 0s);
}
.letrero .p-e-dominio { --n1: #5ce1ff; --n2: #b6a8ff; }
.letrero .p-e-dominio .p-trama {
  display: block;
  fill: url(#letrero-escaneo);
  stroke: none;
  opacity: 0.28;
}
/* Anomalías: neón magenta con interferencia, un eco cian corrido del tubo. */
.letrero .p-e-anomalias { --n1: #ff4f9a; --n2: #6ff0ff; }
.letrero .p-e-anomalias .p-placa { fill: url(#letrero-falla); }
.letrero .p-e-anomalias .p-trama {
  display: block;
  fill: none;
  stroke: #6ff0ff;
  stroke-width: 1.4;
  stroke-linejoin: round;
  opacity: 0.55;
  transform: translate(2px, -1px);
}
.letrero .p-e-coleccion { --n1: #ffffff; --n2: #ffffff; }
.letrero .p-e-coleccion .p-placa { fill: #101014; }
.letrero .p-e-coleccion .p-lineas {
  display: block;
  stroke: #ffffff;
  stroke-width: 1.2;
  opacity: 0.35;
}

/* El gesto de cada objeto. Todos siguen el reloj común de 8 s (--fase, que
   pone letreros.js): empiezan y terminan juntos. */
.letrero .p-pt {
  transform-box: view-box;
  animation-iteration-count: infinite;
  animation-delay: var(--fase, 0s);
}

/* Multiversal: recorre las cinco dimensiones, 1,6 s en cada una (8 s en
   total). La primera está siempre debajo; las demás entran encima con un
   fundido corto y salen cuando la siguiente ya las tapa. */
.letrero .p-mv {
  opacity: 0;
  animation: letrero-mv 8s linear infinite;
  animation-delay: var(--fase, 0s);
}
.letrero .p-mv--0 {
  opacity: 1;
  animation: none;
}
.letrero .p-mv--4 {
  animation-name: letrero-mv-fin;
}
.letrero .p-mv--1 { animation-delay: calc(var(--fase, 0s) - 6.4s); }
.letrero .p-mv--2 { animation-delay: calc(var(--fase, 0s) - 4.8s); }
.letrero .p-mv--3 { animation-delay: calc(var(--fase, 0s) - 3.2s); }
.letrero .p-mv--4 { animation-delay: calc(var(--fase, 0s) - 1.6s); }

/* La rareza mueve el letrero entero: inestable falla a ratos, anómalo más
   seguido y multiversal salta al cambiar de dimensión. */
.visado .letrero--inestable {
  animation: letrero-titila 4s steps(1) infinite;
  animation-delay: var(--fase, 0s);
}
.visado .letrero--anomalo {
  animation: letrero-titila 2s steps(1) infinite;
  animation-delay: var(--fase, 0s);
}
.visado .letrero--multiversal {
  animation: letrero-salto 1.6s steps(1) infinite;
  animation-delay: var(--fase, 0s);
}

/* Un sello que todavía no ganas es un letrero apagado: sin brillo y quieto. */
.sello-ficha--cerrada .letrero .p-neon,
.catalogo-sello:not(.catalogo-sello--ganado) .letrero .p-neon {
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .letrero,
  .letrero * {
    animation: none !important;
  }
}

/* El tubo que zumba: dos bajones cortos y suaves de luz cada 4 s. */
@keyframes letrero-zumbido {
  0%, 61% { opacity: 1; }
  62% { opacity: 0.72; }
  64% { opacity: 1; }
  66% { opacity: 0.8; }
  68%, 100% { opacity: 1; }
}
/* Entra en 0,24 s, se queda su turno y sale cuando la siguiente ya la tapa. */
@keyframes letrero-mv {
  0% { opacity: 0; }
  3%, 23% { opacity: 1; }
  26%, 100% { opacity: 0; }
}
/* La última sale a tiempo para dejar ver la primera, que está debajo. */
@keyframes letrero-mv-fin {
  0% { opacity: 0; }
  3%, 20% { opacity: 1; }
  23%, 100% { opacity: 0; }
}
@keyframes letrero-titila {
  0%, 88% { transform: none; filter: none; }
  90% { transform: translateX(-1px); filter: drop-shadow(1px 0 0 rgb(0 240 255 / 0.45)) drop-shadow(-1px 0 0 rgb(255 40 140 / 0.45)); }
  94% { transform: translateX(1px); }
  97%, 100% { transform: none; filter: none; }
}
@keyframes letrero-salto {
  0% { transform: translateX(-1.5px); filter: drop-shadow(1.5px 0 0 rgb(0 240 255 / 0.5)) drop-shadow(-1.5px 0 0 rgb(255 40 140 / 0.5)); }
  5%, 100% { transform: none; filter: none; }
}
@keyframes letrero-g-salta { 0% { transform:translateX(0); } 30% { transform:translateX(8px); } 45% { transform:translateX(-2px); } 60% { transform:translateX(0); } 100% { transform:translateX(0); } }
@keyframes letrero-r-salta { 0% { transform:translateX(0); } 9.6% { transform:translateX(8px); } 14.4% { transform:translateX(-2px); } 19.2% { transform:translateX(0); } 32% { transform:translateX(0); } 33%, 100% { transform:translateX(0); } }
@keyframes letrero-g-busca { 0% { transform:rotate(0deg); } 25% { transform:rotate(-38deg); } 50% { transform:rotate(26deg); } 75% { transform:rotate(-8deg); } 100% { transform:rotate(0deg); } }
@keyframes letrero-r-busca { 0% { transform:rotate(0deg); } 8% { transform:rotate(-38deg); } 16% { transform:rotate(26deg); } 24% { transform:rotate(-8deg); } 32% { transform:rotate(0deg); } 33%, 100% { transform:rotate(0deg); } }
@keyframes letrero-g-cuenta { 0% { transform:scale(1); } 20% { transform:scale(1.28); } 35% { transform:scale(0.94); } 50% { transform:scale(1); } 100% { transform:scale(1); } }
@keyframes letrero-r-cuenta { 0% { transform:scale(1); } 6.4% { transform:scale(1.28); } 11.2% { transform:scale(0.94); } 16% { transform:scale(1); } 32% { transform:scale(1); } 33%, 100% { transform:scale(1); } }
@keyframes letrero-g-parpadea { 0% { opacity:1; } 20% { opacity:0.15; } 40% { opacity:1; } 60% { opacity:0.15; } 80% { opacity:1; } 100% { opacity:1; } }
@keyframes letrero-r-parpadea { 0% { opacity:1; } 6.4% { opacity:0.15; } 12.8% { opacity:1; } 19.2% { opacity:0.15; } 25.6% { opacity:1; } 32% { opacity:1; } 33%, 100% { opacity:1; } }
@keyframes letrero-g-gira { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
@keyframes letrero-r-gira { 0% { transform:rotate(0deg); } 32% { transform:rotate(360deg); } 33%, 100% { transform:rotate(0deg); } }
@keyframes letrero-g-orbita { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
@keyframes letrero-r-orbita { 0% { transform:rotate(0deg); } 32% { transform:rotate(360deg); } 33%, 100% { transform:rotate(0deg); } }
@keyframes letrero-g-llama { 0% { transform:scale(1,1) skewX(0deg); } 25% { transform:scale(0.92,1.16) skewX(-5deg); } 50% { transform:scale(1.06,0.9) skewX(4deg); } 75% { transform:scale(0.95,1.1) skewX(-3deg); } 100% { transform:scale(1,1) skewX(0deg); } }
@keyframes letrero-r-llama { 0% { transform:scale(1,1) skewX(0deg); } 8% { transform:scale(0.92,1.16) skewX(-5deg); } 16% { transform:scale(1.06,0.9) skewX(4deg); } 24% { transform:scale(0.95,1.1) skewX(-3deg); } 32% { transform:scale(1,1) skewX(0deg); } 33%, 100% { transform:scale(1,1) skewX(0deg); } }
@keyframes letrero-g-late { 0% { transform:scale(1); } 30% { transform:scale(1.2); } 60% { transform:scale(1); } 100% { transform:scale(1); } }
@keyframes letrero-r-late { 0% { transform:scale(1); } 9.6% { transform:scale(1.2); } 19.2% { transform:scale(1); } 32% { transform:scale(1); } 33%, 100% { transform:scale(1); } }
@keyframes letrero-g-voltea180 { 0% { transform:rotate(0deg); } 40% { transform:rotate(0deg); } 55% { transform:rotate(180deg); } 100% { transform:rotate(180deg); } }
@keyframes letrero-r-voltea180 { 0% { transform:rotate(0deg); } 12.8% { transform:rotate(0deg); } 17.6% { transform:rotate(180deg); } 32% { transform:rotate(180deg); } 33%, 100% { transform:rotate(0deg); } }
@keyframes letrero-g-gira-lento { 0% { transform:rotate(0deg); } 100% { transform:rotate(30deg); } }
@keyframes letrero-r-gira-lento { 0% { transform:rotate(0deg); } 32% { transform:rotate(30deg); } 33%, 100% { transform:rotate(0deg); } }
@keyframes letrero-g-voltea { 0% { transform:scaleX(1); } 20% { transform:scaleX(0.04); } 40% { transform:scaleX(1); } 100% { transform:scaleX(1); } }
@keyframes letrero-r-voltea { 0% { transform:scaleX(1); } 6.4% { transform:scaleX(0.04); } 12.8% { transform:scaleX(1); } 32% { transform:scaleX(1); } 33%, 100% { transform:scaleX(1); } }
@keyframes letrero-g-flota { 0% { transform:translateY(0); } 50% { transform:translateY(-5px); } 100% { transform:translateY(0); } }
@keyframes letrero-r-flota { 0% { transform:translateY(0); } 16% { transform:translateY(-5px); } 32% { transform:translateY(0); } 33%, 100% { transform:translateY(0); } }
@keyframes letrero-g-oscila { 0% { transform:rotate(0deg); } 30% { transform:rotate(-16deg); } 60% { transform:rotate(6deg); } 100% { transform:rotate(0deg); } }
@keyframes letrero-r-oscila { 0% { transform:rotate(0deg); } 9.6% { transform:rotate(-16deg); } 19.2% { transform:rotate(6deg); } 32% { transform:rotate(0deg); } 33%, 100% { transform:rotate(0deg); } }
@keyframes letrero-g-destella { 0% { transform:scale(0) rotate(0deg);opacity:0; } 25% { transform:scale(1.3) rotate(45deg);opacity:1; } 50% { transform:scale(0) rotate(90deg);opacity:0; } 100% { transform:scale(0) rotate(90deg);opacity:0; } }
@keyframes letrero-r-destella { 0% { transform:scale(0) rotate(0deg);opacity:0; } 8% { transform:scale(1.3) rotate(45deg);opacity:1; } 16% { transform:scale(0) rotate(90deg);opacity:0; } 32% { transform:scale(0) rotate(90deg);opacity:0; } 33%, 100% { transform:scale(0) rotate(0deg);opacity:0; } }
@keyframes letrero-g-choca { 0% { transform:translateX(0); } 25% { transform:translateX(-7px) rotate(-6deg); } 50% { transform:translateX(7px) rotate(6deg); } 75% { transform:translateX(-3px); } 100% { transform:translateX(0); } }
@keyframes letrero-r-choca { 0% { transform:translateX(0); } 8% { transform:translateX(-7px) rotate(-6deg); } 16% { transform:translateX(7px) rotate(6deg); } 24% { transform:translateX(-3px); } 32% { transform:translateX(0); } 33%, 100% { transform:translateX(0); } }
@keyframes letrero-g-escanea { 0% { transform:translate(0,0); } 20% { transform:translate(-18px,-12px); } 40% { transform:translate(16px,-6px); } 60% { transform:translate(-8px,16px); } 80% { transform:translate(0,0); } 100% { transform:translate(0,0); } }
@keyframes letrero-r-escanea { 0% { transform:translate(0,0); } 6.4% { transform:translate(-18px,-12px); } 12.8% { transform:translate(16px,-6px); } 19.2% { transform:translate(-8px,16px); } 25.6% { transform:translate(0,0); } 32% { transform:translate(0,0); } 33%, 100% { transform:translate(0,0); } }
@keyframes letrero-g-golpe { 0% { transform:translate(0,0);opacity:0; } 10% { transform:translate(0,0);opacity:1; } 35% { transform:translate(-14px,10px);opacity:1; } 45% { transform:translate(-6px,4px);opacity:0.4; } 60% { transform:translate(0,0);opacity:0; } 100% { transform:translate(0,0);opacity:0; } }
@keyframes letrero-r-golpe { 0% { transform:translate(0,0);opacity:0; } 3.2% { transform:translate(0,0);opacity:1; } 11.2% { transform:translate(-14px,10px);opacity:1; } 14.4% { transform:translate(-6px,4px);opacity:0.4; } 19.2% { transform:translate(0,0);opacity:0; } 32% { transform:translate(0,0);opacity:0; } 33%, 100% { transform:translate(0,0);opacity:0; } }
@keyframes letrero-g-pestanea { 0% { transform:scaleY(1) translateX(0); } 40% { transform:scaleY(1) translateX(0); } 48% { transform:scaleY(0.1) translateX(0); } 56% { transform:scaleY(1) translateX(0); } 70% { transform:scaleY(1) translateX(6px); } 85% { transform:scaleY(1) translateX(-6px); } 100% { transform:scaleY(1) translateX(0); } }
@keyframes letrero-r-pestanea { 0% { transform:scaleY(1) translateX(0); } 12.8% { transform:scaleY(1) translateX(0); } 15.4% { transform:scaleY(0.1) translateX(0); } 17.9% { transform:scaleY(1) translateX(0); } 22.4% { transform:scaleY(1) translateX(6px); } 27.2% { transform:scaleY(1) translateX(-6px); } 32% { transform:scaleY(1) translateX(0); } 33%, 100% { transform:scaleY(1) translateX(0); } }
@keyframes letrero-g-abre { 0% { transform:rotate(0deg); } 30% { transform:rotate(-24deg); } 70% { transform:rotate(-24deg); } 100% { transform:rotate(0deg); } }
@keyframes letrero-r-abre { 0% { transform:rotate(0deg); } 9.6% { transform:rotate(-24deg); } 22.4% { transform:rotate(-24deg); } 32% { transform:rotate(0deg); } 33%, 100% { transform:rotate(0deg); } }
@keyframes letrero-g-abanico { 0% { transform:scaleX(0.82); } 40% { transform:scaleX(1.16); } 70% { transform:scaleX(1.16); } 100% { transform:scaleX(0.82); } }
@keyframes letrero-r-abanico { 0% { transform:scaleX(0.82); } 12.8% { transform:scaleX(1.16); } 22.4% { transform:scaleX(1.16); } 32% { transform:scaleX(0.82); } 33%, 100% { transform:scaleX(0.82); } }
@keyframes letrero-g-barre { 0% { transform:translateX(-18px);opacity:0; } 15% { transform:translateX(-10px);opacity:0.9; } 50% { transform:translateX(30px);opacity:0; } 100% { transform:translateX(30px);opacity:0; } }
@keyframes letrero-r-barre { 0% { transform:translateX(-18px);opacity:0; } 4.8% { transform:translateX(-10px);opacity:0.9; } 16% { transform:translateX(30px);opacity:0; } 32% { transform:translateX(30px);opacity:0; } 33%, 100% { transform:translateX(-18px);opacity:0; } }
@keyframes letrero-g-respira { 0% { transform:scale(0.9);opacity:0.35; } 50% { transform:scale(1.06);opacity:0.9; } 100% { transform:scale(0.9);opacity:0.35; } }
@keyframes letrero-r-respira { 0% { transform:scale(0.9);opacity:0.35; } 16% { transform:scale(1.06);opacity:0.9; } 32% { transform:scale(0.9);opacity:0.35; } 33%, 100% { transform:scale(0.9);opacity:0.35; } }
@keyframes letrero-g-grua { 0% { transform:translateY(0); } 40% { transform:translateY(14px); } 60% { transform:translateY(14px); } 100% { transform:translateY(0); } }
@keyframes letrero-r-grua { 0% { transform:translateY(0); } 12.8% { transform:translateY(14px); } 19.2% { transform:translateY(14px); } 32% { transform:translateY(0); } 33%, 100% { transform:translateY(0); } }