/* Blog Flavio Zazu (flaviozazu.com.br/blog/). Layout do blog da página de vendas do UZcatálogo (topo em duas colunas com o
   artigo em destaque, filtro por assunto, cartões, índice lateral, resposta rápida, perguntas e "continue lendo"), com a
   identidade do Flavio Zazu: Inter, roxo #820AD1, títulos em caixa alta peso 900, canto de 8px e o corte de 61° do Z.
   Assinatura: a "Resposta rápida" é um cartão com o canto recortado (o mesmo dos cartões do site) e o marcador dourado inclinado no ângulo do Z.
   Topo e rodapé: assets/css/base.css (os mesmos de todas as páginas). */

/* rótulo com o marcador dourado inclinado (o corte de 61° do Z) */
.chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:4px;background:var(--roxo-pale);color:var(--roxo);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
a.chip{transition:background .15s,color .15s}
@media (hover:hover){a.chip:hover{background:var(--roxo);color:#fff}}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:13.5px;color:var(--suave)}
.tempo{display:inline-flex;align-items:center;gap:6px}
.tempo svg{width:15px;height:15px;color:var(--roxo)}
.link-zap{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.35em;text-decoration-color:rgb(255 255 255 / .45)}
.link-zap svg{width:20px;height:20px;color:#25D366;flex:none}
@media (hover:hover){.link-zap:hover{text-decoration-color:#fff}}
.progresso{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none}
.progresso span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--roxo),var(--dourado));transform:scaleX(var(--lido,0));transform-origin:0 50%}

/* ---------------------------------------------------------------- página do blog (lista) */
.blog-hero{position:relative;overflow:hidden;padding:clamp(40px,5vw,72px) 0 clamp(48px,5vw,80px);background:var(--superficie);border-bottom:1px solid var(--linha)}
.blog-hero::before{content:"";position:absolute;inset:0;opacity:.035;background-image:radial-gradient(#820AD1 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
.blog-hero .wrap{position:relative}
.hero-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center}
.blog-hero h1{font-size:clamp(34px,4.4vw,56px);font-weight:900;line-height:1.04;letter-spacing:-.03em;text-transform:uppercase}
.blog-hero .lead{margin-top:20px;max-width:44ch;font-size:clamp(16px,1.4vw,18px);line-height:1.65;color:var(--suave)}
.hero-info{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin-top:28px;padding-top:18px;border-top:1px solid var(--linha);max-width:44ch;font-size:14px;color:var(--suave)}
.hero-info>span:first-child{font-weight:800;color:var(--tinta)}
.rss{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--suave);transition:color .15s}
.rss svg{width:16px;height:16px;color:var(--dourado)}
@media (hover:hover){.rss:hover{color:var(--roxo)}}
.hero-destaque{position:relative}
/* carvão com texto dourado: contrasta com as capas roxas (combinação Dourado/Carvão do brand book) */
.selo-destaque{position:absolute;z-index:2;top:-14px;left:24px;padding:6px 13px;border-radius:4px;background:var(--tinta);color:var(--dourado);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 6px 14px -6px rgb(17 24 39 / .5)}
@media (max-width:1023px){.hero-grade{grid-template-columns:minmax(0,1fr)}.hero-info{max-width:none}.hero-destaque{margin-top:8px}}

/* lista de artigos: título e filtro centralizados; filtro em abas de texto, a ativa com a linha roxa embaixo */
.lista-posts{padding-top:clamp(48px,6vw,80px)}
.lista-topo{display:flex;flex-direction:column;align-items:center;gap:18px;margin-bottom:36px;text-align:center}
.titulo-lista{font-size:clamp(24px,2.8vw,34px);font-weight:900;line-height:1.1;letter-spacing:-.02em;text-transform:uppercase}
.cats{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 26px;width:100%;border-bottom:1px solid var(--linha)}
.cats button{position:relative;min-height:46px;padding:0 2px;border:0;background:transparent;color:var(--suave);font-size:14px;font-weight:600;cursor:pointer;transition:color .15s}
.cats button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--roxo);transform:scaleX(0);transition:transform .25s var(--ease)}
.cats button[aria-pressed="true"]{color:var(--roxo)}
.cats button[aria-pressed="true"]::after{transform:scaleX(1)}
@media (hover:hover){.cats button:hover{color:var(--tinta)}}
.grade-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(20px,2.2vw,28px)}
.grade-posts:not(.filtrando) .no-topo{display:none}   /* o artigo do destaque já está no topo */
.sem-resultado,.vazio-blog{margin-top:8px;color:var(--suave)}
.vazio-blog{padding:56px 24px}
.vazio-blog a{color:var(--roxo);text-decoration:underline}

