/* ═══════════════════════════════════════════════════════════════════════
   A navbar do site, nas páginas que não são a home.

   Porque existe este ficheiro: as páginas internas tinham uma barra escura
   com «imogrow» e «Voltar ao site», e a home tem a pílula flutuante com o
   menu. Eram duas navbars no mesmo site, e a diferença lia-se como erro.
   Isto é o porte da pílula da home (o `#navshell` do `Imogrow.dc.html`),
   sem a parte que só a home pode ter: lá o símbolo VIAJA entre o logótipo
   fixo do herói e o botão do menu, e aqui não há logótipo fixo nenhum.

   Duas diferenças deliberadas em relação à home:
     · há um link «Início», porque nas internas o logótipo não é o caminho
       de volta — é só o símbolo dentro do botão;
     · o `main` ganha o espaço da barra em cima, que a barra sticky antes
       ocupava sozinha.

   Quando isto estiver desactualizado, a fonte é o bloco de estilo da
   navbar em `Imogrow.dc.html` — este ficheiro segue-o, não o contrário.
   ═══════════════════════════════════════════════════════════════════════ */

[data-m="navbar"] {
  position: fixed; top: 30px; left: 0; right: 0; z-index: 9;
  display: flex; justify-content: flex-start; padding-left: 24px;
  pointer-events: none;
}
@media (max-width: 820px) { [data-m="navbar"] { padding-left: 20px; } }

#navshell {
  pointer-events: auto; display: flex; align-items: center; overflow: hidden;
  height: 54px; border-radius: 100px; padding-left: 17px; padding-right: 17px; gap: 0;
  background: rgba(255,255,255,0.056);
  border: 1px solid rgba(255,255,255,0.124);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.17), 0 18px 44px -20px rgba(242,243,245,0.42);
  transition: padding .7s cubic-bezier(.22,1,.36,1), height .55s cubic-bezier(.22,1,.36,1),
              gap .7s cubic-bezier(.22,1,.36,1), background .4s ease,
              transform .46s cubic-bezier(.22,1,.36,1);
}
html.nav-aberta #navshell { padding-left: 14px; padding-right: 18px; gap: 22px; }

/* Estado de medição: para centrar a pílula aberta é precisa a largura dela
   já aberta, e ela só existe no fim de uma transição de .8s. Com esta
   classe abre e fecha dentro do mesmo frame, sem nada animar. */
html.medindo #navshell, html.medindo #navlinks, html.medindo #navlinks a,
html.medindo #menu-btn .nb, html.medindo #menu-btn .nb-aviao { transition: none !important; }

#menu-btn {
  position: relative; flex: 0 0 auto; cursor: pointer; width: 44px; height: 44px; margin: -12px;
  border: none; background: transparent; padding: 0;
  -webkit-appearance: none; appearance: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
}
#menu-btn:focus-visible { outline: 2px solid #F2F3F5; outline-offset: 4px; border-radius: 50%; }
#menu-btn .nb {
  position: absolute; width: 17px; height: 1.8px; border-radius: 2px; background: #F2F3F5;
  transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
#menu-btn .nb1 { transform: translateY(-5px); }
#menu-btn .nb3 { transform: translateY(5px); }
html.nav-aberta #menu-btn .nb1 { opacity: 0; transform: translateY(0) scaleX(.4); }
html.nav-aberta #menu-btn .nb2 { opacity: 0; transform: scaleX(.4); }
html.nav-aberta #menu-btn .nb3 { opacity: 0; transform: translateY(0) scaleX(.4); }
#menu-btn .nb-aviao { position: absolute; opacity: 0; }
html.nav-aberta #menu-btn .nb-aviao { opacity: 1; }

#navlinks {
  display: flex; align-items: center; gap: 0; max-width: 0;
  transition: max-width .8s cubic-bezier(.22,1,.36,1), gap .7s cubic-bezier(.22,1,.36,1);
}
html.nav-aberta #navlinks { gap: 30px; max-width: 620px; }
#navlinks a {
  font-size: 15px; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
  color: rgba(242,243,245,0.72); text-decoration: none;
  display: inline-flex; align-items: center; padding: 12px 4px; margin: -12px -4px;
  -webkit-tap-highlight-color: transparent;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .45s ease 0s, transform .55s cubic-bezier(.22,1,.36,1) 0s,
              color .25s ease, visibility 0s linear .6s;
}
#navlinks a:hover { color: #F2F3F5; }
html.nav-aberta #navlinks a { opacity: 1; visibility: visible; transform: translateY(0); }
/* Os quatro links entram em cascata. São quatro e não três: aqui há
   «Início», que na home não faz falta. */
