/* ==========================================================================
   Drematech — Topografia · Engenharia · Meio Ambiente
   Identidade: verde #0C4D28, grafite #262C38, papel #FBFBFB,
   curvas de nível como textura, formas orgânicas, fotografia de mata.
   ========================================================================== */

:root{
  --verde:#0C4D28;
  --verde-esc:#063A1D;
  --verde-vivo:#12703A;
  --verde-tint:#EAF1EC;
  --grafite:#262C38;
  --slate:#212C34;
  --texto:#4C5563;
  --papel:#FBFBFB;
  --branco:#FFFFFF;
  --linha:#E3E7E2;
  --linha-forte:#CBD3CA;

  --max:1200px;
  --gut:clamp(20px,5vw,56px);
  --display:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --corpo:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --raio:14px;
  --sombra:0 1px 2px rgba(38,44,56,.04), 0 8px 24px rgba(38,44,56,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{
  margin:0; background:var(--papel); color:var(--texto);
  font-family:var(--corpo); font-size:17.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2.5px solid var(--verde); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gut)}

h1,h2,h3,h4{font-family:var(--display); color:var(--grafite); margin:0; line-height:1.06; letter-spacing:-.028em; font-weight:800; text-wrap:balance}
h1{font-size:clamp(38px,5.6vw,68px)}
h2{font-size:clamp(30px,4.2vw,50px)}
h3{font-size:clamp(19px,2vw,22px); line-height:1.22; letter-spacing:-.018em}
h2 .v, h1 .v{color:var(--verde); display:block}
p{margin:0 0 16px; max-width:62ch}
strong{color:var(--grafite); font-weight:600}

.eyebrow{
  font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--verde); margin:0 0 16px;
}
.regua{width:56px; height:3px; background:var(--verde); border-radius:2px; margin:22px 0 20px}
.lead{font-size:clamp(17px,1.8vw,19.5px); max-width:56ch}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.01em;
  padding:14px 26px; border-radius:999px; border:2px solid transparent; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.btn:active{transform:translateY(1px)}
.btn-verde{background:var(--verde); color:#fff}
.btn-verde:hover{background:var(--verde-esc)}
.btn-linha{border-color:var(--linha-forte); color:var(--grafite); background:transparent}
.btn-linha:hover{border-color:var(--verde); color:var(--verde)}
.btn-branco{background:#fff; color:var(--verde)}
.btn-branco:hover{background:var(--verde-tint)}
.btn svg{width:19px; height:19px; flex:none}

/* ---------- textura de curva de nível ---------- */
.curvas{position:absolute; inset:0; pointer-events:none; opacity:.55; overflow:hidden}
.curvas svg{width:100%; height:100%}

/* ---------- cabeçalho ---------- */
.topo{
  position:sticky; top:0; z-index:60; background:rgba(251,251,251,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linha);
}
.topo-in{display:flex; align-items:center; gap:22px; min-height:72px}
.logo img{height:48px; width:auto}
.nav{margin-left:auto; display:flex; gap:22px; align-items:center}
.nav a{white-space:nowrap}
.nav .btn{display:none}
.nav a{font-size:15.5px; font-weight:600; color:var(--grafite); transition:color .18s}
.nav a:hover{color:var(--verde)}
.topo .btn{padding:11px 20px; font-size:15px}
.nav-restrito{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-family:var(--display); font-weight:700; font-size:14.5px; color:var(--texto);
  border:1.5px solid var(--linha); border-radius:999px; padding:9px 16px;
  transition:border-color .18s, color .18s;
}
.nav-restrito:hover{border-color:var(--verde); color:var(--verde)}
.nav-restrito svg{width:15px; height:15px; flex:none}
.menu-btn{display:none; margin-left:auto; background:none; border:0; padding:10px; cursor:pointer}
.menu-btn i{display:block; width:24px; height:2px; background:var(--grafite); margin:5px 0; border-radius:2px}
/* header intermediario */
.topo .btn{white-space:nowrap}
@media(min-width:981px) and (max-width:1240px){
  .nav{gap:15px}
  .nav a{font-size:14px}
  .nav-restrito{padding:8px 12px; font-size:13.5px}
  .topo .btn{padding:10px 16px; font-size:14px}
  .logo img{height:42px}
}
@media(max-width:980px){
  .nav{
    position:fixed; inset:72px 0 auto; flex-direction:column; gap:0; align-items:stretch;
    background:var(--papel); border-bottom:1px solid var(--linha); padding:6px var(--gut) 22px; display:none;
  }
  .nav.aberto{display:flex}
  .nav a{padding:15px 0; border-bottom:1px solid var(--linha); font-size:17px}
  .nav-restrito{border:0; border-bottom:1px solid var(--linha); border-radius:0; padding:15px 0; font-size:17px; justify-content:flex-start}
  .nav .btn{display:inline-flex; margin-top:16px}
  .menu-btn{display:block}
  .topo-in > .btn{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--papel); overflow:hidden}
.hero .wrap{position:relative; z-index:2}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,64px); align-items:center; padding-block:clamp(52px,8vw,96px)}
.hero-txt h1{margin-bottom:6px}
.hero-txt .lead{margin-top:20px}
.hero-acoes{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hero-selo{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:32px; padding-top:22px; border-top:1px solid var(--linha)}
.hero-selo span{font-size:14px; color:var(--texto); display:flex; align-items:center; gap:8px}
.hero-selo svg{width:16px; height:16px; color:var(--verde); flex:none}

.foto-curva{
  position:relative; aspect-ratio:4/5; min-height:340px; overflow:hidden;
  border-radius:180px 24px 180px 24px;
  box-shadow:var(--sombra);
}
.foto-curva img{width:100%; height:100%; object-fit:cover; object-position:center bottom}
.foto-curva::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(12,77,40,.18) 0%, rgba(12,77,40,0) 45%);
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr; padding-block:40px 48px}
  .foto-curva{aspect-ratio:16/10; min-height:0; border-radius:120px 20px 120px 20px; order:-1}
}