/* cartão de artigo */
.cartao-post{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra-cartao);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s}
.cartao-post[hidden]{display:none}
.cartao-img{display:block;aspect-ratio:1600/840;overflow:hidden;background:var(--roxo-pale)}
.cartao-img .capa{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.sem-capa{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--roxo-fundo),var(--roxo))}
.cartao-txt{display:flex;flex-direction:column;gap:12px;flex:1;padding:20px 22px 22px}
.cartao-post h2,.cartao-post h3{font-size:17px;font-weight:800;line-height:1.3;letter-spacing:-.01em}
.cartao-post h2 a::after,.cartao-post h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--raio)}   /* o cartão inteiro é clicável */
.cartao-resumo{font-size:14.5px;line-height:1.6;color:var(--suave);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cartao-pe{margin-top:auto;padding-top:14px;border-top:1px solid var(--linha2);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--suave)}
.ler{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--roxo)}
.ler svg{width:15px;height:15px;transition:transform .2s var(--ease)}
@media (hover:hover){
  .cartao-post:hover{transform:translateY(-3px);border-color:var(--roxo);box-shadow:0 10px 30px rgb(130 10 209 / .08)}
  .cartao-post:hover .capa{transform:scale(1.04)}
  .cartao-post:hover .ler svg{transform:translateX(4px)}
}
.cartao-post:focus-within{border-color:var(--roxo)}
.cartao-post a:focus-visible{outline:none}
.cartao-post a:focus-visible::after{outline:3px solid var(--roxo);outline-offset:-3px}
/* o cartão grande do topo */
.cartao-post.em-destaque{border-radius:16px;box-shadow:var(--sombra-elevada)}
.cartao-post.em-destaque h2 a::after{border-radius:16px}
.cartao-post.em-destaque .cartao-txt{padding:22px 26px 24px}
.cartao-post.em-destaque h2{font-size:clamp(20px,1.9vw,24px);font-weight:900;line-height:1.2;letter-spacing:-.02em}
.cartao-post.em-destaque .cartao-resumo{-webkit-line-clamp:2}

