/* Blog (lista, categorias e busca) — CSS do mockup 02-blog.html (a base está em base.css). */
/* Topo do blog */
.b-topo{background:var(--mata);color:#fff;padding:56px 0 0;position:relative;overflow:hidden}
.b-topo .risco{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.b-topo .wrap{position:relative}
.b-topo .linha1{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:end;padding-bottom:40px}
.b-topo h1{font-size:clamp(2.1rem,4.4vw,3.3rem);max-width:17ch}
.b-topo .lead{color:#C9DBD1;margin-top:1rem}
.busca{display:flex;background:#fff;border-radius:999px;padding:6px;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.busca input{flex:1;border:0;background:transparent;font:inherit;padding:.65rem 1rem;min-width:0;color:var(--tinta)}
.busca input:focus{outline:none}
.busca button{border:0;cursor:pointer}
.cats{display:flex;gap:.5rem;overflow-x:auto;padding:0 0 20px;scrollbar-width:none;list-style:none}
.cats::-webkit-scrollbar{display:none}
.cats a{display:block;white-space:nowrap;text-decoration:none;font-size:.93rem;color:#D5E4DC;border:1px solid rgba(255,255,255,.18);padding:.5rem 1rem;border-radius:999px}
.cats a:hover{border-color:#fff;color:#fff}
.cats a[aria-current="page"]{background:var(--ouro);border-color:var(--ouro);color:var(--mata);font-weight:600}

/* Cartões de artigo */
.card{background:#fff;border:1px solid var(--linha);border-radius:var(--r-md);overflow:hidden;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--verde-txt)}
.card-link{display:flex;flex-direction:column;height:100%;text-decoration:none}
.capa{aspect-ratio:16/9;display:grid;place-items:center;padding:1.2rem;text-align:center;font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.1;font-size:1.55rem;position:relative;overflow:hidden}
.capa::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-30%;height:60%;border-top:2px solid currentColor;border-radius:50% 50% 0 0/100% 100% 0 0;opacity:.18;transform:rotate(-6deg)}
.c-pat{background:var(--mata);color:var(--ouro)}
.c-dividas{background:#F6E3DF;color:#8E2A21}
.c-orc{background:#DCEFE4;color:var(--mata)}
.c-indep{background:#F3E3B5;color:var(--mata)}
.c-emp{background:#E4E9F3;color:#26365E}
.corpo{padding:1.2rem 1.35rem 1.4rem;display:flex;flex-direction:column;flex:1}
.cat{font-size:.85rem;color:var(--verde-txt);font-weight:600}
.card h3{font-size:1.14rem;margin:.35rem 0 .5rem;line-height:1.3}
.card p{font-size:.94rem;color:var(--tinta-2)}
.card .meta{margin-top:auto;padding-top:.9rem;font-size:.84rem;display:flex;gap:.45rem}

/* Destaque */
.lista{padding:48px 0 32px}
.card.destaque .card-link{display:grid;grid-template-columns:1.15fr 1fr}
.card.destaque .capa{aspect-ratio:auto;min-height:340px;font-size:clamp(2rem,4vw,3.2rem)}
.card.destaque .corpo{padding:2.2rem 2.4rem;justify-content:center}
.card.destaque h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:.5rem 0 .8rem}
.card.destaque p{font-size:1.02rem}
.card.destaque .ler{margin-top:1.4rem;font-weight:600;color:var(--verde-txt)}

.titulo-sec{display:flex;justify-content:space-between;align-items:end;margin:56px 0 20px}
.titulo-sec h2{font-size:1.5rem}
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* Espaço de anúncio */
.anuncio{margin:40px auto 0;max-width:728px}
.anuncio small{display:block;font-size:.72rem;color:var(--tinta-2);text-align:center;margin-bottom:.35rem}
.anuncio div{height:90px;border:1.5px dashed #C9D4CE;border-radius:var(--r-sm);display:grid;place-items:center;color:#98A59E;font-size:.85rem;background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(14,59,43,.025) 12px 24px)}

/* Chamada para o app no meio da lista */
.chamada{margin:48px 0 8px;background:var(--mata);color:#fff;border-radius:28px;padding:40px 44px;display:grid;grid-template-columns:1.4fr auto;gap:32px;align-items:center;position:relative;overflow:hidden}
.chamada h2{font-size:clamp(1.5rem,2.8vw,2.1rem);max-width:22ch}
.chamada p{color:#C9DBD1;margin-top:.6rem;max-width:52ch}
.chamada .ano-fantasma{position:absolute;right:230px;top:50%;transform:translateY(-50%);font-family:var(--display);font-weight:700;font-size:9rem;letter-spacing:-.05em;color:rgba(212,172,76,.1);pointer-events:none;line-height:1}

/* Paginação */
.pag{display:flex;justify-content:center;gap:.4rem;margin:56px 0 96px;list-style:none}
.pag a,.pag span{display:grid;place-items:center;min-width:44px;height:44px;padding:0 .9rem;border-radius:999px;text-decoration:none;border:1px solid var(--linha);background:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.pag a:hover{border-color:var(--verde-txt);color:var(--verde-txt)}
.pag [aria-current="page"]{background:var(--mata);color:#fff;border-color:var(--mata)}

/* Acréscimos do tema (não existiam no mockup) */
.c-inv{background:var(--mata-2);color:var(--ouro-claro)}
.capa.com-imagem{padding:0}
.capa.com-imagem::after{display:none}
.capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vazio{padding:48px 0;color:var(--tinta-2)}
.b-topo h1 small{display:block;font-size:.5em;color:var(--ouro);letter-spacing:0;margin-bottom:.4rem}

@media (max-width:960px){
  .nav{display:none}
  .menu-m{display:block;position:relative}
  .menu-m summary{list-style:none;cursor:pointer;padding:.4rem;color:#fff}
  .menu-m summary::-webkit-details-marker{display:none}
  .menu-m nav{position:absolute;right:0;top:44px;background:#fff;border-radius:var(--r-md);padding:.6rem;min-width:200px;box-shadow:0 20px 40px -12px rgba(0,0,0,.35);display:grid}
  .menu-m nav a{color:var(--tinta);text-decoration:none;padding:.7rem .9rem;border-radius:var(--r-sm)}
  .topo .entrar{display:none}
  .topo .wrap{gap:1rem}
  .topo .acoes{margin-left:auto}
  .b-topo .linha1{grid-template-columns:1fr;gap:24px}
  .card.destaque .card-link{grid-template-columns:1fr}
  .card.destaque .capa{min-height:200px}
  .card.destaque .corpo{padding:1.4rem}
  .grade{grid-template-columns:1fr 1fr}
  .chamada{grid-template-columns:1fr;padding:32px 28px}
  .chamada .ano-fantasma{display:none}
  .rodape .grade{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  body{font-size:16px}
  .topo .acoes .btn{display:none}
  .grade{grid-template-columns:1fr}
  .anuncio div{height:100px}
  .rodape .grade{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}