/* Mapa vivo · Halloween (vía elevada, tren bala, estación, caminantes, Brotexpreso) */
body.tema-halloween .mapa.mapa-hw, .mapa.mapa-hw {
  background: #1E2240 url("/static/universo/arte/mapa_hw/fondo_mapa_zonas_hw.webp") 50% 100% / cover no-repeat;
}
.mapa { --via: 13%; }
/* vía elevada: tablero + pilares repetidos en CSS (provisional hasta via_elevada_tramo_hw.png) */
.via-elevada { position: absolute; left: 0; right: 0; top: 0; height: var(--via); z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 46px, #6a4a3a 46px 58px, transparent 58px 120px) 0 calc(var(--via) * .0) / 120px 100% repeat-x;
  -webkit-mask: linear-gradient(180deg, transparent 0 58%, #000 58%); mask: linear-gradient(180deg, transparent 0 58%, #000 58%); }
.via-elevada { -webkit-mask: none; mask: none; background: none; }
.via-elevada::before { content: ""; position: absolute; left: 0; right: 0; top: 58%; bottom: 0;
  background: repeating-linear-gradient(90deg, transparent 0 52px, #5b4a6e 52px 64px, transparent 64px 130px); border-top: 0; }
.via-tablero { position: absolute; left: 0; right: 0; top: 46%; height: 12%; min-height: 10px; background: #d9c6a5; border: 2px solid #8C5A34; border-left: 0; border-right: 0;
  box-shadow: inset 0 3px 0 #8C5A34; }
.via-picado { position: absolute; left: 0; right: 0; top: 58%; height: 22px; display: flex; justify-content: space-around; }
.via-picado i { width: 22px; height: 18px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%); transform-origin: 50% 0;
  background: hsl(calc(var(--i) * 0deg + 28deg) 88% 56%); animation: mece 3.2s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.37s); }
.via-picado i:nth-child(4n+2) { background: #8E6BBF; } .via-picado i:nth-child(4n+3) { background: #9BD15A; } .via-picado i:nth-child(4n) { background: #F5B6A7; }
@keyframes mece { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
/* tren bala */
.tren-bala { position: absolute; top: calc(var(--via) * .46 - 30px); left: 0; z-index: 3; pointer-events: none; width: min(780px, 70vw); transform: translateX(-110%); }
.tren-bala svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
.tren-bala.pasando { animation: tren 6.4s cubic-bezier(.45,.05,.55,.95) forwards; }
@keyframes tren { 0% { transform: translateX(-110%); } 45% { transform: translateX(calc(50cqw - 60%)); } 55% { transform: translateX(calc(50cqw - 52%)); } 100% { transform: translateX(calc(100cqw + 10%)); } }
.mapa { container-type: inline-size; }
/* caminantes */
.capa-caminantes { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.caminante { position: absolute; width: 44px; height: 44px; transform: translate(-50%, -88%); }
.caminante::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -3px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.25); }
.caminante .cuerpo { display: block; width: 100%; height: 100%; animation: paso .42s ease-in-out infinite alternate; }
.caminante img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.caminante.izq .cuerpo { scale: -1 1; }
.caminante.parado .cuerpo { animation: respira 1.6s ease-in-out infinite alternate; }
@keyframes paso { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-3px) rotate(4deg); } }
@keyframes respira { from { transform: scaleY(1); } to { transform: scaleY(.97); } }
.caminante.con-hoja .cuerpo { animation: none; }
.hoja-sprite { display: block; width: 100%; height: 100%; background-size: 600% 100%; animation: hoja4 .6s steps(4) infinite; }
.caminante.parado .hoja-sprite { animation: parpadeo 2.4s steps(1) infinite; }
@keyframes hoja4 { from { background-position: 0 0; } to { background-position: -400% 0; } }
@keyframes parpadeo { 0%, 88% { background-position: -400% 0; } 89%, 100% { background-position: -500% 0; } }
@media (min-width: 1024px) { .caminante { width: 56px; height: 56px; } }
/* faroles que parpadean */
.farol-mapa { position: absolute; width: clamp(18px, 2.4vw, 30px); transform: translate(-50%, -100%); z-index: 2; pointer-events: none;
  animation: farol 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }
@keyframes farol { 0%, 100% { filter: drop-shadow(0 0 6px rgba(255,200,90,.9)) brightness(1.05); } 47% { filter: drop-shadow(0 0 2px rgba(255,200,90,.4)) brightness(.85); } 52% { filter: drop-shadow(0 0 10px rgba(255,210,110,1)) brightness(1.15); } }
/* humo */
.edificio .humo { position: absolute; left: 62%; top: -2px; width: 20px; height: 40px; pointer-events: none; }
.humo i { position: absolute; bottom: 0; left: 4px; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,250,243,.75); animation: humo 3.6s ease-out infinite; }
.humo i:nth-child(2) { animation-delay: -1.2s; } .humo i:nth-child(3) { animation-delay: -2.4s; }
@keyframes humo { from { transform: translate(0, 0) scale(.6); opacity: .9; } to { transform: translate(8px, -34px) scale(1.6); opacity: 0; } }
/* hojas que caen */
.capa-hojas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; }
.hoja { position: absolute; top: -20px; left: calc(var(--i) * 12.5% + 4%); width: 12px; height: 12px; border-radius: 0 70% 0 70%;
  background: #F28C28; opacity: .85; animation: cae 11s linear infinite; animation-delay: calc(var(--i) * -1.4s); }
.hoja:nth-child(3n) { background: #c9572b; } .hoja:nth-child(3n+1) { background: #e8b23a; }
@keyframes cae { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(18px, 25cqh) rotate(90deg); } 50% { transform: translate(-14px, 50cqh) rotate(180deg); } 75% { transform: translate(16px, 75cqh) rotate(270deg); } 100% { transform: translate(0, 105cqh) rotate(360deg); } }
.mapa { container-type: size; }
@media (max-width: 599px) { .hoja:nth-child(n+5) { display: none; } }
/* insignias del zip en vez de la píldora «Muy pronto» */
.insignia-estado { position: absolute; top: -4px; right: 6px; width: 28px; height: 28px; pointer-events: none; }
.edificio.est-cerrado .sprite img { filter: grayscale(.7) opacity(.75); }
.edificio.ed-estacion { z-index: 3; }
/* sin movimiento si el aparato lo pide */
@media (prefers-reduced-motion: reduce) {
  .via-picado i, .farol-mapa, .humo i, .hoja, .caminante .cuerpo, .hoja-sprite { animation: none !important; }
  .hoja { display: none; }
  .tren-bala { transform: translateX(calc(50cqw - 55%)); }
}
/* ajustes */
.mapa .banner-mapa { top: auto; bottom: 8px; }
.edificio img.insignia-estado { position: absolute; top: -4px; right: 4px; width: 28px; height: 28px; max-height: 28px; margin: 0; }
.tren-bala, .tren-bala.pasando { width: 78cqw; }
.via-elevada { height: var(--via); }
/* Brotexpreso y andén de cartas (rieles a ras de suelo del fondo) */
.anden-cartas { position: absolute; width: clamp(70px, 13cqw, 120px); transform: translate(-50%, -78%); z-index: 3; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
.brotexpreso { position: absolute; left: 0; top: 0; display: none; z-index: 4; pointer-events: none; transform-origin: 50% 50%; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
.mapa .banner-mapa { top: calc(var(--via) + 6px); bottom: auto; }
.emoji-ed { display: block; font-size: 40px; line-height: 1; text-align: center; background: rgba(255,250,243,.85); border-radius: 50%; width: 58px; height: 58px; line-height: 58px; margin: 0 auto; }
@media (prefers-reduced-motion: reduce) { .brotexpreso { display: none !important; } }
/* ---- Arte de MAPA_ANIMADO (oct 2026): vía elevada, estación y tren bala ----
   --vh = alto de la franja de arriba. Misma escala para tramo, estación y tren (como vienen exportados):
   tramo 1024x256 con riel en y≈64; estación 1024x1024 con riel en y≈340; tren 1024x384 con ruedas en y=368. */
.mapa { --vh: 13cqh; --est-x: 50%; }
.via-elevada.con-arte { height: calc(var(--vh) * 1.12); background: url("/static/universo/arte/mapa_hw/via_elevada_tramo_hw.webp") 0 calc(var(--vh) * .6) / auto calc(var(--vh) * .5) repeat-x; }
.via-elevada.con-arte::before { display: none; }
.estacion-via { position: absolute; left: var(--est-x); top: calc(var(--vh) * .06); width: calc(var(--vh) * 2); transform: translateX(-50%); z-index: 2; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(0,0,0,.3)); }
.tren-bala.con-arte, .tren-bala.con-arte.pasando { top: 0; width: max-content; height: calc(var(--vh) * .75); display: flex; }
.tren-bala.con-arte img { height: 100%; width: auto; display: block; margin-left: calc(var(--vh) * -.05); filter: drop-shadow(0 3px 2px rgba(0,0,0,.3)); }
.mapa-hw .edificio.ed-estacion .emoji-ed { visibility: hidden; height: calc(var(--vh) * 1.1); }
/* estación: el botón cubre el dibujo de la estación (transparente) y deja el letrero debajo */
.mapa-hw .edificio.ed-estacion { left: var(--est-x) !important; top: calc(var(--vh) * .15) !important; transform: translate(-50%, 0); width: calc(var(--vh) * 2); }
.mapa-hw .edificio.ed-estacion .emoji-ed { visibility: hidden; width: 100%; height: calc(var(--vh) * 1.6); border-radius: 12px; }
.mapa-hw .edificio.ed-estacion .letrero { width: max-content; max-width: 140px; margin: 0 auto; }
.mapa-hw .edificio.ed-estacion .insignia-estado { top: calc(var(--vh) * .9); right: 8%; }
/* aviso de noche: pastilla pequeña debajo de la estación, sin tapar la vía */
.mapa-hw .banner-mapa { top: auto; bottom: 10px; left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: 92%; font-size: 13px; padding: 4px 12px; z-index: 7; }
/* ---- Ajustes de celular (oct 2026, captura de Luis a 390 px) ----
   1) El aviso de noche ya no va dentro del mapa: es una tira delgada arriba, así no tapa el Brotexpreso, la vía ni Correos.
   2) La página del mapa no se recorre: siempre empieza hasta arriba (el div ya no se llama #mapa, que bajaba la página).
   3) Un poco de aire arriba para que la vía, la estación y el tren se vean completos. */
body.en-mapa #contenido { display: flex; flex-direction: column; }
body.en-mapa #contenido .mapa { flex: 1 1 auto; min-height: 0; }
#contenido > .banner-mapa { position: static; transform: none; width: auto; max-width: none; margin: 0; padding: 3px 10px; border-radius: 0;
  font-size: 13px; line-height: 1.3; text-align: center; pointer-events: none; flex: none; }
body.tema-halloween #contenido > .banner-mapa { background: #2c2350; color: #fffaf3; }
@media (max-width: 599px) {
  html:has(body.en-mapa) { height: 100%; overflow: hidden; overscroll-behavior: none; overscroll-behavior-x: none; }
  body.en-mapa { overscroll-behavior: none; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  body.en-mapa #contenido .mapa { flex: none; }
}
/* letrero del andén del Brotexpreso */
.anden-letrero { position: absolute; transform: translate(-50%, -100%); z-index: 6; pointer-events: none; white-space: nowrap; margin: 0; }
/* Vivero de Mascotas en el mapa: placeholder (círculo crema con la mini de Girasolín) hasta que llegue su exterior */
.edificio.ed-vivero .sprite { display: block; }
.ed-vivero .vivero-ed { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: #fffaf3; border: 3px solid #A7C47F;
  box-shadow: 0 3px 4px rgba(0,0,0,.3); }
.ed-vivero .vivero-ed img { width: 54px !important; height: 54px; max-height: 54px; object-fit: contain; margin: 0; }
/* Entrada directa al mapa: quien aún no adopta a Brotito no tiene paneles laterales; el mapa ocupa todo el ancho. */
@media (min-width: 1024px) {
  body.sin-brotito #panel-brotito, body.sin-brotito #panel-misiones { display: none; }
  body.sin-brotito #contenido { grid-column: 1 / -1; }
}
/* ---- Celular = mismo mapa horizontal de la computadora (decisión de Luis, 04/10) ----
   El mapa mide la altura disponible y su ancho sale de la proporción 16:9 del fondo; se recorre deslizando el dedo a los lados.
   Edificios, letreros, caminantes y Brotexpreso usan las mismas coordenadas (%) que en computadora. */
.mapa-marco, .mapa-desliza { display: contents; }
.desliza-sombra, .manita-desliza { display: none; }
@media (max-width: 599px) {
  body.en-mapa #contenido .mapa-marco { display: block; position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
  body.en-mapa #contenido .mapa-desliza { display: block; position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior: none; touch-action: pan-x; scrollbar-width: none; }
  .mapa-desliza::-webkit-scrollbar { display: none; }
  body.en-mapa #contenido .mapa { flex: none; height: 100%; width: auto; aspect-ratio: 16 / 9; max-width: none; }
  .mapa .edificio { width: 96px; }
  .mapa .edificio img { width: 62px; max-height: 70px; }
  .mapa .letrero { font-size: 11px; padding: 1px 4px; }
  .mapa .letrero small { display: block; }
  .mapa .caminante { width: 50px; height: 50px; }
  /* pista de que se desliza: sombras en las orillas que todavía tienen mapa */
  .desliza-sombra { display: block; position: absolute; top: 0; bottom: 0; width: 28px; z-index: 8; pointer-events: none; opacity: 0; transition: opacity .3s; }
  .desliza-sombra.izq { left: 0; background: linear-gradient(90deg, rgba(30,34,64,.55), rgba(30,34,64,0)); }
  .desliza-sombra.der { right: 0; background: linear-gradient(270deg, rgba(30,34,64,.55), rgba(30,34,64,0)); }
  .mapa-marco.puede-izq .desliza-sombra.izq, .mapa-marco.puede-der .desliza-sombra.der { opacity: 1; }
  /* manita breve (sin texto): va y viene de lado a lado dos veces y se va sola o al primer toque */
  .manita-desliza { display: block; position: absolute; left: 50%; top: 74%; width: 84px; height: 84px; margin: -42px 0 0 -42px; z-index: 9; pointer-events: none;
    opacity: 0; filter: drop-shadow(0 4px 4px rgba(0,0,0,.35)); transition: opacity .35s; }
  .mapa-marco.con-manita .manita-desliza { opacity: 1; animation: manita-desliza 1.8s ease-in-out 2; }
}
@keyframes manita-desliza { 0% { transform: translateX(42px) rotate(8deg); } 50% { transform: translateX(-42px) rotate(-8deg); } 100% { transform: translateX(42px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .manita-desliza { display: none !important; } }
/* Sin Brotito todavía no hay misiones: la tira vacía de abajo se oculta y el mapa usa esa altura. */
body.sin-brotito #tira:empty { display: none; }
/* Entrada al Mundo abierto (11/10/2026) */
.ir-mundo { position: fixed; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 6px;
  padding: 8px 14px 8px 10px; border-radius: 999px; border: 3px solid #5B3A24; background: #A7C47F; color: #fff; font: 800 16px/1 Quicksand, system-ui, sans-serif;
  box-shadow: 0 4px 0 #5B3A24; cursor: pointer; min-height: 52px; }
.ir-mundo-ico { font-size: 26px; }
.ir-mundo:active { transform: translateY(2px); box-shadow: 0 2px 0 #5B3A24; }
body:not(.en-mapa) .ir-mundo, body.en-mundo .ir-mundo { display: none; }
.ir-mundo-pista { position: absolute; right: 18px; bottom: 100%; display: flex; flex-direction: column-reverse; align-items: flex-end; pointer-events: none; }
.ir-mundo-pista i { font-style: normal; font-size: 34px; animation: ir-mundo-toca 1.1s ease-in-out infinite; }
.ir-mundo-pista em { font-style: normal; font-size: 14px; background: #4a3428; color: #fff; border-radius: 999px; padding: 5px 12px; margin-bottom: 2px; white-space: nowrap; }
body.tema-halloween .ir-mundo { background: #F28C28; }
body.tema-halloween .ir-mundo-pista em { background: #4B2A6B; border: 2px solid #F6A23C; }
@keyframes ir-mundo-toca { 0%, 100% { translate: 0 0; } 50% { translate: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .ir-mundo-pista i { animation: none; } }
@media (min-width: 900px) { .ir-mundo { bottom: 24px; } }