.blog-hero{
  background:linear-gradient(160deg,#063a3b 0%,#0b6b6c 55%,#0d7374 100%);
  color:#fff;
  padding:3.6rem 0 3.8rem;
}

.blog-hero-inner h1{
  font-size:clamp(1.8rem,4vw,2.8rem);
  line-height:1.18;
  margin:.5rem 0 1rem;
  max-width:860px;
}

.blog-hero-inner p{
  max-width:760px;
  color:rgba(255,255,255,.8);
}

.blog-eyebrow{
  display:inline-block;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);
  color:#b2f5d4;
  font-weight:700;
  padding:.3rem .85rem;
  border-radius:9999px;
}

.blog-main{
  padding:3rem 0 4rem;
  background:#f7fbfa;
}

.blog-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:1.4rem;
}

.blog-posts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

.blog-card{
  background:#fff;
  border:1px solid #dce8e2;
  border-radius:14px;
  padding:1.2rem;
  box-shadow:0 8px 24px rgba(4,41,42,.05);
  display:flex;
  flex-direction:column;
}

.blog-thumb{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:10px;
  margin:.75rem 0 .9rem;
}

.blog-tag{
  display:inline-block;
  background:#e7f8ee;
  color:#166534;
  font-weight:700;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:.2rem .6rem;
  border-radius:999px;
}

.blog-card h2{
  font-size:1.08rem;
  line-height:1.35;
  margin:.7rem 0 .55rem;
}

.blog-card p{
  color:#4b5563;
  font-size:.95rem;
  margin-bottom:.9rem;
}

.blog-link{
  font-weight:700;
  color:#0b6b6c;
  margin-top:auto;
}

.blog-link:hover{
  color:#16a34a;
}

.blog-sidebar{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.sidebar-card{
  background:#fff;
  border:1px solid #dce8e2;
  border-radius:14px;
  padding:1rem;
}

.sidebar-card h3{
  margin:0 0 .75rem;
  font-size:1.05rem;
}

.sidebar-card ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.45rem;
  margin:0;
  padding:0;
}

.sidebar-card a{
  color:#0b6b6c;
  font-weight:600;
}

.sidebar-card a:hover{
  color:#16a34a;
}

.sidebar-card p{
  color:#4b5563;
  font-size:.92rem;
  margin:0 0 .65rem;
}

.sidebar-references ul{
  list-style:disc;
  margin:.2rem 0 0 1rem;
  padding:0;
}

.sidebar-references li{
  margin:.35rem 0;
}

.sidebar-legal p strong{
  color:#0f3b2f;
}

@media(max-width:980px){
  .blog-hero{padding:2.4rem 0 2.6rem}
  .blog-layout{grid-template-columns:1fr}
  .blog-posts{grid-template-columns:1fr 1fr}
  .blog-card{padding:1rem}
  .sidebar-card{padding:.9rem}
  .post-shell{padding:1.4rem 0 2rem}
}

@media(max-width:720px){

@media(max-width:420px){
  .blog-main{padding:2rem 0 2.4rem}
  .blog-hero-inner h1{font-size:1.55rem}
  .post-main{padding:1rem}
  .post-meta{font-size:.84rem;gap:.55rem}
  .post-cover{height:180px}
}
  .blog-posts{grid-template-columns:1fr}
  .blog-thumb{height:220px}
}

/* ===== ARTIGO ===== */
.post-hero{
  background:linear-gradient(160deg,#073738 0%,#0b6b6c 55%,#0f7e80 100%);
  color:#fff;
  padding:3rem 0 2.6rem;
}

.post-hero h1{
  font-size:clamp(1.6rem,3.5vw,2.5rem);
  line-height:1.2;
  margin:.6rem 0 1rem;
  max-width:820px;
}

.post-meta{
  color:#c7f3e8;
  font-size:.92rem;
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

.post-shell{
  background:#f7fbfa;
  padding:2.2rem 0 3.2rem;
}

.post-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:1.2rem;
}

.post-main,
.post-side .sidebar-card{
  background:#fff;
  border:1px solid #dce8e2;
  border-radius:14px;
}

.post-main{
  padding:1.2rem 1.2rem 1.4rem;
}

.post-cover{
  border-radius:12px;
  height:320px;
  margin-bottom:1rem;
  background:
    linear-gradient(15deg, rgba(8,49,50,.75), rgba(8,49,50,.25)),
    url('assets/about.jpg') center/cover no-repeat;
}

.post-main h2{
  margin:1rem 0 .5rem;
  font-size:1.2rem;
}

.post-main p,
.post-main li{
  color:#4b5563;
}

.post-main ul{
  margin:.5rem 0 1rem 1.1rem;
}

.post-cta-box{
  margin-top:1rem;
  border:1px solid #cdebe1;
  background:#edf9f3;
  border-radius:12px;
  padding:1rem;
}

.post-side{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.related-grid{
  margin-top:1rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.8rem;
}

.related-item{
  border:1px solid #dce8e2;
  border-radius:12px;
  padding:.9rem;
  background:#fff;
}

.related-item h4{
  font-size:.98rem;
  margin:0 0 .45rem;
}

@media(max-width:980px){
  .post-layout{grid-template-columns:1fr}
}

@media(max-width:720px){
  .post-cover{height:220px}
  .related-grid{grid-template-columns:1fr}
}