/* ==========================================================================
   OnZap Design System
   Shared tokens and primitives for the refreshed visual direction.
   ========================================================================== */

:root {
  --nav-scroll-offset: 78px;
  --nav-scroll-offset-large: 86px;
  --onzap-green: #1daa61;
  --onzap-green-dark: #0f6134;
  --onzap-green-soft: #effaf4;
  --onzap-blue: #28a1c5;
  --onzap-blue-dark: #082e63;
  --onzap-blue-soft: #eef8fb;
  --onzap-ink: #102018;
  --onzap-muted: #5d6f66;
  --onzap-line: rgba(15, 97, 52, 0.13);
  --onzap-surface: #ffffff;
  --onzap-page: #f7fbf8;
  --onzap-container: 1180px;
  --onzap-container-wide: 1280px;
  --onzap-pad-x: clamp(18px, 4vw, 64px);
  --onzap-pad-y: clamp(72px, 9vw, 124px);
  --onzap-radius-sm: 10px;
  --onzap-radius-md: 16px;
  --onzap-radius-lg: 24px;
  --onzap-shadow-sm: 0 10px 24px rgba(8, 46, 99, 0.08);
  --onzap-shadow-md: 0 20px 50px rgba(15, 97, 52, 0.12);
  --onzap-shadow-lg: 0 28px 70px rgba(8, 46, 99, 0.16);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-scroll-offset);
}

body {
  background: var(--onzap-surface);
  color: var(--onzap-ink);
  font-family: "Mulish", "Open Sans", sans-serif;
  text-rendering: optimizeLegibility;
}

body,
p,
li,
a,
button,
input,
textarea,
select {
  letter-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--onzap-ink);
  font-family: "Mulish", "Jost", sans-serif;
  letter-spacing: 0;
}

p {
  color: var(--onzap-muted);
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

button,
.whatsapp-message-button,
.portal-button,
.contact-button,
.btn-choice button {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}

.whatsapp-message-button,
.portal-button,
.contact-button,
.btn-choice button {
  border-radius: 999px !important;
  font-weight: 800;
}

.whatsapp-message-button:hover,
.portal-button:hover,
.contact-button:hover,
.btn-choice button:hover {
  transform: translateY(-2px);
}

.gradient {
  background: linear-gradient(90deg, var(--onzap-green), var(--onzap-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#about,
#benefits,
#experiencia,
#portal,
#products,
#price-section,
#faq-section,
.colaboradores-section,
.colaboradores-section-mobile {
  position: relative;
  scroll-margin-top: var(--nav-scroll-offset);
}

#home {
  scroll-margin-top: 0;
}

#experiencia,
#portal,
#price-section,
#faq-section {
  scroll-margin-top: var(--nav-scroll-offset-large);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}