/* ---------- seções ---------- */
section{position:relative; padding-block:clamp(60px,8vw,104px)}
.sec-cab{max-width:640px; margin-bottom:clamp(34px,5vw,54px)}
.sec-cab p{margin-top:18px; margin-bottom:0}
.fundo-branco{background:var(--branco); border-block:1px solid var(--linha)}
.fundo-tint{background:var(--verde-tint)}

/* quando entramos */
.momentos{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(32px,5vw,72px); border-top:1px solid var(--linha);
}
.momento{padding:30px 0 32px; border-bottom:1px solid var(--linha)}
.momento__n{
  display:block; font-family:var(--display); font-weight:700; font-size:12px;
  letter-spacing:.16em; color:var(--verde); margin-bottom:14px;
}
.momento h3{margin-bottom:9px}
.momento p{font-size:16px; margin:0; max-width:44ch; color:var(--texto)}
@media(max-width:760px){
  .momentos{grid-template-columns:1fr}
  .momento{padding:24px 0 26px}
}

/* <picture> não pode virar caixa entre o contêiner e a imagem */
.foto-curva picture, .faixa-foto picture, .logo picture, .rodape-marca picture{display:contents}

/* soluções */
.solucoes{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px}
.sol{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  padding:30px 28px 32px; transition:border-color .2s, box-shadow .2s, transform .2s;
}
.sol:hover{border-color:var(--verde); box-shadow:var(--sombra); transform:translateY(-2px)}
.sol .ico{
  width:56px; height:56px; border:1.5px solid var(--linha-forte); border-radius:16px;
  display:grid; place-items:center; margin-bottom:20px; color:var(--verde); background:var(--papel);
}
.sol .ico svg{width:28px; height:28px}
.sol h3{margin-bottom:10px}
.sol p{font-size:15.5px; margin:0 0 16px}
.sol ul{margin:0; padding:0; list-style:none; display:grid; gap:7px}
.sol li{position:relative; padding-left:18px; font-size:15px}
.sol li::before{content:""; position:absolute; left:0; top:.68em; width:8px; height:1.5px; background:var(--verde); border-radius:1px}

/* como trabalhamos */
.etapas{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; position:relative}
.etapa{background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio); padding:28px 26px 30px; position:relative}
.etapa .n{
  width:38px; height:38px; border-radius:50%; background:var(--verde); color:#fff;
  font-family:var(--display); font-weight:800; font-size:16px;
  display:grid; place-items:center; margin-bottom:18px;
}
.etapa h3{font-size:19px; margin-bottom:8px}
.etapa p{font-size:15.5px; margin:0}

