.nav{position:fixed;z-index:50;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--gut);
  background:linear-gradient(180deg,rgba(5,10,7,.78),rgba(5,10,7,0));backdrop-filter:blur(2px)}
.nav.scrolled{background:rgba(5,10,7,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nav__logo{opacity:0;transform:translateY(-6px);transition:opacity .5s,transform .5s;pointer-events:none}
.nav--logo .nav__logo,.nav.scrolled .nav__logo{opacity:1;transform:none;pointer-events:auto}
.nav__logo img{height:30px;width:auto}
.nav__cta{padding:.6em 1.3em;font-size:.95rem;margin-left:auto}
.flot{position:fixed;z-index:60;right:max(16px,env(safe-area-inset-right));width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:0;cursor:pointer;transition:transform .2s,opacity .3s}
.flot--wa{bottom:max(18px,env(safe-area-inset-bottom));background:var(--verde);box-shadow:0 10px 30px rgba(30,149,29,.55)}
.flot--wa:hover{transform:scale(1.06)}
.flot--up{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 68px);background:rgba(20,32,24,.9);border:1px solid rgba(255,255,255,.18);opacity:0;pointer-events:none}
.flot--up.on{opacity:1;pointer-events:auto}
@media (max-width:520px){.nav__logo img{height:26px}}