/* ============================================================
   AC Solução — Cabeçalho de cantos + menu expandido (global)
   ============================================================ */

ac-header{display:contents}

/* ---------- Cabeçalho: lâmina de vidro ----------
   Faixa horizontal contínua, translúcida e fina, inspirada no "Card com brilho":
   fio de luz no topo (grad-edge) e brilho azul muito baixo vindo do canto do Menu.
   O tom acompanha a seção sob o cabeçalho (data-theme), sempre com transição suave. */
.site-header{
  --bar-bg:rgba(8,18,44,.14);
  --bar-border:rgba(192,218,255,.09);
  --bar-edge:rgba(192,218,255,.28);
  --bar-glow:rgba(29,80,247,.14);
  --bar-shadow:0 8px 24px -20px rgba(3,6,14,.5);
  position:fixed; z-index:var(--z-header);
  top:clamp(8px,1.4vh,14px); left:max(8px,calc(var(--gutter) - 14px)); right:max(8px,calc(var(--gutter) - 14px));
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6);
  height:54px; padding:0 9px 0 14px;
  border-radius:var(--radius-md); overflow:hidden; isolation:isolate;
  background:var(--bar-bg);
  border:var(--bw-hairline) solid var(--bar-border);
  box-shadow:var(--bar-shadow);
  -webkit-backdrop-filter:blur(12px) saturate(115%);
          backdrop-filter:blur(12px) saturate(115%);
  transition:opacity var(--dur-slow) var(--ease-entrance), transform var(--dur-slow) var(--ease-entrance),
             background var(--dur-slow) var(--ease-standard), border-color var(--dur-slow) var(--ease-standard),
             box-shadow var(--dur-slow) var(--ease-standard);
}
/* fio de luz na borda superior */
.site-header::before{content:""; position:absolute; top:0; left:8%; right:8%; height:1px; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--bar-edge),transparent); opacity:.7;
  transition:background var(--dur-slow) var(--ease-standard)}
/* brilho baixo vindo do canto do Menu (Card com brilho, glow-right) */
.site-header::after{content:""; position:absolute; z-index:-1; pointer-events:none; border-radius:50%;
  width:260px; height:140px; right:-110px; top:-48px;
  background:radial-gradient(closest-side,var(--bar-glow),rgba(29,80,247,0)); filter:blur(18px);
  transition:background var(--dur-slow) var(--ease-standard)}
.site-header[data-visible="false"]{opacity:0; transform:translateY(-12px); pointer-events:none;
  transition-timing-function:var(--ease-exit); transition-duration:var(--dur-standard)}

.site-header__brand{display:inline-flex; color:var(--white); border-radius:6px;
  transition:color var(--dur-slow) var(--ease-standard)}
.site-header__logo{width:clamp(100px,7.6vw,118px); height:auto}
.site-header .site-header__brand .site-header__logo{filter:drop-shadow(0 1px 6px rgba(3,6,14,.25))}

/* Botão Menu do cabeçalho: pílula compacta de alto contraste sobre o vidro */
.site-header .menu-toggle{height:34px; padding:0 12px 0 15px; gap:var(--sp-2); font-size:var(--fs-caption);
  background:rgba(255,255,255,.9); color:var(--blue-900); border-color:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none}
.site-header .menu-toggle .menu-btn__icon{width:18px; height:10px}
.site-header .menu-toggle:hover{background:var(--white); border-color:transparent; box-shadow:0 6px 18px -10px rgba(29,80,247,.5)}

