/* =========================
   Jaisson Rações — Landing
   Paleta: Amarelo #FEC633 | Verde #137431
   Tipografia: Inter
   ========================= */

:root{
  --green: #137431;
  --yellow: #FEC633;
  --green-900: #0d4e22;
  --green-700: #0f632b;
  --green-50:  #eef7f1;
  --ink: #0f172a;       /* azul-ardósia escuro */
  --ink-2: #334155;     /* cinza azulado */
  --bg: #ffffff;
  --muted: #6b7280;
  --radius: 18px;
  --shadow: 0 8px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

/* Containers */
.container{
  width:min(1120px, 92vw);
  margin-inline:auto;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:#fff; border-bottom:1px solid #eef2f7;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand img{ display:block }

/* Nav (checkbox hack p/ mobile) */
.nav-toggle{ display:none }
.hamburger{
  display:none; cursor:pointer; padding:6px 8px; border-radius:10px;
}
.hamburger span{
  display:block; width:26px; height:2px; background:var(--ink); margin:6px 0;
  transition:.25s ease;
}
.main-nav ul{
  display:flex; gap:18px; list-style:none; margin:0; padding:0;
}
.main-nav a{
  text-decoration:none; font-weight:600; color:var(--ink-2);
  padding:10px 12px; border-radius:12px; transition:.2s ease;
}
.main-nav a:hover{ background:var(--green-50); color:var(--green-900) }

/* Hero */
.hero{
  position:relative; isolation:isolate;
  padding:96px 0 88px;
  overflow:hidden;
}
.hero::before{
  /* Troque esta imagem por uma foto panorâmica de campo/colheita */
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(to bottom, rgba(19,116,49,.56), rgba(19,116,49,.15) 45%, rgba(255,255,255,1) 85%),
    url('https://plus.unsplash.com/premium_photo-1661825567715-def8a4578d70?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center/cover no-repeat;
  filter:saturate(1.05);
}
.hero-content{
  color:#0b1a10;
  max-width:780px;
}
.pill{
  display:inline-block; background:var(--yellow); color:#1a1a1a; font-weight:800;
  padding:6px 12px; border-radius:999px; letter-spacing:.2px;
}
.hero h1{
  margin:14px 0 10px; line-height:1.1;
  font-size: clamp(28px, 5vw, 56px);
  color:#082312;
}
.hero p{
  color:#0f2f1b; font-size: clamp(16px, 2vw, 18px);
  max-width:60ch;
}
.hero-ctas{ display:flex; gap:12px; margin-top:22px }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; border-radius:12px; padding:12px 16px; font-weight:700;
  border:2px solid transparent; transition: transform .04s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{ transform:translateY(1px) }
.btn-fill{ background:var(--green); color:#fff }
.btn-fill:hover{ background:var(--green-700) }
.btn-fill.alt{ background:var(--yellow); color:#1a1a1a }
.btn-fill.alt:hover{ filter:brightness(.95) }
.btn-outline{ border-color:var(--green); color:var(--green) }
.btn-outline:hover{ background:var(--green-50); color:var(--green-900) }

/* Trustbar */
.trustbar{
  background:linear-gradient(0deg, #fff, #fff), radial-gradient(1200px 600px at -10% 120%, rgba(254,198,51,.12), transparent 60%) no-repeat;
  padding:24px 0;
  border-top:1px solid #eef2f7; border-bottom:1px solid #eef2f7;
}
.trustbar-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px;
}
.trust-item{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; background:#fff;
}
.trust-item .icn{ font-size:22px }
.trust-item strong{ display:block; line-height:1.15 }
.trust-item span{ font-size:12px; color:var(--muted) }

/* Áreas */
.areas{ padding:54px 0 32px }
.section-head h2{
  font-size: clamp(24px, 4vw, 36px); margin:0 0 6px
}
.section-head p{ color:var(--muted); margin:0 0 18px }

.areas-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, 1fr);
}
.area-card{
  position:relative; min-height: 260px; border-radius: var(--radius);
  background: #0a1910; color:#fff; overflow:hidden; text-decoration:none; display:block;
  box-shadow: var(--shadow);
  transform: translateZ(0);
}
.area-card::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15)),
              var(--bg, transparent);
  background-size: cover; background-position: center;
  /* usa a var --bg do inline style; fallback suave */
  background-image: var(--bg);
  transition: transform .6s ease, filter .6s ease;
}
.area-card:hover::before{ transform: scale(1.05); filter: saturate(1.05) }
.area-card__layer{
  position:absolute; inset:0; z-index:1; display:flex; flex-direction:column;
  justify-content:flex-end; padding:18px;
}
.area-card .tag{
  display:inline-block; background: rgba(254,198,51,.95); color:#1b1500;
  font-weight:800; font-size:12px; padding:4px 8px; border-radius:999px; margin-bottom:8px;
}
.area-card h3{ margin:0 0 4px; font-size:22px; line-height:1.2 }
.area-card p{ margin:0 0 2px; color:#eefbf1 }

/* Sustentabilidade CTA */
.cta-sustain{
  background:
    linear-gradient(90deg, rgba(19,116,49,1) 0%, rgba(19,116,49,.9) 60%, rgba(19,116,49,.85) 100%),
    url('https://images.unsplash.com/photo-1627920769541-daa658ed6b59?q=80&w=1333&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center/cover no-repeat;
  color:#fff; margin:40px 0; border-radius:20px;
}
.cta-sustain-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:32px;
}
.cta-sustain h3{ margin:0 0 6px; font-size: clamp(20px, 3vw, 28px) }
.cta-sustain p{ margin:0; opacity:.95 }

/* Sobre */
.about{ padding:36px 0 64px }
.about-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; align-items:center;
}
.about-media .img-ph{
  display:block; width:90%; aspect-ratio: 10/10; border-radius:20px; box-shadow: var(--shadow);
  background:
    linear-gradient(to bottom, rgba(0,0,0,.001), rgba(0,0,0,.01)),
    var(--ph) center/cover no-repeat;
}
.about-text h2{ margin:0 0 8px; font-size: clamp(22px, 3.6vw, 32px) }
.about-text p{ margin: 0 0 12px; color: var(--ink-2) }
.bullets{ margin: 0 0 14px; padding-left: 18px }
.bullets li{ margin: 6px 0 }

