/* Acervo das Ruas Brasil: a barra do topo e as abas do celular, como no esboço aprovado (docs/esboco/2026-10-20-inicio.html),
   com os tokens do guia do boralula. Vale para o mapa e para a inicial; o resto do layout é de cada página.
   Celular até 899 px: a barra fica só com a marca e o Sobre, e as abas aparecem embaixo (--abas é a altura delas). */
:root{
  --cp-red-500:#C3090A;--cp-red-600:#A00708;--cp-red-700:#8E0607;
  --cp-green-500:#0B912A;--cp-green-700:#087A23;--cp-yellow-400:#FBCE02;--cp-blue-500:#048ED6;--cp-blue-700:#0270AA;
  --cp-ink:#2A2A2A;--cp-ink-muted:#5E5E5E;--cp-border:#D9D4CC;--cp-border-strong:#8A847B;
  --cp-surface:#FFFFFF;--cp-surface-alt:#F3F1EE;
  --cp-warning-bg:#FFF6CC;--cp-warning-fg:#6B5300;
  --cp-success-bg:#E3F4E7;--cp-success-fg:#06601C;
  --cp-danger-bg:#FDE8E8;--cp-danger-fg:#8E0607;
  --cp-font:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --cp-text-display:clamp(2.25rem,1.5rem + 3vw,3.5rem);
  --cp-text-h2:clamp(1.5rem,1.3rem + .9vw,2rem);
  --cp-text-h3:clamp(1.25rem,1.15rem + .5vw,1.5rem);
  --cp-radius-sm:4px;--cp-radius-md:8px;--cp-radius-lg:16px;--cp-radius-pill:999px;
  --cp-shadow-1:0 1px 2px rgb(42 42 42 / .12);
  --cp-shadow-2:0 6px 16px rgb(42 42 42 / .14);
  --branco:#FFFFFF;
  --lado:16px;
  --abas:calc(57px + env(safe-area-inset-bottom,0px));
}
@media (min-width:900px){:root{--lado:24px}}

/* ícones do sprite da página */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* marca */
.marca{display:inline-grid;color:var(--branco);text-decoration:none;font-weight:900;text-transform:uppercase;line-height:1}
.marca .m1,.marca .m2{display:block;font-size:17px;letter-spacing:.01em}
.marca .m2{display:flex;align-items:center;gap:8px;color:var(--cp-yellow-400)}
.marca .risca{flex:1 1 auto;min-width:24px;height:6px;border-radius:1px;background:linear-gradient(90deg,var(--cp-green-500) 0 33.3%,var(--cp-yellow-400) 33.3% 66.6%,var(--cp-blue-500) 66.6% 100%)}

/* barra do topo: com viewport-fit=cover, o vermelho vai até o topo da tela e o conteúdo fica abaixo do entalhe */
.barra{position:sticky;top:0;z-index:60;padding-top:env(safe-area-inset-top,0px);background:var(--cp-red-500);color:var(--branco)}
.barra-in{display:flex;align-items:center;height:48px;padding:0 var(--lado)}
.barra :focus-visible{outline-color:var(--cp-yellow-400);outline-offset:-3px}
.menu,.acoes{display:flex;align-items:stretch;height:100%}
.acoes{margin-left:auto}
.menu a,.acoes a,.acoes button{display:flex;align-items:center;gap:8px;height:100%;padding:0 16px;border:0;background:none;color:var(--branco);font:700 14px/1 var(--cp-font);text-decoration:none;white-space:nowrap}
.menu a:hover,.acoes a:hover,.acoes button:hover{background:rgb(255 255 255 / .14)}
.menu a[aria-current="page"],.acoes a[aria-current="page"]{box-shadow:inset 0 -4px 0 var(--cp-yellow-400)}
.selo-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--cp-radius-pill);background:var(--cp-yellow-400);color:var(--cp-ink);font:800 12px/1 var(--cp-font)}

/* abas de baixo (celular): a altura é a de --abas, para o que fica acima delas (o mapa, o fim da inicial) acabar
   exatamente onde elas começam */
.abas{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(5,1fr);height:var(--abas);padding-bottom:env(safe-area-inset-bottom,0px);background:var(--cp-surface);border-top:1px solid var(--cp-border)}
.abas a{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 2px 9px;color:var(--cp-ink-muted);font:700 11.5px/1.1 var(--cp-font);letter-spacing:-.01em;text-align:center;text-decoration:none;white-space:nowrap}
.abas a[aria-current="page"]{color:var(--cp-red-500)}
.abas a[aria-current="page"] .ic{color:var(--cp-ink)}
.abas .selo-n{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;font-size:11px}
.abas a:focus-visible{outline-offset:-3px;border-radius:var(--cp-radius-md)}

/* celular: a barra fica com a marca e o Sobre (nas páginas do index.html, o link abre o diálogo Sobre; no mapa, leva a
   /privacidade). A marca vai em duas linhas: "Acervo das Ruas" em cima, sem quebrar, e "Brasil" com a risca embaixo
   (numa linha só, ela se parte em 360 px e encosta no Sobre). */
@media (max-width:899px){
  .marca{gap:2px}
  .marca .m1,.marca .m2{font-size:15px}
  .marca .m1{white-space:nowrap}
  .marca .m2{gap:6px}
  .marca .risca{flex:0 0 26px;height:5px}
  .menu{display:none}
  .acoes a:not(.sobre){display:none}
  .acoes button,.acoes .sobre{padding:0 4px 0 12px;font-size:13px}
}

/* computador */
@media (min-width:900px){
  .abas{display:none!important}
  .barra-in{height:64px;padding:0 64px}
  .marca{margin-right:24px}
}
@media (min-width:900px) and (max-width:1099px){
  .barra-in{padding:0 24px}
  .menu a,.acoes a,.acoes button{padding:0 11px}
  .marca{margin-right:12px}
}