/* Botão Menu / Fechar — pílula compacta */
.menu-btn{
  display:inline-flex; align-items:center; gap:var(--sp-3);
  height:44px; padding:0 14px 0 18px; border-radius:var(--radius-pill);
  background:rgba(5,10,22,.62); border:var(--bw-hairline) solid var(--border-glass);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  color:var(--white); font-size:var(--fs-label); font-weight:var(--fw-medium);
  transition:background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.menu-btn:hover{border-color:var(--brand); background:rgba(10,22,52,.86)}
.menu-btn__icon{position:relative; width:22px; height:12px; display:block}
.menu-btn__icon i{position:absolute; left:0; right:0; height:1.5px; border-radius:2px; background:currentColor;
  transition:transform var(--dur-standard) var(--ease-standard)}
.menu-btn__icon i:first-child{top:2px}
.menu-btn__icon i:last-child{bottom:2px}
.menu-toggle:hover .menu-btn__icon i:first-child{transform:translateX(3px)}
.menu-toggle:hover .menu-btn__icon i:last-child{transform:translateX(-3px)}
.menu-btn__icon.is-close{width:16px; height:16px}
.menu-btn__icon.is-close i{top:50%; bottom:auto; margin-top:-.75px}
.menu-btn__icon.is-close i:first-child{transform:rotate(45deg)}
.menu-btn__icon.is-close i:last-child{transform:rotate(-45deg)}
.menu-close:hover .menu-btn__icon.is-close i:first-child{transform:rotate(135deg)}
.menu-close:hover .menu-btn__icon.is-close i:last-child{transform:rotate(45deg)}

/* Sobre seções claras: vidro claro + versão Azul Profundo da marca (oficial) */
.site-header[data-theme="light"]{
  --bar-bg:rgba(255,255,255,.42);
  --bar-border:rgba(8,23,56,.06);
  --bar-edge:rgba(29,80,247,.22);
  --bar-glow:rgba(71,119,252,.08);
  --bar-shadow:0 8px 22px -20px rgba(8,23,56,.25)}
.site-header[data-theme="light"] .site-header__brand{color:var(--blue-900)}
.site-header[data-theme="light"] .site-header__logo{filter:none}
.site-header[data-theme="light"] .menu-toggle{background:var(--blue-900); color:var(--white)}
.site-header[data-theme="light"] .menu-toggle:hover{background:var(--blue-800); box-shadow:0 8px 24px -10px rgba(29,80,247,.55)}

/* ---------- Menu expandido ---------- */
html.menu-open{overflow:hidden}
.site-menu{position:fixed; inset:0; z-index:var(--z-overlay)}
.site-menu[hidden]{display:none}
.site-menu__panel{
  position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:clamp(var(--sp-8),5vh,var(--sp-16));
  padding:var(--sp-6) var(--gutter) var(--sp-8);
  background:
    radial-gradient(70% 60% at 88% -10%,rgba(29,80,247,.20) 0%,transparent 60%),
    radial-gradient(60% 50% at 0% 110%,rgba(18,58,122,.30) 0%,transparent 60%),
    var(--ink-950);
  opacity:0;
  transition:opacity var(--dur-slow) var(--ease-entrance);
}
.site-menu.is-open .site-menu__panel{opacity:1}
.site-menu.is-closing .site-menu__panel{opacity:0; transition:opacity 420ms var(--ease-exit)}

.site-menu__top{display:flex; align-items:center; justify-content:space-between;
  padding-bottom:var(--sp-6); border-bottom:var(--bw-hairline) solid var(--divider)}

.site-menu__nav{display:grid; grid-template-columns:minmax(220px,1fr) 2.6fr; gap:var(--sp-10) var(--sp-16); align-items:start}
.menu-primary{display:flex; flex-direction:column; gap:var(--sp-2)}
.menu-groups{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-10) var(--sp-8)}
.menu-group__title{font-size:var(--fs-micro); font-weight:var(--fw-medium); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--sp-4)}
.menu-group ul{display:flex; flex-direction:column; gap:var(--sp-1)}

