/* ============================================================
   MARCONI AGROENGENHARIA — SISTEMA DE MARCA (DIGITAL) 2026
   Tokens + base + componentes compartilhados
   Hierarquia 60/30/10:
     60% Neutros (engenharia/rigor)  · fundos, superfícies, texto
     30% Verdes  (agro-tech)         · marcadores de seção, pilares, labels
     10% Cobre/Vidro (decisão/dados) · 1 CTA cobre por tela, chips/dados em vidro
   Tipografia: Space Grotesk (títulos) + Inter (texto/UI)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;1,400&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* 60% — NEUTROS (Engenharia e Rigor) */
  --eng-preto:    #0D0D0D; /* Preto Absoluto */
  --eng-900:      #1A1A1A;
  --eng-basalto:  #262626; /* texto principal em claro */
  --eng-aco:      #404040; /* texto secundário */
  --eng-grafite:  #595959;
  --eng-concreto: #737373; /* metadados */
  --eng-metal:    #A6A6A6; /* secundário em escuro */
  --eng-cromo:    #D9D9D9; /* texto em escuro / bordas */

  /* 30% — VERDES (Identidade Agro-Tech) */
  --agro-abissal: #012626; /* Verde Abissal */
  --agro-petroleo:#0A3333;
  --agro-mata:    #1A402A;
  --agro-campo:   #2E5938;
  --agro-folha:   #4B7340;
  --agro-broto:   #658C51;
  --agro-pasto:   #7AA65B;
  --lime:         #93BF50; /* Bio-Tech Lime — inovação / status positivo */

  /* 10% — COBRE (decisão / ação / valor) */
  --cobre-bronze:   #4B2C20;
  --cobre-mineral:  #734333;
  --cobre-terra:    #A66149;
  --cobre-polido:   #D97F5F; /* CTA principal */

  /* 10% — VIDRO (digital / dados) */
  --vidro-petroleo: #1F3A40;
  --vidro-fundo:    #3D7373;
  --vidro-superf:   #82B2B2; /* focus ring */
  --vidro-tecnico:  #B2D8D8;

  /* AUXILIARES — respiro e legibilidade */
  --papel:    #F5F2E9; /* Papel Técnico */
  --neblina:  #D1D5D2;
  --sombra:   #7E827A;

  /* Semânticos */
  --bg:          #EFEFEF;
  --surface:     #FFFFFF;
  --ink:         var(--eng-basalto);
  --ink-2:       var(--eng-aco);
  --ink-3:       var(--eng-concreto);
  /* CTA usa cobre-terra: branco sobre ele passa AA (4,6:1); o polido (2,9:1) fica para acentos grandes/hover */
  --cta:         var(--cobre-terra);
  --cta-hover:   var(--cobre-mineral);
  --cta-active:  var(--cobre-bronze);
  --line:        var(--eng-cromo);

  /* Tipografia */
  --font-display: "Space Grotesk", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:    "Inter", "Segoe UI", Roboto, Arial, sans-serif;

  /* Geometria */
  --r-pill: 999px;
  --r-card: 24px;
  --r-sm:   12px;
  --maxw:   1320px;
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;          /* corpo 160% */
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- TIPOGRAFIA ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--eng-preto);
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.display   { font-weight: 700; font-size: clamp(44px, 7vw, 88px); line-height: 1.05; letter-spacing: -0.03em; }
.h1        { font-weight: 700; font-size: clamp(40px, 5.5vw, 64px); line-height: 1.1; letter-spacing: -0.02em; }
.h2        { font-weight: 600; font-size: clamp(30px, 4vw, 48px); line-height: 1.12; letter-spacing: -0.01em; }
.h3        { font-weight: 600; font-size: 24px; line-height: 1.25; }
.lead      { font-family: var(--font-body); font-size: clamp(18px, 2vw, 22px); line-height: 1.55; color: var(--ink-2); font-weight: 400; text-wrap: pretty; max-width: 68ch; }
.body      { font-size: 16px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; max-width: 70ch; }
.meta      { font-size: 14px; line-height: 1.5; color: var(--eng-grafite); }  /* #595959 — AA em fundo claro */
.num       { font-variant-numeric: tabular-nums; }
h1, .display, .h1, h2, .h2, h3, .h3 { text-wrap: balance; }

