/* tokens/colors */
/* NutriGlobal — Color tokens
   Derived from the brand logo: deep navy wordmark + rainbow spectrum. */
:root {
  /* ---- Brand ink ---- */
  --ng-navy:        #0d1b3e;  /* primary text / "Nutri" */
  --ng-navy-800:    #16264f;
  --ng-navy-600:    #2c3d6b;
  --ng-navy-400:    #6b779a;  /* muted body / captions */
  --ng-navy-200:    #c3c9d8;  /* hairline borders */

  /* ---- Rainbow spectrum (from the "Global" letters) ---- */
  --ng-red:     #e8352b;
  --ng-orange:  #f7941d;
  --ng-yellow:  #fdb913;
  --ng-green:   #22a94e;
  --ng-blue:    #2e7de0;
  --ng-purple:  #7a3fb0;

  /* ---- Surfaces ---- */
  --ng-white:       #ffffff;
  --ng-surface:     #ffffff;  /* cards */
  --ng-bg:          #ffffff;  /* page */
  --ng-bg-soft:     #f6f8fc;  /* alternating sections */
  --ng-bg-tint:     #eef3fb;  /* subtle callouts */

  /* ---- WhatsApp ---- */
  --ng-whatsapp:      #25d366;
  --ng-whatsapp-dark: #1eb257;

  /* ---- Signature rainbow gradient ---- */
  --ng-gradient: linear-gradient(90deg,
    #e8352b 0%, #f7941d 22%, #fdb913 42%,
    #22a94e 62%, #2e7de0 82%, #7a3fb0 100%); /* @kind color */
  --ng-gradient-diag: linear-gradient(115deg,
    #e8352b 0%, #f7941d 22%, #fdb913 42%,
    #22a94e 62%, #2e7de0 82%, #7a3fb0 100%); /* @kind color */

  /* ---- Semantic aliases ---- */
  --text-strong:  var(--ng-navy);
  --text-body:    var(--ng-navy-800);
  --text-muted:   var(--ng-navy-400);
  --text-on-color:#ffffff;
  --surface-page: var(--ng-bg);
  --surface-card: var(--ng-surface);
  --surface-alt:  var(--ng-bg-soft);
  --border-soft:  var(--ng-navy-200);
  --accent:       var(--ng-blue);
  --focus-ring:   #2e7de0;
}

/* tokens/typography */
/* NutriGlobal — Typography tokens. Poppins, rounded & friendly. */
:root {
  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Poppins', system-ui, sans-serif;

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-extra:   800; /* @kind font */

  /* Type scale (fluid-friendly base values) */
  --fs-display: 3.5rem;   /* 56px — hero headline */
  --fs-h1:      2.5rem;   /* 40px */
  --fs-h2:      2rem;     /* 32px — section titles */
  --fs-h3:      1.375rem; /* 22px — card titles */
  --fs-lead:    1.25rem;  /* 20px — hero subtitle / lead */
  --fs-body:    1rem;     /* 16px */
  --fs-sm:      0.875rem; /* 14px */
  --fs-xs:      0.75rem;  /* 12px — labels, legal */

  /* Line heights */
  --lh-tight:  1.1;  /* @kind font */
  --lh-snug:   1.25; /* @kind font */
  --lh-normal: 1.55; /* @kind font */

  /* Letter spacing */
  --ls-tight:  -0.02em; /* @kind font */
  --ls-normal: 0;       /* @kind font */
  --ls-wide:   0.06em;  /* @kind font */

  /* Semantic */
  --text-display-weight: var(--fw-extra); /* @kind font */
  --text-heading-weight: var(--fw-bold);  /* @kind font */
}

/* tokens/layout */
/* NutriGlobal — Spacing, radius, shadow, layout tokens.
   Airy layout, generous rounded corners, soft shadows. */
:root {
  /* Spacing scale (4px base) */
  --sp-1: 0.25rem;  /*  4 */
  --sp-2: 0.5rem;   /*  8 */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.5rem;   /* 24 */
  --sp-6: 2rem;     /* 32 */
  --sp-7: 3rem;     /* 48 */
  --sp-8: 4rem;     /* 64 */
  --sp-9: 6rem;     /* 96 */

  /* Section rhythm */
  --section-pad-y: 4.5rem; /* @kind spacing */
  --container-max: 1120px; /* @kind spacing */
  --container-pad: 1.25rem; /* @kind spacing */

  /* Radius — soft, rounded, friendly */
  --radius-sm:   0.625rem;  /* 10 — inputs, small chips */
  --radius-md:   1rem;      /* 16 — cards */
  --radius-lg:   1.5rem;    /* 24 — feature cards, price cards */
  --radius-xl:   2rem;      /* 32 — hero panels */
  --radius-pill: 999px;     /* buttons, badges */

  /* Shadows — soft, low-contrast, cool-tinted */
  --shadow-xs:  0 1px 2px rgba(13,27,62,0.06);
  --shadow-sm:  0 2px 8px rgba(13,27,62,0.07);
  --shadow-md:  0 8px 24px rgba(13,27,62,0.09);
  --shadow-lg:  0 16px 44px rgba(13,27,62,0.12);
  --shadow-cta: 0 10px 28px rgba(46,125,224,0.30);
  --shadow-focus: 0 0 0 4px rgba(46,125,224,0.28);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);    /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
}

/* tokens/base */
/* NutriGlobal — base element defaults built on the tokens.
   Kept light: sets page background, body type, headings, links, focus. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-extra); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }

p { margin: 0 0 1em; text-wrap: pretty; }

/* Links inherit the brand blue accent */
a {
  color: var(--ng-blue);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--ng-purple); }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* Utility: rainbow gradient text (headline accents) */
.ng-gradient-text {
  background: var(--ng-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ---- site ---- */
html { scroll-behavior: smooth; }
body { margin: 0; }
img { max-width: 100%; }
@media (max-width: 900px) {
  .ng-nav { display: none !important; }
  .ng-grid-3, .ng-grid-2 { grid-template-columns: 1fr !important; }
  .ng-hero-grid { gap: 104px !important; }
}
@media (max-width: 640px) {
  .ng-hide-sm { display: none !important; }
  .ng-logo { height: 30px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}