/* ============================================================
   FLASH — Header: cápsula central, dois CTAs e mega menu

   O header antigo era uma fileira: logo, links, um botão. Os links
   ficavam centrados no espaço QUE SOBRAVA entre logo e botão — ou seja,
   nunca no centro da tela.

   Aqui a linha vira grid de três faixas (1fr auto 1fr). A do meio se
   dimensiona pelo conteúdo e as duas laterais dividem o resto em partes
   iguais, então a cápsula fica no centro real da viewport, independente
   da largura do logo ou dos botões.

   Só o cabeçalho é tocado. Hero, iceberg e o resto da página não.
   ============================================================ */

#fh-header .fh-header__in {
  display: grid;
  /* minmax(0,1fr) e não 1fr: "1fr" é minmax(auto,1fr), então a faixa
     cresce quando o conteúdo dela é maior que a fatia — foi o que
     empurrava a cápsula 65px para a esquerda, porque os dois botões
     ocupam mais que o logo. Com o mínimo em 0, as duas laterais ficam
     iguais e o centro é o centro de verdade. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}
#fh-header .fh-logo { justify-self: start; }

/* --------------------------- cápsula ---------------------------- */
#fh-header .fh-nav {
  justify-self: center;
  display: flex; align-items: center; gap: 4px;
  padding: 5px 7px;
  border-radius: 999px;
  border: 1px solid rgba(140, 170, 220, .16);
  background: rgba(120, 160, 220, .06);
  backdrop-filter: blur(10px);
}
#fh-header .fh-nav > a,
#fh-header .fh-nav .fh-cases__bt {
  padding: 8px 14px; border-radius: 999px;
  font-size: 13.5px; line-height: 1; white-space: nowrap;
  color: #C2CCDA; text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
#fh-header .fh-nav > a:hover,
#fh-header .fh-nav .fh-cases__bt:hover,
#fh-header .fh-nav .fh-cases[data-aberto="1"] .fh-cases__bt {
  background: rgba(31, 111, 255, .16); color: #fff;
}
#fh-header .fh-nav a:focus-visible,
#fh-header .fh-nav button:focus-visible {
  outline: 2px solid #4FD8FF; outline-offset: 2px;
}

/* ------------------------- ações à direita ---------------------- */
#fh-header .fh-acoes {
  justify-self: end;
  display: flex; align-items: center; gap: 9px;
}
/* compactos de propósito: com o mínimo da faixa em 0, o que não couber
   invade a cápsula em vez de empurrá-la */
#fh-header .fh-acoes a {
  padding: 9px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
#fh-header .fh-acoes .fh-acao--s {
  color: #EEF3FA; border: 1px solid rgba(140, 170, 220, .22);
}
#fh-header .fh-acoes .fh-acao--s:hover { border-color: #4D8FFF; color: #4D8FFF; }
#fh-header .fh-acoes .fh-acao--p { background: #1F6FFF; color: #fff; }
#fh-header .fh-acoes .fh-acao--p:hover { background: #4D8FFF; }

/* ========================== mega menu =========================== */
/* Dez serviços numa lista vertical viram uma coluna longa e sem
   hierarquia. Em quatro grupos, o menu já conta como as frentes se
   organizam antes mesmo do clique. */
.fh-mega { position: relative; }
.fh-mega__painel {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(-8px);
  top: 74px;
  width: min(940px, calc(100vw - 40px));
  padding: 22px; margin: 0;
  border-radius: 18px; border: 1px solid rgba(140, 170, 220, .18);
  background: rgba(8, 12, 22, .97);
  backdrop-filter: blur(16px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 70;
}
.fh-mega[data-aberto="1"] .fh-mega__painel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.fh-mega__grade {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 22px;
  margin: 0; padding: 0; list-style: none;
}
.fh-mega__grupo > h3 {
  margin: 0 0 10px; padding-bottom: 9px;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #4D8FFF; border-bottom: 1px solid rgba(140, 170, 220, .14);
}
.fh-mega__grupo ul { margin: 0; padding: 0; list-style: none; }
.fh-mega__grupo a {
  display: block; padding: 7px 9px; border-radius: 8px;
  font-size: 13.5px; color: #C2CCDA; text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.fh-mega__grupo a:hover, .fh-mega__grupo a:focus-visible {
  background: rgba(31, 111, 255, .16); color: #fff;
}
.fh-mega__rodape {
  display: flex; justify-content: flex-end;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(140, 170, 220, .14);
}
.fh-mega__rodape a {
  font-size: 13px; font-weight: 600; color: #4D8FFF; text-decoration: none;
}
.fh-mega__rodape a:hover { color: #fff; }

/* ======================== menu mobile =========================== */
@media (max-width: 980px) {
  #fh-header .fh-header__in { grid-template-columns: 1fr auto; }
  #fh-header .fh-nav, #fh-header .fh-acoes { display: none; }

  /* ------------------------- a gaveta ---------------------------- */
  /* Dois defeitos vinham do estilo original dela:

     1. background com alpha .97 sobre a home escura deixava o hero
        vazando por tras do menu -- texto fantasma atras dos links.
     2. sem rolagem. Com Servicos aberto o conteudo tem ~1450px numa tela
        de 812: os ultimos itens ficavam abaixo da dobra, inalcancaveis.

     O id existe no elemento, entao (1-0-0) ganha da regra do bundle
     independente da ordem em que as folhas carregarem. */
  #fh-drawer, .fh-drawer {
    background: #06080C;
    overflow-y: auto;
    overscroll-behavior: contain;      /* nao arrasta a pagina atras */
    -webkit-overflow-scrolling: touch;
  }

  /* a gaveta recebe os mesmos submenus, recolhidos por padrão */
  .fh-drawer .fh-cases, .fh-drawer .fh-mega { display: block; width: 100%; }
  .fh-drawer .fh-cases__bt, .fh-drawer .fh-mega__bt {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 13px 0;
    font: inherit; font-size: 16px; color: #EEF3FA;
    background: none; border: 0; cursor: pointer;
  }
  .fh-drawer .fh-mega__painel {
    position: static; transform: none; width: auto; margin: 0 0 8px;
    padding: 6px 0 10px; border: 0; background: none;
    box-shadow: none; backdrop-filter: none;
    opacity: 1; visibility: visible; pointer-events: auto;
    display: none;
  }
  /* mesmo caso do .fh-cases__lista: a regra de estado aberto (0-3-0)
     vence a de posicionamento acima (0-2-0) e ressuscitava o
     translateX(-50%) do desktop. Zerar tem de ser aqui. */
  .fh-drawer .fh-mega[data-aberto="1"] .fh-mega__painel {
    display: block; transform: none;
  }
  .fh-drawer .fh-mega__grade { grid-template-columns: 1fr; gap: 12px; }
  .fh-drawer .fh-mega__grupo a { padding: 8px 12px; }
  .fh-drawer .fh-mega__rodape { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  #fh-header .fh-nav > a, #fh-header .fh-acoes a,
  .fh-mega__painel, .fh-mega__grupo a { transition: none; }
}