/* ==========================================================================
   Vazto — o cabeçalho, uma vez só

   Havia três: o `.mast` da Home, o `.masthead` das páginas de produto e do
   Go-to-Market, e o `.hd` da versão antiga do Método. Três alturas, três
   tipografias, três comportamentos ao rolar — e cada correcção feita num deles
   deixava os outros para trás.

   Passa a haver este. A referência é o da Home, e é o da Home que está aqui:
   mesma altura, mesmo logo, mesmos espaçamentos, mesmo `is-stuck`.

   A navegação interna que algumas páginas tinham no topo — "Como atuamos",
   "Onde atuamos", "Como funciona" — sai do cabeçalho e passa a uma barra
   secundária, discreta, colada por baixo dele. Continua a servir para navegar
   a página sem competir com a navegação do site.

   As variáveis (--ink, --cyan, --on-dark, --mast, --ease) vêm de vazto.css,
   que todas as páginas carregam.
   ========================================================================== */
.mast{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:60;
  color:var(--on-dark,#f1f7f7);
  transition:background-color .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-block-end:1px solid transparent;
}
/* Ao rolar, a barra deixa de estar sobre o hero e passa a atravessar secções
   claras e escuras. A partir daí traz um fundo que não depende do que está
   por trás: 92% do tinto da marca sobre branco continua quase preto, e o logo
   branco continua a existir. */
.mast.is-stuck{
  background:color-mix(in srgb,var(--ink,#03070d) 92%,transparent);
  backdrop-filter:saturate(1.6) blur(20px); -webkit-backdrop-filter:saturate(1.6) blur(20px);
  border-block-end-color:rgba(7,210,210,.2);
  box-shadow:0 18px 40px -34px rgba(0,0,0,.9);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mast.is-stuck{ background:var(--ink,#03070d) }
}
/* Antes de rolar, a barra assenta sobre o hero. Sobre o teal claro do topo
   nem o branco puro chega aos 4.5:1 — media-se 4.4:1. Uma sombra descendente
   por trás dela resolve sem se ver, e desaparece quando o fundo chega. */
.mast::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; z-index:-1;
  block-size:calc(100% + 26px); pointer-events:none;
  background:linear-gradient(180deg,rgba(3,7,13,.84),rgba(3,7,13,.46) 58%,transparent);
  transition:opacity .3s ease;
}
.mast.is-stuck::before{ opacity:0 }

.mast__row{ display:flex; align-items:center; gap:26px; min-block-size:var(--mast,66px) }
.mast__logo img{ width:140px; block-size:auto; transition:width .3s ease }
.mast.is-stuck .mast__logo img{ width:120px }
.mast__nav{
  display:flex; align-items:center; gap:26px; margin-inline-start:auto;
  font-size:14.5px; font-weight:500;
}
.mast__nav a{
  position:relative; color:rgba(241,247,247,.88); padding-block:6px; transition:color .2s ease;
}
.mast__nav a::after{
  content:""; position:absolute; inset-block-end:0; inset-inline-start:0;
  inline-size:0; block-size:1.5px; background:var(--cyan,#07d2d2);
  transition:inline-size .26s var(--ease,cubic-bezier(.22,.61,.36,1));
}
.mast__nav a:hover{ color:#fff }
.mast__nav a:hover::after,
.mast__nav a[aria-current="page"]::after{ inline-size:100% }
.mast__nav a[aria-current="page"]{ color:#fff }
.mast__end{ display:flex; align-items:center; gap:16px }

.langs{ display:flex; align-items:center; gap:5px }
.langs img{
  inline-size:26px; block-size:18px; object-fit:cover; border-radius:2px; opacity:.7;
  transition:opacity .2s ease, transform .2s ease;
}
.langs a:hover img,.langs a[aria-current] img{ opacity:1; transform:translateY(-1px) }
/* O selector tem quatro bandeiras e mostra três: o motor esconde a do idioma
   em uso. Um <a hidden> já não se desenha, mas as barras põem display nos
   filhos e display ganha a hidden — esta regra devolve-lhe a última palavra. */
.langs a[hidden], .drawer__langs a[hidden]{ display:none }
/* A de Portugal é SVG e as outras são PNG recortados a 41×28. Sem isto o SVG
   desenha-se com a sua própria proporção e fica mais alto do que as vizinhas. */
.langs img[src$=".svg"]{ object-fit:fill }

/* O cabeçalho assenta no hero escuro mas não está dentro de `.g-dark`: o botão
   de contorno tem de saber em que chão está. */
.mast__cta{
  min-block-size:40px; padding-inline:18px; font-size:14px;
  color:#eafeff; border-color:rgba(7,210,210,.45);
}
.mast__cta:hover{ border-color:var(--cyan,#07d2d2); background:rgba(7,210,210,.12) }

.burger{ display:none; width:28px; gap:5px; padding-block:6px; background:none; border:0; cursor:pointer }
.burger span{ display:block; block-size:2px; background:#fff; border-radius:2px; transition:.25s var(--ease,ease) }

/* --- a gaveta ------------------------------------------------------------- */
.drawer{
  position:fixed; inset:0; z-index:80; background:rgba(3,7,13,.97);
  display:grid; align-content:center; justify-items:center; gap:22px; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.drawer.is-open{ opacity:1; visibility:visible }
.drawer__nav{ display:grid; justify-items:center; gap:18px }
.drawer__nav a{ font-family:var(--display); font-weight:700; font-size:23px; color:#fff }
.drawer__nav a:hover{ color:var(--cyan,#07d2d2) }
.drawer__close{
  position:absolute; inset-block-start:20px; inset-inline-end:22px;
  color:#fff; font-size:36px; line-height:1; background:none; border:0; cursor:pointer;
}
.drawer__langs img{ inline-size:34px; block-size:24px }

@media (max-width:860px){
  .mast__nav{ display:none }
  .burger{ display:grid }
  /* Quem empurrava o fim da barra para a direita era a margem automática do
     MENU — e o menu está escondido aqui. Sem ela, as bandeiras e o botão
     colavam-se ao logótipo e sobrava meia barra vazia à direita. */
  .mast__end{ margin-inline-start:auto }
  /* O botão vive na gaveta neste tamanho: com ele na barra não há largura
     para as bandeiras terem alvo de toque decente. */
  .mast__cta{ display:none }
  /* As bandeiras crescem e o hambúrguer fecha a composição à direita. */
  .langs{ gap:7px }
  .langs img{ inline-size:30px; block-size:21px; border-radius:3px }
  .langs a{ display:grid; place-items:center; padding:7px 2px }
  .burger{ margin-inline-start:6px; width:32px }
  .burger span{ block-size:2.5px }
}
/* Num telemóvel a barra tem três coisas onde antes tinha duas. As bandeiras
   encolhem para o botão não perder espaço. */
@media (max-width:560px){
  .mast__row{ gap:10px }
  .langs{ gap:6px }
  .langs img{ inline-size:27px; block-size:19px }
  .mast__logo img{ width:112px }
  .mast.is-stuck .mast__logo img{ width:104px }
  .mast__cta{ padding-inline:13px; font-size:13px; white-space:nowrap; min-block-size:36px }
}

/* --------------------------------------------------------------------------
   A barra secundária

   As âncoras da própria página. Vivem por baixo do cabeçalho e não dentro
   dele: no topo, disputavam espaço com a navegação do site e faziam cada
   página parecer ter um menu seu.
   -------------------------------------------------------------------------- */
/* A SEPARAÇÃO DA BARRA GLOBAL.

   As duas barras encostavam uma na outra, com o mesmo fundo translúcido e
   uma única linha em baixo: lidas juntas, pareciam um cabeçalho de 110px com
   os itens da página no fim, e não uma navegação de secção por baixo da
   navegação do site.

   O que as separa agora são três coisas pequenas, e nenhuma delas é um vão —
   um vão entre duas barras fixas deixa passar o conteúdo da página no meio, e
   isso lê-se como avaria:

     · uma LINHA no topo, mais clara do que a de baixo, que marca onde uma
       acaba e a outra começa;
     · o fundo um pouco mais opaco, para a barra de baixo se ler como uma
       segunda superfície e não como a continuação da primeira;
     · mais altura útil, que é o "respiro" pedido — os itens deixam de
       encostar às duas arestas. */
.subnav{
  position:sticky; inset-block-start:var(--mast,66px); z-index:55;
  background:color-mix(in srgb,var(--ink,#03070d) 94%,transparent);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-block-start:1px solid rgba(241,247,247,.14);
  border-block-end:1px solid rgba(241,247,247,.08);
  box-shadow:0 10px 24px -20px rgba(0,0,0,.9);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .subnav{ background:var(--ink,#03070d) }
}
.subnav__row{
  display:flex; align-items:center; gap:20px; min-block-size:52px;
  overflow-x:auto; scrollbar-width:none; white-space:nowrap;
}
.subnav__row::-webkit-scrollbar{ display:none }
.subnav a{
  position:relative; flex:none; padding-block:12px;
  font-size:13.5px; font-weight:500; color:rgba(241,247,247,.62);
  transition:color .2s ease;
}
.subnav a::after{
  content:""; position:absolute; inset-block-end:0; inset-inline:0;
  block-size:2px; background:var(--acc,var(--cyan,#07d2d2)); scale:0 1;
  transition:scale .26s var(--ease,ease);
}
.subnav a:hover{ color:#fff }
.subnav a:hover::after,
.subnav a.is-on::after{ scale:1 1 }
.subnav a.is-on{ color:#fff }
/* O caminho de volta ao produto: vinha do cabeçalho antigo das páginas
   aprofundadas e continua a fazer falta. Fica à cabeça da barra, com uma
   divisória a separá-lo das âncoras. */
.subnav__volta{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--acc-2,var(--cyan-lit,#6ef5f5)) !important;
  padding-inline-end:18px; margin-inline-end:2px;
  border-inline-end:1px solid rgba(241,247,247,.14);
}
.subnav__volta svg{ inline-size:14px; block-size:14px }
.subnav__volta::after{ display:none }

/* --- a barra das páginas internas ----------------------------------------
   Translúcida só na Home. Ali a barra assenta sobre um hero desenhado para a
   receber, e o efeito é o aprovado. Nas páginas internas ela atravessa heros
   diferentes uns dos outros e o que se vê passa a depender do que corre por
   trás: numas lê-se cinza, noutras quase desaparece.

   Nas internas nasce já com o fundo que só ganhava depois de rolar. Não é
   outro desenho — é o mesmo `is-stuck`, desde o primeiro pixel. A sombra
   descendente do `::before`, que existe para salvar o contraste sobre um hero
   claro, deixa de fazer falta e sai. */
.mast--solida{
  background:color-mix(in srgb,var(--ink,#03070d) 92%,transparent);
  backdrop-filter:saturate(1.6) blur(20px); -webkit-backdrop-filter:saturate(1.6) blur(20px);
  border-block-end-color:rgba(7,210,210,.2);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mast--solida{ background:var(--ink,#03070d) }
}
.mast--solida::before{ opacity:0 }