/* Espaço Sustentabilidade — páginas de artigo
   Mesma linguagem visual do site: Cormorant Garamond para títulos,
   Manrope para texto, creme #f4ecd8 sobre verde-escuro #0e1f16. */

*, *::before, *::after { box-sizing: border-box; }

:root{
  --creme:#f4ecd8;
  --creme-suave:rgba(244,236,216,0.72);
  --verde-escuro:#0e1f16;
  --verde-medio:#1f3a2b;
  --verde-claro:#7ec96f;
  --verde-forte:#0b8d02;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--creme);
  color:var(--verde-medio);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }

/* ---------- topo ---------- */
.topo{
  position:sticky; top:0; z-index:50;
  background:rgba(14,31,22,0.96);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(244,236,216,0.10);
}
.topo-int{
  max-width:1180px; margin:0 auto;
  padding:18px 44px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.topo img{ height:30px; width:auto; display:block; }
.topo nav{ display:flex; gap:26px; font-size:14px; }
.topo nav a{ color:var(--creme-suave); text-decoration:none; transition:color .25s ease; }
.topo nav a:hover{ color:var(--verde-claro); }

/* ---------- cabeçalho do artigo ---------- */
.capa{
  background:var(--verde-escuro);
  color:var(--creme);
  padding:88px 44px 76px;
}
.capa-int{ max-width:760px; margin:0 auto; }
.etiquetas{
  display:flex; gap:14px; align-items:center;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--verde-claro);
  margin-bottom:22px;
}
.etiquetas .data{ color:var(--creme-suave); font-weight:400; letter-spacing:.10em; }
.capa h1{
  font-family:var(--serif);
  font-size:clamp(34px,5vw,58px);
  font-weight:500; line-height:1.06; letter-spacing:-0.01em;
  margin:0 0 24px;
}
.resumo{
  font-size:20px; line-height:1.6;
  color:var(--creme-suave); font-weight:300;
  margin:0;
}

/* ---------- corpo ---------- */
article{
  max-width:760px; margin:0 auto;
  padding:72px 44px 40px;
}
article h2{
  font-family:var(--serif);
  font-size:clamp(27px,3.4vw,38px);
  font-weight:500; line-height:1.15;
  color:var(--verde-medio);
  margin:56px 0 18px;
}
article h2:first-child{ margin-top:0; }
article h3{
  font-family:var(--sans);
  font-size:16px; font-weight:600; letter-spacing:.02em;
  color:var(--verde-forte);
  margin:36px 0 10px;
}
article p{ margin:0 0 22px; }
article strong{ font-weight:600; color:var(--verde-medio); }
article ul{ margin:0 0 24px; padding-left:0; list-style:none; }
article ul li{
  position:relative; padding-left:26px; margin-bottom:12px;
}
article ul li::before{
  content:''; position:absolute; left:2px; top:11px;
  width:8px; height:8px; border-radius:50%;
  background:var(--verde-claro);
}
article ol{ margin:0 0 24px; padding-left:22px; }
article ol li{ margin-bottom:12px; padding-left:6px; }

.destaque{
  border-left:3px solid var(--verde-claro);
  padding:6px 0 6px 24px;
  margin:36px 0;
  font-family:var(--serif);
  font-size:24px; line-height:1.4; font-weight:500;
  color:var(--verde-medio);
}

.nota{
  background:rgba(31,58,43,0.05);
  border-radius:10px;
  padding:26px 28px;
  margin:36px 0;
  font-size:15.5px; line-height:1.65;
}
.nota p:last-child{ margin-bottom:0; }
.nota .titulo{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:var(--verde-forte); margin-bottom:12px;
}

/* ---------- chamada final ---------- */
.chamada{
  background:var(--verde-escuro);
  color:var(--creme);
  padding:76px 44px;
  margin-top:64px;
}
.chamada-int{ max-width:760px; margin:0 auto; }
.chamada h2{
  font-family:var(--serif);
  font-size:clamp(28px,3.6vw,42px);
  font-weight:500; line-height:1.1; margin:0 0 16px;
}
.chamada p{ color:var(--creme-suave); margin:0 0 30px; }
.botoes{ display:flex; gap:14px; flex-wrap:wrap; }
.botao{
  display:inline-block; text-decoration:none;
  padding:15px 30px; border-radius:40px;
  font-size:15px; font-weight:600; font-family:var(--sans);
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
.botao.cheio{ background:var(--creme); color:var(--verde-escuro); }
.botao.cheio:hover{ transform:translateY(-2px); }
.botao.vazio{ border:1px solid rgba(244,236,216,0.45); color:var(--creme); }
.botao.vazio:hover{ background:rgba(244,236,216,0.10); transform:translateY(-2px); }

/* ---------- outros artigos ---------- */
.mais{ max-width:1180px; margin:0 auto; padding:72px 44px 20px; }
.mais .rotulo{
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  font-weight:600; color:var(--verde-forte); margin-bottom:28px;
}
.mais-grade{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:36px;
}
.mais-grade a{
  text-decoration:none; display:block;
  padding-top:22px; border-top:1px solid rgba(31,58,43,0.18);
  transition:border-color .25s ease;
}
.mais-grade a:hover{ border-color:var(--verde-claro); }
.mais-grade .cat{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--verde-forte); margin-bottom:10px;
}
.mais-grade h3{
  font-family:var(--serif); font-size:23px; font-weight:500;
  line-height:1.18; margin:0; color:var(--verde-medio);
  transition:color .25s ease;
}
.mais-grade a:hover h3{ color:var(--verde-forte); }

/* ---------- rodapé ---------- */
footer{
  background:var(--verde-escuro); color:var(--creme-suave);
  padding:52px 44px; font-size:14px;
}
.rodape-int{
  max-width:1180px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  gap:28px; flex-wrap:wrap;
}
footer img{ height:28px; width:auto; display:block; }
footer nav{ display:flex; gap:24px; flex-wrap:wrap; }
footer a{ text-decoration:none; transition:color .25s ease; }
footer a:hover{ color:var(--verde-claro); }

/* ---------- celular ---------- */
@media (max-width:760px){
  body{ font-size:16.5px; }
  .topo-int{ padding:16px 22px; }
  .topo nav{ display:none; }
  .capa{ padding:56px 22px 48px; }
  .resumo{ font-size:18px; }
  article{ padding:52px 22px 30px; }
  .destaque{ font-size:21px; }
  .chamada{ padding:56px 22px; }
  .mais{ padding:52px 22px 10px; }
  footer{ padding:40px 22px; }
}