/* ═══ O MENU "RAMOS DE SERVIÇO" E O HAMBÚRGUER (14/10/2026) ═══════════════════════════════════
   Seis links de ramo (Restaurante ... Água e gás) deixaram de ser seis botões soltos no cabeçalho —
   quebravam a linha em duas — e viraram UM botão com lista suspensa. Compartilhado por TODAS as
   páginas que têm o cabeçalho `.topo` (raiz, ramos, Central de Ajuda, guias): o estilo mora aqui, o
   comportamento em `/site/menu-ramos.js`, e a marcação sai do mesmo trecho nos geradores.

   SEM JS: a lista abre ao passar o mouse ou ao focar por teclado (`:hover` / `:focus-within`), e no
   celular o menu continua como antes (escondido) — o hambúrguer só existe com o script. */
.mr{position:relative;display:inline-flex;align-items:center}
.mr__botao{font:inherit;color:var(--tinta-suave,#5a5d66);background:none;border:0;padding:0;margin:0;cursor:pointer;
  min-height:44px;display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;transition:color .15s}
.mr__botao:hover,.mr[data-aberto] .mr__botao{color:var(--acento-forte,#2b3a80)}
.mr__seta{width:.75em;height:.75em;flex:none;transition:transform .18s ease}
.mr[data-aberto] .mr__seta{transform:rotate(180deg)}
.mr__botao:focus-visible,.topo__menu .mr__lista a:focus-visible,.topo__hamb:focus-visible{outline:3px solid var(--laranja,#ee7a1e);outline-offset:2px;border-radius:.4rem}
.mr__lista{position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:70;list-style:none;margin:0;padding:.4rem;
  min-width:14.5rem;display:none;flex-direction:column;background:#fff;border:1px solid var(--borda-forte,#d9d6cf);
  border-radius:.9rem;box-shadow:0 14px 34px rgba(24,22,19,.16)}
.mr[data-aberto] .mr__lista,
.mr:not([data-pronto]):hover .mr__lista,
.mr:not([data-pronto]):focus-within .mr__lista{display:flex}
.topo__menu .mr__lista a{display:flex;width:100%;min-height:44px;padding:.35rem .8rem;border-radius:.6rem;
  font-size:.95rem;color:var(--tinta,#181613);white-space:nowrap}
.topo__menu .mr__lista a:hover,.topo__menu .mr__lista a:focus-visible{background:rgba(43,58,128,.09);color:var(--acento-forte,#2b3a80)}
.topo__menu .mr__lista a[aria-current="page"]{font-weight:700;color:var(--acento-forte,#2b3a80)}

/* O cabeçalho precisa ficar acima do hero e das seções (o hero tem `position:relative`). */
.topo{z-index:80}
/* Uma linha só no desktop: o menu cheio não quebra mais. */
@media(min-width:1180px){.topo__menu,.topo__menu--cheio{flex-wrap:nowrap}}

/* ── Hambúrguer (só abaixo de 920px, e só quando o script o cria) ── */
.topo__hamb{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--borda-forte,#d9d6cf);
  border-radius:.7rem;background:var(--papel,#fff);color:var(--tinta,#181613);cursor:pointer;padding:0}
.topo__hamb svg{width:22px;height:22px}
@media(max-width:919.98px){
  .topo__hamb{display:inline-flex}
  .topo__menu[data-hamb]{display:none;position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;align-items:stretch;
    gap:0;flex-wrap:nowrap;padding:.4rem clamp(1rem,4vw,2rem) 1rem;background:#fff;border-bottom:1px solid var(--borda-forte,#d9d6cf);
    box-shadow:0 18px 30px rgba(24,22,19,.14);max-height:calc(100vh - 70px);overflow:auto;font-size:1rem}
  .topo[data-menu-aberto] .topo__menu[data-hamb]{display:flex}
  .topo__menu[data-hamb]>a,.topo__menu[data-hamb] .mr__botao{min-height:48px;border-bottom:1px solid var(--borda,#ebe8e1)}
  .topo__menu[data-hamb] .mr{display:block;width:100%}
  .topo__menu[data-hamb] .mr__botao{width:100%;justify-content:space-between}
  .topo__menu[data-hamb] .mr__lista{position:static;transform:none;min-width:0;box-shadow:none;border:0;border-radius:0;
    padding:.2rem 0 .4rem .8rem;background:transparent}
  .topo__menu[data-hamb] .mr__lista a{min-height:46px}
  .topo__ajuda{display:none}
}