/* ============================================================
   12_ NAV / BUTTONS
   ============================================================ */
.nav {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--steel-soft);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: var(--r);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  white-space: nowrap;
  transition:
    background .15s var(--ease-soft),
    color .15s var(--ease-soft),
    border-color .15s var(--ease-soft),
    opacity .2s var(--ease-soft);
}
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.btn-primary {
  background: var(--ink);
  color: var(--card);
  padding: 16px 22px;
}
.btn-primary:hover { background: var(--inverse); }
.btn-primary[aria-disabled="true"], .btn-primary:disabled {
  opacity: .35;
}
.btn-primary:disabled {
  pointer-events: none;
}
.btn-primary .plus {
  position: relative;
  width: 11px; height: 11px;
  flex: none;
}
.btn-primary .plus::before, .btn-primary .plus::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.btn-primary .plus::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); }
.btn-primary .plus::after  { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); }
.btn-primary .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  background: rgba(245,245,242,.14);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--card);
}

.btn-line {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn-line:hover { background: var(--ink); color: var(--card); }
.btn-line.on-dark { border-color: var(--card); color: var(--card); }
.btn-line.on-dark:hover { background: var(--card); color: var(--ink); }

.btn-ghost {
  color: var(--steel);
  padding: 14px 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.btn-ghost:hover { color: var(--ink); }
.btn-ghost svg { width: 12px; height: 12px; }

.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 18;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  color: var(--card);
  background: #1FAF5B;
  border-radius: 50%;
  box-shadow:
    0 16px 34px rgba(11, 14, 19, .2),
    inset 0 0 0 1px rgba(255, 255, 255, .28);
  transition:
    transform .15s var(--ease-soft),
    background .15s var(--ease-soft),
    box-shadow .15s var(--ease-soft);
}
.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.02);
  background: #178E4A;
  box-shadow:
    0 20px 42px rgba(11, 14, 19, .24),
    inset 0 0 0 1px rgba(255, 255, 255, .34);
}
.whatsapp-float:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
.whatsapp-float svg {
  width: 42px;
  height: 42px;
  fill: currentColor;
}

@media (max-width: 640px) {
  .stage-inner { padding-bottom: 92px; }
  .nav { margin-top: 20px; padding-top: 14px; }
  .btn { padding: 13px 16px; }
  .whatsapp-float {
    right: 16px;
    bottom: calc(100px + env(safe-area-inset-bottom));
    width: 62px;
    height: 62px;
  }
  .whatsapp-float svg {
    width: 38px;
    height: 38px;
  }
  .nav.is-floating {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    margin: 0;
    background: var(--concrete);
    border-top: 1px solid var(--steel-soft);
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    z-index: 15;
  }
  .nav.is-floating > span { display: none; }
  .nav.is-floating .btn {
    min-height: 48px;
    padding: 13px 16px;
  }
  .nav.is-floating .btn-ghost {
    min-width: 104px;
    padding-inline: 12px;
    border: 1px solid var(--steel-soft);
    background: var(--card);
    color: var(--ink);
  }
  .nav.is-floating .btn-primary { flex: 1; }
}