/* ============================================================
   Dock — o CTA no alcance do polegar, só no celular.
   Acima de 600px o header já mostra o botão o tempo todo.
   ============================================================ */

.dock {
    position: fixed;
    inset: auto 12px calc(12px + env(safe-area-inset-bottom));
    z-index: var(--z-sticky);
    padding: 6px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95), 0 10px 30px rgba(17, 17, 20, 0.14);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    transform: translateY(calc(100% + 24px));
    visibility: hidden;
    transition:
        transform  var(--dur-slow) var(--ease-out-expo),
        visibility 0s linear var(--dur-slow);
}

.dock.is-visible {
    transform: none;
    visibility: visible;
    transition: transform var(--dur-slow) var(--ease-out-expo), visibility 0s;
}

/* Com o menu aberto o próprio menu já tem o botão. */
.is-nav-open .dock { visibility: hidden; }

@media (min-width: 600px) {
    .dock { display: none; }
}