/* header.css — spec A. Aba branca presa ao topo, centrada (x 341,5 → 1138,6), cantos de baixo com raio 28.
   Posições relativas à aba (x − 341,5); topo dos textos = topo da maiúscula (.tb).
   .cab__fora: transformação ligada ao scroll (imita o grupo do hero, geometria §1); origem = ponto
   (700; 763,3) da página convertido para a aba: (358,5; 763,3).
   .cab__in: descida e opacidade por tempo (intro e emenda do loop, A §6.2).
   calibrado na conferência (python tools/conferir.py AB): os valores do brief bateram sem ajuste — todas
   as regiões (A-aba, A-logo, A-links, A-botao) já saíram com delta ≤ 2 px. */
.cab{position:fixed;z-index:50;left:calc(341.5 * var(--u));top:0;width:calc(797.1 * var(--u));height:calc(66.7 * var(--u));pointer-events:none}
.cab__fora{position:absolute;inset:0;transform-origin:calc(358.5 * var(--u)) calc(763.3 * var(--u))}
.cab__in{position:absolute;inset:0;background:#fff;border-radius:0 0 calc(28 * var(--u)) calc(28 * var(--u));pointer-events:auto}
/* logo SKNA (SVG das letras do logo): ocupa a caixa do "mavka" do layout, de x 30 até 7 px antes do divisor,
   com a base na mesma linha de base do texto ao lado (~39,3) */
.cab__logo{left:calc(30 * var(--u));top:calc(23.1 * var(--u));width:calc(70 * var(--u));height:calc(16.3 * var(--u));color:#090909}
.cab__logo svg{display:block;width:100%;height:100%;overflow:visible}
.cab__div{left:calc(107.3 * var(--u));top:calc(21.5 * var(--u));width:1px;height:calc(22.5 * var(--u));background:rgba(12,12,12,.3)}
.cab__sub{left:calc(118.5 * var(--u));top:calc(28.5 * var(--u));--cap:10.5;font-weight:400;color:var(--c-ink)}
/* links: um grupo centrado na aba (centro 398,6 = x 740 da página, A §2), com o vão de 34 do layout entre as
   palavras — o grupo continua centrado qualquer que seja o texto (refino 29/10: 3 links novos) */
.cab__nav{position:absolute;left:calc(398.6 * var(--u));top:calc(29 * var(--u));display:flex;gap:calc(34 * var(--u));
  transform:translateX(-50%);white-space:nowrap}
.cab__nav a{position:relative;--cap:9.5;color:var(--c-ink)}
.cab__btn{left:calc(654.5 * var(--u));top:calc(9.3 * var(--u));width:calc(132.3 * var(--u));height:calc(47.3 * var(--u));
  border-radius:calc(20 * var(--u));background:var(--c-ink);color:#fff;overflow:hidden;isolation:isolate}
/* "Fale conosco" é 9 px mais largo que o texto do layout: começa em 18 (era 23) para manter folga até o ícone */
.cab__btn span{left:calc(18 * var(--u));top:calc(19.5 * var(--u));--cap:9.2}
.cab__btn svg{position:absolute;left:calc(98.5 * var(--u));top:calc(14.7 * var(--u));width:calc(16.5 * var(--u));height:calc(17 * var(--u))}
/* hover (refino 29/10, autoral, linguagem da sinalética):
   - link: o quadrado verde da marca aparece à esquerda da palavra (escala do centro) e a palavra abre espaço;
   - botão: o verde enche de baixo para cima, como a base do totem, e o texto e o ícone passam a tinta; o
     ícone balança uma vez. Curva expo.out (a das letras do site) em 0,45 s. */
.cab__nav a::before{content:'';position:absolute;left:calc(-11 * var(--u));top:50%;width:calc(5 * var(--u));height:calc(5 * var(--u));
  margin-top:calc(-2.5 * var(--u));background:var(--c-limao);transform:scale(0);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.cab__nav a{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.cab__nav a:hover{transform:translateX(calc(4 * var(--u)))}
.cab__nav a:hover::before{transform:scale(1)}
.cab__enche{position:absolute;inset:0;z-index:-1;background:var(--c-limao);transform:translateY(101%);
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.cab__btn span,.cab__btn svg{transition:color .3s cubic-bezier(.25,.46,.45,.94)}
.cab__btn:hover .cab__enche{transform:translateY(0)}
.cab__btn:hover span,.cab__btn:hover svg{color:var(--c-ink)}
.cab__btn:hover svg{animation:cab-toca .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes cab-toca{20%{transform:rotate(-12deg)}45%{transform:rotate(10deg)}70%{transform:rotate(-5deg)}100%{transform:rotate(0)}}
.cab__nav a:focus-visible,.cab__btn:focus-visible,.cab__logo:focus-visible{outline:2px solid var(--c-limao);outline-offset:calc(4 * var(--u))}
@media (prefers-reduced-motion:reduce){.cab__btn:hover svg{animation:none}}