/* Footer */
.site-footer{
  border-top:1px solid #eef2f7; margin-top:24px; background:#fff;
}
.footer-grid{
  display:grid; grid-template-columns: 1.1fr 1fr 1fr; gap:16px; padding:22px 0;
  align-items:center;
}
.f-col .f-copy{ color:var(--muted); margin:8px 0 0 }
.f-small{ color:var(--muted); margin:0 }
.f-nav{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center }
.f-nav a{
  color:var(--ink-2); text-decoration:none; padding:8px 10px; border-radius:10px;
}
.f-nav a:hover{ background:var(--green-50); color:var(--green-900) }

/* Responsividade */
@media (max-width: 980px){
  .areas-grid{ grid-template-columns: repeat(2, 1fr) }
  .about-grid{ grid-template-columns: 1fr }
  .cta-sustain-inner{ flex-direction:column; align-items:flex-start }
}
@media (max-width: 780px){
  .main-nav{
    position: fixed; top:64px; right:0; left:0; background:#fff; border-top:1px solid #eef2f7;
    transform: translateY(-8px); opacity:0; pointer-events:none; transition:.2s ease;
  }
  .main-nav ul{ flex-direction:column; padding:10px; gap:6px }
  .hamburger{ display:block }
  .nav-toggle:checked ~ .hamburger span:nth-child(1){ transform: translateY(8px) rotate(45deg) }
  .nav-toggle:checked ~ .hamburger span:nth-child(2){ opacity:0 }
  .nav-toggle:checked ~ .hamburger span:nth-child(3){ transform: translateY(-8px) rotate(-45deg) }
  .nav-toggle:checked ~ .main-nav{ transform:none; opacity:1; pointer-events:auto }
  .trustbar-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 520px){
  .areas-grid{ grid-template-columns: 1fr }
  .footer-grid{ grid-template-columns: 1fr; text-align:center }
}