.menu-link,.menu-primary__link{display:inline-flex; align-items:center; flex-wrap:wrap; color:var(--text-primary); padding:5px 0}
.menu-link{font-size:var(--fs-body); font-weight:var(--fw-regular); line-height:var(--lh-snug)}
.menu-primary__link{font-size:var(--fs-h2); font-weight:var(--fw-medium); line-height:var(--lh-snug); letter-spacing:var(--ls-heading)}
.menu-link .link-label,.menu-primary__link .link-label,.footer-link .link-label{
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size var(--dur-standard) var(--ease-standard), color var(--dur-fast) var(--ease-standard)}
.menu-link:hover .link-label,.menu-primary__link:hover .link-label,
.menu-link:focus-visible .link-label,.menu-primary__link:focus-visible .link-label{background-size:100% 1px; color:var(--blue-100)}
.menu-link.is-pending,.menu-primary__link.is-pending{color:var(--text-secondary)}

.site-menu__foot{margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-6);
  padding-top:var(--sp-6); border-top:var(--bw-hairline) solid var(--divider)}
.site-menu__tagline{font-size:var(--fs-body-lg); font-weight:var(--fw-light); color:var(--text-secondary)}

/* Entrada escalonada dos grupos (stagger 70 ms) */
.menu-primary,.menu-group,.site-menu__foot{opacity:0; transform:translateY(16px);
  transition:opacity var(--dur-slow) var(--ease-entrance), transform var(--dur-slow) var(--ease-entrance)}
.site-menu.is-open .menu-primary,.site-menu.is-open .menu-group,.site-menu.is-open .site-menu__foot{
  opacity:1; transform:none; transition-delay:calc(160ms + var(--i,0) * 70ms)}
.site-menu.is-closing .menu-primary,.site-menu.is-closing .menu-group,.site-menu.is-closing .site-menu__foot{
  opacity:0; transform:translateY(-8px); transition:opacity var(--dur-standard) var(--ease-exit), transform var(--dur-standard) var(--ease-exit)}

