/* ============================================================================ O CABEÇALHO — a folha do componente, para o site inteiro ---------------------------------------------------------------------------- Até 20/10/2026 havia DOIS cabeçalhos: o da home, que vinha dentro do pacote do herói (`#lp-hero .nav`, em hero.css), e o das landing pages (`.lpbar`, em lp.css). Mesmo menu, duas folhas, duas marcações — e as duas saíram de passo, como era inevitável: a home perdeu itens que as internas mantiveram, os botões tinham medidas diferentes, uma tinha pílula de idioma e a outra não, uma tinha gaveta no telefone e a outra simplesmente escondia a navegação. Agora é UM componente: esta folha, `src/cabecalho.js` e a função `cabecalho()` de `src/lp/gabarito.mjs`. Toda página do site carrega os três. ESTA FOLHA ENTRA DEPOIS DE `casa.css` E ANTES DE `lp.css`: ela consome os tokens da casa e não redefine nada deles. Todo seletor aqui começa com `.lpbar`, `.lp-gaveta`, `.lp-veu` ou `.lp-menu-btn` — é o que impede o componente de encostar no resto de qualquer página que o carregue. ============================================================================ */ /* ============================================================================ 1 — A BARRA ============================================================================ */ /* Ela ACOMPANHA A ROLAGEM, ao contrário da do herói. A da home sai de cena com o herói porque mora dentro dele; aqui a página é longa, tem quadro de vídeo no meio e o botão de demo precisa continuar alcançável. */ .lpbar{ position:sticky;top:0;z-index:60; display:flex;align-items:center;justify-content:space-between;gap:var(--gap-group); padding:14px clamp(16px,3.2vw,48px); /* NO TOPO ELA NÃO EXISTE COMO FAIXA, como na home: nenhuma tinta, nenhum desfoque, nenhum fio. A malha do `.lp-topo` sobe por baixo dela (ver o recuo negativo lá embaixo) e a barra lê como parte do herói, e não como uma tira branca colada em cima dele. O vidro entra quando há conteúdo passando por baixo — em `[data-rolou="true"]`, que é o equivalente do `.preso` do herói. */ background:transparent; border-bottom:1px solid transparent; transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease; } /* O fio e a sombra só aparecem quando há conteúdo passando por baixo. No topo a barra é parte da mesma folha do herói e uma linha ali seria costura. */ /* O VIDRO, e só a partir daqui. São os valores do `#lp-hero .nav.preso`: 24% de tinta, 26px de desfoque e saturação alta. O que sustenta a leitura não é a cor, é o desfoque — 26px transformam o que passa por baixo em mancha, e a saturação impede a mancha de virar cinza. */ .lpbar[data-rolou="true"]{ /* 70%, E NAO 24% (04/11/2026) Os 24% vinham do `#lp-hero .nav.preso` e funcionavam porque o que passava por baixo da barra era folha branca, lavagem clara e capa de case em campo de cor CHAPADO. Em 04/11 as capas viraram foto real — o amarelo da embalagem da Dengo, o azul da parede da Distrivisa, o escuro da sala da Telecine — e a barra passou a ser uma mancha colorida atravessando o topo da /clientes. O desfoque nao resolve: ele ja esta em 14px e foi cortado de 26 por medicao de fps, entao subir de volta custa o que aquela medicao evitou. A tinta nao custa nada. A LEITURA NUNCA ESTEVE EM RISCO, e vale dizer para o numero nao parecer maior do que precisa: com 24% sobre a Telecine, a mais escura, o texto do menu ja dava 5,3:1 contra o minimo de 4,5. O que se consertou aqui e a barra parecer barra, e nao o contraste. 30% de translucidez sobram: ainda se percebe o que passa, que e o ponto do vidro. Com 62% a cor ainda vazava; 70% foi onde o Bruno parou. */ background:rgba(233,237,247,.70); /* 14px, E NAO 26. O desfoque de fundo e refeito a cada quadro sobre o que passa por baixo, e o custo cresce com o raio. Medido na home, rolando: com 26px a barra segurava 56 fps e tinha quadros de 50 ms; com 14px sao 60 fps e 33 ms — o mesmo que SEM desfoque nenhum. A mancha continua mancha: 14px ja destroem qualquer forma legivel atras da barra. */ -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); border-bottom-color:var(--rule-2); box-shadow:0 1px 2px rgb(16 24 40 / 4%), 0 12px 32px -22px rgb(16 24 40 / 30%); } /* Sem `backdrop-filter` (navegador antigo) o vidro vira opaco: barra translúcida sobre texto, sem o desfoque, é barra ilegível. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ /* Só o estado ROLADO vira opaco. No topo a barra continua transparente mesmo sem desfoque: ali ela está sobre a malha do herói, não sobre texto, e é justamente onde a transparência foi pedida. */ .lpbar[data-rolou="true"]{background:rgba(233,237,247,.96)} } @media (prefers-reduced-motion:reduce){.lpbar{transition:none}} .lpbar-marca{display:flex;align-items:center;flex:none;text-decoration:none} .lpbar-marca img{display:block;height:32px;width:auto} /* DUAS MARCAS, UMA VISÍVEL. O lettering da marca é #677294 no arquivo claro e #fff no escuro (`lp10x-dark.svg`) — o símbolo e os gradientes são os mesmos nos dois. Trocar o `src` por script faria a marca piscar na primeira inversão, enquanto o segundo arquivo baixa; com as duas no documento, a troca é só qual delas está em `display`. A segunda é `aria-hidden` com alt vazio: é a MESMA marca, e dois nomes acessíveis iguais no mesmo link é ruído para quem usa leitor de tela. */ /* `.lpbar-marca` na frente NÃO é enfeite: `.lpbar-marca img` acima tem uma classe e um elemento, e venceria uma classe sozinha. Sem isto as duas marcas aparecem lado a lado no estado claro. */ .lpbar-marca .lpbar-logo--escuro{display:none} .lpbar[data-escuro="true"] .lpbar-logo--claro{display:none} .lpbar[data-escuro="true"] .lpbar-logo--escuro{display:block} @media(max-width:767px){.lpbar-marca img{height:27px}} /* O ESPAÇO ENTRE OS BOTÕES é pequeno de propósito: cada um já tem 14px de respiro interno de cada lado, então 18px de vão somavam 46px entre um rótulo e o seguinte e a fileira lia como seis peças soltas em vez de um controle. */ .lpbar .mm{display:flex;align-items:center;gap:clamp(2px,.45vw,7px);position:relative} /* ============================================================================ OS TRÊS BOTÕES DA BARRA ---------------------------------------------------------------------------- Até 20/10/2026 cada controle tinha a sua medida: gatilho com 36px de altura e raio 8, link com 42, Entrar com 44 e raio de pastilha, pílula de idioma com 39 e uma fonte menor — e cada um com o seu hover. Lado a lado numa barra, isso se lê. Agora são TRÊS TIPOS, e tudo que não distingue um do outro é comum: mesma altura, mesma fonte, mesmo espaçamento, mesmo raio. padrão sem fundo e sem fio; o hover é um véu translúcido → os gatilhos de painel e os links soltos secundário sem fundo, com fio translúcido; no hover, véu e fio mais forte → a pílula de idioma e o Entrar primário fundo cheio da marca, reservado à CTA O QUE DISTINGUE É O PESO, e não o tamanho: três alturas numa fileira de botões é defeito; três níveis de ênfase é hierarquia. ========================================================================= */ .lpbar .mm-gatilho, .lpbar .mm > a, .lpbar .mm-lingua > summary{ display:inline-flex;align-items:center;justify-content:center;gap:7px; min-height:var(--lpbar-alt);box-sizing:border-box; padding:0 var(--lpbar-pad);border-radius:var(--r-pill); font-family:var(--font-body);font-size:var(--lpbar-fonte);font-weight:500;line-height:1.2; color:var(--text-1);text-decoration:none; border:1px solid transparent;background:transparent; transition:color .18s ease,background-color .18s ease,border-color .18s ease; } /* ---- padrão: o hover é um véu, e nada mais ---- */ .lpbar .mm-gatilho:hover, .lpbar .mm > a:not(.cta):hover{color:var(--interactive);background:var(--lpbar-veu)} /* ---- os gatilhos ---- */ .lpbar .mm-grupo{position:static;display:inline-flex} .lpbar .mm-gatilho{appearance:none;-webkit-appearance:none;cursor:pointer} .lpbar .mm-gatilho svg{width:15px;height:15px;opacity:.55;transition:transform .22s var(--ease),opacity .18s ease} /* O gatilho entra no mesmo véu dos outros controles — e o estado ABERTO usa o mesmo fundo, porque um painel aberto sem marca no gatilho deixa a pessoa sem saber qual dos três ela abriu. */ .lpbar .mm-gatilho:hover, .lpbar .mm-gatilho[aria-expanded="true"]{color:var(--interactive);background:var(--lpbar-veu)} .lpbar .mm-gatilho[aria-expanded="true"] svg{transform:rotate(180deg);opacity:1} .lpbar .mm-gatilho:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px} @media (prefers-reduced-motion:reduce){.lpbar .mm-gatilho svg{transition:none}} /* ---- o painel ---- Largura fixa e alinhado pela DIREITA da barra de navegação, não pelo gatilho: são três painéis de conteúdos bem diferentes, e ancorar cada um no próprio botão os faria pular de lugar a cada troca. PELA DIREITA, E NÃO CENTRADO. O elemento de referência é o `.mm`, que vive encostado na direita do cabeçalho; centrar o painel nele jogava 63px para fora da janela em 1280px — a coluna "o que você vê rodando" ficava cortada. Alinhado à direita, os 920px crescem para dentro da página, que é onde há espaço. */ .lpbar .mm-painel{ position:absolute;top:calc(100% + 16px);right:0;left:auto;z-index:70; width:min(920px,calc(100vw - 32px)); background:var(--folha); border:1px solid var(--rule-2); border-radius:20px; box-shadow:0 1px 2px rgb(16 24 40 / 5%), 0 24px 64px -24px rgb(16 24 40 / 28%); animation:lp-abre .18s var(--ease); } .lpbar .mm-painel[hidden]{display:none} @keyframes lp-abre{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}} @media (prefers-reduced-motion:reduce){.lpbar .mm-painel{animation:none}} .lpbar .mm-painel-in{padding:26px 28px 22px} .lpbar .mm-eyebrow{ margin:0 0 16px;font-size:var(--fs-conta);font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--text-3); } .lpbar .mm-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px} .lpbar .mm-item{ display:flex;align-items:center;gap:12px; padding:11px 12px;border-radius:12px; color:var(--text-1);text-decoration:none; transition:background-color .16s ease; } .lpbar .mm-item:hover{background:var(--grey-100)} .lpbar .mm-ic{ flex:none;display:grid;place-items:center; width:34px;height:34px;border-radius:10px; background:var(--grey-100);color:var(--interactive); } .lpbar .mm-ic svg{width:18px;height:18px} .lpbar .mm-nome{font-size:var(--fs-ui);font-weight:500} .lpbar .mm-duas{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px} /* Com a coluna de setor o painel passa a ter tres lados. O gap cai de 32 para 26 porque o espaco entre colunas era folga de duas, nao de tres. */ .lpbar .mm-duas--tres{grid-template-columns:minmax(0,.92fr) minmax(0,1fr) minmax(0,1fr);gap:26px} .lpbar .mm-rot{ margin:0 0 10px;font-size:var(--fs-conta);font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:var(--text-3); } .lpbar .mm-area{ display:block;padding:10px 12px;border-radius:12px; color:var(--text-1);text-decoration:none; transition:background-color .16s ease; } .lpbar .mm-area:hover{background:var(--grey-100)} .lpbar .mm-area-nome{display:block;font-size:var(--fs-ui);font-weight:600} .lpbar .mm-area-desc{display:block;margin-top:2px;font-size:var(--fs-micro);color:var(--text-2);line-height:1.45} /* AS DEZESSEIS TELAS, na coluna da direita do painel de Soluções. Duas colunas de oito: numa só seriam dezesseis linhas contra cinco áreas ao lado, e o painel ficaria com o dobro da altura por causa de uma coluna. */ .lpbar .mm-telas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 10px} /* OS NOVE SETORES EM UMA COLUNA SO. As telas ao lado sao dezesseis e por isso se quebram em duas; nove cabem numa, e o nome de setor e longo — "Escritorios contabeis e BPO" e "Construcao e incorporacao" quebrariam em duas linhas dentro de meia coluna, e a lista viraria um bloco de texto em vez de uma lista. */ .lpbar .mm-setores{display:grid;gap:1px} .lpbar .mm-tela{ display:block;padding:7px 10px;border-radius:9px; color:var(--text-2);text-decoration:none;font-size:var(--fs-micro);line-height:1.3; transition:background-color .16s ease,color .16s ease; } .lpbar .mm-tela:hover{background:var(--lpbar-veu);color:var(--interactive)} .lpbar .mm-lista{display:grid;gap:0} .lpbar .mm-linha{ display:block;padding:11px 12px; border-bottom:1px solid var(--rule-2); color:var(--text-2);text-decoration:none;font-size:var(--fs-micro); transition:color .16s ease; } .lpbar .mm-linha:last-child{border-bottom:0} .lpbar .mm-linha:hover{color:var(--interactive)} .lpbar .mm-cta{ display:inline-flex;align-items:center;gap:9px;margin-top:18px; padding:11px 20px;border-radius:var(--r-pill); background:var(--btn-primary-bg);color:var(--btn-primary-fg); text-decoration:none;font-size:var(--fs-micro);font-weight:600; transition:background-color .18s ease; } .lpbar .mm-cta:hover{background:var(--btn-primary-bg-hover)} .lpbar .mm-cta svg{width:16px;height:16px;flex:none} /* O VÉU DE HOVER, UM SÓ PARA A BARRA INTEIRA. Antes cada controle tinha o seu: o Entrar ia para `--grey-100`, a pílula para um #F4F6FC escrito à mão, o botão da gaveta para `--rule-1` e os gatilhos não tinham fundo nenhum. Quatro respostas para o mesmo gesto, e três delas chapadas — sobre uma barra que agora é transparente, fundo chapado no hover acende um retângulo opaco onde não havia nada. Agora é um token só, azul da marca a 10%, e todo controle da barra usa ele. No estado escuro o MESMO token vira um véu branco: a regra não muda, só o valor, e por isso o hover continua existindo sobre o rodapé preto. A linha em `rgba` vem antes do `color-mix` pelo mesmo motivo do fio: é o mesmo valor escrito à mão, para navegador sem `color-mix` não ficar sem hover nenhum. */ .lpbar{ /* A MEDIDA COMUM DOS TRÊS TIPOS. Era 40px de altura e 14px de padding; encolheu 15% em 20/10/2026 — 34 e 12. O corte de 25% (30 e 10) foi tentado antes e passou do ponto: obrigava a fonte a descer para 13 e a fileira perdia presença ao lado da marca. Com 34px ela volta a 15. */ --lpbar-alt:34px; --lpbar-pad:12px; /* 14px, um ponto abaixo do `--fs-ui` da casa. Fica como token da barra, e não como `14px` solto na regra, porque é a terceira medida do mesmo conjunto: altura, respiro e corpo mudam juntos. */ --lpbar-fonte:14px; --lpbar-veu:rgba(34,98,227,.10); } @supports (color:color-mix(in srgb, red 10%, transparent)){ .lpbar{--lpbar-veu:color-mix(in srgb, var(--azul-600) 10%, transparent)} } .lpbar[data-escuro="true"]{--lpbar-veu:rgba(255,255,255,.12)} /* ---- secundário: o fio é o que o distingue do padrão ---- Translúcido, e não chapado: a barra é transparente sobre a malha, e um fio opaco desenharia caixas recortadas por cima dela. É o ardósia da paleta a 34%, forte o bastante para o contorno existir e fraco o bastante para o fundo continuar passando. No hover entra o MESMO véu do padrão e o fio fecha para 55%: a diferença entre os dois estados é de peso, e não uma cor nova. `.mm > a.mm-login` E NÃO `.mm-login`: a regra dos links da barra tem uma classe a mais e venceria, devolvendo o raio e o padding dela ao botão. A linha em `rgba` vem antes do `color-mix` de propósito: é o mesmo valor escrito à mão, para navegador sem `color-mix` não ficar sem fio nenhum. */ .lpbar .mm > a.mm-login, .lpbar .mm-lingua > summary{ border-color:rgba(88,101,143,.34); border-color:color-mix(in srgb, var(--grey-500) 34%, transparent); } .lpbar .mm > a.mm-login:hover, .lpbar .mm-lingua > summary:hover{ color:var(--interactive);background:var(--lpbar-veu); border-color:rgba(88,101,143,.55); border-color:color-mix(in srgb, var(--grey-500) 55%, transparent); } .lpbar .mm > a.mm-login svg{width:15px;height:15px;flex:none} /* ---- primário: só a CTA ---- */ .lpbar .mm .cta{ background:var(--btn-primary-bg);color:var(--btn-primary-fg)!important; /* SEM PESO PRÓPRIO TAMBÉM. A ênfase do primário é o fundo cheio, que já é o elemento mais forte da barra; somar meio peso de fonte era a terceira tipografia numa fileira que deveria ter uma. */ border-color:var(--btn-primary-bg); } .lpbar .mm .cta:hover{background:var(--btn-primary-bg-hover);color:#FFFFFF!important} /* Abaixo de 1080 o menu inteiro sai e sobra o botão: painel de 920px não cabe, e um acordeão de três níveis numa barra fixa é pior que nenhum menu. A navegação continua pelo rodapé, que é completo. */ @media(max-width:1080px){ .lpbar .mm-grupo,.lpbar .mm-login,.lpbar .mm > a:not(.cta){display:none} /* A PILULA DE IDIOMA VAI JUNTO, e reaparece dentro da gaveta. Ela e um
, entao nao casava com os seletores acima e ficou de fora na primeira versao: a 375px a barra passava da largura da tela e a pagina ganhava rolagem horizontal. */ .lpbar .mm-lingua{display:none} } @media(max-width:560px){ .lpbar{padding-inline:14px;gap:10px} /* SÓ O `nowrap`: o rótulo de ação não quebra em duas linhas numa barra. O padding e o tamanho de fonte que havia aqui saíram em 20/10/2026 — eram eles que faziam a CTA ter medida própria no telefone, depois de os cinco botões terem sido igualados no desktop. */ .lpbar .mm .cta{white-space:nowrap} .lpbar-marca img{height:24px} } /* ---- a pílula de idioma ------------------------------------------------- Veio do menu da home, onde era a única que existia. Mesmo markup, mesmas medidas; o que muda é a unidade — a folha do herói conta em `--u` e esta conta em pixel. */ .lpbar .mm-lingua{position:relative} /* A pílula não repete medida nenhuma: altura, fonte, padding, raio e transição vêm da base dos três botões, lá em cima. Aqui fica só o que é dela — ela é um , e precisa deixar de parecer um. */ .lpbar .mm-lingua > summary{cursor:pointer;list-style:none;user-select:none} .lpbar .mm-lingua > summary::-webkit-details-marker{display:none} /* (o hover da pílula é o do secundário, lá em cima — esta regra duplicava ele com o fio chapado e vencia por vir depois) */ .lpbar .mm-lingua > summary svg{width:15px;height:15px;flex:none} /* A SIGLA NÃO TEM PESO PRÓPRIO. Ela vinha em 600 com um pingo de letter-spacing — ao lado de "Entrar" em 500, a diferença se via. Herda. */ .lpbar .mm-lingua-sigla{font-weight:inherit;letter-spacing:inherit} .lpbar .mm-lingua-lista{ position:absolute;top:calc(100% + 10px);right:0;z-index:70; display:flex;flex-direction:column;min-width:158px; padding:6px;border-radius:14px; background:#FFFFFF;border:1px solid #E3E8F4; box-shadow:0 18px 40px rgba(16,26,54,.14); } .lpbar .mm-lingua-lista a{ padding:9px 12px;border-radius:9px;white-space:nowrap;text-decoration:none;color:var(--ink); transition:background-color .15s ease; } .lpbar .mm-lingua-lista a:hover{background:#F1F4FC} .lpbar .mm-lingua-lista a[aria-current="true"]{background:#EEF2FF;font-weight:600} @media(max-width:760px){ /* No telefone sobra o globo: a sigla ao lado custaria largura numa barra que já precisa caber marca, botão e gaveta. */ .lpbar .mm-lingua-sigla{display:none} .lpbar .mm-lingua > summary{padding:8px 10px} } /* ---- a barra sobre os blocos escuros ------------------------------------ O VIDRO CLARO NÃO SERVE EM CIMA DO PRETO, e isto deixou de ser detalhe no dia em que a barra ficou com 24% de tinta: com o vidro quase todo transparência, o que passa por baixo é que decide a leitura. O fecho e o rodapé destas páginas são #05070E, e tinta escura sobre preto não lê. Aumentar a opacidade resolveria e desfaria o pedido, que foi justamente MAIS transparência. Então quem vira é a TINTA: `lp.js` avisa quando um bloco escuro cruza a faixa do topo e a barra troca para tinta clara sobre um vidro de base escura — a mesma transparência, a leitura invertida. É o mesmo mecanismo que a barra da home já usava. */ .lpbar[data-escuro="true"]{ background:rgba(8,12,22,.28); border-bottom-color:rgba(255,255,255,.10); box-shadow:0 1px 0 rgba(255,255,255,.08), 0 12px 34px -24px rgba(0,0,0,.8); } /* O `summary` ENTRA NESTA LISTA, e não só a sigla dentro dele: o globo é um SVG com `stroke="currentColor"`, e quem define essa cor é o summary. Na primeira versão só `.mm-lingua-sigla` virava — o "PT" acendia e o globo ao lado continuava com a tinta escura, invisível sobre o rodapé preto. */ .lpbar[data-escuro="true"] .mm-gatilho, .lpbar[data-escuro="true"] .mm > a, .lpbar[data-escuro="true"] .mm-lingua > summary, .lpbar[data-escuro="true"] .mm-lingua-sigla, .lpbar[data-escuro="true"] .lp-menu-btn{color:#EAF0FF} .lpbar[data-escuro="true"] .mm-gatilho:hover, .lpbar[data-escuro="true"] .mm > a:hover{color:#FFFFFF} .lpbar[data-escuro="true"] .mm-login, .lpbar[data-escuro="true"] .mm-lingua > summary{border-color:rgba(255,255,255,.4)} /* O fundo do hover não é repetido aqui: `--lpbar-veu` já virou véu branco no estado escuro, e as regras de hover lá em cima leem o token. */ .lpbar[data-escuro="true"] .mm-login:hover, .lpbar[data-escuro="true"] .mm-lingua > summary:hover{border-color:#FFFFFF} /* O botão cheio inverte: no claro ele é o único escuro da barra; no escuro tem de ser o único claro. */ /* `!important` porque a regra base do botão também o usa (a cor dele vence o `a{color}` da casa). Sem ele o rótulo fica branco sobre o fundo branco invertido — some. */ .lpbar[data-escuro="true"] .mm .cta{background:#FFFFFF;color:var(--ink)!important} .lpbar[data-escuro="true"] .mm .cta:hover{background:#EAF0FF;color:var(--ink)!important} /* ---- 28.6 · A PillNav saiu em 20/10/2026 ------------------------------------ A pílula que deslizava de um item para o outro no hover foi removida com os três tipos de botão da barra: agora o hover é do próprio botão, e um segundo indicador perseguindo o ponteiro competia com ele. Era também a única peça da barra que animava left/top/width/height — layout a cada quadro. O `isolation` fica: a barra continua querendo o próprio contexto de empilhamento para os painéis. --------------------------------------------------------------------------- */ .lpbar .mm{isolation:isolate} /* ============================================================================ 29 — A GAVETA DO TELEFONE ---------------------------------------------------------------------------- Portada de @reactbits-pro/navbar-4. Ver o comentário da função `gaveta()` em gabarito.mjs para o que veio de lá e por quê. O CORTE É EM 1080px, e não nos 768 do original: é onde o painel de 920px do menu grande deixa de caber. Acima disso a gaveta não existe; abaixo, ela é a única navegação além do rodapé. ============================================================================ */ .lp-menu-btn{ display:none; appearance:none;-webkit-appearance:none;border:0;cursor:pointer; /* QUADRADO DA ALTURA DOS OUTROS, lendo o mesmo token: ele fica ao lado da CTA no telefone, e 40 contra 30 era a última medida fora de passo. O fundo também sai: no padrão da barra o repouso é sem fundo, e o véu aparece no hover como em todos os outros. */ width:var(--lpbar-alt);height:var(--lpbar-alt);padding:0;margin-left:2px; border-radius:var(--r-pill); background:transparent;color:var(--text-1); place-items:center; transition:background-color .18s ease; } .lp-menu-btn:hover{background:var(--lpbar-veu)} .lp-menu-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px} .lp-menu-tracos{display:grid;gap:4px;width:17px} .lp-menu-tracos i{ display:block;height:2px;border-radius:1px;background:currentColor; transition:transform .22s var(--ease),opacity .16s ease; } /* O X: o traço de cima desce e gira, o do meio some, o de baixo sobe e gira. */ .lp-menu-btn[aria-expanded="true"] .lp-menu-tracos i:nth-child(1){transform:translateY(6px) rotate(45deg)} .lp-menu-btn[aria-expanded="true"] .lp-menu-tracos i:nth-child(2){opacity:0} .lp-menu-btn[aria-expanded="true"] .lp-menu-tracos i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} @media (prefers-reduced-motion:reduce){.lp-menu-tracos i{transition:none}} /* ---- o véu ---- `position:fixed` e não `absolute`: a barra é `sticky`, e um véu absoluto dentro dela cobriria só a altura da própria barra. */ .lp-veu{ position:fixed;inset:0;z-index:55; background:rgba(13,39,86,.22); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); animation:lp-veu-entra .22s ease; } .lp-veu[hidden]{display:none} @keyframes lp-veu-entra{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){.lp-veu{animation:none}} /* ---- a folha ---- */ .lp-gaveta{ position:fixed;inset:68px 0 0;z-index:58; overflow-y:auto;overscroll-behavior:contain; background:var(--folha); border-top:1px solid var(--rule-2); animation:lp-gaveta-entra .28s cubic-bezier(.32,.72,0,1); } .lp-gaveta[hidden]{display:none} @keyframes lp-gaveta-entra{from{opacity:0;translate:0 -10px}to{opacity:1;translate:0 0}} @media (prefers-reduced-motion:reduce){.lp-gaveta{animation:none}} .lp-gav-in{padding:14px 16px 40px;display:grid;gap:2px} .lp-gav-cab{ appearance:none;-webkit-appearance:none;border:0;cursor:pointer;width:100%; display:flex;align-items:center;justify-content:space-between;gap:12px; min-height:48px;padding:0 12px;border-radius:12px; background:transparent;color:var(--text-1); font-family:var(--font-title);font-size:var(--fs-ui);font-weight:600;text-align:left; transition:background-color .16s ease; } .lp-gav-cab:hover{background:var(--grey-100)} .lp-gav-cab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px} .lp-gav-cab svg{width:17px;height:17px;flex:none;color:var(--text-3);transition:transform .2s var(--ease)} .lp-gav-cab[aria-expanded="true"] svg{transform:rotate(180deg)} @media (prefers-reduced-motion:reduce){.lp-gav-cab svg{transition:none}} .lp-gav-lista{ list-style:none;margin:2px 0 6px 12px;padding:0 0 0 14px; border-left:1px solid var(--rule-2);display:grid;gap:1px; } .lp-gav-lista[hidden]{display:none} .lp-gav-lista a{ display:flex;align-items:center;min-height:42px;padding:0 10px; border-radius:8px;text-decoration:none; color:var(--text-2);font-size:var(--fs-micro); transition:background-color .16s ease,color .16s ease; } .lp-gav-lista a:hover{background:var(--grey-100);color:var(--text-1)} .lp-gav-solto{ display:flex;align-items:center;min-height:48px;padding:0 12px; border-radius:12px;text-decoration:none; color:var(--text-1);font-family:var(--font-title); font-size:var(--fs-ui);font-weight:600; transition:background-color .16s ease; } .lp-gav-solto:hover{background:var(--grey-100)} .lp-gav-cta{ display:flex;align-items:center;justify-content:center; min-height:50px;margin-top:14px;border-radius:var(--r-pill); background:var(--btn-primary-bg);color:var(--btn-primary-fg); text-decoration:none;font-weight:600;font-size:var(--fs-ui); } .lp-gav-cta:hover{background:var(--btn-primary-bg-hover);color:#FFFFFF} /* A gaveta e o botão só existem onde o menu grande não cabe. */ @media(min-width:1081px){ .lp-menu-btn,.lp-veu,.lp-gaveta{display:none!important} } @media(max-width:1080px){ .lp-menu-btn{display:grid} } /* Com a gaveta aberta, a página por baixo não rola. */ body.lp-travado{overflow:hidden} /* E a barra fixa do pé sai de cena: ela tem `z-index:70` contra os 58 da gaveta, então ficava por cima, com o mesmo "Agendar diagnóstico" da gaveta repetido logo abaixo dele. Dois botões idênticos empilhados não é ênfase. */ body.lp-travado .mobile-cta{display:none}