/* tecnologia */
.tec{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:clamp(30px,5vw,68px); align-items:center}
@media(max-width:900px){.tec{grid-template-columns:1fr}}
.pilares{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:32px}
.pilar{text-align:center; padding:22px 12px; background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio)}
.pilar svg{width:30px; height:30px; color:var(--verde); margin:0 auto 12px}
.pilar b{font-family:var(--display); font-weight:700; color:var(--grafite); font-size:15.5px}
@media(max-width:520px){.pilares{grid-template-columns:1fr}}

/* orçamento */
.passos{counter-reset:p; display:grid; gap:0; border-top:1px solid var(--linha)}
.passo{display:grid; grid-template-columns:64px minmax(0,1fr); gap:8px 22px; padding:26px 0; border-bottom:1px solid var(--linha); align-items:start}
.passo .n{font-family:var(--display); font-weight:800; font-size:30px; color:var(--verde); line-height:1}
.passo h3{margin-bottom:6px}
.passo p{margin:0; font-size:16px}
@media(max-width:600px){.passo{grid-template-columns:44px minmax(0,1fr); gap:6px 14px} .passo .n{font-size:24px}}

/* atuação */
.atuacao{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(28px,5vw,64px); align-items:center}
@media(max-width:900px){.atuacao{grid-template-columns:1fr}}
.chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:24px}
.chips span{font-size:14.5px; background:var(--branco); border:1px solid var(--linha); padding:8px 15px; border-radius:999px; color:var(--grafite)}

/* faq */
.faq{max-width:820px; border-top:1px solid var(--linha)}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:var(--display); font-weight:700; font-size:clamp(17px,1.9vw,19.5px);
  color:var(--grafite); letter-spacing:-.015em; line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:8px; top:29px; width:10px; height:10px;
  border-right:2px solid var(--verde); border-bottom:2px solid var(--verde);
  transform:rotate(45deg); transition:transform .2s, top .2s;
}
.faq details[open] summary::after{transform:rotate(-135deg); top:33px}
.faq .resp{padding:0 0 24px; font-size:16.5px}
.faq .resp p:last-child{margin:0}

/* faixa CTA */
.faixa{position:relative; background:var(--verde); color:#fff; overflow:hidden}
.faixa .wrap{position:relative; z-index:2}
.faixa-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.5fr); gap:clamp(28px,5vw,56px); align-items:center; padding-block:clamp(52px,7vw,84px)}
.faixa h2{color:#fff; margin-bottom:18px}
.faixa h2 .v{color:#9FD6B2}
.faixa p{color:#D6E6DB; max-width:48ch}
.faixa .acoes{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.faixa-foto{aspect-ratio:1/1; border-radius:150px 20px 150px 20px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.22)}
.faixa-foto img{width:100%; height:100%; object-fit:cover; object-position:center bottom}
@media(max-width:900px){.faixa-grid{grid-template-columns:1fr} .faixa-foto{display:none}}

/* contato */
.contato{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1fr); gap:clamp(30px,5vw,64px); align-items:start}
@media(max-width:900px){.contato{grid-template-columns:1fr}}
.dados{margin-top:28px; display:grid; gap:0; border-top:1px solid var(--linha)}
.dado{display:flex; gap:16px; align-items:center; padding:16px 0; border-bottom:1px solid var(--linha)}
.dado svg{width:20px; height:20px; color:var(--verde); flex:none}
.dado b{font-family:var(--display); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--texto); display:block; font-weight:700}
.dado span{color:var(--grafite); font-size:16.5px}
form{background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio); padding:clamp(24px,3.4vw,36px); display:grid; gap:16px; box-shadow:var(--sombra)}
label{display:grid; gap:7px; font-family:var(--display); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--texto); font-weight:700}
input,select,textarea{
  font-family:var(--corpo); font-size:16.5px; color:var(--grafite); background:var(--papel);
  border:1.5px solid var(--linha); border-radius:10px; padding:13px 15px; width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--verde); outline:none; background:#fff}
textarea{min-height:120px; resize:vertical}
form .btn{width:100%; margin-top:4px}
.nota{font-size:14px; margin:0; color:var(--texto)}

