/* 00 · CABEÇALHO · prefixo .cab
   Barra fixa de 64 px sobre preto. Logo, seções, idioma e uma ação. Nada mais. */
.cab{position:sticky;top:0;z-index:100;height:var(--cabecalho-h);border-bottom:1px solid transparent;transition:border-color var(--dur-entrada) var(--curva-entrada),background-color var(--dur-entrada) var(--curva-entrada),transform 520ms cubic-bezier(.16,1,.3,1)}
.cab.rolou,.cab.aberto{border-bottom-color:color-mix(in srgb,var(--c-branco) 10%,transparent)}
/* com o script: transparente no topo (o hero passa por baixo) e vidro fosco depois de rolar.
   O vidro mora num pseudo-elemento para o backdrop-filter não virar referência do menu. */
.cab::before{content:"";position:absolute;inset:0 0 -1px;z-index:-1;pointer-events:none;opacity:0;transition:opacity 320ms var(--curva-entrada);
  background:color-mix(in srgb,var(--c-preto) 74%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
.cab-js{background:transparent}
.cab-js.rolou::before{opacity:1}
.cab-js.aberto{background:var(--fundo)}
/* some ao descer, volta ao subir; 2 px ficam à vista para a barra de progresso continuar na tela */
.cab-js.cab-some{transform:translate3d(0,calc(-100% + 2px),0)}
.cab .rolagem{z-index:2}
/* recolhido, só a barra de progresso fica à vista: o traço do item atual some junto */
.cab-js.cab-some .cab-nav a::after{opacity:0}
.cab-in{display:flex;align-items:center;justify-content:space-between;gap:var(--e-6);height:100%}

/* logo: 26 px de altura; área de proteção de 1x (≈ 8 px) garantida pelo respiro da barra */
.cab-logo{display:flex;align-items:center;flex:none;height:44px;margin-left:-2px;padding-inline:2px}
.cab-logo svg{height:26px;width:auto}

/* navegação: 13 px, 28 px entre itens; item atual em branco com traço laranja de 2 px na base */
.cab-nav{display:none}
.cab-nav ul{display:flex;gap:28px}
.cab-nav a{position:relative;display:flex;align-items:center;height:var(--cabecalho-h);font-size:.8125rem;color:var(--texto-2);transition:color var(--dur-micro) var(--curva-entrada)}
.cab-nav a:hover,.cab-nav a[aria-current]{color:var(--texto)}
.cab-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--marca);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-entrada) var(--curva-entrada),opacity 200ms linear}
.cab-nav a[aria-current]::after{transform:none}
@media (hover:hover){
  .cab-nav a:not([aria-current])::after{background:var(--texto-3)}
  .cab-nav a:not([aria-current]):hover::after{transform:scaleX(.999)}
  .cab-logo svg{transition:transform 420ms cubic-bezier(.16,1,.3,1)}
  .cab-logo:hover svg{transform:translate3d(3px,0,0)}
}

.cab-fim{display:flex;align-items:center;gap:var(--e-6)}

/* idioma: rótulos mono; o atual em branco */
.cab-idioma{display:none;align-items:center;font:400 var(--t-rotulo)/1 var(--f-mono);letter-spacing:.08em;color:var(--texto-3)}
.cab-idioma a{display:flex;align-items:center;height:44px;padding-inline:7px;transition:color var(--dur-micro) var(--curva-entrada)}
.cab-idioma a:hover,.cab-idioma a[aria-current]{color:var(--texto)}
/* ação principal: na barra a partir de 1120 px; abaixo disso mora no menu. Sem o script do
   cabeçalho (sem JS, ou arquivo que não carregou) não há menu, então ela fica na barra. */
.cab-cta{display:inline-flex}
.cab.na-conversa .cab-cta{background:transparent;border-color:var(--borda-controle);color:var(--texto)}
.cab.na-conversa .cab-cta:hover{border-color:var(--texto)}

/* botão de menu: alvo de 44 × 44, dois traços retos que viram um X */
.cab-menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;border-radius:var(--r-controle);color:var(--texto)}
.cab-menu-ico{position:relative;width:22px;height:10px}
.cab-menu-ico i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform var(--dur-entrada) var(--curva-entrada),top var(--dur-entrada) var(--curva-entrada)}
.cab-menu-ico i:first-child{top:0}
.cab-menu-ico i:last-child{top:calc(100% - 1.5px)}
.cab.aberto .cab-menu-ico i{top:calc(50% - .75px)}
.cab.aberto .cab-menu-ico i:first-child{transform:rotate(45deg)}
.cab.aberto .cab-menu-ico i:last-child{transform:rotate(-45deg)}

