/* ============================================================
   AGROTHECA — Ciencia agrícola para mentes curiosas
   Design system / tokens / utilities
   ============================================================ */

:root{
  /* Brand palette */
  --cream:      #F4F1DE;   /* global background (sand) */
  --cream-2:    #ECE8D2;   /* slightly deeper cream */
  --cream-3:    #E3DEC4;   /* card / divider warm */
  --green:      #213D31;   /* nitrogen green — buttons + dark accents (lighter, livelier) */
  --green-deep: #1E3A2D;   /* darkest section bg (lifted from near-black) */
  --chloro:     #436653;   /* chlorophyll green accent */
  --gold:       #C27D38;   /* mineral gold accent */
  --gold-soft:  #D6A45E;   /* lighter gold */
  --olive:      #6F8F4E;   /* leaf olive */
  --mist:       #8FA08C;   /* muted sage for secondary text on cream */

  /* dark-section tone (driven by the "Tono verde" tweak) */
  --veil-rgb:   28,54,42;  /* base rgb used by hero veil + overlays */

  /* Derived text colors */
  --ink:        #1A2F25;
  --ink-60:     rgba(26,47,37,0.62);
  --ink-40:     rgba(26,47,37,0.42);
  --ink-20:     rgba(26,47,37,0.18);
  --on-dark:    #EDEAD6;
  --on-dark-60: rgba(237,234,214,0.60);
  --on-dark-35: rgba(237,234,214,0.32);

  --font-display: "Newsreader", Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --ease: cubic-bezier(0.16,1,0.3,1);
  --maxw: 1600px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--font-sans); font-weight:400;
  overflow-x:hidden;
}
::selection{ background:var(--green); color:var(--cream); }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* Subtle paper grain on the cream canvas */
.grain-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
  mix-blend-mode:multiply;
}

/* ---------- Typography utilities ---------- */
.mono{
  font-family:var(--font-mono); font-weight:500;
  letter-spacing:0.2em; text-transform:uppercase;
}
.label{ font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:0.24em; text-transform:uppercase; }
.serif{ font-family:var(--font-display); }
.serif-italic{ font-family:var(--font-display); font-style:italic; }

.mega{ line-height:0.86; letter-spacing:-0.035em; font-weight:500; }
.display{ font-family:var(--font-display); font-weight:400; letter-spacing:-0.015em; line-height:1.04; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:0.08s; }
.reveal-d2{ transition-delay:0.16s; }
.reveal-d3{ transition-delay:0.24s; }
.reveal-d4{ transition-delay:0.32s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* Section-level entrance transition (fade + gentle rise) */
.sec-anim{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1.1s var(--ease); }
.sec-anim.sec-shown{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .sec-anim{ opacity:1 !important; transform:none !important; }
}

/* ---------- Staggered letter rise ---------- */
.rise{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.rise > span{ display:inline-block; transform:translateY(115%); }
.rise.in > span{ transform:translateY(0); transition:transform 1.15s var(--ease); }

/* ---------- Pills ---------- */
.pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px; border-radius:999px;
  border:1px solid var(--ink-20); background:rgba(255,255,255,0.35);
  font-size:12px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink); backdrop-filter:blur(6px);
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.pill svg{ width:15px; height:15px; }
.pill:hover{ background:var(--green); color:var(--cream); border-color:var(--green); transform:translateY(-2px); }
.pill.on-dark{ border-color:var(--on-dark-35); background:transparent; color:var(--on-dark-60); }
.pill.on-dark:hover{ background:var(--gold); color:var(--green-deep); border-color:var(--gold); }

/* ---------- CTA button with sliding panel ---------- */
.cta{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 24px; border-radius:10px;
  background:var(--green); border:1px solid var(--green);
  color:var(--cream); font-size:15px; font-weight:500;
  transition:box-shadow .4s var(--ease), transform .25s var(--ease);
}
.cta .cta-bg{
  position:absolute; inset:0; z-index:-1; background:var(--gold);
  transform:translateX(-101%); transition:transform .7s var(--ease);
}
.cta:hover{ transform:translateY(-1px); box-shadow:4px 4px 0 rgba(26,47,37,0.28); }
.cta:hover .cta-bg{ transform:translateX(0); }
.cta:hover{ color:var(--green-deep); }
.cta:active{ transform:none; box-shadow:none; }
.cta svg{ width:18px; height:18px; transition:transform .5s var(--ease); }
.cta:hover svg{ transform:rotate(-12deg) translateY(-1px) scale(1.1); }

.cta.ghost{ background:transparent; color:var(--ink); border-color:var(--ink-20); }
.cta.ghost:hover{ color:var(--green-deep); }
.cta.on-dark{ background:var(--cream); color:var(--green-deep); border-color:var(--cream); }
.cta.on-dark .cta-bg{ background:var(--gold); }

/* ---------- Section helpers ---------- */
.section-label{ display:flex; align-items:center; gap:14px; }
.section-label .idx{ color:var(--gold); }
.section-label .ln{ width:54px; height:1px; background:var(--ink-20); }

.divider{ height:1px; width:100%; background:var(--ink-20); }
.divider.on-dark{ background:var(--on-dark-35); }

/* round icon button */
.round-ico{
  width:46px; height:46px; border-radius:999px; display:grid; place-items:center;
  border:1px solid var(--ink-20); color:var(--ink); background:transparent;
  transition:all .4s var(--ease);
}
.round-ico:hover{ background:var(--green); border-color:var(--green); color:var(--cream); }
.round-ico.on-dark{ border-color:var(--on-dark-35); color:var(--on-dark-60); }
.round-ico.on-dark:hover{ background:var(--cream); color:var(--green-deep); border-color:var(--cream); }

/* corner brand */
.brand-corner{
  display:flex; align-items:center; gap:11px;
}
.brand-corner img{ height:38px; width:auto; }
.brand-corner .wm{ display:flex; flex-direction:column; line-height:1; }
.brand-corner .wm b{ font-weight:600; letter-spacing:0.12em; font-size:16px; color:var(--green); }
.brand-corner .wm small{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.18em; color:var(--ink-40); text-transform:uppercase; margin-top:3px; }

/* hide scrollbar where needed */
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }