/* ══ CABEÇALHO DO SITE, EXTRAÍDO DO ginga.css EM 02/09 ══
   Só as regras do topo e da navegação. A folha inteira não pode entrar no
   guia: 11 classes colidem, entre elas .wrap, .eyebrow, .mainnav .top e .num.
   Gerado por ferramentas/extrai-nav.mjs — NÃO editar à mão: editar o
   ginga.css e rodar de novo, senão as duas cópias divergem. */

.topbar {background:#FACC15}
.tb {display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:10px 36px;gap:14px}
.tb-left {display:flex;flex-direction:column;gap:5px}
.tb-left>span {font-family:"Mulish",var(--ui),sans-serif;font-weight:400;font-size:11.5px;
  color:rgba(17,17,17,.66);letter-spacing:0}
.tb-left b {font-family:var(--nav);font-weight:600;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#12231D}
.tb-logo {text-align:center;transform:translateX(6px)}
.tb-logo a {display:flex;align-items:center;justify-content:center;gap:18px;color:#111;
  text-decoration:none;line-height:1}
.tb-selo {width:86px;height:86px;display:block;flex:none;transform:translateY(2.3%)}
.tb-lockup {display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.tb-word {font-family:"Oswald",var(--ui),sans-serif;font-weight:300;font-size:36px;
  line-height:.9;letter-spacing:.22em;margin-right:-7.92px;white-space:nowrap;
  color:#111;text-transform:uppercase}
.tb-word i,.tb-word b {font-style:normal;font-weight:inherit}
.tb-assin {font-family:"Mulish",var(--ui),sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.1599em;margin-right:-1.92px;text-transform:uppercase;
  white-space:nowrap;color:#fff}
.tb-right {display:flex;justify-content:flex-end;align-items:center;gap:14px;color:#111}
.langtog {display:flex;flex:none;border:1px solid var(--linha);overflow:hidden;font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:.12em}
.tb-lang {display:flex;flex:none}
.tb-lang button {flex:none;white-space:nowrap}
.langtog button {background:transparent;color:var(--tinta);border:0;padding:6px 12px;cursor:pointer;font-weight:500;transition:.2s;font-family:var(--ui);letter-spacing:.12em}
.langtog button.on {background:var(--verde);color:var(--marfim)}
.tb-soc {display:flex;gap:6px}
@media(max-width:900px) {
  .tb {grid-template-columns:auto 1fr auto;padding:14px 18px}
  .tb-left {display:none}
  .tb-logo {text-align:left}
  .tb-logo a {font-size:26px;letter-spacing:.10em}
  .tb-logo .tagline {display:none}
}
.mainnav {position:sticky;top:0;z-index:80;background:#FFFFFF;border-bottom:1px solid var(--linha)}
.mn {display:flex;align-items:center;padding:0 36px;gap:4px}
.mn .menu {display:flex;gap:32px;flex:1 1 auto;justify-content:center;min-width:0}
.mn .searchbtn {position:absolute;right:36px;top:50%;transform:translateY(-50%);z-index:2}
.mn .menu {justify-content:safe center;overflow-x:auto;scrollbar-width:none;
  -ms-overflow-style:none;scroll-behavior:smooth;padding-right:44px}
.mn .menu::-webkit-scrollbar {display:none;height:0;width:0}
@media (max-width:420px) {
  .tb-assin {display:none}
  .tb-word {font-size:26px;letter-spacing:.18em;margin-right:-4.68px}
  .tb-selo {width:57px;height:57px}
  .tb-logo a {gap:14px}
  .tb {padding:16px 18px}
}
.mn .menu>div {position:relative}
.mn .menu a.top {font-family:var(--nav);font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;padding:15px 0;display:inline-block;white-space:nowrap;flex:none;color:#111;border-bottom:2px solid transparent;transition:.15s}
.mn .menu a.top {position:relative;transition:color .22s ease}
.mn .menu a.top::after {
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--verde);transform:scaleX(0);transform-origin:center;
  transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.mn .menu a.top:hover::after,
.mn .menu a.top:focus-visible::after {transform:scaleX(1)}
.mn .menu a.top:hover {color:#111;opacity:.6}
.mn .menu a.top.on {color:#111;border-bottom-color:#FACC15;border-bottom-width:2px}
.mn .menu a.top.on::after {display:none}
@media(prefers-reduced-motion:reduce) {
  .mn .menu a.top::after {transition:none}
}
.submenu {display:none;position:absolute;left:0;top:100%;background:var(--branco);border:1px solid var(--linha);min-width:210px;padding:10px 0;z-index:90}
.mn .menu>div:hover .submenu {display:block}
.submenu a {display:block;font-family:var(--ui);font-size:11.5px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;padding:9px 18px;color:var(--tinta)}
.submenu a:hover {color:var(--verde);background:#F7F7F7}
.hamb {display:none;background:none;border:0;cursor:pointer;padding:12px 6px}
.hamb span {display:block;width:22px;height:1.5px;background:var(--tinta);margin:5px 0}
.searchbtn {background:none;border:0;cursor:pointer;color:var(--tinta);padding:10px;display:flex;align-items:center;flex:0 0 auto;margin-left:auto}
.searchbtn:hover {color:var(--verde)}
.searchbtn svg {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.mn {position:relative}
@media(max-width:1080px) {
  .mn {flex-wrap:wrap;padding:0 18px;justify-content:flex-start}
  .hamb {display:block}
  .mn .menu {display:none;flex-direction:column;width:100%;order:3;border-top:1px solid var(--linha);gap:0}
  .mn .menu.open {display:flex}
  .mn .menu a.top {padding:13px 4px;border-bottom:1px solid var(--linha);width:100%}
  .submenu {position:static;display:block;border:0;padding:0 0 6px 14px}
}
.tbd-note {font-family:var(--ui);font-weight:400;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza);border:1px dashed var(--linha);padding:10px 16px;display:inline-block;margin-top:8px}
.foot-siga .tb-soc .soc {color:var(--marfim);opacity:.8}
.foot-siga .tb-soc .soc:hover {opacity:1;color:var(--marfim)}
.tb {padding:10px 36px}
.tb-logo a {font-weight:400;font-size:42px;letter-spacing:.16em}
.tb-logo .tagline {font-size:12px;margin-top:3px}
.mn {padding:0 36px}
.mn .menu a.top {font-weight:600;letter-spacing:.07em;padding:13px 9px}
.submenu a {font-weight:600;letter-spacing:.08em;padding:8px 16px}
.backbtn {display:inline-flex;align-items:center;gap:7px;font-family:var(--ui);font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--verde);margin-bottom:12px;cursor:pointer}
.backbtn .bb-seta {font-size:14px;line-height:1}
.backbtn:hover {opacity:.65}
.nav-back {position:static;transform:none;margin:0;flex:0 0 auto;font-family:var(--nav);letter-spacing:.09em;
  transition:color .22s ease}
.nav-back:hover {color:var(--verde)}
.nav-back .bb-seta {display:inline-block;transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.nav-back:hover .bb-seta {transform:translateX(-3px)}
@media(prefers-reduced-motion:reduce) {
  .nav-back .bb-seta {transition:none}
}
@media(max-width:860px) {
  .nav-back {display:none}
}
.backbar .backbtn {margin-bottom:0}
.busca-camada {position:fixed;inset:0;z-index:9999;display:none}
.busca-camada.on {display:block}
.busca-fundo {position:absolute;inset:0;background:rgba(10,10,10,.55)}
.busca-caixa {position:relative;max-width:760px;margin:clamp(132px,14vh,180px) auto 0;
  background:var(--branco,#fff);
  box-shadow:0 24px 60px rgba(0,0,0,.28);max-height:74vh;display:flex;flex-direction:column}
.busca-dica {font-family:var(--ui);font-size:13px;color:var(--faint);
  padding:34px 0 30px;text-align:center;letter-spacing:.02em}
.busca-topo {display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:2px solid var(--tinta)}
.busca-lupa {width:20px;height:20px;fill:none;stroke:var(--faint);stroke-width:1.8;flex:0 0 20px}
#busca-campo {flex:1;border:0;outline:0;background:transparent;font-family:var(--serifT);
  font-size:22px;color:var(--tinta);min-width:0}
.busca-x {border:0;background:none;cursor:pointer;font-size:16px;color:var(--faint);padding:4px 6px}
.busca-x:hover {color:var(--tinta)}
.busca-res {overflow-y:auto;padding:6px 20px 22px}
.busca-conta {font-family:var(--ui);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:12px 0 6px}
.busca-dica {font-family:var(--ui);font-size:12px;color:var(--faint);padding:18px 0}
.busca-lista {list-style:none;margin:0;padding:0}
.busca-lista li {border-bottom:1px solid var(--linha)}
.busca-lista li:last-child {border-bottom:0}
.busca-lista a {display:block;padding:12px 0;text-decoration:none;color:inherit}
.busca-lista a:hover .bl-t {text-decoration:underline}
@media(max-width:760px) {
  .busca-caixa {margin:64px 12px 0;max-width:none;height:auto;max-height:76vh}
  #busca-campo {font-size:18px}
}
.tb-logo a .l36 {color:var(--amarelo)}
.tb-mark {height:1.05em;width:auto;display:block;flex:none}
@media(max-width:760px) {
  .tb-logo a {font-size:27px;letter-spacing:.08em;gap:.18em}
  .tb-logo .tagline {display:none}
}
.busca-tipo {font-family:var(--ui);font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--verde);margin:18px 0 6px;padding-bottom:6px;border-bottom:1px solid var(--linha)}
.busca-tipo:first-of-type {margin-top:10px}
@media (max-width:820px) {
  .tb-soc a {
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin:-6px}
  .tb-soc {gap:2px}
  .hamb {min-width:46px;min-height:46px;padding:12px}
  .searchbtn {min-width:46px;min-height:46px;justify-content:center}
}
/* == 01/09 . O SELETOR PT/EN, E OS DOIS ERROS QUE EU MESMO COMETI AQUI ==
   Ordem dele: arrumar o seletor de idioma. O conserto de verdade era o
   .tb-lang nunca ter recebido display:flex (ver la em cima). Mas com o
   seletor deitado ele foi de 48px para 92px e a barra da direita estourou
   de 4px para 48px de transbordo. MEDIDO em 390px: .langtog 92 + gap 14
   + .tb-soc 100 = 206px comecando em x=226, terminando em 432 num
   viewport de 390. Nao cabe seletor + tres icones, e ponto.

   ERRO 1: escrevi a regra na linha 256 e o .tb-soc {display:flex}
da linha
   259 a apagava. Mesma especificidade, quem vem depois ganha. Por isso
   este bloco vive no FIM do arquivo.

   ERRO 2: escrevi .tb-soc solto, e o RODAPE usa a mesma classe
   (.foot-siga .tb-soc). A regra teria escondido os icones do rodape
   junto, que e justamente para onde estou mandando o leitor. Escopada em
   .topbar.

   Some no celular quem esta REPETIDO logo abaixo: conferido no ar que os
   tres perfis do header (x.com/ginga36x, threads, instagram) sao os
   mesmos tres do rodape. Fica quem o leitor precisa, que e o idioma.
   Isto tambem encerra o transbordo de 4px que existia ANTES de hoje em
   TODAS as paginas do site, home inclusive. */
@media (max-width:640px) {
  .topbar .tb-soc{display:none}
}
.mainnav .menu {
  gap: clamp(12px, 1.25vw, 26px);
  min-width: 0; flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
}
.mainnav .menu > div { flex: none; }
.mainnav .menu > div > a.top {
  padding-left: clamp(4px, .45vw, 9px);
  padding-right: clamp(4px, .45vw, 9px);
  font-size: clamp(11.2px, .82vw, 12.5px);
  white-space: nowrap;
}
/* ⚑ 02/09 · EU DESALINHEI A LUPA TENTANDO CONSERTAR A SOBREPOSIÇÃO.
   A regra original é `.mn .searchbtn {position:absolute;right:36px;top:50%;
   transform:translateY(-50%)}
` — ela centra o botão na barra, de propósito.
   Eu troquei para `position:relative` para tirá-lo da fila do menu, e os
   MESMOS números viraram deslocamento relativo: `top:50%` empurrou para
   baixo, o `translateY(-50%)` puxou de volta, e o botão parou 18px ACIMA da
   linha dos itens — flutuando entre a faixa amarela e o menu. Foi o que ele
   viu: "a lupa ta baguncada".
   O absoluto volta. E o problema que eu tentava resolver era outro: estando
   fora do fluxo, o botão não empurra o menu, e por isso o menu passava por
   baixo dele. A solução certa não é mexer no botão, é RESERVAR o espaço
   dele: o respiro à direita do .mn tira a largura do botão da conta do menu.
   Alinhamento e sobreposição resolvidos sem que um estrague o outro. */
.mainnav .mn { padding-right: 88px; }
.mainnav { height: auto; min-height: 48px; }
.mainnav .mn { gap: 10px; align-items: center; flex-wrap: nowrap; }
.mn .sub-tog {display:none}
@media (max-width:1080px) {
  .mainnav .mn {flex-wrap:wrap;padding-right:18px}
  .mainnav .mn .menu {display:none}
  .mainnav .mn .menu.open {display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    position:fixed;left:0;right:0;top:var(--nav-fundo,56px);bottom:0;z-index:95;background:#fff;
    overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
    padding:4px 20px calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--linha)}
  .mainnav .menu > div {display:grid;grid-template-columns:1fr auto;align-items:center;width:100%;border-bottom:1px solid var(--linha)}
  .mainnav .menu > div > a.top {display:flex;align-items:center;min-height:52px;padding:0 2px;font-size:14px;
    letter-spacing:.08em;white-space:normal;text-align:left;border-bottom:0;width:auto}
  .mainnav .menu > div > a.top::after {display:none}
  .mainnav .menu > div > a.top.on {box-shadow:inset 3px 0 0 #FACC15;padding-left:12px}
  .mn .sub-tog {display:grid;place-items:center;width:48px;height:48px;background:none;border:0;cursor:pointer;color:var(--tinta)}
  .mn .sub-tog::before {content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
  .mn .menu > div.aberto .sub-tog::before {transform:translateY(2px) rotate(-135deg)}
  .mainnav .menu .submenu {grid-column:1 / -1;display:none !important;position:static !important;border:0;
    padding:0 0 10px 14px;min-width:0;box-shadow:none;background:transparent}
  .mainnav .menu > div.aberto .submenu {display:block !important}
  .mainnav .menu .submenu a {display:flex;align-items:center;min-height:44px;padding:0 10px;font-size:13px;
    letter-spacing:.06em;border-left:1px solid var(--linha)}
  .mainnav .menu .submenu a.on {border-left:3px solid #FACC15;font-weight:700}
  html.nav-aberto, html.nav-aberto body {overflow:hidden}
  .hamb span {transition:transform .2s ease, opacity .2s ease}
  .hamb.x span:nth-child(1) {transform:translateY(6.5px) rotate(45deg)}
  .hamb.x span:nth-child(2) {opacity:0}
  .hamb.x span:nth-child(3) {transform:translateY(-6.5px) rotate(-45deg)}
}
@media (prefers-reduced-motion:reduce) {
  .hamb span, .mn .sub-tog::before {transition:none}
}
@media (max-width:1080px) {
  body:not(.museu) #site-header {position:relative}
  body:not(.museu):not(.guia-cidade) #site-header {position:sticky;top:0;z-index:90}
  body:not(.museu) .mainnav {position:absolute;top:0;left:0;right:0;bottom:0;background:transparent;
    border-bottom:0;pointer-events:none;z-index:3}
  body:not(.museu) .mainnav .mn {height:100%;flex-wrap:nowrap;align-items:center;justify-content:space-between;
    padding:0 6px;max-width:none;margin:0}
  body:not(.museu) .mainnav .hamb,
  body:not(.museu) .mainnav .searchbtn,
  body:not(.museu) .mainnav .menu.open {pointer-events:auto}
  body:not(.museu) .mainnav .hamb {padding:14px 10px}
  body:not(.museu) .mainnav .mn .searchbtn {position:static;transform:none;margin-left:auto;padding:14px 12px}
  body:not(.museu) .mainnav .nav-back {display:none}
  body:not(.museu) .tb {grid-template-columns:auto 1fr;gap:10px;padding:10px 54px 10px 52px}
  body:not(.museu) .tb-left {display:none}
  body:not(.museu) .tb-logo {text-align:left;transform:none}
  body:not(.museu) .tb-right {justify-content:flex-end}
}
@media (max-width:480px) {
  body:not(.museu) .tb {gap:8px;padding:8px 50px 8px 50px}
  body:not(.museu) .tb-selo {width:46px;height:46px}
  body:not(.museu) .tb-word {font-size:22px;letter-spacing:.16em;margin-right:0}
  body:not(.museu) .tb-assin {display:none}
  body:not(.museu) .tb-logo a {gap:10px}
  body:not(.museu) .langtog button {padding:6px 9px}
}

/* ══════════════════════════════════════════════════════════════════════════
   O QUE NAO SAI DO ginga.css · escrito a mao, GERADO JUNTO
   ⚑ Estas regras ja foram perdidas uma vez: eu as acrescentei no fim do
   arquivo, e a rodada seguinte do extrator apagou tudo. Arquivo que se diz
   "gerado, nao editar a mao" tem de trazer o ajuste manual DENTRO do gerador.
   ⚑ E o conserto do menu que nao cabia NAO mora mais aqui: ele foi para o
   ginga.css, que e a fonte, e chega aqui pela extracao. O defeito era do
   site inteiro — consertar so na copia deixaria a home quebrada.
   ══════════════════════════════════════════════════════════════════════════ */

/* as variaveis que as regras extraidas usam, copiadas do :root do ginga.css.
   Ficam PRESAS a #site-header e nao vazam para o guia, que tem a paleta dele
   (--coral, --ink, --paper). */
#site-header {
  --ui: 'Archivo', system-ui, -apple-system, sans-serif;
  --nav: 'Archivo Narrow', 'Archivo', system-ui, -apple-system, sans-serif;
  --marfim: #FFFFFF; --branco: #FFFFFF; --tinta: #141414; --cinza: #6E6A63;
  --linha: rgba(20,20,20,.12); --verde: #0B3B2A; --amarelo: #FFD60A;
}

/* ══ 02/09 · O DROPDOWN SAIA CORTADO ══
   MEDIDO: o submenu tem z-index 90; o .head do guia tem 900. */
#site-header { position: relative; z-index: 1000; }
#site-header .mainnav { z-index: 1000; }
#site-header .submenu { z-index: 1002; }

/* ══ 02/09 · DUAS BARRAS GRUDENTAS BRIGANDO PELO TOPO ══
   No guia quem fica e o cabecalho DO GUIA: e ele que carrega a navegacao das
   oito cidades e o ticker. O menu do site e para chegar e sair. */
@media (min-width:1081px) { body.guia-cidade #site-header .mainnav { position: static; } } /* 11/09: só no desktop; abaixo de 1080 px a faixa branca é camada sobre a amarela */

/* ══ 19/09 · O LOGO NOVO TAMBÉM AQUI ══
   As páginas de guia (guia-sede.html) carregam site-nav.css, não ginga.css. O bloco do logo novo
   de 18/09 só existia no ginga.css: no guia a imagem saía no tamanho natural (1400×306) e o lockup
   antigo aparecia junto. Cópia fiel do bloco de ginga.css — mexeu lá, mexe aqui. */
/* ══ 18/09 · O LOGO NOVO ══
   Peça única, preta no cabeçalho amarelo e branca no rodapé escuro. A altura
   manda; a largura segue a proporção do arquivo (3000×840). O lockup montado
   fica no HTML com `hidden`, para quem ouve a página continuar recebendo o
   nome pelo `aria-label` do link. */
.tb-marca{height:74px;width:auto;display:block;flex:none}
/* o lockup montado fica no HTML para quem ouve a página, e some da tela */
.tb-lockup[hidden],.fb-logo[hidden]{display:none!important}
.tb-logo a{gap:0}
/* a marca isolada é quadrada e fica na MESMA medida do selo que substituiu:
   o rodapé já é centralizado por desenho, e mexer no tamanho mexia no ritmo
   de tudo o que vem embaixo. */
/* logo inteiro: a altura manda e a largura segue a proporção do arquivo */
/* ══ 19/09 · A MARCA DO RODAPÉ VIROU VERTICAL ══
   O lockup deitado cabia em 74px de altura porque era 4,5x mais largo que alto. O novo é
   QUADRADO: na mesma altura ele encolhe para um quinto da largura e vira ícone. As alturas
   do rodapé sobem para devolver a presença que a marca tinha; as do topo NÃO mudam, porque
   lá o logo continua deitado. */
.fb-marca,.lockup img.fb-marca{height:132px;width:auto;display:block;flex:none}
@media (max-width:900px){
  .tb-marca{height:53px}
  body:not(.museu) .tb-marca{height:48px}
  .fb-marca,.lockup img.fb-marca{height:112px;width:auto}
}
@media (max-width:480px){
  .tb-marca,body:not(.museu) .tb-marca{height:41px}
  .fb-marca,.lockup img.fb-marca{height:96px;width:auto}
}