/* ============================================================
   LA MARCHA DE NEÓPOLIS 🏳️‍🌈 (public/marcha.js)
   Diorama de un solo día (viernes 25/09, Día de la Diversidad): una puerta en la sala del cowork
   (Task 7b) abre una capa a pantalla completa con la ciudad en pixel art (canvas, Task 6) y la
   marcha encima (DOM, Task 7). Esta hoja cubre la puerta, el marco de la escena y el selector.
   Acento propio: el arcoíris de 6 franjas #e40303 #ff8c00 #ffed00 #008026 #004dff #750787.
   ============================================================ */

/* ---- La puerta de la ofi (Task 7b): la entrada a la marcha, en la pared de arriba del cowork ----
   Vive adentro de #tab-cowork .room-ambiance (capa decorativa con pointer-events:none): la puerta
   sola los reactiva. Posición absoluta, no mueve nada de la sala. DÓNDE Y POR QUÉ: ver el
   comentario de "LA PUERTA DE LA OFI" en marcha.js. Para moverla, tocar `right`/`top` de acá.
   La pared de arriba mide 80px (style.css, .amb-wall-top) y la puerta ocupa todo ese alto, así
   la hoja apoya en el piso mientras la ropería y los corchos cuelgan. */
#tab-cowork .room-ambiance > .marcha-puerta {
  position: absolute;
  top: 0;
  right: 14px;
  width: 48px;
  height: 80px;
  z-index: 4; /* como los .wall-decor */
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none; /* sin la sombra ni el hundido del `button` global: la puerta no se mueve */
  transform: none;
  transition: none;
  cursor: pointer;
  pointer-events: auto;
  --mp-arcoiris: linear-gradient(to bottom,
    #e40303 0 16.66%, #ff8c00 16.66% 33.33%, #ffed00 33.33% 50%,
    #008026 50% 66.66%, #004dff 66.66% 83.33%, #750787 83.33% 100%);
  --mp-luz: linear-gradient(90deg, #ff5a5a, #ffb04a, #fff27a, #57d67a, #5b8cff, #c46be0);
}
/* <=900px style.css corre los corchos a right: 8% y la esquina queda chica: la puerta pasa al
   otro lado de los corchos (8% + los ~60px del cuadro + aire), entre ellos y el centro. */
@media (max-width: 900px) {
  #tab-cowork .room-ambiance > .marcha-puerta { right: calc(8% + 72px); }
}
#tab-cowork .room-ambiance > .marcha-puerta:hover,
#tab-cowork .room-ambiance > .marcha-puerta:active { transform: none; box-shadow: none; }
#tab-cowork .room-ambiance > .marcha-puerta[hidden] { display: none; }
#tab-cowork .room-ambiance > .marcha-puerta:focus-visible { outline: 3px solid #004dff; outline-offset: -3px; } /* hacia adentro: la ambientación recorta lo que sale por arriba */

/* Cartel de salida de emergencia, con el verde cambiado por las seis franjas. */
.marcha-puerta .mp-cartel {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 3px 1px;
  background: var(--mp-arcoiris);
  border: 2px solid #000;
  box-shadow: 2px 2px 0 rgba(0,0,0,.45);
  font-family: 'Press Start 2P', monospace;
  font-size: 5px;
  line-height: 1;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
  white-space: nowrap;
}

/* Marco: mismas maderas que los cuadros (.wall-frame), sin travesaño abajo (es el umbral). */
.marcha-puerta .mp-marco {
  position: absolute;
  top: 17px;
  left: 6px;
  right: 6px;
  bottom: 0;
  background: linear-gradient(160deg, #f4e4c4 0%, #e6cfa0 100%);
  border: 3px solid #3a2412;
  border-bottom: 0;
  box-shadow: 2px 3px 0 rgba(0,0,0,.35);
  perspective: 140px;
}
/* El hueco: lo que hay afuera. Solo se ve con la hoja abierta (o entreabierta en hover). */
.marcha-puerta .mp-hueco {
  position: absolute;
  inset: 2px 2px 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    var(--mp-luz);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
  transition: filter .35s;
}
/* La hoja: bisagra a la izquierda, dos tableros, vidrio chico arriba y picaporte. */
.marcha-puerta .mp-hoja {
  position: absolute;
  inset: 2px 2px 0;
  background:
    linear-gradient(#8a5a33, #8a5a33) 4px 24px / calc(100% - 8px) 2px no-repeat,
    linear-gradient(180deg, #b98452 0%, #a8744a 100%);
  border: 2px solid #3a2412;
  border-bottom: 0;
  box-shadow: inset -3px 0 0 rgba(0,0,0,.18), inset 2px 0 0 rgba(255,230,190,.35);
  transform-origin: left center;
  transition: transform 350ms cubic-bezier(.3, .7, .2, 1);
}
.marcha-puerta .mp-vidrio {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 14px;
  border: 2px solid #3a2412;
  background: var(--mp-luz);
  animation: mp-late 2.4s ease-in-out infinite;
}
.marcha-puerta .mp-picaporte {
  position: absolute;
  right: 3px;
  top: 30px;
  width: 6px;
  height: 3px;
  background: #ffe119;
  border: 1px solid #000;
}
/* La rendija de abajo: una línea de luz de colores entre la hoja y el piso. */
.marcha-puerta .mp-rendija {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 2px;
  background: var(--mp-luz);
  animation: mp-late 2.4s ease-in-out infinite;
}
/* El reflejo en el piso de la sala, justo delante del umbral. */
.marcha-puerta .mp-luz {
  position: absolute;
  top: 100%;
  left: 4px;
  right: 4px;
  height: 9px;
  background: var(--mp-luz);
  filter: blur(4px);
  opacity: .55;
  transform-origin: top center;
  animation: mp-late-piso 2.4s ease-in-out infinite;
  transition: transform .35s, opacity .35s;
  pointer-events: none;
}
@keyframes mp-late { 0%, 100% { filter: brightness(.85) saturate(.9); } 50% { filter: brightness(1.25) saturate(1.2); } }
@keyframes mp-late-piso { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }

/* Hover: la hoja se entreabre, se asoma la marcha. Con el foco solo el ring: al volver de la
   marcha el foco queda en la puerta y tiene que verse cerrada. */
.marcha-puerta:hover .mp-hoja { transform: rotateY(28deg); }
/* Entreabierta (el intro del viernes, con la cámara encima): la hoja apenas abierta y la luz de
   colores que se derrama al piso. Va ANTES de .abierta: misma especificidad, gana la que sigue. */
.marcha-puerta::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -14px;
  right: -14px;
  height: 52px;
  background: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  -webkit-mask: linear-gradient(to bottom, #000, transparent);
  mask: linear-gradient(to bottom, #000, transparent);
  opacity: 0;
  transition: opacity .45s;
  pointer-events: none;
}
.marcha-puerta.entreabierta::after, .marcha-puerta.abierta::after { opacity: .5; }
.marcha-puerta.entreabierta .mp-hoja { transform: rotateY(40deg); }
.marcha-puerta.entreabierta .mp-hueco { filter: brightness(1.3) saturate(1.3); }
.marcha-puerta.entreabierta .mp-luz { opacity: .95; transform: scaleY(2); animation-duration: 1.2s; }
/* Abierta (al tocarla, hasta volver): la hoja gira hacia afuera y la luz inunda el umbral. */
.marcha-puerta.abierta .mp-hoja { transform: rotateY(82deg); }
.marcha-puerta.abierta .mp-hueco { filter: brightness(1.2) saturate(1.25); }
.marcha-puerta.abierta .mp-luz { animation: none; opacity: 1; transform: scaleY(2.4); }

/* ---- La capa a pantalla completa: el diorama ---- */
.marcha-capa {
  position: fixed;
  inset: 0;
  z-index: 14000; /* por debajo de ¡Feliz Primavera! (20000, spring-finale.css), no coinciden */
  background: #120a24;
  display: grid;
  place-items: center;
  padding: 16px;
}
html.marcha-abierta body { overflow: hidden; }

/* La escena: proporción fija 16:9, se escala entera a la ventana. `container-type: size` es la
   unidad de referencia para el tamaño de fuente/HUD de Task 6 y 7 (container queries). */
.marcha-stage {
  width: min(100%, (100vh - 32px) * 16 / 9);
  aspect-ratio: 16 / 9;
  position: relative;
  container-type: size;
  overflow: hidden;
  border: 4px solid #000;
  box-shadow: 8px 8px 0 #000;
  background: #000;
  --px: calc(100cqw / 384); /* 1 px de arte del lienzo de 384×216 */
  --nube: #ffffff;
}

/* Capa de fondo: dos canvas superpuestos (A/B), uno se apaga y el otro se prende con fundido
   cruzado (Task 6 decide cuándo). image-rendering: pixelated mantiene el arte nítido al escalar. */
.marcha-cielo { position: absolute; inset: 0; z-index: 0; } /* contexto propio: los z-index de A/B no tapan a los actores */
.marcha-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 2.5s linear;
}
.marcha-canvas.activo { opacity: 1; z-index: 1; }
.marcha-canvas.arriba { z-index: 2; } /* el nuevo aparece encima del viejo, que sigue opaco: sin bajón */

/* Capa de actores: DOM encima del canvas (Task 7 la llena: la marcha, la bandera, los carteles). */
.marcha-actores {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate; /* los z-index de la marcha y el LED quedan adentro: el HUD siempre encima */
}

/* HUD: cerrar y elegir cartel. `pointer-events: none` en el
   contenedor y `auto` en cada control: el resto de la escena queda clickeable a través del HUD. */
.marcha-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.marcha-hud > button {
  position: absolute;
  pointer-events: auto;
  font-family: 'Press Start 2P', monospace;
  background: #ffe119;
  color: #000;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
  transition: transform .06s steps(1), box-shadow .06s steps(1);
}
.marcha-hud > button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #000; }
.marcha-hud > button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.marcha-hud > button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.marcha-cerrar {
  top: 10px;
  right: 10px;
  padding: 8px 10px;
  font-size: .58rem;
  letter-spacing: .02em;
}
.marcha-elegir {
  right: 10px;
  bottom: 10px;
  padding: 8px 10px;
  font-size: .58rem;
  letter-spacing: .02em;
}
.marcha-elegir[hidden] { display: none; }

/* ---- El puesto de gorritos (marcha.js, "EL PUESTO DE GORRITOS") ----
   El carrito está pintado en el canvas; esto es el botón transparente encima (left/top/width/height
   en --px desde JS) y el cartel del frente. Pisa el look de .marcha-hud > button: el botón no se
   ve, lo que se mueve es el cartel. */
.marcha-hud > .marcha-puesto {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: none;
}
.marcha-hud > .marcha-puesto[hidden] { display: none; }
.marcha-hud > .marcha-puesto:hover,
.marcha-hud > .marcha-puesto:active { transform: none; box-shadow: none; }
.marcha-hud > .marcha-puesto:focus-visible { outline: max(2px, calc(var(--px) * .8)) solid #fff; outline-offset: calc(var(--px) * .5); }
.marcha-puesto.ya { cursor: default; }
.mpu-cartel {
  position: absolute;
  left: calc(var(--px) * 4);
  top: calc(var(--px) * 15.2);
  width: calc(var(--px) * 48);
  height: calc(var(--px) * 7);
  box-sizing: border-box;
  display: grid;
  place-items: center;
  background: #fdf6e3;
  border: calc(var(--px) * .6) solid #000;
  box-shadow: calc(var(--px) * .6) calc(var(--px) * .6) 0 #000;
  font-family: 'Press Start 2P', monospace;
  font-size: calc(var(--px) * 2.3);
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: #e6194b;
  transition: transform .06s steps(1), box-shadow .06s steps(1);
}
.marcha-puesto.ya .mpu-cartel { color: #008026; }
.marcha-puesto:not(.ya):hover .mpu-cartel,
.marcha-puesto:not(.ya):focus-visible .mpu-cartel {
  background: #ffe119;
  color: #000;
  transform: translate(calc(var(--px) * -.5), calc(var(--px) * -.8));
  box-shadow: calc(var(--px) * 1.1) calc(var(--px) * 1.4) 0 #000;
}
.marcha-puesto:not(.ya):active .mpu-cartel { transform: translate(calc(var(--px) * .4), calc(var(--px) * .4)); box-shadow: 0 0 0 #000; }

/* El aviso del puesto: una placa crema con la franja arcoíris, encima de la calle y del puesto. */
.marcha-aviso {
  position: absolute;
  left: calc(var(--px) * 162);
  bottom: calc(var(--px) * 31);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(calc(var(--px) * 190), calc(100% - 20px));
  box-sizing: border-box;
  padding: calc(var(--px) * 5.5) calc(var(--px) * 5) calc(var(--px) * 4);
  background:
    linear-gradient(90deg,
      #e40303 0 16.66%, #ff8c00 16.66% 33.33%, #ffed00 33.33% 50%,
      #008026 50% 66.66%, #004dff 66.66% 83.33%, #750787 83.33% 100%) top / 100% calc(var(--px) * 2) no-repeat,
    #fff8e8;
  border: max(3px, calc(var(--px) * 1)) solid #000;
  box-shadow: max(4px, calc(var(--px) * 1.5)) max(4px, calc(var(--px) * 1.5)) 0 #000;
  text-align: center;
  pointer-events: none;
  z-index: 3;
}
.marcha-aviso[hidden] { display: none; }
.marcha-aviso.visible { animation: marcha-aviso-pop .34s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes marcha-aviso-pop {
  from { transform: translateX(-50%) translateY(calc(var(--px) * 6)) scale(.9); opacity: 0; }
  to   { transform: translateX(-50%); opacity: 1; }
}
.marcha-aviso-titulo {
  font-family: 'Press Start 2P', monospace;
  font-size: max(9px, calc(var(--px) * 5));
  line-height: 1.3;
  color: #000;
  text-shadow: max(1px, calc(var(--px) * .5)) max(1px, calc(var(--px) * .5)) 0 #ffe119;
}
.marcha-aviso.error .marcha-aviso-titulo { color: #e6194b; text-shadow: none; }
.marcha-aviso-texto {
  margin-top: max(6px, calc(var(--px) * 2.5));
  font-family: 'Press Start 2P', monospace;
  font-size: max(7px, calc(var(--px) * 2.4));
  line-height: 1.8;
  color: #2b2233;
  text-wrap: balance;
}
.marcha-aviso-texto:empty { display: none; }

/* El gorrito arcoíris sobre el animalito (mismo SVG de 12×11 que la silla). El emoji ocupa
   12 px de arte; el gorro apoya el borde tejido en la frente. */
.mch-bicho-wrap { position: relative; }
.mch-bicho-wrap.con-gorro { margin-top: calc(var(--px) * 4); } /* el cartel y el VOS suben: no pisan el pompón */
.mch-gorro {
  position: absolute;
  left: 50%;
  top: calc(var(--px) * -5.6);
  width: calc(var(--px) * 10.5);
  transform: translateX(-50%);
  pointer-events: none;
}
.mch-gorro .gorrito-svg { display: block; width: 100%; height: auto; }

/* ---- Selector de cartel: panel crema sobre la escena ---- */
.marcha-selector {
  position: absolute;
  right: 10px;
  bottom: 56px;
  width: min(340px, 100% - 20px);
  max-height: calc(100% - 76px);
  overflow-y: auto;
  background: #fff8e8;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  padding: 10px;
  pointer-events: auto;
}
.marcha-selector-titulo {
  font-family: 'Press Start 2P', monospace;
  font-size: .58rem;
  margin-bottom: 8px;
  color: #000;
}
.marcha-selector-lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.marcha-opcion {
  font-family: 'Press Start 2P', monospace;
  font-size: .5rem;
  line-height: 1.35;
  text-align: left;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  padding: 6px 7px;
  cursor: pointer;
  transition: transform .06s steps(1), box-shadow .06s steps(1);
}
.marcha-opcion:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #000; }
.marcha-opcion:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #000; }
.marcha-opcion:focus-visible { outline: 3px solid #004dff; outline-offset: 2px; }
.marcha-opcion.elegido { background: #e6194b; color: #fff8e8; border-color: #000; }
.marcha-opcion.sin { border-style: dashed; }
.marcha-selector-error {
  grid-column: 1 / -1;
  margin-top: 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: .5rem;
  color: #e6194b;
}

/* ---- La ciudad (Task 6): nubes y textos de los pisos ----
   Todo se mide en --px (1 px de arte) así los textos quedan clavados a sus pisos en cualquier
   tamaño de ventana. Posiciones = coordenadas del lienzo de 384×216 (ver marcha.js). */
.marcha-stage[data-fase="manana"]    { --nube: #ffffff; }
.marcha-stage[data-fase="mediodia"]  { --nube: #ffffff; }
.marcha-stage[data-fase="tarde"]     { --nube: #fff1d8; }
.marcha-stage[data-fase="atardecer"] { --nube: #ffb0c4; --carton: #f6dccf; }
.marcha-stage[data-fase="noche"]     { --nube: #3b3478; --carton: #cbc4da; }
.marcha-stage[data-fase="amanecer"]  { --nube: #ffcdb8; --carton: #f3e0d4; }

.marcha-nubes { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.marcha-nube {
  position: absolute;
  left: 0;
  width: calc(var(--px) * 2);
  height: calc(var(--px) * 2);
  color: var(--nube);
  opacity: .92;
  transition: color 2.5s linear;
  animation: marcha-nube linear infinite;
  will-change: transform;
}
@keyframes marcha-nube {
  from { transform: translateX(-12cqw); }
  to   { transform: translateX(104cqw); }
}

.marcha-pisos { position: absolute; inset: 0; }
.marcha-pisos > * {
  position: absolute;
  font-family: 'Press Start 2P', monospace;
  line-height: 1.3;
  text-transform: none;
}
.marcha-placa {
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * .6);
  background: #fdf6e3;
  color: #000;
  border: calc(var(--px) * .8) solid #000;
  box-shadow: calc(var(--px) * .8) calc(var(--px) * .8) 0 #000;
  padding: calc(var(--px) * .8) calc(var(--px) * 1.4);
}
.marcha-placa-titulo { font-size: calc(var(--px) * 3); }
.marcha-placa-sub { font-size: calc(var(--px) * 2.5); color: #3a3a3a; white-space: pre-line; }
.marcha-p3 { left: calc(var(--px) * 142); top: calc(var(--px) * 52.5); }
.marcha-p1 { left: calc(var(--px) * 142); top: calc(var(--px) * 105); width: calc(var(--px) * 51); }
.marcha-p3 .marcha-placa-sub { color: #e6194b; }

/* P2: el contador vive escrito con tiza en el pizarrón. */
.marcha-pizarron {
  left: calc(var(--px) * 147);
  top: calc(var(--px) * 82);
  width: calc(var(--px) * 80);
  height: calc(var(--px) * 16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--px) * 3);
  box-sizing: border-box;
}
.marcha-pizarron-txt {
  font-size: calc(var(--px) * 3);
  color: #f4f1e6;
  width: calc(var(--px) * 44);
  line-height: 1.35;
  text-shadow: calc(var(--px) * .4) 0 0 rgba(244, 241, 230, .35);
}
.marcha-pizarron-num {
  font-size: calc(var(--px) * 12);
  line-height: 1;
  color: #ff3b4e;
  text-shadow: calc(var(--px) * .6) calc(var(--px) * .6) 0 #7a0a1c;
}

/* PB: cartel de neón sobre el sillón; de noche brilla más. */
.marcha-neon {
  left: calc(var(--px) * 168);
  top: calc(var(--px) * 131);
  width: calc(var(--px) * 60);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px) * 1);
  padding: calc(var(--px) * 1) 0;
  border: calc(var(--px) * .6) solid #ff5fd2;
  border-radius: calc(var(--px) * 1.5);
  background: rgba(40, 8, 40, .82);
  color: #ff5fd2;
  text-shadow: 0 0 calc(var(--px) * 1) #ff5fd2;
  box-shadow: 0 0 calc(var(--px) * 1.5) rgba(255, 95, 210, .45);
  transition: text-shadow 2.5s linear, box-shadow 2.5s linear;
}
.marcha-neon-titulo { font-size: calc(var(--px) * 3); }
.marcha-neon-sub { font-size: calc(var(--px) * 2.5); color: #ffe6f7; }
.marcha-stage[data-fase="atardecer"] .marcha-neon,
.marcha-stage[data-fase="amanecer"] .marcha-neon {
  text-shadow: 0 0 calc(var(--px) * 1.5) #ff5fd2, 0 0 calc(var(--px) * 3) #ff5fd2;
}
.marcha-stage[data-fase="noche"] .marcha-neon {
  text-shadow: 0 0 calc(var(--px) * 1.5) #ff5fd2, 0 0 calc(var(--px) * 4) #ff5fd2, 0 0 calc(var(--px) * 8) #ff2fc0;
  box-shadow: 0 0 calc(var(--px) * 3) rgba(255, 95, 210, .7), 0 0 calc(var(--px) * 8) rgba(255, 95, 210, .35);
}

/* ---- Cartel LED en la azotea de Neópolis (x 146 a 246, y 14 a 42) ---- */
.marcha-led {
  position: absolute;
  left: calc(var(--px) * 146);
  top: calc(var(--px) * 14);
  width: calc(var(--px) * 100);
  height: calc(var(--px) * 28);
  box-sizing: border-box;
  background: #140a0a;
  border: calc(var(--px) * 2) solid #000;
  box-shadow: calc(var(--px) * 1) calc(var(--px) * 1) 0 rgba(0, 0, 0, .55);
  display: grid;
  place-items: center;
  overflow: hidden;
  z-index: 1;
}
.marcha-led-txt {
  font-family: 'Press Start 2P', monospace;
  font-size: calc(var(--px) * 5);
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  color: #ffb13b;
  text-shadow: 0 0 calc(var(--px) * 2) #ff7a00;
  padding: 0 calc(var(--px) * 1);
  transition: text-shadow 2.5s linear;
}
.led-palabra { white-space: nowrap; display: inline-block; }
/* Máscara de puntitos encima: el texto se lee como una matriz de LEDs. */
.marcha-led::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, transparent 52%, rgba(20, 10, 10, .72) 64%);
  background-size: var(--px) var(--px);
  pointer-events: none;
}
/* Apagado de 200 ms (sin letras) y después se prende letra por letra. */
.marcha-led-txt.animada { animation: led-apagado 200ms steps(2); }
.marcha-led-txt.animada .led-letra { animation: led-on 60ms steps(1) both; }
@keyframes led-apagado { from, to { opacity: .15; } }
@keyframes led-on {
  from { color: #3a1a0a; text-shadow: none; }
  to   { color: #ffb13b; }
}
.marcha-stage[data-fase="atardecer"] .marcha-led-txt {
  color: #ffc25a;
  text-shadow: 0 0 calc(var(--px) * 2) #ff7a00, 0 0 calc(var(--px) * 4) rgba(255, 122, 0, .6);
}
.marcha-stage[data-fase="noche"] .marcha-led-txt {
  color: #ffcf70;
  text-shadow: 0 0 calc(var(--px) * 2) #ff8a1a, 0 0 calc(var(--px) * 5) #ff7a00, 0 0 calc(var(--px) * 9) rgba(255, 90, 0, .5);
}
.marcha-stage[data-fase="noche"] .marcha-led { box-shadow: 0 0 calc(var(--px) * 6) rgba(255, 122, 0, .35); }

/* ---- La marcha: filas, cruce en loop ----
   Cada .mch arranca `--entrada` px de arte fuera de cuadro a la izquierda y recorre `--largo`;
   su lugar en la cola lo da su animation-delay (JS). La fila escala desde los pies. */
.marcha-filas { position: absolute; inset: 0; z-index: 2; }
.marcha-fila { position: absolute; inset: 0; }
.marcha-fila[hidden] { display: none; }
.mch {
  position: absolute;
  left: 0;
  bottom: calc(var(--px) * (216 - var(--y)));
  width: calc(var(--px) * var(--ancho, 34));
  display: flex;
  justify-content: center;
  animation: marcha-cruce var(--dur, 50s) linear infinite;
  will-change: transform;
}
@keyframes marcha-cruce {
  from { transform: translateX(calc(var(--px) * (0 - var(--entrada)))); }
  to   { transform: translateX(calc(var(--px) * (var(--largo) - var(--entrada)))); }
}
.mch-cuerpo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(var(--escala, 1));
  transform-origin: 50% 100%;
}
.mch.offline .mch-cuerpo { opacity: .7; }
/* El paso de marcha: rebote de 2 px de arte en dos tiempos. */
.mch-sube {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: mch-paso .5s steps(2) infinite;
}
@keyframes mch-paso {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(var(--px) * -2)); }
}
.mch-bicho {
  font-size: calc(var(--px) * 12);
  line-height: 1;
  height: calc(var(--px) * 12);
  scale: -1 1; /* los emoji miran a la izquierda; la marcha va a la derecha */
  filter: drop-shadow(calc(var(--px) * -.8) calc(var(--px) * .8) 0 rgba(0, 0, 0, .35));
}
.mch-pancarta {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 100%;
  animation: mch-balanceo 1.2s ease-in-out infinite alternate;
}
.mch:nth-child(2n) .mch-pancarta { animation-delay: -.6s; }
.mch:nth-child(3n) .mch-pancarta { animation-duration: 1.4s; }
@keyframes mch-balanceo {
  from { transform: rotate(-3deg); }
  to   { transform: rotate(3deg); }
}
.mch-cartel {
  background: var(--carton, #fdf6e3);
  border: var(--px) solid #000;
  box-shadow: var(--px) var(--px) 0 #000;
  padding: calc(var(--px) * 1.2) calc(var(--px) * 1.5);
  max-width: calc(var(--px) * 44);
  width: max-content;
  box-sizing: border-box;
  text-align: center;
}
.mch-cartel-txt {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: calc(var(--px) * 3);
  line-height: 1.3;
  color: #000;
  text-wrap: balance;
}
.mch-palo {
  width: var(--px);
  height: calc(var(--px) * var(--palo, 5));
  background: #7e4e2c;
  box-shadow: calc(var(--px) * .5) 0 0 #4a2c14;
}
.mch-nombre {
  position: absolute;
  top: calc(100% + var(--px) * .5);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'Press Start 2P', monospace;
  font-size: calc(var(--px) * 2.5);
  line-height: 1;
  padding: calc(var(--px) * .6) calc(var(--px) * 1);
  background: var(--mch-color, #ffe119);
  /* Blanco con sombra negra (pedido de Seba, 24/09): se lee mejor sobre casi todos los colores.
     Los colores muy claros llevan .claro (lo decide nodoPersona por luminancia) y vuelven a negro. */
  color: #fff;
  text-shadow: calc(var(--px) * .4) calc(var(--px) * .4) 0 #000;
  border: calc(var(--px) * .5) solid #000;
}
.mch-nombre.claro,
.mch-nombre-mascota { color: #000; text-shadow: calc(var(--px) * .4) calc(var(--px) * .4) 0 #fff; }
.mch-nombre-mascota { background: #fdf6e3; }
.mch.yo .mch-nombre { outline: calc(var(--px) * .6) solid #ffe119; }
/* VOS: flechita amarilla arriba de todo, latiendo. */
.mch-vos {
  position: relative;
  font-family: 'Press Start 2P', monospace;
  font-size: calc(var(--px) * 3);
  line-height: 1;
  color: #000;
  background: #ffe119;
  border: calc(var(--px) * .6) solid #000;
  padding: calc(var(--px) * .8) calc(var(--px) * 1);
  margin-bottom: calc(var(--px) * 3);
  animation: mch-vos .8s steps(2) infinite;
}
.mch-vos::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: calc(var(--px) * 2) solid transparent;
  border-top-color: #ffe119;
  filter: drop-shadow(0 calc(var(--px) * .6) 0 #000);
}
@keyframes mch-vos {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(var(--px) * -1.5)); }
}
/* El Michi (sheet 64×48, 12 frames de 16×16) y el perrito: sprites mirando a la derecha. */
.mch-michi { width: calc(var(--px) * 16); height: calc(var(--px) * 16); }
.mch-michi-sprite, .mch-perro-sprite {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.mch-michi-sprite {
  background-image: url('/sprites/michi.png');
  background-size: calc(var(--px) * 64) calc(var(--px) * 48);
  transform: scaleX(-1);
}
.mch-perro-sprite.mira-izq { transform: scaleX(-1); }

/* La bandera larguísima: tela de 12 px de arte (6 × 2) entre dos mástiles. */
.mch-bandera { height: calc(var(--px) * 26); align-items: flex-start; z-index: 1; }
.mch-bandera-tela {
  display: flex;
  width: calc(var(--px) * (var(--ancho) - 8));
  margin-top: calc(var(--px) * 3);
}
.mch-bandera-seg {
  flex: 1;
  height: calc(var(--px) * 12);
  background: linear-gradient(to bottom,
    #e40303 0 16.66%, #ff8c00 16.66% 33.33%, #ffed00 33.33% 50%,
    #008026 50% 66.66%, #004dff 66.66% 83.33%, #750787 83.33% 100%);
  box-shadow: 0 calc(var(--px) * -.6) 0 #000, 0 calc(var(--px) * .6) 0 #000;
  animation: marcha-onda 1.6s ease-in-out infinite;
}
.mch-bandera-seg:nth-child(odd) { filter: brightness(1.08); }
@keyframes marcha-onda {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--px) * 2)); }
}
.mch-mastil {
  width: calc(var(--px) * 1.5);
  height: 100%;
  background: #d8d8d8;
  box-shadow: inset calc(var(--px) * -.5) 0 0 #9a9a9a;
  position: relative;
}
.mch-mastil::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(var(--px) * -1.5);
  transform: translateX(-50%);
  width: calc(var(--px) * 3);
  height: calc(var(--px) * 2);
  background: #ffe119;
  border: calc(var(--px) * .4) solid #000;
}

/* Pestaña oculta o capa cerrada: nada de animaciones corriendo de fondo (Task 6/7 las agregan). */
html.marcha-pausada .marcha-capa * { animation-play-state: paused !important; }

/* ---- El intro del viernes (marcha.js, "EL INTRO DEL VIERNES") ----
   Un foco de iris sobre la puerta, con el borde en las seis franjas, y un cartelito debajo con la
   flechita apuntándole. Lo único llamativo es el anillo; el cartel es el de siempre de la ofi. */
@property --mi-x { syntax: '<length>'; inherits: false; initial-value: 50vw; }
@property --mi-y { syntax: '<length>'; inherits: false; initial-value: 50vh; }
@property --mi-r { syntax: '<length>'; inherits: false; initial-value: 60px; }
.marcha-intro { position: fixed; inset: 0; z-index: 13500; } /* debajo del diorama (14000) */
.marcha-intro[hidden] { display: none; }
#tab-cowork.marcha-intro-tab { overflow: hidden; } /* la sala escalada no genera scroll */
/* El cartel del cumple flota fijo arriba al medio (z 9600): durante el zoom se veía por el agujero
   del foco y tapaba la puerta (prod, cumple de Noe, 2026-09-25). Se esconde solo mientras dura el
   intro y vuelve solo cuando se saca la clase. */
html.marcha-intro-on .birthday-banner { visibility: hidden; }
.mi-foco {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: default;
  --mi-anillo: 5px;
  background: radial-gradient(circle at var(--mi-x) var(--mi-y),
    transparent 0 var(--mi-r),
    #000 var(--mi-r) calc(var(--mi-r) + 4px),
    #e40303 calc(var(--mi-r) + 4px) calc(var(--mi-r) + 4px + var(--mi-anillo)),
    #ff8c00 calc(var(--mi-r) + 4px + var(--mi-anillo)) calc(var(--mi-r) + 4px + 2 * var(--mi-anillo)),
    #ffed00 calc(var(--mi-r) + 4px + 2 * var(--mi-anillo)) calc(var(--mi-r) + 4px + 3 * var(--mi-anillo)),
    #008026 calc(var(--mi-r) + 4px + 3 * var(--mi-anillo)) calc(var(--mi-r) + 4px + 4 * var(--mi-anillo)),
    #004dff calc(var(--mi-r) + 4px + 4 * var(--mi-anillo)) calc(var(--mi-r) + 4px + 5 * var(--mi-anillo)),
    #750787 calc(var(--mi-r) + 4px + 5 * var(--mi-anillo)) calc(var(--mi-r) + 4px + 6 * var(--mi-anillo)),
    #000 calc(var(--mi-r) + 4px + 6 * var(--mi-anillo)) calc(var(--mi-r) + 8px + 6 * var(--mi-anillo)),
    rgba(16, 9, 34, .86) calc(var(--mi-r) + 8px + 6 * var(--mi-anillo)));
}
.mi-foco.prendido { opacity: 1; }

.mi-cartel {
  position: absolute;
  width: min(420px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 22px 22px 20px;
  background: #fff8e8;
  color: #000;
  border: 4px solid #000;
  box-shadow: 8px 8px 0 #000;
  opacity: 0;
}
.mi-cartel.visible { opacity: 1; animation: mi-pop .32s cubic-bezier(.2, 1.4, .4, 1) both; }
/* La flechita: triángulo negro y encima uno crema, apuntando a la puerta. */
.mi-cartel::before, .mi-cartel::after {
  content: '';
  position: absolute;
  left: var(--flecha-x, 50%);
  transform: translateX(-50%);
  border-style: solid;
  border-color: transparent;
}
.mi-cartel::before { bottom: 100%; border-width: 0 16px 18px; border-bottom-color: #000; }
.mi-cartel::after { bottom: calc(100% - 5px); border-width: 0 11px 13px; border-bottom-color: #fff8e8; }
.mi-titulo {
  margin: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: .02em;
  text-wrap: balance;
}
.mi-nowrap { white-space: nowrap; }
.mi-texto {
  margin: 14px 0 20px;
  font-family: 'Press Start 2P', monospace; /* todo el intro en la letra de la app, chica y aireada */
  font-size: 9px;
  line-height: 2;
  color: #2b2233;
}
.mi-botones { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.mi-botones button {
  font-family: 'Press Start 2P', monospace;
  font-size: .62rem;
  line-height: 1.4;
  padding: 12px 14px;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
}
.mi-botones button:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
.mi-botones button:active { transform: translate(4px, 4px); box-shadow: none; }
.mi-botones button:focus-visible { outline: 3px solid #004dff; outline-offset: 3px; }
.mi-salir { background: #e6194b; color: #fff; }
.mi-despues { background: #fff; color: #000; }
@keyframes mi-pop { from { transform: translateY(12px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-width: 600px) {
  .mi-cartel { padding: 18px 16px 16px; box-shadow: 6px 6px 0 #000; }
  .mi-titulo { font-size: .78rem; }
  .mi-texto { font-size: 8px; line-height: 1.9; margin: 12px 0 16px; }
  .mi-botones { gap: 10px; }
  .mi-botones button { font-size: .52rem; padding: 10px 10px; }
  .mi-foco { --mi-anillo: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .marcha-canvas, .marcha-nube, .marcha-neon { transition: none; }
  .marcha-nube { animation: none; transform: translateX(var(--quieta, 20cqw)); }
  .mch, .mch-sube, .mch-pancarta, .mch-vos, .mch-bandera-seg, .marcha-led-txt, .led-letra { animation: none !important; }
  .marcha-led-txt { transition: none; }
  .marcha-hud > button, .marcha-opcion, .mpu-cartel { transition: none; }
  .marcha-aviso.visible { animation: none; }
  .marcha-puerta .mp-hoja, .marcha-puerta .mp-hueco, .marcha-puerta .mp-luz { transition: none; }
  .marcha-puerta .mp-vidrio, .marcha-puerta .mp-rendija, .marcha-puerta .mp-luz { animation: none; }
  .marcha-puerta::after, .mi-foco { transition: none !important; }
  .mi-cartel.visible { animation: none; }
}

@media (max-width: 600px) {
  .marcha-selector-lista { grid-template-columns: 1fr; }
  /* En el celu la escena mide ~360px de ancho: los botones más chicos, que no tapen el LED. */
  .marcha-cerrar, .marcha-elegir { padding: 6px 6px; font-size: .38rem; letter-spacing: 0; }
  .marcha-hud > button { box-shadow: 2px 2px 0 #000; }
  .marcha-cerrar { top: 6px; right: 6px; }
  .marcha-elegir { bottom: 6px; right: 6px; }
}