/* chamada no fim da lista */
.faixa-cta{margin-top:clamp(56px,7vw,96px);margin-bottom:clamp(56px,7vw,96px)}
.faixa-in{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;padding:clamp(28px,3.6vw,48px) clamp(24px,4vw,56px);border-radius:0 24px 0 24px;background:var(--roxo);color:#fff}
.faixa-in::after{content:"";position:absolute;right:-40px;top:0;bottom:0;width:120px;background:var(--dourado);opacity:.9;transform:skewX(var(--corte));transform-origin:0 100%;pointer-events:none}
.faixa-txt{position:relative;z-index:1;flex:1 1 420px;max-width:640px}
.faixa-cta .rot{color:#fff}
.faixa-cta h2{font-size:clamp(24px,2.8vw,36px);font-weight:900;line-height:1.08;letter-spacing:-.02em;text-transform:uppercase;color:#fff}
.faixa-txt p:not(.rot){margin-top:12px;font-size:16.5px;line-height:1.65;color:rgb(255 255 255 / .85)}
.faixa-acoes{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-right:clamp(0px,6vw,80px)}
.faixa-cta a:focus-visible{outline-color:#fff}

/* ---------------------------------------------------------------- artigo */
.post-cab{padding:clamp(28px,4vw,48px) 0 clamp(24px,3vw,36px)}
.migalhas ol{list-style:none;display:flex;flex-wrap:wrap;gap:0 10px;margin:0 0 18px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.migalhas li+li::before{content:"/";margin-right:10px;color:var(--linha)}
.migalhas a{display:inline-flex;align-items:center;min-height:36px;transition:color .15s}
.migalhas span{display:inline-flex;align-items:center;min-height:36px}
@media (hover:hover){.migalhas a:hover{color:var(--roxo)}}
.post-cab-in{max-width:780px;margin:0 auto}
/* com índice lateral: os dados do artigo ficam na coluna do índice e o título na coluna do texto */
.post-cab.com-lado .post-cab-in{max-width:none;display:grid;grid-template-columns:260px minmax(0,780px);gap:clamp(32px,5vw,72px);align-items:end}
.post-cab.com-lado .cab-meta{grid-column:1;grid-row:1;padding-bottom:4px}
.post-cab.com-lado .cab-txt{grid-column:2;grid-row:1}
.post-cab.com-lado .cab-meta .meta{flex-direction:column;align-items:flex-start;gap:10px}
.post-cab.com-lado .assinatura{flex-direction:column;align-items:flex-start;gap:16px;margin-top:22px;padding-top:20px}
.post-cab.com-lado .compartilhar{margin-left:0;flex-wrap:wrap}
.post-cab.com-lado .compartilhar>span{width:100%;margin-bottom:2px}
.cab-meta{margin-top:24px}
.post-cab.com-lado .cab-meta{margin-top:0}
@media (max-width:1023px){
  .post-cab.com-lado .post-cab-in{display:block;max-width:780px;margin:0 auto}
  .post-cab.com-lado .cab-meta{margin-top:24px}
  .post-cab.com-lado .cab-meta .meta{flex-direction:row;align-items:center}
  .post-cab.com-lado .assinatura{flex-direction:row;align-items:center}
  .post-cab.com-lado .compartilhar{margin-left:auto}.post-cab.com-lado .compartilhar>span{width:auto;margin-bottom:0}
}
.post-cab h1{margin-top:4px;font-size:clamp(28px,3.8vw,46px);font-weight:900;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.post-cab .lead{margin-top:18px;font-size:clamp(17px,1.7vw,20px);line-height:1.6;color:var(--suave)}
.assinatura{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;margin-top:28px;padding-top:22px;border-top:1px solid var(--linha)}
.avatar{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;object-fit:contain;padding:7px;background:#fff;border:1px solid var(--linha);color:var(--roxo);font-weight:900;font-size:15px}
.assinatura>div:not(.compartilhar){display:grid;gap:1px;font-size:13.5px;color:var(--suave)}
.assinatura b{color:var(--tinta);font-size:15px;font-weight:800}
.assinatura a b{text-decoration:underline;text-decoration-color:var(--linha);text-underline-offset:.2em}
@media (hover:hover){.assinatura a:hover b{color:var(--roxo)}}
.compartilhar{display:flex;align-items:center;gap:6px;margin-left:auto}
.compartilhar>span{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--suave);margin-right:4px}
.compartilhar a,.compartilhar button{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--linha);background:#fff;color:var(--tinta);cursor:pointer;padding:0;transition:background .15s,border-color .15s,color .15s,transform .15s}
.compartilhar svg{width:18px;height:18px}
@media (hover:hover){.compartilhar a:hover,.compartilhar button:hover{background:var(--roxo);border-color:var(--roxo);color:#fff;transform:translateY(-2px)}}
.copiado{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--tinta);color:#fff;font-size:12.5px;font-weight:600;border-radius:6px;padding:5px 9px;pointer-events:none}
.copiado:empty{display:none}
@media (max-width:619px){.compartilhar{margin-left:0;width:100%}}
.post-capa{margin:0}
.post-capa .capa{width:100%;aspect-ratio:1600/840;object-fit:cover;border-radius:0 24px 0 24px;background:var(--roxo-pale)}
@media (max-width:619px){.post-capa .wrap{padding:0}.post-capa .capa{border-radius:0}}

.post-grade{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(32px,5vw,72px);margin-top:clamp(32px,5vw,56px);align-items:start}
.post-corpo{max-width:740px;min-width:0;width:100%}
.post-corpo.sem-lado{grid-column:1/-1;margin:0 auto}
.post-lado{position:sticky;top:104px;display:grid;gap:22px}
.indice p{margin-bottom:8px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--roxo)}
.indice ol{list-style:none;border-left:2px solid var(--linha)}
.indice a{display:block;padding:7px 0 7px 14px;margin-left:-2px;border-left:2px solid transparent;font-size:14px;line-height:1.4;color:var(--suave);transition:color .15s,border-color .15s}
.indice a[aria-current="true"]{color:var(--tinta);font-weight:700;border-left-color:var(--roxo)}
@media (hover:hover){.indice a:hover{color:var(--roxo)}}
.lado-cta{position:relative;overflow:hidden;padding:22px;border-radius:0 18px 0 18px;background:var(--roxo);color:rgb(255 255 255 / .85)}
.lado-cta::after{content:"";position:absolute;right:-18px;top:0;bottom:0;width:36px;background:var(--dourado);transform:skewX(var(--corte));transform-origin:0 100%}
.lado-cta b{position:relative;z-index:1;display:block;max-width:20ch;color:#fff;font-size:16px;font-weight:900;line-height:1.25;text-transform:uppercase}
.lado-cta p{position:relative;z-index:1;margin-top:8px;max-width:24ch;font-size:13.5px;line-height:1.55}
.lado-cta .btn{position:relative;z-index:1;margin-top:16px;height:44px;padding:0 18px;font-size:12px;width:100%}
.lado-cta .btn:focus-visible{outline-color:#fff}
@media (max-width:1023px){
  .post-grade{grid-template-columns:minmax(0,1fr)}
  .post-lado{position:static;order:-1}
  .lado-cta{display:none}
  .indice{padding:16px 18px;border:1px solid var(--linha);border-radius:var(--raio);background:var(--superficie)}
  .post-corpo{margin:0 auto}
}

/* resposta rápida: o cartão de canto recortado do site, com o marcador dourado do corte do Z */
.resposta-rapida{position:relative;margin:0 0 40px;padding:24px 26px 22px 30px;border:1px solid #E9D5FB;border-radius:0 20px 0 20px;background:var(--roxo-pale);color:var(--tinta);font-size:17px;line-height:1.7}
.resposta-rapida::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--roxo);border-radius:0}
.rr-rot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:14px;border-bottom:1px dashed #D8B4FE;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--roxo)}
.rr-rot span:first-child{display:inline-flex;align-items:center;gap:10px}
.rr-rot span:first-child::before{content:"";width:14px;height:10px;background:var(--dourado);transform:skewX(var(--corte))}
.rr-marca{font-weight:900;letter-spacing:.04em;color:var(--roxo-claro)}
.resposta-rapida p+p{margin-top:10px}

/* texto do artigo */
.texto{font-size:17.5px;line-height:1.8;color:var(--texto)}
.texto>*+*{margin-top:1.15em}
.texto h2{margin-top:2.1em;font-size:clamp(22px,2.4vw,28px);font-weight:900;line-height:1.2;letter-spacing:-.02em;color:var(--tinta)}
.texto h3{margin-top:1.8em;font-size:clamp(18px,1.9vw,21px);font-weight:800;line-height:1.3;letter-spacing:-.01em;color:var(--tinta)}
.texto h4{margin-top:1.6em;font-size:17.5px;font-weight:800;color:var(--tinta)}
.texto h2+*,.texto h3+*,.texto h4+*{margin-top:.6em}
.texto strong{color:var(--tinta);font-weight:700}
.texto a{color:var(--roxo);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-decoration-color:rgb(130 10 209 / .35);text-underline-offset:.2em}
@media (hover:hover){.texto a:hover{text-decoration-color:currentColor}}
.texto ul,.texto ol{padding-left:1.4em}
.texto li+li{margin-top:.5em}
.texto li::marker{color:var(--roxo);font-weight:800}
.texto blockquote{margin-left:0;margin-right:0;padding:18px 22px;border-left:4px solid var(--roxo);border-radius:0 8px 8px 0;background:var(--roxo-pale);font-size:18px;font-weight:600;font-style:italic;line-height:1.6;color:var(--roxo)}
.texto .dica{position:relative;padding:16px 18px 16px 50px;border-radius:6px;background:var(--roxo-pale);color:var(--roxo);font-size:15.5px;font-weight:600;line-height:1.6}
.texto .dica::before{content:"!";position:absolute;left:16px;top:16px;width:22px;height:22px;border-radius:50%;background:var(--roxo);color:#fff;font-weight:900;font-size:13px;font-style:normal;display:grid;place-items:center;line-height:1}
.texto .dica a{color:var(--roxo-fundo)}
.texto figure{margin-left:0;margin-right:0}
.texto figure img{width:100%;border-radius:var(--raio)}
.texto figcaption{margin-top:10px;font-size:14px;color:var(--suave);text-align:center}
.texto hr{border:0;height:1px;background:var(--linha);margin:2.4em 0}
.texto mark{background:var(--roxo-pale);color:var(--tinta);padding:0 .15em;border-radius:3px}
.tabela{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--raio)}
.texto table{width:100%;min-width:480px;border-collapse:collapse;font-size:15px;line-height:1.5}
.texto th,.texto td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--linha)}
.texto thead th{background:var(--tinta);color:#fff;font-weight:700;font-size:13.5px}
.texto tbody tr:nth-child(even){background:var(--superficie)}
.texto tbody tr:last-child td{border-bottom:0}

/* perguntas frequentes */
.faq{margin-top:56px}
.faq h2{margin-bottom:16px;font-size:clamp(22px,2.4vw,28px);font-weight:900;letter-spacing:-.02em}
.faq details{border:1px solid var(--linha);border-radius:var(--raio);background:#fff;transition:border-color .2s}
.faq details+details{margin-top:10px}
.faq details[open]{border-color:var(--roxo)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:16px 22px;font-size:16px;font-weight:700;line-height:1.4;color:var(--tinta)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23820AD1' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline-offset:-3px}
.faq-r{padding:14px 22px 20px;border-top:1px solid var(--linha2);font-size:16px;line-height:1.7;color:var(--suave)}
.faq-r p+p{margin-top:10px}

/* chamada no fim do artigo */
.cta-post{position:relative;overflow:hidden;margin-top:56px;padding:clamp(26px,3.4vw,40px);border-radius:0 24px 0 24px;background:var(--roxo);color:rgb(255 255 255 / .85);display:grid;gap:22px}
.cta-post::after{content:"";position:absolute;right:-30px;top:0;bottom:0;width:70px;background:var(--dourado);transform:skewX(var(--corte));transform-origin:0 100%;pointer-events:none}
.cta-post>div{position:relative;z-index:1}
.cta-post .rot{color:#fff;margin-bottom:10px}
.cta-post h2{max-width:24ch;color:#fff;font-size:clamp(22px,2.4vw,28px);font-weight:900;line-height:1.15;letter-spacing:-.02em;text-transform:uppercase}
.cta-post p:not(.rot){margin-top:10px;max-width:56ch;font-size:16px;line-height:1.65}
.cta-acoes{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center}
.cta-post a:focus-visible{outline-color:#fff}
.post-pe{margin-top:36px;padding-top:24px;border-top:1px solid var(--linha);display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.post-pe .compartilhar{margin-left:0;width:auto}
.voltar{display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--roxo);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.35em;text-decoration-color:rgb(130 10 209 / .3)}
.relacionados{margin-top:clamp(64px,8vw,104px);padding:clamp(48px,6vw,72px) 0;background:var(--superficie);border-top:1px solid var(--linha)}
.relacionados h2{margin-bottom:28px;font-size:clamp(24px,2.8vw,34px);font-weight:900;letter-spacing:-.02em;text-transform:uppercase}
.relacionados+.rodape-site{border-top:0}
main:not(:has(.relacionados,.faixa-cta)){padding-bottom:64px}

@media (prefers-reduced-motion:reduce){.progresso{display:none}}