/* ==========================================================================
   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 }

/* Five items since Cases joined (2026-10-12): between the tablet and a wide
   screen the bar has no room for the menu, the flags and the button on one
   line, so the menu tightens and the button moves to the drawer, the rule
   the Home already applied (home.css, max-width:1080px), now on every page. */
.mast__nav a{ white-space:nowrap }
@media (max-width:1180px){
  .mast__nav{ gap:18px; font-size:13.5px }
  .mast__cta{ display:none }
}
@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 }