/* ============================================================
   BUTTON COMPONENT  ·  v4
   Shared by every feature: hero, assessment, report, lead-capture,
   WhatsApp. One definition, reused everywhere.

   v4 EVOLUTION: the primary CTA stops being a flat paint chip and
   becomes a *lit physical key* — a top-lit gold gradient, an inset
   edge-light along its top lip, and a soft warm ambient glow it casts
   onto the canvas. Shape, radius, padding and layout are byte-identical
   to v3 so every screen still recognizes its own button.
   ============================================================ */
.btn-start, .btn-next, .btn-get-protocol, .btn-submit {
  position: relative; overflow: hidden;
  width: 100%; border-radius: var(--r-btn); font-weight: 700;
  display: flex; align-items: center; justify-content: space-between;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), filter .25s var(--ease-out);
  letter-spacing: -0.005em;
  background: var(--grad-gold); color: var(--obsidian);
  box-shadow: var(--edge-light-strong), var(--glow-gold-sm), var(--shadow-2);
}
@media (pointer: fine) {
  .btn-start:hover, .btn-next.on:hover, .btn-get-protocol:hover, .btn-submit:hover {
    box-shadow: var(--edge-light-strong), var(--glow-gold-md), var(--shadow-3);
    filter: brightness(1.04);
  }
}
.btn-start:active, .btn-next:active, .btn-get-protocol:active, .btn-submit:active {
  transform: translateY(1px) scale(.992); filter: brightness(.98);
}
/* Light sweep — a single slow specular pass across the key, so it reads
   as a polished surface catching the room light. Calm, never flashy. */
.btn-start::after, .btn-get-protocol::after, .btn-submit::after, .btn-next.on::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,250,235,.45) 50%, transparent 65%);
  transform: translateX(-120%); pointer-events: none;
  animation: keySweep 6.5s var(--ease-glide) 1.2s infinite;
}
@keyframes keySweep { 0% { transform: translateX(-120%); } 16%,100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
  .btn-start::after, .btn-get-protocol::after, .btn-submit::after, .btn-next.on::after { animation: none; opacity: 0; }
}

.btn-start { padding: 17px 22px calc(17px + var(--sab)) 22px; font-size: var(--fs-md); }
.btn-start-arrow {
  width: 30px; height: 30px; background: var(--obsidian); color: var(--gold-bright);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(247,242,230,.08);
  transition: transform .35s var(--ease-spring);
}
.btn-start:hover .btn-start-arrow { transform: translateX(-3px); }
[dir="ltr"] .btn-start:hover .btn-start-arrow { transform: translateX(3px); }

.btn-secondary {
  width: 100%; padding: 14px 22px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-btn); border: 1px solid var(--hairline-strong);
  background: transparent; color: var(--mist); font-size: var(--fs-sm); font-weight: 600;
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out), background .25s var(--ease-out);
}
.btn-secondary:hover, .btn-secondary:active { border-color: var(--gold); color: var(--gold-bright); background: var(--gold-soft); }
.btn-secondary svg { width: 15px; height: 15px; }

.btn-wa {
  position: relative; overflow: hidden;
  width: 100%; padding: 17px 22px; background: linear-gradient(177deg, #2BE077, #1FBE5C); color: white; border-radius: var(--r-btn);
  font-size: var(--fs-md); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 12px;
  text-decoration: none; letter-spacing: -0.005em;
  box-shadow: var(--edge-light-strong), 0 0 0 1px rgba(37,211,102,.25), 0 8px 26px rgba(37,211,102,.28);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), filter .25s var(--ease-out);
}
@media (pointer: fine) { .btn-wa:hover { filter: brightness(1.04); box-shadow: var(--edge-light-strong), 0 0 0 1px rgba(37,211,102,.32), 0 10px 32px rgba(37,211,102,.40); } }
.btn-wa:active { transform: translateY(1px) scale(.992); }
.wa-icon { width: 23px; height: 23px; flex-shrink: 0; }