html.nav-aberta #navlinks a:nth-of-type(1) { transition: opacity .45s ease .18s, transform .55s cubic-bezier(.22,1,.36,1) .18s, color .25s ease, visibility 0s linear 0s; }
html.nav-aberta #navlinks a:nth-of-type(2) { transition: opacity .45s ease .25s, transform .55s cubic-bezier(.22,1,.36,1) .25s, color .25s ease, visibility 0s linear 0s; }
html.nav-aberta #navlinks a:nth-of-type(3) { transition: opacity .45s ease .32s, transform .55s cubic-bezier(.22,1,.36,1) .32s, color .25s ease, visibility 0s linear 0s; }
html.nav-aberta #navlinks a:nth-of-type(4) { transition: opacity .45s ease .39s, transform .55s cubic-bezier(.22,1,.36,1) .39s, color .25s ease, visibility 0s linear 0s; }

/* A cortina impede que os títulos passem legíveis por trás da pílula. Nas
   internas está sempre acesa a partir do primeiro scroll, como na home. */
#cortina {
  position: fixed; top: 0; left: 0; right: 0; height: 112px; z-index: 7; pointer-events: none;
  background: linear-gradient(180deg, #0A0A0B 0%, rgba(10,10,11,0.92) 42%, rgba(10,10,11,0.6) 70%, rgba(10,10,11,0) 100%);
  opacity: 0; transition: opacity .4s ease;
}
html.nav-compacta #cortina, html.nav-aberta #cortina { opacity: 1; }

/* O espaço que a barra sticky ocupava passa a ser padding do conteúdo: a
   pílula é fixa e flutua por cima. */
main { padding-top: 112px; }

@media (max-width: 560px) {
  [data-m="navbar"] { top: 26px; }
  #cortina {
    height: 116px;
    background: linear-gradient(180deg, #0A0A0B 0%, #0A0A0B 54%, rgba(10,10,11,0.85) 72%, rgba(10,10,11,0.45) 86%, rgba(10,10,11,0) 100%);
  }
  main { padding-top: 100px; }

  /* Em ecrã estreito o menu abre em folha vertical por baixo da pílula, e a
     pílula não muda de tamanho: animar padding e gap por cima de um
     backdrop-filter é a coisa mais cara que estas páginas têm. */
  #navshell { position: relative; transition: background .3s ease; }
  html.nav-aberta #navshell { overflow: visible; gap: 0; padding-left: 17px; padding-right: 17px; }
  #navlinks {
    position: absolute; top: calc(100% + 10px); left: 0;
    width: min(78vw, 320px);
    flex-direction: column; align-items: stretch;
    max-width: none; gap: 0;
    padding: 6px; border-radius: 20px;
    /* Opaco, e nao os 0.94 da home: aqui a folha abre por cima de TEXTO
       (a home abre por cima de video), e o titulo da pagina lia-se atraves
       do painel. Medido: com alfa via-se; solido nao se ve. */
    background: #0E0E10;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 26px 60px -24px rgba(0,0,0,0.95);
    opacity: 0; visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transition: opacity .26s ease, transform .38s cubic-bezier(.22,1,.36,1), visibility 0s linear .4s;
  }
  html.nav-aberta #navlinks { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; gap: 0; max-width: none; }
  #navlinks a {
    display: flex; width: 100%; justify-content: flex-start;
    font-size: 16.5px; min-height: 52px; padding: 15px 14px; margin: 0;
    opacity: 1; visibility: inherit; transform: none; border-radius: 13px;
    transition: color .25s ease;
  }
  #navlinks a + a { border-top: 1px solid rgba(255,255,255,0.07); }
}

@media (prefers-reduced-motion: reduce) {
  #navshell, #navlinks, #navlinks a, #menu-btn .nb, #menu-btn .nb-aviao, #cortina { transition: none !important; }
}