/* topo (barra + menu mobile) de todas as subpaginas. A home tem o seu,
   inline no index.html. Markup em ferramentas/topo.py. */
.topo{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:24px;min-height:72px;padding:8px min(8.6vw,140px);background:rgba(247,245,241,.78);backdrop-filter:blur(6.5px);-webkit-backdrop-filter:blur(6.5px);border:0}
.topo-logo img{display:block;height:46px;width:auto}
.topo-nav{display:flex;flex-wrap:nowrap;gap:2px;margin:0 auto;padding:4px;font-size:13px;font-weight:600;white-space:nowrap}
.topo-nav a{display:flex;align-items:center;min-height:44px;padding:7px 15px;line-height:1.65;text-decoration:none;color:var(--tinta-2);transition:color .3s ease;white-space:nowrap}
.topo-nav a:hover{color:var(--laranja)}
.topo-social{display:flex;align-items:center;gap:4px;margin-left:auto}
.topo-ig{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;color:var(--tinta);transition:color .2s ease}
.topo-ig:hover{color:var(--laranja)}
.topo-cta{flex:none;margin-left:6px;padding:11px 18px;line-height:1.65;background:#c2360b;color:#fff;text-decoration:none;font-family:var(--titulo);font-size:13px;font-weight:700;letter-spacing:.01em;transition:background-color .2s ease}
.topo-cta:hover{background:#a32d09}
@media(min-width:901px) and (max-width:1160px){.topo{gap:10px;padding-left:20px;padding-right:20px}.topo-nav{gap:0;font-size:12px}.topo-nav a{padding:7px 8px}.topo-cta{padding:10px 12px;font-size:10px;margin-left:2px}}
/* desktop: barra e logo crescem juntas (mesma razao do index) e os itens do
   menu sobem para 15px. Fica depois da faixa 901-1160 de proposito: senao
   aquela regra, por vir mais tarde na folha, devolvia a fonte para 12px. */
@media(min-width:901px){
  .topo{min-height:88px}
  .topo-logo img{height:56px}
  .topo-nav{font-size:14px;letter-spacing:.02em}
  .topo-nav a{padding:8px 7px;color:var(--tinta);text-shadow:0 1px 1px rgba(255,255,255,.35)}   /* preto com um halo branco leve */
  .topo-ig{color:var(--tinta)}
  .topo-ig svg{filter:drop-shadow(0 1px 1px rgba(255,255,255,.35))}   /* mesmo halo dos itens do menu */
}
/* faixa estreita: aqui o topo carrega menu + 2 icones sociais + CTA, entao a
   fonte e o padding cedem um pouco para tudo caber na barra. */
@media(min-width:901px) and (max-width:1220px){
  .topo-nav{font-size:13px;letter-spacing:0}
  .topo-nav a{padding:8px 4px}
  .topo-cta{padding:10px 11px;font-size:10px}
  .topo{gap:8px}
}
.menu-btn{display:none;width:44px;height:44px;border:0;background:none;color:var(--tinta);cursor:pointer;padding:0;align-items:center;justify-content:center;flex:none;margin-left:6px}
.menu-btn svg{display:block}
.menu-btn .l1,.menu-btn .l3{transform-origin:12px 12px;transition:transform .3s ease}
.menu-btn .l1{transform:translateY(-1.5px)}.menu-btn .l3{transform:translateY(1.5px)}
.menu-btn[aria-expanded="true"] .l1{transform:rotate(45deg) translateY(5px)}
.menu-btn[aria-expanded="true"] .l3{transform:rotate(-45deg) translateY(-5px)}
.menu-mobile{position:fixed;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:0;padding:92px 22px 40px;background:var(--papel);visibility:hidden;transform:translateX(100%);transition:transform .7s cubic-bezier(.85,0,.15,1),visibility 0s linear .7s;overflow-y:auto}
.menu-mobile[hidden]{display:flex}
.menu-mobile[data-aberto="true"]{transform:none;visibility:visible;transition:transform .7s cubic-bezier(.85,0,.15,1)}
.menu-mobile a{padding:6px 0;color:var(--tinta);text-decoration:none;font-family:var(--titulo);font-weight:700;font-size:clamp(34px,7vw,88px);line-height:1;letter-spacing:-.03em;text-transform:uppercase;transition:color .3s ease}
.menu-mobile a:hover{color:var(--ouro)}
.menu-mobile .menu-cta{margin-top:34px;padding:18px 32px;font-size:14px;letter-spacing:.01em;text-transform:none;background:var(--tinta);color:#fff}
.menu-aberto{overflow:hidden}
.menu-aberto .topo{background:var(--papel);backdrop-filter:none;-webkit-backdrop-filter:none}
.menu-aberto .menu-btn{position:relative;z-index:6;color:var(--tinta);border:0;background:transparent}
.menu-aberto .menu-btn svg{width:26px;height:26px;stroke-width:1.8}
.menu-aberto .topo-logo{position:relative;z-index:6}
@media(max-width:900px){
  .topo-nav,.topo-ig{display:none}
  .topo-social{margin:0 auto}
  .topo{padding:6px 12px 6px 16px;gap:0;justify-content:space-between}
  .topo-logo img{height:46px}   /* 64% da barra de 72px, mesma razao do desktop */
  .topo-cta{display:none}   /* igual ao index: no mobile o CTA mora dentro do menu (.menu-cta) */
  .menu-btn{display:flex}
}