/* ─────────────────────────────────────────────────────────────
   Menu sanduíche — só no celular.

   Com cinco linhas da curadoria e as duas institucionais, o menu quebrava
   em duas ou três linhas no celular e a primeira tela virava uma lista de
   links (cliente, 05/10/2026). Abaixo de 760 px ele se recolhe num botão.

   Tudo depende de `.tem-menu`, que js/menu.js põe no cabeçalho. Sem o
   script, nada daqui vale e o menu fica aberto, como antes.
   ───────────────────────────────────────────────────────────── */
.cabecalho__abrir{display:none}
/* O invólucro dos dois menus precisa repetir o espaçamento do cabeçalho:
   sem ele, a margem negativa das institucionais (site.css) as puxava para
   cima do menu principal no computador. */
.cabecalho__menus{display:flex;flex-direction:column;align-items:center;gap:var(--s-4)}

@media (max-width:760px){
  .cabecalho.tem-menu{position:relative}
  .tem-menu .cabecalho__abrir{
    display:grid;place-items:center;
    position:absolute;right:var(--s-2);top:calc(var(--s-4) + 12px);
    width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
    color:var(--c-deep-green);
  }
  /* Três traços finos, no peso dos filetes da marca; viram um X aberto. */
  .cabecalho__linhas,
  .cabecalho__linhas::before,
  .cabecalho__linhas::after{
    display:block;width:22px;height:1.5px;border-radius:1px;background:currentColor;
    transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease);
  }
  .cabecalho__linhas{position:relative}
  .cabecalho__linhas::before,
  .cabecalho__linhas::after{content:"";position:absolute;left:0}
  .cabecalho__linhas::before{top:-7px}
  .cabecalho__linhas::after{top:7px}
  .menu-aberto .cabecalho__linhas{background:transparent}
  .menu-aberto .cabecalho__linhas::before{transform:translateY(7px) rotate(45deg)}
  .menu-aberto .cabecalho__linhas::after{transform:translateY(-7px) rotate(-45deg)}
  .tem-menu .cabecalho__abrir:focus-visible{outline:2px solid var(--c-deep-berry);outline-offset:-4px}

  /* Fechado: só o logotipo. Aberto: a lista cai POR CIMA da página, num véu
     claro e translúcido — a página não se mexe, e o que está atrás continua
     se insinuando, então a pessoa não perde onde estava (cliente,
     05/10/2026: "abrir sobre a página, com transparência"). */
  .cabecalho.tem-menu{z-index:20}
  .tem-menu .cabecalho__menus{
    position:absolute;top:100%;left:0;right:0;
    display:flex;flex-direction:column;align-items:center;gap:var(--s-4);
    padding:var(--s-4) var(--s-4) var(--s-6);
    background:rgba(245,238,228,.86);
    -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
    border-top:1px solid var(--border);
    box-shadow:0 18px 30px -18px rgba(24,38,37,.35);
    opacity:0;visibility:hidden;transform:translateY(-6px);
  }
  /* A transição só vale depois do primeiro quadro (`.menu-pronto`, posta pelo
     script). Sem isso, ao carregar a página o menu passava de visível para
     escondido COM animação — e piscava por cima da capa a cada página. */
  .menu-pronto .cabecalho__menus{
    transition:opacity 220ms var(--ease),transform 220ms var(--ease),visibility 0s linear 220ms;
  }
  .tem-menu.menu-aberto .cabecalho__menus{opacity:1;visibility:visible;transform:none}
  .menu-pronto.menu-aberto .cabecalho__menus{
    transition:opacity 220ms var(--ease),transform 220ms var(--ease);
  }
  /* Sem suporte a desfoque, o véu fica quase opaco para o texto se ler. */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .tem-menu .cabecalho__menus{background:rgba(245,238,228,.97)}
  }
  .tem-menu .cabecalho__nav{flex-direction:column;align-items:center;gap:0}
  .tem-menu .cabecalho__nav a{display:block;padding:.8rem var(--s-4);font-size:.8125rem;border-bottom:0}
  /* A borda de baixo ficava longe da palavra, no fim do padding do toque. */
  .tem-menu .cabecalho__nav a.esta-aqui{
    text-decoration:underline;text-decoration-color:var(--accent);
    text-decoration-thickness:1px;text-underline-offset:6px;
  }
  .tem-menu .cabecalho__institucional{margin-top:0}
  .tem-menu .cabecalho__institucional a{display:block;padding:.5rem var(--s-2);font-size:1.0625rem}
}
@media (prefers-reduced-motion:reduce){
  .cabecalho__linhas,.cabecalho__linhas::before,.cabecalho__linhas::after,
  .tem-menu .cabecalho__menus{transition:none;transform:none}
}