:root {
  --green:#0F5B4F;
  --orange:#FCAA2A;
  --light:#f9fafb;
  --ink:#0A0A0A;
  --muted:#4b5563;
  --radius:20px;
  --shadow:0 10px 30px rgba(0,0,0,.06);
}

*{box-sizing:border-box;}
html, body { margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:#fff; }
img{max-width:100%; display:block;}
.container { width:min(1140px,92%); margin:0 auto; }
a, button { transition: all .25s ease; }

/* Hero */
.hero {
  background: linear-gradient(180deg,#fff,var(--light));
  padding: 56px 0;
  display: flex;
  justify-content: center;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background-image: url('/assets/images/hero.jpg');
  z-index: 0; /* fica atrás de tudo */
  border-radius: var(--radius);
}

.grid {
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 5px;
  align-items: start; /* para ficar acima do ::before */
  z-index: 1;
}
.eyebrow { display:inline-flex; gap:8px; align-items:center; background:var(--orange); color:#fff; border-radius:999px; padding:6px 12px; font-weight:700; }
.title { font-size:clamp(28px,4.2vw,56px); line-height:1.04; margin:10px 0 8px; font-weight:900; color:var(--green); }
.lead { color:#374151; font-size:clamp(15px,2.2vw,19px); }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; margin-top:50px;}
.stat { background:var(--green); border:1px solid var(--green); border-radius:16px; padding:18px; box-shadow:var(--shadow); text-align:center; }
.stat .num { font-size:32px; font-weight:900; color:var(--orange); }
.hero-media { border:1px solid var(--green); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }

/* Pilares */
.section { padding:20px 0; }
.section h2 { font-size:clamp(24px,4vw,42px); margin:0 0 12px; color:var(--green); }
.section p.sub { color:var(--muted); margin:0 0 26px; font-size:18px; line-height:1.6; }
.pillars { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.card { background:#fff; border:1px solid var(--green); border-radius:18px; padding:22px; box-shadow:var(--shadow); }
.card p { color:#0A0A0A; }
.card h3 { color:var(--orange); }
.icon { width:40px; height:40px; border-radius:12px; background:var(--green); color:#fff; display:grid; place-items:center; margin-bottom:10px; font-weight:900; transition:transform .25s; }
.icon:hover { transform:rotate(-5deg) scale(1.05); }
.chip { display:inline-flex; align-items:center; gap:8px; background:rgba(252,170,42,.16); color:var(--orange); border-radius:999px; padding:8px 12px; font-weight:800; margin-top:10px; transition:background .25s,color .25s; }
.chip:hover { background:var(--orange); color:#fff; }

/* Ofertas */
.offers { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.offer { display:flex; flex-direction:column; border:1px solid var(--green); border-radius:18px; overflow:hidden; background:#fff; box-shadow:var(--shadow); }
.offer img { aspect-ratio:16/10; object-fit:cover; }
.offer .meta { padding:16px; display:grid; gap:6px; }
.offer .meta h3 { margin:0; color:var(--green); }
.offer .meta p { color:#4b5563; margin:0 0 6px; }
.offer .meta .btn { margin-top:auto; background:var(--orange); border:0; border-radius:12px; padding:10px 14px; font-weight:800; cursor:pointer; color:#fff; transition:all .25s; }
.offer .meta .btn:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.12); }

/* Linha do tempo */
.timeline { position:relative; padding-left:26px; }
.timeline::before { content:""; position:absolute; left:12px; top:0; bottom:0; width:2px; background:linear-gradient(var(--green),var(--orange)); }
.milestone { position:relative; margin:14px 0; padding:14px 16px; border:1px solid var(--green); border-radius:16px; background:#fff; box-shadow:var(--shadow); }
.milestone:nth-child(even) { background:var(--light); }
.milestone .dot { position:absolute; left:-22px; top:18px; width:12px; height:12px; border-radius:50%; background:var(--orange); outline:6px solid #fff; border:2px solid var(--green); }
.milestone h4 { margin:0 0 6px; color:var(--green); }
.milestone p { margin:0; color:#4b5563; }

/* Citações */
.quote-wrap { background:var(--light); border:1px solid var(--green); border-radius:18px; padding:28px; }
blockquote { font-size:20px; line-height:2; margin:10; color:var(--green); }
cite { display:block; margin-top:10px; color:#4b5563; font-style:normal; }

/* CTA */
.cta-banner { background:linear-gradient(135deg, rgba(15,91,79,.06), rgba(252,170,42,.12)); border:1px dashed var(--green); border-radius:18px; padding:22px; display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; }
.cta-banner .btn { background:var(--green); color:#fff; border:0; border-radius:12px; padding:12px 16px; font-weight:900; cursor:pointer; transition:all .25s; }
.cta-banner .btn:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.12); }
.cta-banner h3 {visibility: hidden;}

/* RESPONSIVIDADE */
@media (max-width:980px){ .grid { grid-template-columns:1fr; gap:24px; padding:36px 0; } .hero-media { width:100%; height:auto; } .lead { font-size:16px; } }
@media (max-width:640px){ .pillars { grid-template-columns:1fr; gap:12px; } .card { padding:16px; } .chip { padding:6px 10px; font-size:14px; } .offers { grid-template-columns:1fr; gap:12px; } .offer img { aspect-ratio:auto; height:200px; object-fit:cover; } .offer .meta { padding:12px; } .offer .meta h3 { font-size:18px; } .offer .meta p { font-size:14px; } .offer .meta .btn { padding:8px 12px; font-size:14px; } .timeline { padding-left:16px; } .milestone { padding:12px; margin:10px 0; } .milestone h4 { font-size:16px; } .milestone p { font-size:14px; } .milestone .dot { left:-18px; width:10px; height:10px; } .quote-wrap { padding:18px; } blockquote { font-size:16px; line-height:1.6; } cite { margin-top:6px; } }
@media (max-width:760px){ .cta-banner { grid-template-columns:1fr; text-align:center; } .cta-banner .btn { width:100%; margin-top:12px; } }