/* Cabeçalho: navegação, links e menu mobile. */
.nav{display:flex;justify-content:space-between;align-items:center;min-height:76px;border-bottom:1px solid var(--rule);gap:24px}
.links{display:flex;gap:30px;align-items:center;font-size:12px;font-weight:700}
.links a:hover{color:var(--blue)}
/* Aba da página atual: azul e sublinhada. */
.links a[aria-current="page"]{color:var(--blue);text-decoration:underline;text-underline-offset:8px}
.menu{display:none;background:none;border:1px solid var(--ink);border-radius:30px;padding:9px 15px}
@media(max-width:900px){
  .links{gap:18px}
}
@media(max-width:650px){
  .nav{min-height:68px;position:relative}
  .menu{display:block;font-size:12px}
  .links{display:none;position:absolute;left:0;right:0;top:67px;background:var(--paper);padding:25px;border:1px solid var(--rule);z-index:12;box-shadow:0 12px 20px #0001;align-items:stretch}
  .links.open{display:flex;flex-direction:column;gap:22px}
}
@media(max-width:900px){
  .nav{gap:16px}
  .links{gap:14px}
}
@media(max-width:650px){
  .menu{min-width:44px;min-height:44px}
}
/* Nova arte: faixa branca de ponta a ponta e logo horizontal. */
header.wrap{max-width:none;background:#fff;padding-left:max(5%,(100% - 1296px)/2);padding-right:max(5%,(100% - 1296px)/2)}
header .nav{border-bottom:0}
header .brand{align-items:center;gap:14px}
/* A imagem tem muita margem transparente: o recorte (cover) deixa só o peixe e o nome. */
.brand-logo{display:block;height:30px;width:auto;aspect-ratio:8.2;object-fit:cover}
@media(max-width:650px){
  header.wrap{padding-left:6%;padding-right:6%}
  header .brand{gap:10px}
  .brand-logo{height:18px}
  .links{background:#fff}
}
/* Botão discreto de pausa: congela as animações do site todo (data-movimento, ver movimento.js). */
#motion-toggle{margin-left:auto;width:34px;height:34px;display:grid;place-items:center;border:1px solid #0646e855;border-radius:50%;background:#fff;color:var(--blue);font-size:12px;line-height:1}
#motion-toggle:hover{border-color:var(--blue)}
@media(max-width:650px){
  #motion-toggle{width:44px;height:44px}
}
/* Sem movimento no sistema, as animações já não rodam (base.css); o botão perde a função. */
@media(prefers-reduced-motion:reduce){
  #motion-toggle{display:none}
}
/* Celular: pausa sempre redonda e "Menu +" sem quebrar; quem cede espaço é a marca (a assinatura some nas telas mais estreitas). */
@media(max-width:650px){
  #motion-toggle{flex:none;aspect-ratio:1}
  .menu{flex:none;white-space:nowrap}
  header .brand{min-width:0}
}
@media(max-width:420px){
  header .brand span{display:none}
}