/* ==========================================================================
   GRÃOS S.A. — Design System (CSS compartilhado)
   Fonte única de tokens + componentes. TODAS as dobras usam este arquivo.
   Doc: notes/design-system.md
   ========================================================================== */

:root{
  /* — Marca — */
  --green:#046A3A;        /* primária */
  --green-leaf:#6AB841;   /* acento vivo */
  --yellow:#FDE344;       /* destaque raro (preço) */
  --clay:#C45A2A;         /* 2º acento (especiarias) */
  --cream:#F5EFE3;        /* fundo claro */
  --cream-2:#FBF7EF;      /* fundo claro alt */
  --ink:#11201A;          /* fundo escuro / texto */
  --wa:#1FB457;           /* WhatsApp */

  /* — Acentos por tema (dobras) — */
  --turmeric:#E8A31E; --paprika:#C0392B; --hibiscus:#9B2D4F; --cinnamon:#9B5A2B; --tea:#7A8B3A;

  /* — Tipografia — */
  --serif:"Fraunces",Georgia,serif;     /* display */
  --sans:"Hanken Grotesk",system-ui,sans-serif; /* corpo/UI */
  --mono:"DM Mono",ui-monospace,monospace;       /* rótulos */

  /* — Layout — */
  --pad:clamp(1.5rem,6vw,6.5rem);       /* respiro lateral padrão */
  --maxw:80rem;
  --r-pill:999px; --r-card:14px;

  /* — Movimento — */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.25s; --dur-slow:.8s;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--green-leaf);color:#fff}
a{color:inherit;text-decoration:none}

/* textura/grão sutil global (atmosfera, anti-flat) */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* — Rótulo mono (eyebrow / tags) — */
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.22em;font-weight:500;font-size:.72rem}

/* — Display / títulos — */
.display{font-family:var(--serif);font-weight:800;letter-spacing:-.025em;line-height:.95;font-variation-settings:"opsz" 144}
.display em{font-style:italic;font-weight:700;color:var(--clay)}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.nav{position:absolute;top:0;left:0;width:100%;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(1.1rem,2.6vh,1.9rem) var(--pad)}
.nav__logo img{width:clamp(150px,12vw,180px);height:auto;display:block}
.nav__menu{display:flex;gap:clamp(1.4rem,2.6vw,2.8rem)}
.nav__menu a{color:var(--ink);opacity:.95;font-weight:600;transition:opacity var(--dur)}
.nav__menu a:hover{opacity:.7}
.nav__right{display:flex;align-items:center;gap:1rem}
.nav__wa{display:inline-flex;align-items:center;gap:.5rem;color:var(--green);font-family:var(--mono);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.74rem}
.nav__wa svg{width:18px;height:18px}
.nav__burger{display:none;background:none;border:0;cursor:pointer;color:var(--ink);padding:.3rem;align-items:center;justify-content:center}
.nav__burger svg{width:28px;height:28px}
.nav--dark .nav__menu a,.nav--dark .nav__wa,.nav--dark .nav__burger{color:var(--cream)}

@media(max-width:780px){
  .nav__menu{position:absolute;top:100%;left:var(--pad);right:var(--pad);flex-direction:column;gap:1.1rem;
    background:#fff;padding:1.3rem 1.5rem;border-radius:var(--r-card);box-shadow:0 24px 60px -24px rgba(17,32,26,.45);
    font-size:.8rem;display:none}
  .nav__menu.open{display:flex}
  .nav__burger{display:inline-flex}
  .nav__wa span{display:none}
}

/* ==========================================================================
   BOTÕES (pill)
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:1.1rem 2.1rem;border-radius:var(--r-pill);
  font-family:var(--sans);font-weight:700;font-size:1.02rem;white-space:nowrap;cursor:pointer;
  transition:transform var(--dur) var(--ease),background var(--dur),box-shadow var(--dur)}
.btn svg{width:20px;height:20px;flex:none}
.btn--wa{background:var(--wa);color:#fff;box-shadow:0 16px 36px -12px rgba(31,180,87,.65)}
.btn--wa:hover{transform:translateY(-3px);box-shadow:0 22px 46px -12px rgba(31,180,87,.7)}
.btn--light{background:#fff;color:var(--ink);box-shadow:0 14px 30px -16px rgba(17,32,26,.5)}
.btn--light:hover{transform:translateY(-3px);box-shadow:0 20px 40px -16px rgba(17,32,26,.55)}
.btn--dark{background:var(--ink);color:var(--cream)}
.btn--dark:hover{transform:translateY(-3px)}
.btn .arrow{transition:transform var(--dur) ease}
.btn:hover .arrow{transform:translateY(3px)}

/* ==========================================================================
   SEÇÃO (dobra) + índice lateral (01, 02, …) + scroll hint
   ========================================================================== */
.section{position:relative;padding:clamp(4rem,12vh,9rem) var(--pad);overflow:hidden}
.section--dark{background:var(--ink);color:var(--cream)}
.section--light{background:var(--cream);color:var(--ink)}
.section--dark .mono{color:var(--green-leaf)}
.section--light .mono{color:var(--clay)}

/* índice lateral que CONTINUA entre as dobras (01 → 02 → …) */
.s-index{position:absolute;right:clamp(1.2rem,3vw,2.6rem);top:clamp(2rem,12vh,6rem);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:1rem;color:currentColor;opacity:.85}
.s-index i{width:1px;height:90px;background:linear-gradient(currentColor,transparent);opacity:.45}
@media(max-width:780px){.s-index{display:none}}

/* hint de scroll central */
.scroll-hint{position:absolute;left:50%;bottom:clamp(1.4rem,3vh,2.2rem);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;z-index:6;color:currentColor}
.scroll-hint .mono{font-size:.62rem;opacity:.85}
.scroll-hint i{position:relative;display:block;width:1.5px;height:44px;background:rgba(127,127,127,.25);overflow:hidden;border-radius:2px}
.scroll-hint i::after{content:"";position:absolute;left:0;top:0;width:100%;height:45%;background:currentColor;border-radius:2px;animation:scrolldot 1.9s var(--ease) infinite}
@keyframes scrolldot{0%{transform:translateY(-110%)}100%{transform:translateY(240%)}}

/* reveal on scroll (estado inicial; GSAP anima via .from quando possível) */
.reveal{opacity:1}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}