@media (max-width:1100px){
  .site-menu__nav{grid-template-columns:1fr}
  .menu-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .menu-primary{flex-direction:row; flex-wrap:wrap; gap:var(--sp-2) var(--sp-8)}
}
@media (max-width:560px){
  .site-header{height:50px; padding:0 8px 0 12px; -webkit-backdrop-filter:blur(10px) saturate(115%); backdrop-filter:blur(10px) saturate(115%)}
  .site-header .menu-toggle{height:34px}
  .menu-btn{height:42px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
  .menu-groups{grid-template-columns:1fr; gap:var(--sp-8)}
  .menu-primary{flex-direction:column}
  .site-menu__panel{padding-top:var(--sp-4)}
}

/* ---------- Logo e botão "Menu" em azul #1C4FF7 (16/10) ----------
   Em todo o site (seções claras e escuras). A faixa de vidro do cabeçalho não muda.
   O botão mantém tamanho, formato e posição; a pílula fica clara para o azul ter contraste. */
.site-header .site-header__brand,
.site-header[data-theme="light"] .site-header__brand{color:#1C4FF7}
.site-header .menu-toggle,
.site-header[data-theme="light"] .menu-toggle{background:rgba(255,255,255,.9); color:#1C4FF7}
.site-header .menu-toggle:hover,
.site-header[data-theme="light"] .menu-toggle:hover{background:#FFFFFF; color:#1C4FF7; box-shadow:0 8px 24px -10px rgba(28,79,247,.55)}
.site-header .menu-toggle:active{background:#EEF3FF}
.site-header .menu-toggle:focus-visible,
.site-header .site-header__brand:focus-visible{outline:2px solid #1C4FF7; outline-offset:3px}

/* Home — abertura (Telas 01 a 04, seção escura #abertura): logo "Solução" branca.
   Só na Home e só enquanto o cabeçalho está sobre a abertura; o botão "Menu" e as outras páginas não mudam. */
body:has(> main #abertura.opening) .site-header[data-theme="dark"] .site-header__brand{color:#FFFFFF}

/* Cabeçalho sobre o rodapé azul (#1C4FF7): logo branca para não sumir no fundo azul */
.site-header[data-theme="brand"] .site-header__brand{color:#FFFFFF}

/* Home — partes claras (depois da abertura): botão "Menu" com fundo azul #1C4FF7, texto e tracinhos brancos.
   Só na Home e só com o cabeçalho no tema claro; abertura e outras páginas não mudam. */
body:has(> main #abertura.opening) .site-header[data-theme="light"] .menu-toggle{background:#1C4FF7; color:#FFFFFF}
body:has(> main #abertura.opening) .site-header[data-theme="light"] .menu-toggle:hover{background:#1740C4; color:#FFFFFF; box-shadow:0 8px 24px -10px rgba(28,79,247,.6)}
body:has(> main #abertura.opening) .site-header[data-theme="light"] .menu-toggle:active{background:#123A7A}
body:has(> main #abertura.opening) .site-header[data-theme="light"] .menu-toggle:focus-visible{outline:2px solid #1C4FF7; outline-offset:3px}

/* Sobre Nós e Contato — partes claras: botão "Menu" com fundo azul #1C4FF7, texto e tracinhos brancos (como na Home) */
:is(.page-sobre,.page-contato) .site-header[data-theme="light"] .menu-toggle{background:#1C4FF7; color:#FFFFFF}
:is(.page-sobre,.page-contato) .site-header[data-theme="light"] .menu-toggle:hover{background:#1740C4; color:#FFFFFF; box-shadow:0 8px 24px -10px rgba(28,79,247,.6)}
:is(.page-sobre,.page-contato) .site-header[data-theme="light"] .menu-toggle:active{background:#123A7A}
:is(.page-sobre,.page-contato) .site-header[data-theme="light"] .menu-toggle:focus-visible{outline:2px solid #1C4FF7; outline-offset:3px}

/* Página Manuais (16/10): botão Menu azul #1C4FF7 com texto e tracinhos brancos em toda a página
   (também sobre o vídeo da abertura), como nas demais páginas */
.page-ebooks .site-header .menu-toggle{background:#1C4FF7; color:#FFFFFF}
.page-ebooks .site-header .menu-toggle:hover{background:#1740C4; color:#FFFFFF; box-shadow:0 8px 24px -10px rgba(28,79,247,.6)}
.page-ebooks .site-header .menu-toggle:active{background:#123A7A}
.page-ebooks .site-header .menu-toggle:focus-visible{outline:2px solid #FFFFFF; outline-offset:3px}

/* Sobre Nós (16/10): logomarca branca enquanto o vídeo do avião ("Nosso propósito nos move.") está à mostra;
   volta ao azul quando as faixas sobem e aparecem Missão e Visão (classe controlada por sobre-nos.js) */
.sn-logo-white .page-sobre .site-header .site-header__brand{color:#FFFFFF}

/* Política de Privacidade (17/10): botão Menu azul com texto e tracinhos brancos nas partes claras, como em Sobre Nós e Contato */
.page-politica .site-header[data-theme="light"] .menu-toggle{background:#1C4FF7; color:#FFFFFF}
.page-politica .site-header[data-theme="light"] .menu-toggle:hover{background:#1740C4; color:#FFFFFF; box-shadow:0 8px 24px -10px rgba(28,79,247,.6)}
.page-politica .site-header[data-theme="light"] .menu-toggle:active{background:#123A7A}
.page-politica .site-header[data-theme="light"] .menu-toggle:focus-visible{outline:2px solid #1C4FF7; outline-offset:3px}

/* e-CPF (17/10): botão Menu azul com texto e tracinhos brancos nas partes claras, como em Sobre Nós e Contato */
.page-ecpf .site-header[data-theme="light"] .menu-toggle{background:#1C4FF7; color:#FFFFFF}
.page-ecpf .site-header[data-theme="light"] .menu-toggle:hover{background:#1740C4; color:#FFFFFF; box-shadow:0 8px 24px -10px rgba(28,79,247,.6)}
.page-ecpf .site-header[data-theme="light"] .menu-toggle:active{background:#123A7A}
.page-ecpf .site-header[data-theme="light"] .menu-toggle:focus-visible{outline:2px solid #1C4FF7; outline-offset:3px}

/* e-CNPJ (17/10): botão Menu azul com texto e tracinhos brancos nas partes claras, como no e-CPF */
.page-ecnpj .site-header[data-theme="light"] .menu-toggle{background:#1C4FF7; color:#FFFFFF}
.page-ecnpj .site-header[data-theme="light"] .menu-toggle:hover{background:#1740C4; color:#FFFFFF; box-shadow:0 8px 24px -10px rgba(28,79,247,.6)}
.page-ecnpj .site-header[data-theme="light"] .menu-toggle:active{background:#123A7A}
.page-ecnpj .site-header[data-theme="light"] .menu-toggle:focus-visible{outline:2px solid #1C4FF7; outline-offset:3px}

/* Tipos de Certificado (17/10): botão Menu azul com texto e tracinhos brancos nas partes claras, como no e-CPF/e-CNPJ */
.page-tipos .site-header[data-theme="light"] .menu-toggle{background:#1C4FF7; color:#FFFFFF}
.page-tipos .site-header[data-theme="light"] .menu-toggle:hover{background:#1740C4; color:#FFFFFF; box-shadow:0 8px 24px -10px rgba(28,79,247,.6)}
.page-tipos .site-header[data-theme="light"] .menu-toggle:active{background:#123A7A}
.page-tipos .site-header[data-theme="light"] .menu-toggle:focus-visible{outline:2px solid #1C4FF7; outline-offset:3px}

/* Sou Contador (18/10): botão Menu azul com texto e tracinhos brancos nas partes claras, como no e-CPF/e-CNPJ/Tipos */
.page-contador .site-header[data-theme="light"] .menu-toggle{background:#1C4FF7; color:#FFFFFF}
.page-contador .site-header[data-theme="light"] .menu-toggle:hover{background:#1740C4; color:#FFFFFF; box-shadow:0 8px 24px -10px rgba(28,79,247,.6)}
.page-contador .site-header[data-theme="light"] .menu-toggle:active{background:#123A7A}
.page-contador .site-header[data-theme="light"] .menu-toggle:focus-visible{outline:2px solid #1C4FF7; outline-offset:3px}

/* Sou AR (18/10): botão Menu azul com texto e tracinhos brancos nas partes claras, como na Sou Contador */
.page-ar .site-header[data-theme="light"] .menu-toggle{background:#1C4FF7; color:#FFFFFF}
.page-ar .site-header[data-theme="light"] .menu-toggle:hover{background:#1740C4; color:#FFFFFF; box-shadow:0 8px 24px -10px rgba(28,79,247,.6)}
.page-ar .site-header[data-theme="light"] .menu-toggle:active{background:#123A7A}
.page-ar .site-header[data-theme="light"] .menu-toggle:focus-visible{outline:2px solid #1C4FF7; outline-offset:3px}
/* Comprar Certificado: mesmo botão Menu azul nas partes claras */
.page-compra .site-header[data-theme="light"] .menu-toggle{background:#1C4FF7; color:#FFFFFF}
.page-compra .site-header[data-theme="light"] .menu-toggle:hover{background:#1740C4; color:#FFFFFF; box-shadow:0 8px 24px -10px rgba(28,79,247,.6)}
.page-compra .site-header[data-theme="light"] .menu-toggle:active{background:#123A7A}
.page-compra .site-header[data-theme="light"] .menu-toggle:focus-visible{outline:2px solid #1C4FF7; outline-offset:3px}

/* Comprar Certificado (19/10): logomarca branca enquanto o cabeçalho está sobre o vídeo da abertura;
   volta ao azul no restante da página (classe controlada por comprar-certificado.js) */
.cc-logo-white .page-compra .site-header .site-header__brand{color:#FFFFFF}

/* Sou Contador, Sou AR, e-CPF, e-CNPJ, Tipos de Certificado e Manuais (19/10): logomarca branca enquanto o cabeçalho está sobre o vídeo da abertura;
   volta ao azul no restante da página (classe ac-logo-white controlada por sou-contador.js / sou-ar.js e, nas demais, por assets/js/components/logo-hero.js) */
.ac-logo-white :is(.page-contador,.page-ar,.page-ecpf,.page-ecnpj,.page-tipos,.page-ebooks,.page-docs) .site-header .site-header__brand{color:#FFFFFF}

/* ============================================================
   BOTÃO "MENU" — regra única para todas as páginas (19/10, pedido da responsável)
   Segue a mesma lógica da logomarca:
   - sobre o vídeo/abertura (logo branca): botão BRANCO com texto e tracinhos AZUIS;
   - no restante da página: botão AZUL #1C4FF7 com texto e tracinhos BRANCOS;
   - exceção: sobre o rodapé azul (tema "brand") o botão fica branco, senão some no fundo azul.
   Estados da abertura: .ac-logo-white (e-CPF, e-CNPJ, Tipos, Manuais, Sou Contador, Sou AR),
   .cc-logo-white (Comprar Certificado), .sn-logo-white (Sobre Nós) e a abertura da Home (#abertura.opening, tema escuro).
   Usa !important de propósito: substitui as regras antigas por página acima, sem precisar apagá-las.
   ============================================================ */
.site-header .menu-toggle{background:#1C4FF7 !important; color:#FFFFFF !important}
.site-header .menu-toggle:hover{background:#1740C4 !important; color:#FFFFFF !important; box-shadow:0 8px 24px -10px rgba(28,79,247,.6) !important}
.site-header .menu-toggle:active{background:#123A7A !important}
:is(.ac-logo-white,.cc-logo-white,.sn-logo-white) .site-header .menu-toggle,
body:has(> main #abertura.opening) .site-header[data-theme="dark"] .menu-toggle,
.site-header[data-theme="brand"] .menu-toggle{background:rgba(255,255,255,.92) !important; color:#1C4FF7 !important}
:is(.ac-logo-white,.cc-logo-white,.sn-logo-white) .site-header .menu-toggle:hover,
body:has(> main #abertura.opening) .site-header[data-theme="dark"] .menu-toggle:hover,
.site-header[data-theme="brand"] .menu-toggle:hover{background:#FFFFFF !important; color:#1C4FF7 !important; box-shadow:0 8px 24px -10px rgba(28,79,247,.55) !important}
:is(.ac-logo-white,.cc-logo-white,.sn-logo-white) .site-header .menu-toggle:active,
body:has(> main #abertura.opening) .site-header[data-theme="dark"] .menu-toggle:active,
.site-header[data-theme="brand"] .menu-toggle:active{background:#EEF3FF !important}
.site-header .menu-toggle:focus-visible{outline:2px solid #1C4FF7; outline-offset:3px}
:is(.ac-logo-white,.cc-logo-white,.sn-logo-white) .site-header .menu-toggle:focus-visible,
.site-header[data-theme="brand"] .menu-toggle:focus-visible{outline-color:#FFFFFF}

/* ============================================================
   MENU ABERTO — "listagem clean com hover destacado" (19/10, referência 06 da responsável)
   Só o visual do conteúdo do menu: a abertura/fechamento, os links e os destinos não mudaram.
   ============================================================ */
.site-menu__panel{background:
    radial-gradient(60% 55% at 92% -8%,rgba(29,80,247,.22) 0%,rgba(29,80,247,0) 62%),
    radial-gradient(55% 50% at -5% 108%,rgba(18,58,122,.32) 0%,rgba(18,58,122,0) 62%),
    linear-gradient(170deg,#0B1D47 0%,#081738 55%,#061230 100%)}
.site-menu__top{border-bottom-color:rgba(141,182,255,.12)}
.site-menu__nav{grid-template-columns:minmax(200px,.72fr) minmax(0,3.2fr); gap:0; align-items:stretch}
.menu-groups{grid-template-columns:repeat(4,minmax(0,1fr)); gap:0}
/* colunas separadas por linhas verticais muito finas */
.menu-group{padding:0 clamp(16px,1.8vw,30px); border-left:1px solid rgba(141,182,255,.12)}
.menu-primary{padding-right:clamp(16px,2vw,32px); gap:6px}
/* títulos das áreas (19/10): sem ícone, no mesmo estilo e tamanho aproximado de Home / Sobre Nós / Contato */
.menu-group__title{display:flex; align-items:center; margin:0 0 18px; padding-left:12px;
  font-size:clamp(1.75rem,2.6vw,2.375rem); font-weight:var(--fw-medium); letter-spacing:var(--ls-heading); line-height:1.15; text-transform:none; color:#fff; white-space:nowrap}
.menu-group__ico{display:grid; place-items:center; flex:none; color:#4777FC}
.menu-group__ico svg{width:22px; height:22px}
.menu-group ul{gap:4px}
/* links: listagem limpa; ao passar o mouse (ou focar), fundo azul translúcido, borda fina e brilho discreto */
.menu-link{position:relative; display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid transparent; color:rgba(255,255,255,.88); font-size:.9375rem; font-weight:var(--fw-regular); line-height:1.35; text-align:left;
  background:transparent; cursor:pointer;
  transition:background-color 250ms var(--ease-standard), border-color 250ms var(--ease-standard), box-shadow 250ms var(--ease-standard), color 250ms var(--ease-standard)}
.menu-link .link-label{flex:1; min-width:0; background:none !important}
.menu-link__ico{display:grid; place-items:center; flex:none; width:20px; height:20px; color:#4777FC; transition:color 250ms var(--ease-standard), filter 250ms var(--ease-standard)}
.menu-link__ico svg{width:18px; height:18px}
.menu-link__arrow{display:grid; place-items:center; flex:none; width:18px; height:18px; color:rgba(141,182,255,.55); transition:transform 280ms var(--ease-entrance), color 250ms var(--ease-standard)}
.menu-link__arrow svg{width:15px; height:15px}
.menu-link:hover,.menu-link:focus-visible{color:#FFFFFF;
  background:linear-gradient(90deg,rgba(28,79,247,.30) 0%,rgba(28,79,247,.12) 100%);
  border-color:rgba(109,153,252,.55); box-shadow:0 0 0 1px rgba(28,79,247,.12), 0 10px 26px -14px rgba(71,119,252,.75)}
.menu-link:hover .link-label,.menu-link:focus-visible .link-label{color:#FFFFFF}
.menu-link:hover .menu-link__ico,.menu-link:focus-visible .menu-link__ico{color:#8DB6FF; filter:drop-shadow(0 0 6px rgba(109,153,252,.7))}
.menu-link:hover .menu-link__arrow,.menu-link:focus-visible .menu-link__arrow{transform:translateX(4px); color:#FFFFFF}
.menu-link:focus-visible{outline:2px solid #8DB6FF; outline-offset:2px}
/* item "Em breve" (sem página ainda): sem seta, selo azul */
.menu-link.is-pending{color:rgba(255,255,255,.62)}
.menu-link.is-pending .pending-tag{margin-left:auto; background:#1C4FF7; color:#FFFFFF; border:0}
/* navegação institucional: fontes maiores; página atual com barra azul à esquerda */
.menu-primary__link{position:relative; padding:6px 0 6px 18px; font-size:clamp(1.75rem,2.6vw,2.375rem); font-weight:var(--fw-medium); color:#FFFFFF;
  transition:color 250ms var(--ease-standard), transform 280ms var(--ease-entrance)}
.menu-primary__link::before{content:""; position:absolute; left:0; top:18%; bottom:18%; width:3px; border-radius:3px; background:#1C4FF7;
  box-shadow:0 0 12px rgba(71,119,252,.8); transform:scaleY(0); transition:transform 280ms var(--ease-entrance)}
.menu-primary__link .link-label{background:none !important}
.menu-primary__link:hover,.menu-primary__link:focus-visible{color:#C0DAFF; transform:translateX(4px)}
.menu-primary__link.is-active{color:#8DB6FF}
.menu-primary__link.is-active::before{transform:scaleY(1)}
.menu-primary__link:focus-visible{outline:2px solid #8DB6FF; outline-offset:3px; border-radius:6px}
.site-menu__foot{border-top-color:rgba(141,182,255,.12)}
/* entrada: colunas surgem com fade e leve subida, em sequência (rápido e suave) */
.site-menu.is-open .menu-primary,.site-menu.is-open .menu-group,.site-menu.is-open .site-menu__foot{transition-delay:calc(120ms + var(--i,0) * 60ms)}
@media (prefers-reduced-motion:reduce){
  html:not(.force-motion) .menu-primary,html:not(.force-motion) .menu-group,html:not(.force-motion) .site-menu__foot{transform:none; transition:opacity 200ms linear}
  html:not(.force-motion) .menu-primary__link,html:not(.force-motion) .menu-link__arrow{transition:color 200ms linear}
  html:not(.force-motion) .menu-primary__link:hover,html:not(.force-motion) .menu-primary__link:focus-visible{transform:none}
  html:not(.force-motion) .menu-link:hover .menu-link__arrow{transform:none}
}
/* tablet: institucional em linha acima; áreas em duas colunas com divisórias horizontais */
@media (max-width:1100px){
  .site-menu__nav{grid-template-columns:1fr; gap:28px}
  .menu-primary{flex-direction:row; flex-wrap:wrap; gap:4px 28px; padding-right:0}
  .menu-groups{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 0}
  .menu-group:nth-child(odd){border-left:0; padding-left:0}
}
/* celular: uma coluna, áreas separadas por linhas finas; toques confortáveis */
@media (max-width:560px){
  .menu-primary{flex-direction:column; gap:2px}
  .menu-primary__link{font-size:1.75rem}
  .menu-groups{grid-template-columns:1fr; gap:0}
  .menu-group{border-left:0; padding:20px 0; border-top:1px solid rgba(141,182,255,.12)}
  .menu-link{padding:12px; min-height:46px}
}
/* menu aberto (ajuste): colunas com nomes longos (Certificados, Suporte) mais largas, para os links caberem em uma linha */
@media (min-width:1321px){
  .site-menu__nav{grid-template-columns:max-content minmax(0,1fr)}
  .menu-primary__link{white-space:nowrap}
  .menu-groups{grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) minmax(0,.95fr) minmax(0,1.25fr)}
  .menu-group__title{font-size:min(1.75vw,2.375rem)}   /* 19/10: cinco colunas — o maior que cabe na coluna (Conhecimento) */
  .menu-group{padding:0 clamp(12px,1.3vw,22px)}
  .menu-link{font-size:clamp(.8125rem,.95vw,.9375rem); padding:10px 10px; gap:10px}
  .menu-link .link-label{white-space:nowrap}
}
/* telas médias (até 1320px): institucional em linha acima e áreas em duas colunas, sem cortar nomes */
@media (min-width:1101px) and (max-width:1320px){
  .site-menu__nav{grid-template-columns:1fr; gap:28px}
  .menu-primary{flex-direction:row; flex-wrap:wrap; gap:4px 28px; padding-right:0}
  .menu-groups{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 0}
  .menu-group:nth-child(odd){border-left:0; padding-left:0}
  .menu-link .link-label{white-space:nowrap}
}