/* ============================================================
   CTA FLUTUANTE — arte do designer (cta-float.svg), embutida no
   HTML para que as cores respondam a hover e foco.
   Leva ao delivery externo; não existe carrinho interno, por isso
   o rótulo acessível diz "Faça o seu pedido".

   Só existe a partir de 768px: no mobile ele foi retirado.
   ============================================================ */
.fab {
  --fab-fundo: var(--c-vermelho);
  --fab-aro: var(--c-mostarda);
  position: fixed; z-index: 90;
  right: max(var(--sp-lg), env(safe-area-inset-right));
  bottom: max(var(--sp-lg), env(safe-area-inset-bottom));
  width: clamp(84px, 9vw, 92px);   /* maior no mobile: é o único CTA fixo lá */
  aspect-ratio: 1;
  display: block;
  text-decoration: none;
  filter: drop-shadow(0 6px 16px rgb(49 43 35 / .35));
  opacity: 0; transform: translateY(24px) scale(.9);
  visibility: hidden; pointer-events: none;
  transition: opacity var(--t-base) var(--ease-snap),
              transform var(--t-base) var(--ease-snap),
              visibility var(--t-base);
}
@media (min-width: 768px) { .fab { width: clamp(72px, 6vw, 84px); right: var(--sp-xl); bottom: var(--sp-xl); } }
/* Abaixo de 768px o botão flutuante sai de cena, a pedido do
   cliente. Atenção: o cabeçalho mobile tem só a marca, então deixa
   de existir CTA fixo nessa faixa — a ação fica por conta dos
   botões no corpo da página. */
@media (max-width: 767px) { .fab { display: none; } }

.fab.is-visivel { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.fab.is-saindo  { transition-duration: var(--t-fast); transition-timing-function: var(--ease-inout); }

.fab__arte { width: 100%; height: 100%; display: block; }
.fab__arte path { transition: fill var(--t-fast) var(--ease-out), stroke var(--t-fast) var(--ease-out); }

.fab:hover  { --fab-fundo: var(--c-tijolo); }
.fab:active { transform: scale(.95); }
.fab:focus-visible { outline: none; }
.fab:focus-visible::after {
  content: ''; position: absolute; inset: -6px;
  border: 3px solid var(--c-mostarda); border-radius: 50%;
}

/* #7 — pulso de atenção, uma única vez por sessão */
.fab.is-pulsando { animation: pulso-unico 400ms var(--ease-snap) 1; }