@font-face{font-family:"Silkscreen";src:url(fuentes/silkscreen-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fuentes/plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fuentes/plex-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

/* Silkscreen solo se ve nítida en múltiplos de 8 px (8, 16, 24…) y en píxeles enteros: no centrar con translate(-50%). */
/* Interfaz de city-builder: paneles oscuros con borde grueso y sombra dura, sobre el mapa claro. */
:root{
  --suelo:#e8e4dc;                     /* fondo del mapa fuera de las capturas (FONDO en ciudad_modal.py) */
  --panel:#0c1a1de8; --panel-solido:#0c1a1d; --panel-cabeza:#13292e;
  --borde:#2c4a50; --borde-luz:#ffffff14; --sombra:#06100fa0;
  --tinta:#e9efed; --tinta-suave:#9db0ad;
  --acento:#00788c; --acento-luz:#3fb6c9; --acento-hover:#0a8ea4;
  --pixel:"Silkscreen",monospace; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --g:12px;                            /* separación con los bordes de la pantalla */
  --nav-w:240px; --nav-h:180px;
  --esquina-h:54px;                    /* alto de la placa y de la barra de arriba a la derecha */
  font-family:var(--mono);color:var(--tinta);color-scheme:dark;font-synthesis:none
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--suelo)}
button,a{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--acento-luz);outline-offset:2px}
[hidden]{display:none!important}

.shell{position:fixed;inset:0;height:100dvh}
.mapa{position:absolute;inset:0;background:var(--suelo)}
.mapa canvas{image-rendering:pixelated}
/* Easter egg (rulero.mjs): glitch → El Rulero despega como un cohete y deja una columna de humo.
   Filtros SVG #glitch-a y #glitch-b en index.html. */
