/* Blog — usa as mesmas cores, fonte e raios do site (variáveis de /vitrine/vitrine.css),
   então o tema escuro do aparelho funciona sozinho. */
.blog{max-width:820px;padding-top:28px;padding-bottom:88px}
.blog-cab{margin:8px 0 28px}
.blog-cab h1{font-size:clamp(28px,4vw,44px);line-height:1.12;margin:6px 0 10px;text-wrap:balance}
.blog-cab p{color:var(--mudo);font-size:clamp(16px,1.6vw,19px);line-height:1.55;max-width:62ch}
.blog time{color:var(--ouro-txt);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.blog-volta{font-size:14px;margin-bottom:6px}
.blog-volta a{color:var(--mudo);text-decoration:none}
.blog-volta a::before{content:"\2190\00a0"}
.blog-volta a:hover{color:var(--tinta)}

/* lista de textos */
.blog-lista{display:grid;gap:16px}
.blog-item{display:grid;grid-template-columns:minmax(0,1fr);background:var(--cartao);border:1px solid var(--linha);
  border-radius:var(--r);box-shadow:var(--sombra);overflow:hidden;color:inherit;text-decoration:none;
  transition:transform var(--t-med) var(--curva),box-shadow var(--t-med) var(--curva)}
.blog-item:hover,.blog-item:focus-visible{transform:translateY(-3px);box-shadow:var(--sombra-alta)}
.blog-item-capa{width:100%;aspect-ratio:16/7;object-fit:cover;display:block}
.blog-item-txt{padding:20px 22px 22px}
.blog-item h2{font-size:clamp(19px,2vw,24px);line-height:1.25;margin:6px 0 8px;text-wrap:balance}
.blog-item p{color:var(--mudo);line-height:1.55;margin:0 0 12px}
.blog-ler{color:var(--ouro-txt);font-weight:700;font-size:14px}
.blog-ler::after{content:"\00a0\2192";display:inline-block;transition:transform var(--t-med) var(--curva)}
.blog-item:hover .blog-ler::after{transform:translateX(4px)}

/* texto */
.blog-capa{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:var(--r);margin:0 0 28px;display:block}
.blog-texto{font-size:clamp(17px,1.5vw,19px);line-height:1.75;color:var(--tinta);overflow-wrap:anywhere}
.blog-texto > * + *{margin-top:1.05em}
.blog-texto h2{font-size:clamp(22px,2.4vw,28px);line-height:1.25;margin-top:1.9em}
.blog-texto h3{font-size:clamp(19px,2vw,22px);line-height:1.3;margin-top:1.6em}
.blog-texto h4{font-size:17px;margin-top:1.4em}
.blog-texto a{color:var(--ouro-txt);font-weight:600;text-underline-offset:3px}
.blog-texto ul,.blog-texto ol{padding-left:1.3em}
.blog-texto li + li{margin-top:.4em}
.blog-texto img{max-width:100%;height:auto;border-radius:var(--r-s);display:block}
.blog-texto blockquote{border-left:3px solid var(--ouro);padding:4px 0 4px 18px;color:var(--mudo);font-style:italic}
.blog-texto code{background:var(--nevoa);border:1px solid var(--linha);border-radius:6px;padding:1px 6px;font-size:.9em}
.blog-texto hr{border:0;border-top:1px solid var(--linha);margin:2em 0}

/* chamada no fim do texto */
.blog-cta{margin-top:44px;padding:26px 24px;border-radius:var(--r);background:var(--marinho);color:#fff}
.blog-cta h2{font-size:22px;margin:0 0 6px;color:#fff}
.blog-cta p{color:rgba(255,255,255,.82);line-height:1.55;margin:0 0 16px}
.blog-cta-acoes{display:flex;flex-wrap:wrap;gap:10px}
.blog-cta .bt-pri{background:var(--ouro);color:var(--noite)}
.blog-cta .bt-sec{border-color:rgba(255,255,255,.4);color:#fff}
.blog-mais{margin-top:40px;padding-top:24px;border-top:1px solid var(--linha)}
.blog-mais h2{font-size:18px;margin:0 0 10px}
.blog-mais ul{list-style:none;padding:0;display:grid;gap:8px}
.blog-mais a{color:var(--tinta);font-weight:600;text-underline-offset:3px}
@media (max-width:600px){.blog-item-txt{padding:16px}.blog-cta{padding:22px 18px}.blog-cta-acoes .bt{flex:1 1 100%;justify-content:center}}