/* rodapé */
.rodape{background:var(--slate); color:#B9C2C9; padding-block:52px 40px; font-size:15px}
.rodape-in{display:grid; grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,.8fr)); gap:36px}
@media(max-width:820px){.rodape-in{grid-template-columns:1fr 1fr} .rodape-marca{grid-column:1/-1}}
.rodape img{height:56px; width:auto; margin-bottom:18px}
.rodape h4{color:#fff; font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px; font-family:var(--display); font-weight:700}
.rodape a:hover{color:#fff}
.rodape ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.rodape .legal{margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); font-size:13.5px; display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:space-between}

/* whatsapp flutuante */
.zap{
  position:fixed; right:18px; bottom:18px; z-index:70; display:inline-flex; align-items:center; gap:10px;
  background:#12703A; color:#fff; font-family:var(--display); font-weight:700; font-size:15px;
  padding:14px 20px; border-radius:999px; box-shadow:0 8px 26px rgba(0,0,0,.25);
  transition:background .18s;
}
.zap:hover{background:var(--verde-esc)}
.zap svg{width:21px; height:21px}
@media(max-width:560px){.zap span{display:none} .zap{padding:15px}}

@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}}

/* ============================================================
   Blog
   ============================================================ */

/* capa da listagem */
.blog-capa{padding-block:clamp(48px,7vw,88px) clamp(28px,4vw,44px); position:relative}
.blog-capa h1{max-width:16ch}
.blog-capa .lead{margin-top:20px}

/* listagem */
.posts{display:grid; gap:0; border-top:1px solid var(--linha)}
.post-card{border-bottom:1px solid var(--linha)}
.post-card__link{
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:6px 32px;
  padding:26px 0 28px; align-items:start;
}
.post-card__cat{
  font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--verde); padding-top:5px;
}
.post-card__titulo{
  grid-column:2; font-family:var(--display); font-weight:800; font-size:clamp(20px,2.4vw,26px);
  line-height:1.18; letter-spacing:-.025em; color:var(--grafite); margin:0 0 8px;
  transition:color .18s;
}
.post-card__link:hover .post-card__titulo{color:var(--verde)}
.post-card__resumo{grid-column:2; font-size:16px; color:var(--texto); margin:0 0 10px; max-width:60ch}
.post-card__meta{grid-column:2; font-size:13.5px; color:var(--texto); opacity:.75}
@media(max-width:760px){
  .post-card__link{grid-template-columns:1fr; gap:8px}
  .post-card__cat{padding-top:0}
  .post-card__titulo,.post-card__resumo,.post-card__meta{grid-column:1}
}

/* capa do post */
.post-capa{padding-block:clamp(34px,5vw,56px) clamp(24px,3.5vw,36px); position:relative}
.post-capa h1{max-width:20ch; margin-top:2px}
.migalhas{font-size:13.5px; color:var(--texto); margin-bottom:22px}
.migalhas a:hover{color:var(--verde)}
.migalhas span{opacity:.5; margin:0 4px}
.post-sub{font-size:clamp(17px,1.9vw,19.5px); color:var(--texto); max-width:58ch; margin:18px 0 0}
.post-meta{
  display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:26px; padding-top:18px;
  border-top:1px solid var(--linha); font-size:13.5px; color:var(--texto);
}

/* corpo do post */
/* artigo: texto à esquerda, sumário à direita */
.post-layout{
  display:grid; grid-template-columns:minmax(0,1fr); gap:0;
  padding-bottom:clamp(48px,7vw,80px);
}
@media(min-width:1060px){
  .post-layout{grid-template-columns:minmax(0,1fr) 230px; gap:0 clamp(40px,5vw,72px); align-items:start}
}
.post-corpo{max-width:72ch}

