.leitura {
  position: fixed; z-index: calc(var(--z-nav) + 1); top: 0; left: 0; right: 0; height: 2px;
  background: var(--cor-leitura); transform: scaleX(var(--progresso, 0)); transform-origin: 0 50%; pointer-events: none;
}

.nav {
  --nav-h: 64px;
  --logo-w: 160px;
  --borda-faixa: 30px;              
  position: fixed; z-index: var(--z-nav); top: 0; left: 0; right: 0;
  pointer-events: none;
}
.nav-casca {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-6);
  height: var(--nav-h);
  margin: 0 auto;
  padding: 0 var(--margem, 16px);
  pointer-events: auto;
}

.nav-fundo {
  position: absolute; left: 0; right: 0; top: 0; z-index: -1;
  height: calc(var(--nav-h) + var(--borda-faixa));
  background: url(../midia/faixa-aguada.webp) 0 100% / 1600px 150px repeat-x;
  opacity: 0;
  pointer-events: none;
}
.nav-marca { display: flex; align-items: center; min-height: 44px; flex: none; text-decoration: none; border-radius: var(--r-sm); }
.nav-marca img { width: var(--logo-w); height: auto; }

.nav-ancoras { display: none; }
.nav-ancoras a {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  font-size: .9375rem; font-weight: 450; letter-spacing: .01em; color: var(--cor-texto); text-decoration: none;
}
.nav-ancoras a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 9px; height: 1.5px;
  background: repeating-linear-gradient(90deg, var(--cor-traco) 0 11px, transparent 11px 14px, var(--cor-traco) 14px 15.5px, transparent 15.5px 18.5px);
  transform: scaleX(0); transform-origin: 0 50%;
}
@media (hover: hover) { .nav-ancoras a:hover::after { transform: none; } }
.nav-ancoras a[aria-current]::after { transform: none; }

.nav .botao--nav { display: none; }

.nav-menu {
  position: relative; flex: none; width: 48px; height: 48px; margin-left: auto; margin-right: -12px;
  border: 0; border-radius: var(--r-md); background: none; cursor: pointer; touch-action: manipulation;
}
.nav-menu span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--cor-traco); border-radius: 1px; }
.nav-menu span:first-child { top: 19px; }
.nav-menu span:last-child { top: 28px; }
.nav-menu[aria-expanded="true"] span:first-child { top: 23.5px; transform: rotate(45deg); }
.nav-menu[aria-expanded="true"] span:last-child { top: 23.5px; transform: rotate(-45deg); }

.nav[data-estado="subindo"] .nav-fundo,
.nav[data-estado="descendo"] .nav-fundo { opacity: 1; }
.nav[data-estado="descendo"] { transform: translateY(calc(-100% - var(--borda-faixa) - 4px)); }
.nav[data-estado="descendo"] .nav-casca { pointer-events: none; }
body.menu-aberto .nav { transform: none; }
body.menu-aberto .nav .nav-fundo { opacity: 0; }

.menu-cel {
  position: fixed; inset: 0; z-index: var(--z-menu);
  display: flex; flex-direction: column; justify-content: center; gap: var(--e-8);
  padding: calc(var(--nav-h, 64px) + 24px) var(--margem, 16px) calc(28px + env(safe-area-inset-bottom));
  background: var(--cor-aguada) url(../midia/granulacao.webp) 0 0 / 1600px 800px repeat;
  overflow: hidden auto; overscroll-behavior: contain;
}
.menu-cel[hidden] { display: none; }
.menu-copa, .menu-copa-sombra {
  position: absolute; z-index: 0; right: -96px; bottom: -88px; width: 300px; height: auto; max-width: none;
  pointer-events: none; user-select: none;
}
.menu-copa-sombra { right: -82px; bottom: -103px; }
.menu-cel > :not(.menu-copa):not(.menu-copa-sombra) { position: relative; z-index: 1; }
.menu-cel-links { display: flex; flex-direction: column; gap: var(--e-1); counter-reset: none; }
.menu-cel-links a {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; column-gap: var(--e-4); min-height: 58px;
  font-family: var(--fonte); font-size: clamp(2rem, 1.4rem + 3vw, 2.75rem); font-weight: var(--peso-titulo);
  font-variation-settings: 'FLAR' var(--flar-titulo); letter-spacing: -0.02em; color: var(--cor-texto); text-decoration: none;
}

.menu-num {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--cor-traco); font-size: .8125rem; font-weight: 500; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; line-height: 1; font-variation-settings: normal;
}
.menu-contato { display: flex; flex-wrap: wrap; gap: 0 var(--e-6); font-size: 1rem; }
.menu-contato a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cor-texto); text-underline-offset: 4px; }
body.menu-aberto { overflow: hidden; }

.acao-cel {
  position: fixed; z-index: var(--z-acao); left: 0; right: 0; bottom: 0;
  padding: 0 var(--margem, 16px) calc(12px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.acao-cel .botao { pointer-events: auto; }

.acao-cel .botao::after {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  border-radius: var(--r-pill);
  background: var(--cor-fundo);
}
.acao-cel[data-visivel="nao"] { visibility: hidden; }

@media (min-width: 1024px) and (orientation: landscape), (min-width: 1101px) {
  .nav { --nav-h: 88px; --logo-w: 180px; --borda-faixa: 32px; }
  
  .nav-casca { padding: 0 clamp(24px, 6.67vw, 160px) 0 var(--margem); }
  .nav-ancoras { display: flex; gap: var(--e-8); margin-left: var(--e-6); }
  
  .nav .botao--nav { display: none; margin-left: auto; }
  .nav[data-acao="sim"] .botao--nav { display: inline-flex; }
  .nav-menu { display: none; }
  .menu-cel, .acao-cel { display: none !important; }
}

@keyframes nav-entra { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
html.com-movimento .nav { transition: transform .38s cubic-bezier(.2,.7,.2,1); }
html.com-movimento .nav-fundo { transition: opacity .25s ease; }
html.com-movimento .nav[data-acao="sim"] .botao--nav { animation: nav-entra .4s cubic-bezier(.2,.7,.2,1) both; }
html.com-movimento .nav-ancoras a::after { transition: transform .28s cubic-bezier(.2,.7,.2,1); }
html.com-movimento .nav-menu span { transition: transform .3s ease, top .3s ease; }
html.com-movimento .acao-cel { transition: transform .35s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0s; }
html.com-movimento .acao-cel[data-visivel="nao"] { transform: translateY(130%); transition: transform .3s ease, visibility 0s linear .3s; }
@media (prefers-reduced-motion: reduce) {
  html.com-movimento .nav, html.com-movimento .nav-fundo { transition: none; }
  html.com-movimento .nav[data-acao="sim"] .botao--nav { animation: none; }
  html.com-movimento .acao-cel, html.com-movimento .acao-cel[data-visivel="nao"] { transition: none; transform: none; }
}