/* menu de celular: painel abaixo da barra, altura total, ação principal em 48 px no fim */
.cab-menu{position:absolute;top:var(--cabecalho-h);left:0;right:0;height:calc(100vh - var(--cabecalho-h));height:calc(100dvh - var(--cabecalho-h));background:var(--fundo);overflow-y:auto;overscroll-behavior:contain}
.cab-menu-in{display:flex;flex-direction:column;justify-content:space-between;gap:var(--e-8);min-height:100%;padding-block:var(--e-4) var(--e-6)}
.cab-menu-lista a{display:grid;grid-template-columns:2.5rem 1fr;align-items:baseline;gap:var(--e-2);padding:15px 0;border-bottom:1px solid var(--linha);font:700 1.625rem/1.15 var(--f-sans);letter-spacing:-.035em;color:var(--texto)}
.cab-menu-pe{display:grid;gap:var(--e-4)}
.cab-idioma-menu{display:flex;margin-left:-7px}
@media (prefers-reduced-motion:no-preference){
  .cab.aberto .cab-menu-lista li,.cab.aberto .cab-menu-pe{animation:cab-entra var(--dur-entrada) var(--curva-entrada) both;animation-delay:calc(var(--n,0)*40ms)}
  .cab-menu-lista li:nth-child(2){--n:1}.cab-menu-lista li:nth-child(3){--n:2}.cab-menu-lista li:nth-child(4){--n:3}.cab-menu-lista li:nth-child(5){--n:4}.cab-menu-lista li:nth-child(n+6){--n:5}
  .cab-menu-pe{--n:5}
}
@keyframes cab-entra{from{opacity:0;transform:translate(-3.2px,12px)}}
html.menu-aberto{overflow:hidden}

/* o menu só existe quando js/00-cabecalho.js rodou (.cab-js); html.cab-sem-menu é posto pelo
   script do <head> quando esse arquivo não chegou a rodar */
@media (max-width:1119px){
  .js:not(.cab-sem-menu) .cab-menu-btn,.cab-js .cab-menu-btn{display:flex}
  .js:not(.cab-sem-menu) .cab-cta,.cab-js .cab-cta{display:none}
}

@media (min-width:1120px){
  .cab-nav{display:block}
  .cab-fim .cab-idioma{display:flex}
  .cab-menu-btn,.cab-menu{display:none!important}
}
/* a partir de 1280 px o primeiro item da navegação começa na coluna 4 da grade,
   no mesmo x do título das seções (.secao-cab>div) */
@media (min-width:1280px){
  .cab-in{position:relative}
  .cab-nav{position:absolute;top:0;left:calc(var(--margem) + (100% - 2*var(--margem) + var(--calha))/4)}
}

/* Radar: produto à parte (abre /radar) e o item de destaque da barra.
   Uma etiqueta com borda laranja; o ponto emite um pulso de radar e um brilho de 15° cruza a etiqueta de tempos em tempos.
   Com o ponteiro, a etiqueta enche de laranja. As animações só rodam sem "movimento reduzido". */
.cab-nav a.cab-radar::after{content:none}
.cab-radar-in{position:relative;display:inline-flex;align-items:center;gap:9px;height:30px;padding:0 12px 0 11px;overflow:hidden;border:1px solid color-mix(in srgb,var(--c-laranja) 60%,transparent);border-radius:var(--r-controle);
  background:color-mix(in srgb,var(--c-laranja) 10%,transparent);font-weight:700;color:var(--c-branco);transition:background-color 200ms var(--curva-entrada),color 200ms var(--curva-entrada),border-color 200ms var(--curva-entrada)}
.cab-radar:hover .cab-radar-in,.cab-radar:focus-visible .cab-radar-in{background:var(--c-laranja);border-color:var(--c-laranja);color:var(--c-preto)}
.cab-ping{position:relative;flex:none;width:6px;height:6px;border-radius:50%;background:var(--c-laranja);transition:background-color 200ms var(--curva-entrada)}
.cab-ping::before,.cab-ping::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--c-laranja);opacity:0}
.cab-radar:hover .cab-ping{background:var(--c-preto)}
.cab-radar:hover .cab-ping::before,.cab-radar:hover .cab-ping::after{border-color:var(--c-preto)}
.cab-radar-in::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:38%;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c-laranja) 55%,transparent),transparent);transform:skewX(-15deg) translate3d(-140%,0,0)}
.cab-menu-lista li:first-child a{grid-template-columns:2.5rem auto 1fr}
.cab-menu-lista .cab-ping{margin-left:10px;align-self:center;justify-self:start;width:8px;height:8px}
@media (prefers-reduced-motion:no-preference){
  .cab-ping::before{animation:cab-ping 2400ms cubic-bezier(.16,1,.3,1) infinite}
  .cab-ping::after{animation:cab-ping 2400ms cubic-bezier(.16,1,.3,1) 800ms infinite}
  .cab-radar-in::after{animation:cab-brilho 5200ms cubic-bezier(.65,0,.35,1) 1200ms infinite}
}
@keyframes cab-ping{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(3.4)}}
@keyframes cab-brilho{0%{opacity:1;transform:skewX(-15deg) translate3d(-140%,0,0)}26%{opacity:1;transform:skewX(-15deg) translate3d(330%,0,0)}27%,100%{opacity:0;transform:skewX(-15deg) translate3d(330%,0,0)}}