Só abaixo de 600 px de largura e a partir de 480 px de altura, fixa no
rodapé da janela. Janela mais baixa (celular deitado, zoom de 400 %): sem
a barra — com o cabeçalho, ela cobriria metade da tela; o WhatsApp do
cabeçalho continua. Aparece depois da primeira dobra (html.contact-bar-on)
e some com campo de texto em foco (html.contact-dock-typing), com o CTA
principal de WhatsApp da página na tela ([data-wa-primary]:
html.contact-dock-cta), com a barra de comparação ou o lightbox.
Escondida, fica fora do foco e dos leitores (visibility). O rodapé e os
cartões da rolagem guiada (§26.5, presos ao pé da tela) ganham o espaço da
barra (html.has-contact-bar): ela nunca cobre o fim da página nem o texto
da história. */
.contact-bar {
display: none;
}
@media (max-width: 599.98px) and (min-height: 480px) {
.contact-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 44;
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
gap: 8px;
padding: 8px 12px;
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
background-color: var(--glass-strong);
border-top: 1px solid var(--line);
box-shadow: 0 -14px 32px -20px rgba(1, 32, 112, .5);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
color: var(--ink);
visibility: hidden;
transform: translateY(calc(100% + 16px));
transition: transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
}
html.contact-bar-on:not(.contact-dock-typing):not(.contact-dock-cta) .contact-bar,
.contact-bar:focus-within {
visibility: visible;
transform: none;
transition: transform var(--dur-2) var(--ease-out), visibility 0s;
}
html.has-compare-bar .contact-bar {
display: none;
}
/* Espaço reservado no fim da página (rodapé) e para o foco por teclado */
html.has-contact-bar .site-footer {
padding-bottom: calc(28px + var(--contact-bar-h) + env(safe-area-inset-bottom, 0px));
}
html.has-contact-bar:not(.has-compare-bar) {
scroll-padding-bottom: calc(var(--contact-bar-h) + 16px);
}
/* Cartões da rolagem guiada (.story__intro / .story__chapter, §26.5): presos
ao pé da linha de 100svh, sobem acima da barra, que fica na tela durante a
história (a margem é fixa: o cartão não pula quando a barra entra ou sai) */
html.has-contact-bar:not(.has-compare-bar) .story__chapter,
html.has-contact-bar:not(.has-compare-bar) .story__intro {
margin-bottom: calc(var(--contact-bar-h) + 16px + env(safe-area-inset-bottom, 0px));
}
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.contact-bar {
background-color: var(--paper);
}
}
.contact-bar__btn {
min-width: 0;
min-height: 48px;
padding-inline: 12px;
gap: 8px;
font-size: .9375rem;
}
/* A barra fica sobre o papel claro: o secundário usa a tinta, em qualquer página */
.contact-bar .btn--secondary {
border-color: var(--ink);
color: var(--ink);
}
.contact-bar .btn--secondary:hover {
background-color: var(--accent-tint);
color: var(--ink);
}
/* Lightbox aberto: o contato rápido sai da frente (vale para a sobreposição
de reserva, sem