/* =========================================================
   BOTÃO FLUTUANTE DE WHATSAPP (.wa-float)
   Fixo no canto inferior direito, no estilo do selo do navbar (verde do site,
   filete creme). Some enquanto o portão está fechado. Tamanho e margem nos
   tokens --wa-size / --wa-gap (seções com controles no canto usam os mesmos
   tokens para não colidir: ver .ma__nav em sections/atuacoes.css).
   ========================================================= */
@layer components {
  .wa-float {
    position: fixed;
    z-index: var(--z-float);
    right: calc(var(--wa-gap) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--wa-gap) + env(safe-area-inset-bottom, 0px));
    display: grid;
    place-items: center;
    width: var(--wa-size);
    height: var(--wa-size);
    border-radius: 50%;
    color: var(--c-cream-soft);
    background: radial-gradient(circle at 50% 35%, rgba(52, 95, 75, .92), rgba(28, 52, 40, .92));
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(240, 234, 220, .32);
    box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), visibility 0s;
  }
  .wa-float svg { width: 46%; height: auto; }
  .wa-float:hover { transform: translateY(-2px); }
  .wa-float:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

  /* portão fechado: invisível e fora do foco (o portão cobre tudo) */
  html.gate-locked .wa-float { opacity: 0; visibility: hidden; transform: scale(.8); transition-delay: 0s, 0s, var(--dur-base); }
}