.github-link {
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  margin-left: 16px;
  transition: color .2s ease, transform .15s ease;
}
.github-link:hover {
  color: var(--green);
  transform: translateY(-1px);
}

/* =========================
   Markdown (tipografia base)
   ========================= */
.md{
  max-width: 980px;
  margin-inline: auto;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
}
.md :where(h1,h2,h3,h4){
  color: var(--green-900);
  line-height: 1.2;
  margin: 1.2em 0 .4em;
  font-weight: 800;
}
.md h1{ font-size: clamp(28px, 4.8vw, 40px); border-bottom: 1px solid #eef2f7; padding-bottom: .3em; }
.md h2{ font-size: clamp(22px, 3.8vw, 30px); border-bottom: 1px solid #eef2f7; padding-bottom: .25em; }
.md h3{ font-size: clamp(18px, 3vw, 22px); }
.md p{ margin: .85em 0; }
.md strong{ font-weight: 800; }
.md em{ font-style: italic; }
.md a{
  color: var(--green-700);
  text-decoration: none;
  border-bottom: 2px solid rgba(19,116,49,.25);
}
.md a:hover{ color: var(--green-900); border-color: var(--yellow); }

/* Listas */
.md :where(ul,ol){ padding-left: 1.3em; margin: .6em 0; }
.md li{ margin: .3em 0; }
.md li::marker{ color: var(--green-700); }

/* Citações */
.md blockquote{
  margin: 1em 0; padding: .6em .9em;
  border-left: 4px solid var(--yellow);
  background: #fff8df;
  border-radius: 10px;
  color: var(--ink-2);
}

/* Código inline e blocos */
.md code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  padding: .1em .4em; border-radius: 6px; font-size: .95em;
}
.md pre{
  background: #0f172a; color: #f8fafc;
  padding: 14px; border-radius: 12px; overflow-x: auto;
  box-shadow: var(--shadow);
}
.md pre code{
  background: transparent; border: 0; padding: 0; color: inherit; font-size: .95em;
}

/* Tabelas responsivas */
.md .table-wrap{ overflow: auto; border-radius: 12px; border: 1px solid #e2e8f0; }
.md table{ width: 100%; border-collapse: collapse; background: #fff; }
.md thead th{
  background: var(--green-50);
  color: var(--ink); font-weight: 800; text-align: left; padding: 10px;
}
.md td, .md th{ border-top: 1px solid #eef2f7; padding: 10px; }

/* Imagens e figuras */
.md img{ max-width: 100%; height: auto; border-radius: 12px; box-shadow: var(--shadow); }
.md figure{ margin: 1em 0; }
.md figcaption{ color: var(--muted); font-size: .9em; text-align: center; margin-top: .4em; }

/* Regras horizontais */
.md hr{
  border: 0; height: 1px; background: #e5e7eb;
  margin: 1.6em 0;
}

/* Callouts (opcional em Markdown com HTML) */
.md .note, .md .warn, .md .tip{
  padding: 12px 14px; border-radius: 12px; border: 1px solid #e2e8f0; margin: 12px 0;
}
.md .note{ background:#eef7f1; border-color:#cfe8d8 }
.md .warn{ background:#fff5e5; border-color:#ffe0a6 }
.md .tip { background:#e9f5ff; border-color:#cfe3ff }

/* Código de linha numerada (opt-in) */
.md pre.numbered{
  counter-reset: line;
  padding-left: 46px;
  position: relative;
}
.md pre.numbered code{ display:block; }
.md pre.numbered code span{
  display:block;
}
.md pre.numbered code span::before{
  counter-increment: line;
  content: counter(line);
  position: absolute; left: 10px;
  color:#94a3b8; text-align: right; width: 26px;
}

/* Pequenas */
@media (max-width: 560px){
  .md{ font-size: 15.5px; }
}
/* Evita quebra de linha no item "Pesquisa Operacional" (e em todos os links do menu) */
.main-nav a{ white-space: nowrap; }

/* (opcional) dá uma leve apertada no espaçamento quando ainda estiver em desktop */
@media (min-width: 781px){
  .main-nav ul{ gap: 14px; }       /* era 18px */
  .main-nav a{ padding: 10px 10px; }/* era 10px 12px */
}