/* =============================================================
   EXPLANT COSTA RICA - Universal Button
   Self-contained (own tokens) canonical button used by every
   page: primary (.btn), secondary/outline (.btn--ghost),
   light-on-dark (.btn--light). ONE size, everywhere - no
   .btn--sm / .btn--lg variants exist. This is the only place
   .btn rules are defined, site-wide.
   Reference implementation: the header's CTA button (confirmed
   2026-07-04) - 40px tall, .88rem, #F07E86, pill.
   ============================================================= */
:root {
  --b-coral: #F07E86;
  --b-coral-deep: #E0687A;
  --b-ink: #2B2119;
  --b-bg: #F6F0E7;
  --b-on-dark: #EFE6D6;
  --b-espresso: #241811;
  --b-line: rgba(43,33,25,.14);
  --b-line-dark: rgba(239,230,214,.25);
  --b-sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --b-ease: cubic-bezier(.22,.61,.36,1);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  height: 40px; padding: 0 1.3em; font-family: var(--b-sans); font-weight: 600; font-size: .88rem;
  border-radius: 999px; border: 1px solid transparent;
  background: var(--b-coral); color: #fff;
  transition: transform .35s var(--b-ease), box-shadow .35s var(--b-ease), background .3s, color .3s;
  white-space: nowrap; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--b-coral-deep); transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(224,104,122,.6); }
.btn:active { transform: translateY(0); }
.btn .ar { transition: transform .35s var(--b-ease); }
.btn:hover .ar { transform: translateX(4px); }

.btn--ghost { background: transparent; color: var(--b-ink); border-color: var(--b-line); }
.btn--ghost:hover { background: var(--b-ink); color: var(--b-bg); border-color: var(--b-ink); box-shadow: none; }

.btn--light { background: var(--b-bg); color: var(--b-ink); border-color: var(--b-bg); }
.btn--light:hover { background: #fff; border-color: #fff; }

/* dark sections: keep the ghost button legible */
.bg-espresso .btn--ghost, .cta-band .btn--ghost, .sec.dark .btn--ghost {
  color: var(--b-on-dark); border-color: var(--b-line-dark);
}
.bg-espresso .btn--ghost:hover, .cta-band .btn--ghost:hover, .sec.dark .btn--ghost:hover {
  background: var(--b-on-dark); color: var(--b-espresso);
}

/* mobile menu overlay: same button, stretched to the container width */
.mobile-menu .btn { width: 100%; margin-top: 1.5rem; }