/* AGRO BECKER — DESIGN SYSTEM v1
   Referência visual: Homepage Agro Becker, fornecida pelo cliente.
   Fonte e cores são aproximações visuais; o arquivo original de design não foi fornecido.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Brand */
  --ag-green-950: #02281e;
  --ag-green-900: #073629;
  --ag-green-850: #083d2c;
  --ag-green-800: #0b4b37;
  --ag-green-700: #146448;
  --ag-gold: #f2bd52;
  --ag-gold-light: #f4c468;
  --ag-gold-dark: #b17b16;
  --ag-success: #17833b;

  /* Surface and type */
  --ag-text: #082f25;
  --ag-muted: #48564f;
  --ag-page: #faf9f6;
  --ag-section-alt: #f5f3ef;
  --ag-white: #ffffff;
  --ag-line: #e5e9e5;

  /* Typography */
  --ag-font: 'Inter', Arial, Helvetica, sans-serif;
  --ag-fs-xs: 12px;
  --ag-fs-sm: 14px;
  --ag-fs-base: 16px;
  --ag-fs-lg: 18px;
  --ag-fs-section: clamp(26px, 2.15vw, 32px);
  --ag-fs-hero: clamp(36px, 3.3vw, 48px);
  --ag-lh-body: 1.5;
  --ag-lh-heading: 1.08;

  /* Geometry */
  --ag-container: 1244px;
  --ag-header-height: 72px;
  --ag-radius-sm: 10px;
  --ag-radius-md: 14px;
  --ag-radius-lg: 18px;
  --ag-radius-pill: 999px;
  --ag-shadow-card: 0 12px 32px rgb(2 40 30 / 8%);
  --ag-shadow-soft: 0 6px 18px rgb(2 40 30 / 7%);
  --ag-transition: 180ms ease;

  /* Spacing rhythm (4px base) */
  --ag-space-1: 4px;
  --ag-space-2: 8px;
  --ag-space-3: 12px;
  --ag-space-4: 16px;
  --ag-space-5: 20px;
  --ag-space-6: 24px;
  --ag-space-8: 32px;
  --ag-space-10: 40px;
  --ag-space-12: 48px;
  --ag-space-16: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 400 var(--ag-fs-base) / var(--ag-lh-body) var(--ag-font); color: var(--ag-text); background: var(--ag-page); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, a, input, select, textarea { outline-offset: 3px; }
img { max-width: 100%; display: block; }
.ag-container { width: min(calc(100% - 48px), var(--ag-container)); margin-inline: auto; }
.ag-eyebrow { color: var(--ag-gold-dark); font-size: 13px; line-height: 1.2; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.ag-heading { margin: 0; font-weight: 800; font-size: var(--ag-fs-section); line-height: 1.18; letter-spacing: -.035em; }
.ag-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 22px; border-radius: var(--ag-radius-md); border: 1px solid transparent; font-weight: 700; cursor: pointer; transition: transform var(--ag-transition), background var(--ag-transition), box-shadow var(--ag-transition); }
.ag-btn:hover { transform: translateY(-1px); }
.ag-btn--gold { color: var(--ag-green-950); background: var(--ag-gold-light); }
.ag-btn--green { color: #fff; background: linear-gradient(180deg, #07643c, var(--ag-green-950)); border-radius: var(--ag-radius-pill); }
.ag-btn--outline { color: var(--ag-green-900); border-color: var(--ag-green-700); background: #fff; }
.ag-card { border-radius: var(--ag-radius-lg); background: #fff; box-shadow: var(--ag-shadow-card); }

@media (max-width: 767px) {
  :root { --ag-header-height: 64px; --ag-fs-hero: clamp(32px, 9vw, 40px); --ag-fs-section: clamp(24px, 6.4vw, 30px); }
  .ag-container { width: min(calc(100% - 32px), var(--ag-container)); }
  .ag-btn { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