/* Palavra em destaque dentro de títulos sobre fundo escuro — Bio-Tech Lime (acento da marca) */
.hl-marca { color: var(--lime); }

/* Eyebrow / Overline (Inter 600, ALL CAPS, tracking +) */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
}

/* ---------- LAYOUT ---------- */
.section { padding: clamp(72px, 12vw, 160px) 0; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
.stack > * + * { margin-top: 1.25rem; }

/* ---------- TAG / CHIP (label de categoria — verde 30%) ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.06em; line-height: 1;
  color: var(--eng-preto); background: transparent;
}
.tag--agro { border-color: var(--agro-campo); color: var(--agro-campo); }
.tag--agro::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.tag--ghost { border-color: rgba(255,255,255,.4); color: #fff; background: rgba(255,255,255,.08); backdrop-filter: blur(6px); }

/* Chip de dado (vidro 10%) — ponto decorativo via CSS para não ser lido por leitores de tela */
.chip-data {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--vidro-superf);
  background: rgba(178, 216, 216, .18);
  color: var(--vidro-petroleo);
  font-weight: 600; font-size: 13px; letter-spacing: .02em;
}
.chip-data::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; flex: 0 0 auto; }

/* ---------- BOTÕES ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1;
  padding: 6px 6px 6px 28px; border-radius: var(--r-pill);
  border: 1px solid transparent; transition: all .35s var(--ease);
}
.btn .ico {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; transition: transform .35s var(--ease);
}
.btn:hover .ico { transform: rotate(45deg); }

/* CTA único — Cobre (10%) */
.btn--cobre { background: var(--cta); color: #fff; }
.btn--cobre .ico { background: #fff; color: var(--cobre-mineral); }
.btn--cobre:hover { background: var(--cta-hover); }
.btn--cobre:active { background: var(--cta-active); }

/* Secundário — Engenharia (neutro) */
.btn--dark { background: var(--eng-preto); color: #fff; }
.btn--dark .ico { background: #fff; color: var(--eng-preto); }
.btn--dark:hover { background: var(--eng-900); }

.btn--light { background: #fff; color: var(--eng-preto); border-color: var(--line); }
.btn--light .ico { background: var(--eng-preto); color: #fff; }

/* Link com seta */
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.link-arrow .ico { width: 30px; height: 30px; border-radius: 50%; background: var(--eng-preto); color: #fff; display: grid; place-items: center; transition: transform .35s var(--ease); }
.link-arrow:hover .ico { transform: rotate(45deg); }

/* Focus ring — vidro */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid rgba(130, 178, 178, .6); outline-offset: 2px; border-radius: 6px;
}

/* ---------- CARTÕES ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.glass {
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.18);
}

/* ---------- NAVBAR (componente compartilhado, injetado por motion.js) ---------- */
.mc-nav { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 14px clamp(16px,4vw,40px); }
.mc-nav-bar { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 8px 8px 22px; border-radius: 18px; border: 1px solid rgba(13,13,13,.08);
  background: rgba(255,255,255,.25); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: none;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.mc-brand { display: flex; align-items: center; }
.mc-brand img { width: 51px; height: 51px; align-self: center; margin-right: 10px; flex: 0 0 auto; }
.mc-brand b { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; color: var(--eng-preto); transition: color .35s; }
.mc-brand span { font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--agro-campo); margin-left: 8px; }
.mc-links { display: flex; align-items: center; gap: 2px; }
.mc-links a { padding: 9px 14px; font-weight: 500; font-size: 15px; color: var(--eng-preto); border-radius: 10px; transition: background .2s, color .35s; }
.mc-links a:hover { background: rgba(13,13,13,.06); }
.mc-nav .mc-cta { font-size: 14px; padding: 6px 6px 6px 20px; }
.mc-burger { display: none; width: 44px; height: 44px; border: 1px solid rgba(13,13,13,.10); border-radius: 12px; background: rgba(255,255,255,.28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); place-items: center; color: var(--eng-preto); }
.mc-mobile { display: none; }
.mc-nav.scrolled .mc-nav-bar { background: rgba(255,255,255,.55); border-color: rgba(13,13,13,.10); box-shadow: 0 12px 32px rgba(13,13,13,.10); }

/* Overlay sobre fundos escuros (hero/CTA/rodapé) */
.mc-nav--overlay .mc-nav-bar { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20); box-shadow: none; }
.mc-nav--overlay .mc-brand b, .mc-nav--overlay .mc-links a { color: #fff; }
.mc-nav--overlay .mc-brand span { color: var(--vidro-tecnico); }
.mc-nav--overlay.scrolled .mc-brand span { color: var(--agro-campo); }
.mc-nav--overlay .mc-links a:hover { background: rgba(255,255,255,.16); }
.mc-nav--overlay .mc-burger { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.25); color: #fff; }
.mc-nav--overlay.scrolled .mc-nav-bar { background: rgba(255,255,255,.55); border-color: rgba(13,13,13,.10); box-shadow: 0 8px 30px rgba(13,13,13,.10); }
.mc-nav--overlay.scrolled .mc-brand b, .mc-nav--overlay.scrolled .mc-links a { color: var(--eng-preto); }
.mc-nav--overlay.scrolled .mc-links a:hover { background: rgba(13,13,13,.06); }
.mc-nav--overlay.scrolled .mc-burger { background: rgba(255,255,255,.28); border-color: rgba(13,13,13,.10); color: var(--eng-preto); }

@media (max-width: 900px){
  .mc-links, .mc-nav .mc-cta { display: none; }
  .mc-burger { display: grid; }
  .mc-mobile { display: block; opacity: 0; transform: translateY(-10px); pointer-events: none; visibility: hidden; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
  .mc-nav.open .mc-mobile { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s 0s; }
  .mc-mobile-in { max-width: var(--maxw); margin: 8px auto 0; background: rgba(255,255,255,.78); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(13,13,13,.08); border-radius: 18px; padding: 10px; display: flex; flex-direction: column; }
  .mc-mobile-in a { padding: 12px 14px; font-weight: 500; color: var(--eng-preto); border-radius: 10px; }
  .mc-mobile-in a:hover { background: rgba(13,13,13,.06); }
}

/* ---------- UTILS ---------- */
.eng-bg   { background: var(--eng-preto); color: var(--eng-cromo); }
.paper-bg { background: var(--papel); }
.grid     { display: grid; gap: 24px; }
.center   { text-align: center; }
.muted    { color: var(--eng-grafite); }  /* #595959 — AA */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Fundo "talhão aéreo" — faixas de lavoura em verdes (autossuficiente, sem imagem externa) */
.field-img {
  background-color: var(--agro-mata);
  background-image:
    radial-gradient(circle at 78% 12%, rgba(147,191,80,.30), transparent 42%),
    linear-gradient(180deg, rgba(13,13,13,.12), rgba(1,38,38,.55)),
    repeating-linear-gradient(118deg,
      var(--agro-campo) 0 30px, var(--agro-folha) 30px 60px,
      var(--agro-broto) 60px 92px, var(--agro-mata) 92px 124px);
}
.field-img.petrol {
  background-color: var(--vidro-petroleo);
  background-image:
    radial-gradient(circle at 30% 20%, rgba(178,216,216,.28), transparent 45%),
    linear-gradient(180deg, rgba(13,13,13,.10), rgba(31,58,64,.6)),
    repeating-linear-gradient(118deg,
      var(--vidro-fundo) 0 30px, var(--vidro-petroleo) 30px 60px,
      var(--agro-petroleo) 60px 92px, var(--agro-abissal) 92px 124px);
}

@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulse-slow { 0%,100% { opacity:.9; transform: scale(1);} 50% { opacity:1; transform: scale(1.02);} }

/* Motion utilities — reveal no scroll.
   Só esconde quando o JS marca .js-anim no <html>; sem JS, o conteúdo aparece normal. */
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js-anim .reveal { opacity: 0; transform: translateY(28px); }
.reveal.in { opacity: 1; transform: none; }
.js-anim .reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal, .js-anim .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Movimento reduzido não é opcional — desliga animações e suaviza transições */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}