/* sumário */
.post-trilho{display:none}
@media(min-width:1060px){
  .post-trilho{display:block; padding-top:6px}
  .post-trilho__fixo{position:sticky; top:96px; border-left:1px solid var(--linha); padding-left:20px}
}
.post-trilho__titulo{
  display:block; font-family:var(--display); font-weight:700; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--verde); margin-bottom:14px;
}
.post-trilho__lista{list-style:none; margin:0; padding:0; display:grid; gap:11px; counter-reset:t}
.post-trilho__lista li{counter-increment:t}
.post-trilho__lista a{
  display:block; font-size:14px; line-height:1.35; color:var(--texto);
  transition:color .18s; text-align:left;
}
.post-trilho__lista a::before{
  content:counter(t,decimal-leading-zero); margin-right:8px;
  font-family:var(--display); font-size:10.5px; color:var(--linha-forte); letter-spacing:.08em;
}
.post-trilho__lista a:hover{color:var(--verde)}
.post-corpo h2{
  font-size:clamp(22px,2.8vw,30px); margin:clamp(34px,4vw,48px) 0 14px; letter-spacing:-.025em;
}
.post-corpo h2:first-child{margin-top:0}
.post-corpo h3{font-size:clamp(18px,2vw,21px); margin:30px 0 10px}
.post-corpo p, .post-corpo li{
  text-align:justify; text-justify:inter-word;
  hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto;
}
.post-corpo p{font-size:17.5px; line-height:1.72; margin:0 0 18px; max-width:none}
@media(max-width:600px){
  .post-corpo p, .post-corpo li{text-align:left; hyphens:none}
}
.post-corpo h2{scroll-margin-top:92px}
.post-corpo ul,.post-corpo ol{margin:0 0 20px; padding-left:22px; display:grid; gap:9px}
.post-corpo li{font-size:17.5px; line-height:1.65}
.post-corpo li::marker{color:var(--verde)}
.post-corpo a{color:var(--verde); text-decoration:underline; text-underline-offset:3px}
.post-corpo strong{color:var(--grafite); font-weight:600}
.post-corpo blockquote{
  margin:24px 0; padding:4px 0 4px 22px; border-left:3px solid var(--verde);
  font-size:18.5px; color:var(--grafite);
}
.post-corpo hr{border:0; border-top:1px solid var(--linha); margin:36px 0 26px}
.post-corpo code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em;
  background:var(--verde-tint); padding:2px 6px; border-radius:5px; color:var(--verde-esc);
}
.post-corpo em{color:var(--texto)}
.post-corpo > hr + p em{font-size:15px; line-height:1.6; display:block}

.tabela-rolagem{overflow-x:auto; margin:0 0 24px; border-top:1px solid var(--linha)}
.tabela-rolagem table{border-collapse:collapse; width:100%; min-width:520px; font-size:15.5px}
.tabela-rolagem th,.tabela-rolagem td{
  text-align:left; padding:12px 16px 12px 0; border-bottom:1px solid var(--linha); vertical-align:top;
}
.tabela-rolagem th{
  font-family:var(--display); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--texto); font-weight:700;
}
.tabela-rolagem td{color:var(--texto)}
.tabela-rolagem tbody tr td:first-child{color:var(--grafite); font-weight:600}

/* continue lendo */
.posts-outros{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:22px}
.post-outro{
  display:grid; gap:8px; padding:24px; border:1px solid var(--linha); border-radius:var(--raio);
  background:var(--papel); transition:border-color .18s, transform .18s;
}
.post-outro:hover{border-color:var(--verde); transform:translateY(-2px)}
.post-outro__cat{
  font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--verde);
}
.post-outro__t{
  font-family:var(--display); font-weight:700; font-size:18px; line-height:1.25;
  letter-spacing:-.02em; color:var(--grafite);
}
.tarja-rascunho{
  display:inline-block; margin:0 0 18px; padding:8px 14px; border-radius:999px;
  background:#FBF2DC; color:#8F6800; border:1px solid rgba(184,134,14,.3);
  font-size:13.5px; font-weight:600;
}


/* artigos na home */
.sec-cab--linha{
  display:flex; flex-wrap:wrap; gap:18px 32px; align-items:flex-end;
  justify-content:space-between; max-width:none;
}
.home-artigos{display:grid; gap:0; border-top:1px solid var(--linha)}
.home-artigo{border-bottom:1px solid var(--linha)}
.home-artigo__link{
  display:grid; grid-template-columns:170px minmax(0,1fr) auto;
  gap:6px 32px; padding:24px 0 26px; align-items:start;
}
.home-artigo__cat{
  font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--verde); padding-top:5px;
}
.home-artigo__t{
  font-family:var(--display); font-weight:700; font-size:clamp(18px,2.1vw,22px);
  line-height:1.22; letter-spacing:-.02em; color:var(--grafite); margin:0 0 6px;
  transition:color .18s;
}
.home-artigo__link:hover .home-artigo__t{color:var(--verde)}
.home-artigo__r{font-size:15.5px; color:var(--texto); margin:0; max-width:58ch}
.home-artigo__m{
  grid-column:3; grid-row:1 / span 2; font-size:13px; color:var(--texto);
  opacity:.75; white-space:nowrap; padding-top:6px;
}
.home-artigo__t, .home-artigo__r{grid-column:2}
@media(max-width:860px){
  .home-artigo__link{grid-template-columns:1fr; gap:8px}
  .home-artigo__cat{padding-top:0}
  .home-artigo__t,.home-artigo__r,.home-artigo__m{grid-column:1}
  .home-artigo__m{grid-row:auto; padding-top:0}
}