body.glitch .mapa{animation:rulero-glitch .7s steps(1) both}
@keyframes rulero-glitch{
  0%{filter:url(#glitch-a);transform:translate(-6px,0)}
  12%{filter:url(#glitch-b);transform:translate(5px,-2px);clip-path:inset(10% 0 30% 0)}
  25%{filter:url(#glitch-a) hue-rotate(90deg);transform:translate(-3px,3px);clip-path:none}
  37%{filter:url(#glitch-b);transform:translate(8px,0);clip-path:inset(40% 0 20% 0)}
  50%{filter:url(#glitch-a) invert(1);transform:none;clip-path:none}
  62%{filter:url(#glitch-b);transform:translate(-8px,1px);clip-path:inset(0 0 60% 0)}
  75%{filter:url(#glitch-a);transform:translate(3px,0);clip-path:none}
  87%{filter:url(#glitch-b);transform:translate(-2px,0)}
  100%{filter:none;transform:none}}
/* Easter eggs (hinchadas.mjs): hinchadas del Gigante de Arroyito y del Coloso, dibujadas a la escala del mapa. */
/* Con suavizado: el zoom máximo queda por debajo de 1:1, y sin suavizado se pierden filas de gente salteadas. */
/* Easter egg (tren.mjs): tren que sale de Rosario Norte; las tapas son recortes del mapa que van encima del tren. */
.mapa canvas.tren,.mapa img.tren-tapa{pointer-events:none;image-rendering:pixelated;visibility:hidden}
.mapa canvas.hinchada{pointer-events:none;image-rendering:auto;visibility:hidden}
/* Capa anclada al mapa (overlay de OpenSeadragon): mide lo mismo que el sprite, así que todo va en % y cqw. */
.rulero{visibility:hidden;pointer-events:none;container-type:size}
.rulero.encendido{visibility:visible}
.rulero .cohete{position:absolute;inset:0}
.rulero .cohete img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.rulero .llama{position:absolute;left:42%;top:86%;width:44%;height:0;translate:-50% 0;transform-origin:50% 0;
  background:linear-gradient(#fff 0 18%,#ffe45c 18% 42%,#ff9a1f 42% 70%,#e8401c 70%);
  clip-path:polygon(0 0,100% 0,88% 38%,100% 55%,72% 70%,80% 86%,50% 100%,22% 84%,30% 68%,0 54%,12% 36%);
  transition:height .5s ease-out}
.rulero.encendido .llama{height:40%;animation:rulero-llama 90ms steps(2) infinite alternate}
.rulero.despega .llama{height:110%}
.rulero.encendido .cohete{animation:rulero-temblor 80ms steps(1) infinite}
.rulero.despega .cohete{animation:rulero-temblor 60ms steps(1) infinite,rulero-sube 3.3s cubic-bezier(.55,0,.85,.35) forwards}
@keyframes rulero-temblor{0%{translate:-1.5% .5%}25%{translate:1.5% -.5%}50%{translate:-1% -.5%}75%{translate:1% .5%}}
@keyframes rulero-sube{to{transform:translateY(-150vh)}}
@keyframes rulero-llama{from{transform:scale(1,.85)}to{transform:scale(.88,1.1)}}
/* Humo con sombreado plano (luz y sombra, sin degradé) como el resto del dibujo. Opaco: tapa la torre que queda abajo. */
.rulero .humo{position:absolute;inset:0}
.rulero .bocanada{position:absolute;width:calc(var(--d) * 1cqw);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);visibility:hidden;
  background:radial-gradient(circle at 38% 34%,#f2f2ee 0 56%,#cfd0d3 57%)}
.rulero.encendido .base,.rulero.despega .columna{visibility:visible;
  animation:rulero-bocanada .9s cubic-bezier(.2,.8,.3,1.2) both,rulero-respira 3s ease-in-out infinite}
@keyframes rulero-bocanada{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}
@keyframes rulero-respira{50%{transform:translate(-50%,-50%) scale(1.05)}}
.rulero.disipa .humo{opacity:0;transition:opacity 1.6s ease-in}
@media (prefers-reduced-motion:reduce){
  body.glitch .mapa{animation:none}
  .rulero.encendido .cohete{animation:none}
  .rulero.despega .cohete{animation:rulero-sube 3.3s cubic-bezier(.55,0,.85,.35) forwards}}

.ui{position:absolute;z-index:5;background:var(--panel);border:2px solid var(--borde);border-radius:6px;
  box-shadow:4px 4px 0 var(--sombra),inset 0 1px 0 var(--borde-luz);backdrop-filter:blur(6px)}
.icono{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;flex:none}

.estado{position:absolute;z-index:6;inset:0;margin:auto;width:fit-content;height:fit-content;max-width:min(86vw,420px);
  padding:12px 16px;background:var(--panel-solido);border:2px solid var(--borde);border-radius:6px;font-size:13px;line-height:1.5;text-align:center}
.estado:empty{display:none}

/* Placa */
/* La placa y la barra de arriba a la derecha comparten alto (--esquina-h) en todos los anchos. */
.placa{left:calc(var(--g) + env(safe-area-inset-left));top:calc(var(--g) + env(safe-area-inset-top));display:flex;align-items:center;height:var(--esquina-h);padding:0 16px}
.marca{display:inline-flex;align-items:center;height:40px;padding:0 10px;border-radius:4px;text-decoration:none;font-family:var(--pixel);font-size:16px;white-space:nowrap}
.marca:hover{background:var(--borde-luz)}
.sim{color:var(--acento-luz)}
.placa-titulo h1{margin:0;font-family:var(--pixel);font-weight:400;font-size:24px;line-height:1;letter-spacing:.02em}
.placa-titulo p{margin:2px 0 0;font-size:11px;color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.08em}

/* Esquina superior derecha */
.esquina{right:calc(var(--g) + env(safe-area-inset-right));top:calc(var(--g) + env(safe-area-inset-top));display:flex;align-items:center;gap:4px;height:var(--esquina-h);padding:0 5px}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;min-width:40px;padding:0 10px;border:0;border-radius:4px;background:transparent;text-decoration:none;font-size:12px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.boton:hover{background:var(--borde-luz)}
.boton-texto{background:var(--acento)}.boton-texto:hover{background:var(--acento-hover)}


/* Pie: aviso de la fecha de las capturas, debajo de la barra de herramientas. --pie es lo que la barra (y lo que se apoya en ella) sube para dejarle lugar. */
:root{--pie:16px}
.fuente-fecha{position:absolute;z-index:4;left:0;right:0;margin-inline:auto;width:fit-content;max-width:calc(100vw - 2 * var(--g));bottom:calc(4px + env(safe-area-inset-bottom));margin-block:0;padding:1px 6px;border-radius:3px;background:var(--panel);color:var(--tinta-suave);font-size:9px;line-height:12px;text-align:center}

/* Herramientas */
.herramientas{left:0;right:0;margin-inline:auto;width:fit-content;max-width:calc(100vw - 2 * var(--g));bottom:calc(var(--g) + var(--pie) + env(safe-area-inset-bottom));display:flex;align-items:stretch;gap:4px;padding:5px}
.herramienta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:68px;height:58px;padding:0;border:2px solid transparent;border-radius:4px;background:#ffffff08;font-family:var(--pixel);font-size:8px;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta)}
.herramienta:hover{background:var(--borde-luz);border-color:var(--borde)}
.herramienta:active{transform:translateY(1px)}
.herramienta[aria-pressed="true"],.herramienta[aria-expanded="true"]{background:var(--acento);border-color:var(--acento-luz)}
.herramientas-sep{width:2px;margin:6px 2px;background:var(--borde)}

/* Navegador */
.navegador{right:calc(var(--g) + env(safe-area-inset-right));bottom:calc(var(--g) + env(safe-area-inset-bottom));width:var(--nav-w);overflow:hidden}
.panel-cabeza{display:flex;align-items:center;justify-content:space-between;height:28px;padding:0 10px;background:var(--panel-cabeza);border-bottom:2px solid var(--borde);font-family:var(--pixel);font-size:8px;letter-spacing:.06em;text-transform:uppercase}
.norte{display:inline-flex;align-items:center;gap:4px;color:var(--acento-luz)}.norte svg{width:10px;height:10px;fill:currentColor}
.navegador-mapa{width:100%;height:var(--nav-h);background:var(--suelo)}
.navegador-mapa .displayregion{border:2px solid #ff5b3a!important;box-shadow:0 0 0 1px #0008}


/* Ventanas emergentes (popover) */
.ventana{position:fixed;inset:auto;margin:0;padding:0;color:var(--tinta);background:var(--panel-solido);border:2px solid var(--borde);border-radius:6px;box-shadow:4px 4px 0 var(--sombra);overflow:auto}
/* Lugares: todos a la vista, sin scroll; tarjetas del mismo alto (el de dos líneas de texto). */
.ventana-lugares{left:0;right:0;margin-inline:auto;bottom:calc(var(--g) + 84px + var(--pie) + env(safe-area-inset-bottom));width:min(760px,calc(100vw - 2 * var(--g)));max-height:none;overflow:visible}
.lista-lugares{list-style:none;margin:0;padding:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.lista-lugares button{display:flex;align-items:center;width:100%;height:calc(2 * 1.3em + 12px + 4px);text-align:left;padding:6px 10px;border:2px solid transparent;border-radius:4px;background:#ffffff08;font-size:12px;line-height:1.3}
.lista-lugares button:hover{border-color:var(--acento);background:#00788c22}
/* Sorpresas: contador en el botón (visible también en pantallas angostas) y lista de las ya encontradas. */
.herramienta .contador{font-size:8px}
.herramienta.completo:not([aria-expanded="true"]) .contador{color:var(--acento-luz)}
.herramienta.festeja{animation:festeja .6s steps(4) 2}
@keyframes festeja{50%{background:var(--acento);border-color:var(--acento-luz)}}
.ventana-sorpresas{left:0;right:0;margin-inline:auto;bottom:calc(var(--g) + 84px + var(--pie) + env(safe-area-inset-bottom));width:min(360px,calc(100vw - 2 * var(--g)))}
.sorpresas-cuenta{color:var(--acento-luz)}
.sorpresas-vacio{margin:0;padding:16px 18px;font-size:13px;line-height:1.6;color:var(--tinta-suave)}
.lista-sorpresas{grid-template-columns:1fr!important}
.lista-sorpresas button{height:auto;min-height:40px;gap:10px}
.lista-sorpresas button::before{content:"★";color:var(--acento-luz)}
.creditos{margin:0;padding:12px 14px;display:grid;gap:4px}
.creditos dt{margin-top:6px;font-size:10px;color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.08em}
.creditos dd{margin:0}
.cerrar{width:28px;height:28px;margin-right:-8px;border:0;background:transparent;font-size:20px;line-height:1;color:var(--tinta-suave)}
.cerrar:hover{color:var(--tinta)}
.ventana a{color:var(--acento-luz);text-underline-offset:2px}

.aviso{position:absolute;z-index:7;left:0;right:0;margin-inline:auto;width:fit-content;bottom:calc(var(--g) + 84px + var(--pie) + env(safe-area-inset-bottom));padding:8px 12px;background:var(--acento);border:2px solid var(--acento-luz);border-radius:4px;font-size:12px;opacity:0;transition:opacity .2s;pointer-events:none}
.aviso.visible{opacity:1}

/* Cajones (Quién soy, Contacto): se despliegan debajo de la barra de arriba a la derecha, sin tocar los bordes. */
:root{--herr-h:72px}
.cajon{right:calc(var(--g) + env(safe-area-inset-right));top:calc(var(--g) + var(--esquina-h) + 8px + env(safe-area-inset-top));
  width:min(400px,calc(100vw - 2 * var(--g)));max-height:calc(100dvh - var(--esquina-h) - var(--herr-h) - var(--pie) - 2 * var(--g) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display:flex;flex-direction:column;overflow:hidden;z-index:6;background:var(--panel-solido);transform-origin:top right;animation:desplegar .18s steps(6,end)}
.cajon[hidden]{display:none}
@keyframes desplegar{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.cajon-cuerpo{overflow:auto;padding:16px 18px 20px;font-size:13px;line-height:1.7;overscroll-behavior:contain}
.cajon-cuerpo p{margin:0 0 12px;color:var(--tinta-suave)}
.cajon-kicker{margin:0 0 4px!important;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--acento-luz)!important}
.cajon h2{margin:0;font-family:var(--pixel);font-weight:400;font-size:24px;line-height:1.2;color:var(--tinta)}
.cajon-edad{margin:4px 0 16px!important;font-size:12px}
.cajon-redes{display:flex;gap:16px;margin-top:16px!important;padding-top:12px;border-top:2px solid var(--borde);font-size:12px}
.cajon a{color:var(--acento-luz);text-underline-offset:2px}
.cajon-bajada{color:var(--tinta)!important}
/* Compartir */
.compartir-enlace{display:flex;gap:6px;margin-bottom:10px}
.compartir-enlace input{flex:1;min-width:0;padding:8px 10px;border:2px solid var(--borde);border-radius:4px;background:#0006;color:var(--tinta);font:inherit;font-size:12px}
.compartir-ubicacion{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:12px;color:var(--tinta);cursor:pointer}
.compartir-ubicacion input{width:16px;height:16px;margin:0;accent-color:var(--acento)}
.compartir-redes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.compartir-redes a{display:flex;align-items:center;justify-content:center;height:40px;border:2px solid var(--borde);border-radius:4px;background:#ffffff08;color:var(--tinta)!important;text-decoration:none;font-size:12px}
.compartir-redes a:hover{border-color:var(--acento);background:#00788c22}
/* Mientras hay un cajón abierto el navegador se oculta para no superponerse. */
body.con-cajon .navegador{visibility:hidden}

/* Formulario de contacto: mismos campos y reglas que urbagus.com/contact/. */
.contacto{display:flex;flex-direction:column}
.contacto label{margin-top:10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave)}
.contacto input,.contacto textarea{width:100%;margin-top:2px;padding:6px 0;border:0;border-bottom:2px solid var(--borde);border-radius:0;background:transparent;color:var(--tinta);font:inherit;font-size:14px;resize:vertical}
.contacto input:focus,.contacto textarea:focus{outline:none;border-bottom-color:var(--acento-luz)}
.contacto-ayuda{margin-top:4px;font-size:11px;color:var(--tinta-suave)}
.contacto-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contacto-verificacion{margin-top:16px;min-height:0}
.contacto-enviar{align-self:flex-start;margin-top:16px;border:0;color:var(--tinta)}
.contacto-enviar:disabled{opacity:.45;cursor:not-allowed}
.contacto-estado{margin:12px 0 0!important;font-size:12px;color:var(--tinta)!important}
.contacto-estado:empty{display:none}
.boton[aria-expanded="true"]{background:var(--acento)}

/* Pantallas angostas: el navegador se oculta por defecto y la barra se compacta. */
@media (max-width:900px){
  .lista-lugares{grid-template-columns:repeat(3,1fr)}
  :root{--nav-w:180px;--nav-h:130px}
  .navegador{bottom:calc(var(--g) + 84px + var(--pie) + env(safe-area-inset-bottom))}
}
@media (max-width:640px){
  .lista-lugares{grid-template-columns:repeat(2,1fr);padding:6px;gap:3px}
  .lista-lugares button{font-size:11px;padding:4px 8px}
  :root{--g:8px}
  :root{--herr-h:64px}
  .cajon{left:calc(var(--g) + env(safe-area-inset-left));width:auto}
  .placa{padding:0 12px}
  .placa-titulo h1{font-size:16px}.placa-titulo p{font-size:10px;letter-spacing:.06em}
  .esquina .boton span{display:none}
  #pantalla{display:none}
  .herramienta{width:50px;height:50px;font-size:8px}.herramienta span{display:none}
  .herramientas-sep{display:none}
  .navegador{bottom:calc(var(--g) + 100px + var(--pie) + env(safe-area-inset-bottom))}
  .ventana-lugares,.ventana-sorpresas{bottom:calc(var(--g) + 68px + var(--pie) + env(safe-area-inset-bottom))}
  .herramienta span.contador{display:block}
}
/* Pantallas muy bajas (p. ej. teléfono apaisado): el navegador no entra sin pisar la barra de arriba. */
@media (max-height:520px){.navegador{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Easter egg (copa.mjs): la Copa del Mundo sale de la casa de Messi y la ciudad queda en duotono celeste y blanco. */
.copa-escena{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;visibility:hidden}
.copa-parada{pointer-events:none;image-rendering:pixelated;opacity:0;transition:opacity .3s}
.copa-parada.encendida{opacity:1}