/* =============================================================================
Ajustes das páginas do site — regras que CORRIGEM folhas que não estão neste
repositório.
POR QUE ESTE ARQUIVO EXISTE
O cabeçalho e os cards do blog são desenhados por `/home.css`,
`/blog/blog.css`, `/cases/cases.css` e `/materiais-gratuitos/…` — arquivos que
moram no `public_html` do Hostinger e NÃO estão neste projeto. Dois defeitos
relatados em 04/09/2026 são de regras que vivem lá dentro, e por isso não
havia neste repositório nenhum arquivo em que consertá-los:
1. o mega-menu do cabeçalho fecha quando o ponteiro sai do botão em direção
ao painel;
2. os cards de post de `/blog/` têm um anel dourado desenhado por cima da
capa.
A correção entra como uma folha NOSSA, carregada DEPOIS da folha do site.
ORDEM IMPORTA, e é o único mecanismo em uso aqui: os seletores têm a mesma
especificidade dos originais, então vence quem vem por último. O ``
deste arquivo é sempre o ÚLTIMO do ``. Sem `!important` de propósito —
a ordem já resolve, e um `!important` tiraria do site a chance de mudar o
cabeçalho um dia sem mexer aqui.
============================================================================= */
/* -----------------------------------------------------------------------------
1. O VÃO ENTRE O BOTÃO DO MENU E O PAINEL DO MEGA-MENU
O QUE FOI MEDIDO no site publicado, em 04/09/2026, cabeçalho de 82px:
botão "Conteúdo" ... y 32,6 → 48,6
... y 31,8 → 50,2 (é ELE que dispara mouseleave)
.mega-menu ... y 92 (fixed; top: calc(82px + 10px))
São ~42px em que o ponteiro não está sobre o `
` nem sobre o painel.
POR QUE A PONTE QUE JÁ EXISTE NÃO FUNCIONA — a causa raiz
`home.css` tenta cobrir esse vão:
.mega-menu::before { position:absolute; inset:-12px 0 auto; height:12px }
Mas o mesmo painel recebe, algumas linhas abaixo:
.mega-menu--products { overflow: hidden !important }
.mega-menu--products-v459 { overflow: hidden }
O `::before` é posicionado FORA da caixa do painel (`top: -12px`), e
`overflow: hidden` o RECORTA por inteiro. A ponte nunca existiu na tela.
Confirmado no navegador: com o painel aberto, o ponteiro em qualquer ponto do
vão não põe o `
` em `:hover` — a cadeia de `:hover` para no `.container`
do cabeçalho.
E o `overflow: hidden` não pode simplesmente sair: ele é quem recorta a
coluna cinza do menu "Soluções" no raio de 14px do painel. Tirá-lo devolve
cantos quadrados dentro de um painel arredondado.
Sem ponte, quem segura o menu aberto durante a travessia é APENAS o
`setTimeout` de 140ms do `home.js` (`scheduleCloseMega`). Daí os dois
sintomas relatados:
* nas páginas que carregam `home.js`, o menu "às vezes" fecha — quem
atravessa 42px em mais de 140ms perde o painel;
* nas páginas do CMS (artigo, biografia, Case, material), `home.js` NÃO era
carregado, e aí não há timer nenhum: o menu fecha no instante em que o
ponteiro deixa o botão. É exatamente o defeito descrito.
A CORREÇÃO: a ponte muda de dono. Ela sai do painel — que a recorta — e vai
para o `
`, que não tem `overflow` nenhum. Estar sobre a ponte passa a ser
estar sobre o `
`: o `:hover` do CSS continua verdadeiro e o `mouseleave`
do JS nem chega a disparar. O menu deixa de depender de velocidade de
ponteiro, e passa a funcionar mesmo sem `home.js`.
`position: relative` no `
` é seguro: sozinho ele não cria contexto de
empilhamento, e não vira bloco contentor de `position: fixed` — o painel
continua ancorado na janela, como está hoje.
A PONTE É INERTE ENQUANTO NINGUÉM OLHA. Com `pointer-events: none` por
padrão, ela não intercepta clique nenhum com o menu fechado; ela só passa a
receber ponteiro quando o próprio item já está em `:hover`, `:focus-within`
ou `.is-open` — e é isso que a torna auto-sustentável: o ponteiro entra nela
vindo do botão, e a presença dentro dela mantém o `:hover` que a mantém viva.
48px de altura: precisa ser ao menos os ~42px do vão. Passar um pouco por
baixo do topo do painel não faz mal — o painel tem `z-index: 9999` e é
desenhado por cima da ponte, então nenhum clique no painel é interceptado. E
a ponte tem a LARGURA DO ITEM, não a do painel: assim ela nunca cobre "I.M.S"
nem "Contato", que ficam na mesma faixa horizontal.
Só no desktop. Até 820px o painel é `position: static` dentro do menu
sanfonado, não há vão para cobrir, e uma faixa absoluta de 48px ali cairia
por cima do item seguinte da lista.
-------------------------------------------------------------------------- */
@media (min-width: 821px) {
.site-nav__item--has-mega {
position: relative;
}
.site-nav__item--has-mega::after {
content: "";
position: absolute;
top: 100%;
right: 0;
left: 0;
height: 48px;
pointer-events: none;
}
.site-nav__item--has-mega:hover::after,
.site-nav__item--has-mega:focus-within::after,
.site-nav__item--has-mega.is-open::after {
pointer-events: auto;
}
}
/* -----------------------------------------------------------------------------
2. O ANEL DOURADO DOS CARDS DE POST, EM `/blog/`
`blog.css` desenha, em cada card de post:
.blog-post-card__media::after {
width: 160px; height: 160px;
right: -52px; bottom: -74px;
border: 18px solid rgba(205,165,94,.70);
border-radius: 50%;
}
Um anel de 160px com borda dourada de 18px, no canto do painel da capa. Ele
foi desenhado quando os cards eram um cartaz — painel azul com malha e sem
foto. Agora que a capa cadastrada na Central entra como ``, o anel é
pintado POR CIMA da fotografia: `::after` vem depois de todos os filhos.
`content: none` remove o pseudo-elemento inteiro — não sobra caixa, nem
espaço, nem transição. É o único jeito de apagá-lo sem tocar em `blog.css`.
O `::before` do mesmo elemento — a malha quadriculada e o brilho do canto —
NÃO é tocado: ele é o fundo do card SEM capa, e apagá-lo deixaria um
retângulo azul chapado onde hoje há textura.
Nada mais do card muda: a caixa da capa mantém os mesmos 178px de altura
mínima, e corpo, título, pílula, data e botão continuam onde estavam.
-------------------------------------------------------------------------- */
.blog-post-card__media::after {
content: none;
}