/*
 * Melhorias de design do blog — doc da agência "Melhorias de Design de Blog e
 * Guia de Bairros", aprovado em 11/11/2026 depois do protótipo
 * (repositório Santailha/prototipoblog, assets/css/prototipo.css).
 *
 * Carrega depois de critico.css, estilo.min.css e blog.css, e só acrescenta ou
 * ajusta. Usa as variáveis do blog.css (--blog-marca, --blog-destaque...).
 *
 * Duas regras do CSS do site valem para qualquer marcação nova e explicam
 * escolhas abaixo:
 *   header { float:left; width:100%; background:#fff }  -> nada de <header> no conteúdo
 *   body li { display:inline-block; list-style:none }   -> as listas novas voltam a ser bloco
 */

:root {
    --bl-papel: #fff;
    --bl-fundo-leitura: #edeff0;
    --bl-linha: #e3e5ea;
}

/* O CSS do site põe `body li { display:inline-block }`: as listas novas voltam a ser bloco. */
/* :where() zera a especificidade das listas, para que regras de item como
   `.blog-body .bl-passo { display:flex }` continuem valendo. */
.blog-main :where(ul[class^="bl-"], ol[class^="bl-"]) > li,
.bl-submenu li { display: block; }

/* ======================================================= 1. SUBMENU */
.bl-submenu {
    float: left;
    width: 100%;
    position: relative;
    z-index: 8;
    background: #fff;
    border-top: 1px solid var(--bl-linha);
    border-bottom: 1px solid var(--bl-linha);
}
.bl-submenu__faixa {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.bl-submenu__marca {
    font-family: var(--blog-display);
    font-weight: 700;
    color: var(--blog-marca);
    font-size: 1rem;
    padding: .85rem 1rem .85rem 0;
    border-right: 1px solid var(--bl-linha);
    flex: 0 0 auto;
}
.bl-submenu__itens {
    display: flex;
    gap: .25rem;
    margin: 0;
    padding: 0;
}
.bl-submenu__itens::-webkit-scrollbar { display: none; }
.bl-submenu__item { position: relative; flex: 0 0 auto; }
.bl-submenu__botao {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: 0;
    padding: .85rem .7rem;
    font: inherit;
    font-size: .92rem;
    font-weight: 500;
    color: #252525;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.bl-submenu__botao svg { transition: transform .15s ease; }
.bl-submenu__item.is-atual > .bl-submenu__botao { color: var(--blog-marca); border-bottom-color: var(--blog-destaque); }
.bl-submenu__botao:hover,
.bl-submenu__item.is-aberto > .bl-submenu__botao { color: var(--blog-marca); }
.bl-submenu__item.is-aberto > .bl-submenu__botao svg { transform: scaleY(-1); }
.bl-submenu__lista {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    margin: 0;
    padding: .5rem;
    background: #fff;
    border-radius: 0 0 var(--blog-raio) var(--blog-raio);
    box-shadow: 0 18px 40px -12px rgba(37, 37, 37, .25);
    border: 1px solid var(--bl-linha);
    border-top: 0;
}
.bl-submenu__item.is-aberto > .bl-submenu__lista { display: block; }
.bl-submenu__lista a {
    display: block;
    padding: .55rem .75rem;
    border-radius: 8px;
    font-size: .9rem;
    color: #252525;
}
.bl-submenu__lista a:hover { background: var(--blog-fundo); color: var(--blog-marca); }

@media (min-width: 992px) {
    .bl-submenu__item:hover > .bl-submenu__lista { display: block; }
    .bl-submenu__item:hover > .bl-submenu__botao { color: var(--blog-marca); }
    /* a última lista abre para a esquerda para não sair da tela */
    .bl-submenu__item:last-child > .bl-submenu__lista { left: auto; right: 0; }
}
@media (max-width: 991.98px) {
    .bl-submenu__faixa { gap: .75rem; }
    .bl-submenu__itens { overflow-x: auto; scrollbar-width: none; }
    /* No celular a faixa rola na horizontal. A lista sobe para o <nav>
       (o item fica estático), para não ser cortada pela rolagem da faixa. */
    .bl-submenu__item { position: static; }
    .bl-submenu__lista {
        left: 0;
        right: 0;
        min-width: 0;
        border-radius: 0 0 var(--blog-raio) var(--blog-raio);
    }
}

/* ======================================================= 2. DOBRAS DA HOME */
.bl-secao {
    float: left;
    width: 100%;
    padding: 3.5rem 0 1rem;
}
.bl-secao--clara {
    background: #fff;
    padding-bottom: 3rem;
    margin-top: 2.5rem;
}
.bl-secao--marca {
    background: var(--blog-marca);
    color: #fff;
    margin-top: 3rem;
    padding-bottom: 3.5rem;
}
.bl-secao--marca .blog-secao,
.bl-secao--marca .bl-secao__sub,
.bl-secao--marca .bl-secao__mais { color: #fff; }
.bl-secao__topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}
.bl-secao__topo .blog-secao { margin: 0 0 .35rem; }
.bl-secao__sub {
    margin: 0;
    color: var(--blog-suave);
    font-size: .98rem;
    max-width: 40rem;
}
.bl-secao__mais {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
    font-size: .92rem;
    color: var(--blog-marca);
    white-space: nowrap;
}
.bl-secao__mais:hover { text-decoration: underline; }

.bl-recentes {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.bl-recentes__lado { display: grid; gap: 1.5rem; }
.bl-grade-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
.bl-grade-guias {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}
.bl-grade-guias .card-blog h3 { font-size: 1.05rem; }
.bl-grade-trilhas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}
.bl-grade-trilhas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bl-grade-ferramentas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}
.bl-recentes .card-blog,
.bl-grade-3 .card-blog,
.bl-grade-guias .card-blog { height: 100%; }

/* índices */
.bl-indices {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 1.25rem;
}
/* sem o artigo de destaque (despublicado ou com outro slug), a grade ocupa tudo */
.bl-indices--sem-destaque { grid-template-columns: 1fr; }
.bl-paginacao-home { padding-top: 0; padding-bottom: 2.5rem; }
.bl-paginacao-home .blog-paginacao { margin-top: 0; }
.bl-indice-destaque {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 100%;
    border-radius: var(--blog-raio);
    overflow: hidden;
    color: #fff;
    box-shadow: var(--blog-sombra);
}
.bl-indice-destaque img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bl-indice-destaque::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(38, 35, 105, .1) 20%, rgba(38, 35, 105, .92) 100%);
}
.bl-indice-destaque__texto {
    position: relative;
    z-index: 1;
    display: grid;
    gap: .4rem;
    padding: 1.5rem;
}
.bl-indice-destaque__texto small {
    color: var(--blog-destaque);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .06em;
}
.bl-indice-destaque__texto strong {
    font-family: var(--blog-display);
    font-size: 1.35rem;
    line-height: 1.25;
}
.bl-indice-destaque__texto span { font-size: .92rem; opacity: .9; }
.bl-indices__grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.bl-indice {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.25rem;
    background: #fff;
    border-radius: var(--blog-raio);
    box-shadow: var(--blog-sombra);
    transition: transform .15s ease, box-shadow .15s ease;
}
.bl-indice:hover { transform: translateY(-3px); box-shadow: var(--blog-sombra-alta); }
.bl-indice__sigla {
    font-family: var(--blog-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--blog-marca);
}
.bl-indice__texto { font-size: .9rem; color: var(--blog-suave); line-height: 1.5; }
.bl-indice__ir {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--blog-marca);
}
.bl-indice__ir svg path { fill: var(--blog-marca); }

/* trilhas (cards) */
.bl-trilha-card {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.5rem;
    border-radius: var(--blog-raio);
    background: #fff;
    color: #252525;
    box-shadow: var(--blog-sombra);
    transition: transform .15s ease;
    height: 100%;
}
.bl-trilha-card:hover { transform: translateY(-3px); }
.bl-trilha-card__publico {
    align-self: flex-start;
    background: var(--blog-destaque);
    color: var(--blog-marca);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .3rem .6rem;
    border-radius: 6px;
}
.bl-trilha-card strong {
    font-family: var(--blog-display);
    font-size: 1.3rem;
    color: var(--blog-marca);
    line-height: 1.25;
}
.bl-trilha-card__resumo { font-size: .92rem; color: var(--blog-suave); line-height: 1.55; }
.bl-trilha-card__meta { font-size: .8rem; color: var(--blog-tenue); margin-top: auto; }
.bl-trilha-card__ir {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    font-size: .9rem;
    color: var(--blog-marca);
}
.bl-trilha-card__ir svg path { fill: var(--blog-marca); }

/* ferramentas */
.bl-ferramenta {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1.5rem;
    background: #fff;
    border-radius: var(--blog-raio);
    border: 1px solid var(--bl-linha);
    color: #252525;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bl-ferramenta:hover { border-color: var(--blog-marca); box-shadow: var(--blog-sombra); }
.bl-ferramenta__icone {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(51, 48, 131, .08);
    color: var(--blog-marca);
}
.bl-ferramenta strong { font-family: var(--blog-display); font-size: 1.1rem; color: var(--blog-marca); }
.bl-ferramenta > span:not([class]) { font-size: .9rem; color: var(--blog-suave); line-height: 1.5; }
.bl-ferramenta__ir {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--blog-marca);
}
.bl-ferramenta__ir svg path { fill: var(--blog-marca); }

@media (max-width: 1199.98px) {
    .bl-grade-guias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bl-grade-trilhas,
    .bl-grade-ferramentas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bl-indices { grid-template-columns: 1fr; }
    .bl-indice-destaque { min-height: 260px; }
}
@media (max-width: 767.98px) {
    .bl-recentes,
    .bl-grade-3,
    .bl-grade-trilhas,
    .bl-grade-trilhas--2,
    .bl-grade-ferramentas { grid-template-columns: 1fr; }
    .bl-grade-guias,
    .bl-indices__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bl-secao { padding-top: 2.5rem; }
}

/* ======================================================= 3. TRILHA */
.bl-capa-trilha .blog-capa__titulo { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.bl-migalhas-clara,
.bl-migalhas-clara a { color: rgba(255, 255, 255, .8); }
.bl-capa-trilha__publico {
    display: inline-block;
    margin: 1rem 0 .5rem;
    background: var(--blog-destaque);
    color: var(--blog-marca);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .3rem .6rem;
    border-radius: 6px;
}
.bl-capa-trilha__meta { color: rgba(255, 255, 255, .85); margin: .75rem 0 0; font-size: .92rem; }
.bl-trilha { float: left; width: 100%; padding: 2.5rem 0 1rem; }
.bl-trilha__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2rem;
    align-items: start;
}
.bl-trilha__lado { position: sticky; top: 1.5rem; display: grid; gap: 1rem; }
.bl-progresso {
    background: #fff;
    border-radius: var(--blog-raio);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--blog-sombra);
    margin-bottom: 1.5rem;
}
.bl-progresso__texto { display: flex; justify-content: space-between; font-size: .92rem; margin-bottom: .6rem; color: var(--blog-suave); }
.bl-progresso__texto strong { color: var(--blog-marca); }
.bl-progresso__barra { height: 8px; background: var(--blog-fundo); border-radius: 99px; overflow: hidden; }
.bl-progresso__barra span { display: block; height: 100%; background: var(--blog-destaque); transition: width .25s ease; }
.bl-etapas { margin: 0; padding: 0; }
.blog-body .bl-etapa {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 1rem;
    padding-bottom: 2rem;
    position: relative;
}
.bl-etapa::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 44px;
    bottom: 0;
    width: 2px;
    background: var(--bl-linha);
}
.bl-etapa:last-child::before { display: none; }
.bl-etapa__num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--blog-marca);
    color: var(--blog-destaque);
    font-family: var(--blog-display);
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.bl-etapa__corpo h2 {
    font-family: var(--blog-display);
    font-size: 1.35rem;
    color: var(--blog-marca);
    margin: .45rem 0 .25rem;
}
.bl-etapa__corpo > p { color: var(--blog-suave); margin: 0 0 1rem; }
.bl-passos { margin: 0; padding: 0; display: grid; gap: .6rem; }
.blog-body .bl-passo {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border-radius: var(--blog-raio);
    padding: .6rem 1rem .6rem .6rem;
    border: 1px solid var(--bl-linha);
}
.bl-passo.is-lido { background: #f6f7f2; }
.bl-passo.is-lido strong { color: var(--blog-suave); }
.bl-passo__link { display: flex; align-items: center; gap: 1rem; flex: 1 1 auto; min-width: 0; color: #252525; }
.bl-passo__link img { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.bl-passo__link strong { display: block; font-size: .98rem; line-height: 1.35; color: var(--blog-marca); }
.bl-passo__link small { display: block; color: var(--blog-tenue); font-size: .8rem; margin-top: .2rem; }
.bl-passo__link:hover strong { text-decoration: underline; }
.bl-passo__lido {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: var(--blog-suave);
    cursor: pointer;
    flex: 0 0 auto;
}
.bl-passo__lido input { accent-color: var(--blog-marca); width: 18px; height: 18px; }
@media (max-width: 991.98px) {
    .bl-trilha__grade { grid-template-columns: 1fr; }
    .bl-trilha__lado { position: static; }
}
@media (max-width: 575.98px) {
    .bl-passo { flex-wrap: wrap; }
    .bl-passo__link img { width: 72px; height: 52px; }
    .blog-body .bl-etapa { grid-template-columns: 34px minmax(0, 1fr); }
    .bl-etapa__num { width: 34px; height: 34px; font-size: .95rem; }
    .bl-etapa::before { left: 16px; top: 34px; }
}

/* caixas genéricas (lateral) */
.bl-caixa {
    display: block;
    background: #fff;
    border-radius: var(--blog-raio);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--blog-sombra);
    color: #252525;
}
.bl-caixa > strong,
.bl-caixa__titulo {
    display: block;
    font-family: var(--blog-display);
    font-size: 1.05rem;
    color: var(--blog-marca);
    margin-bottom: .6rem;
}
.bl-caixa p { font-size: .92rem; color: var(--blog-suave); margin: 0 0 1rem; }
.bl-caixa--marca { background: var(--blog-marca); color: #fff; }
.bl-caixa--marca > strong { color: var(--blog-destaque); }
.bl-caixa--marca p { color: rgba(255, 255, 255, .85); }
.bl-caixa--marca .bt-diagonal { background: var(--blog-destaque); color: var(--blog-marca); }
.bl-caixa--trilha { border-left: 4px solid var(--blog-destaque); }
.bl-caixa--trilha small { display: block; font-size: .75rem; color: var(--blog-tenue); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.bl-caixa--trilha strong { display: block; font-family: var(--blog-display); color: var(--blog-marca); font-size: 1.1rem; margin: .25rem 0; }
.bl-caixa--trilha span { font-size: .88rem; color: var(--blog-suave); }
.bl-caixa--trilha:hover strong { text-decoration: underline; }
.bl-lista { margin: 0; padding: 0; }
.bl-lista li + li { margin-top: .45rem; }
.bl-lista a { color: var(--blog-marca); font-weight: 600; font-size: .92rem; }
.bl-lista a:hover { text-decoration: underline; }
.bl-lista--pontos li { display: list-item; list-style: disc; margin-left: 1.2rem; color: var(--blog-suave); }
.bl-lista--pontos a { font-weight: 600; }
.bl-nota { font-size: .8rem; color: var(--blog-tenue); margin: 1rem 0 0; }
.bl-nota a { color: var(--blog-marca); text-decoration: underline; }

/* ================================================ PÁGINA DE LEITURA */

/* 5. Destaque no fundo de leitura: o texto num cartão branco sobre fundo cinza */
.bl-leitura {
    float: left;
    width: 100%;
    background: var(--bl-fundo-leitura);
    padding: 1.5rem 0 3rem;
}
.bl-pagina-leitura .blog-main { padding-bottom: 0; background: var(--bl-fundo-leitura); }
.bl-leitura .blog-migalhas { padding: .25rem 0 1rem; }
.bl-leitura__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 2rem;
    align-items: start;
}
.bl-papel {
    background: var(--bl-papel);
    border-radius: var(--blog-raio);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 40px -18px rgba(37, 37, 37, .18);
    padding: 2.5rem 3.25rem 2.75rem;
    min-width: 0;
}
.bl-papel .blog-artigo__cabecalho { padding-top: 0; max-width: none; }
.bl-papel__destaque { margin: 0 0 2.25rem; }
.bl-papel__destaque img {
    width: 100%;
    height: auto;
    max-height: 26rem;
    object-fit: cover;
    border-radius: var(--blog-raio);
}
.bl-papel .blog-artigo__rodape { max-width: none; margin-top: 2.5rem; }

/* 6. Fonte do texto: 17px no computador, 16px no celular (o blog usa 1.08rem = 17,3px) */
.bl-texto.blog-artigo__conteudo {
    max-width: none;
    font-size: 1.0625rem;
    line-height: 1.75;
}
@media (max-width: 767.98px) {
    .bl-texto.blog-artigo__conteudo { font-size: 1rem; line-height: 1.7; }
}

/* 7. Hiperlinks sempre coloridos. No blog, `.blog-artigo__conteudo strong`
   pinta o negrito de #252525 — e um link em negrito fica preto. */
.bl-texto a,
.bl-texto a:visited,
.bl-texto a strong,
.bl-texto a b,
.bl-texto a em,
.bl-texto a span {
    color: #333083;
}
.bl-texto a {
    text-decoration-color: rgba(51, 48, 131, .45);
    font-weight: 600;
}

/* 1. Sidebar fixa: acompanha a rolagem até o fim do artigo */
.bl-lateral { align-self: stretch; }
.bl-lateral__fixa {
    position: sticky;
    top: 5.25rem;
    display: grid;
    gap: 1rem;
}
/* A lateral não pode ser mais alta que a tela, senão o fim dela nunca aparece */
@media (max-height: 820px) and (min-width: 992px) {
    .bl-lateral__fixa .bl-caixa--recentes { display: none; }
    .bl-busca { padding: 1.15rem 1.25rem; }
    .bl-busca__titulo { font-size: 1.25rem; margin-bottom: .6rem; }
}
.bl-busca {
    background: #f5f4ef;
    border-radius: var(--blog-raio);
    padding: 1.5rem;
    box-shadow: var(--blog-sombra);
}
.bl-busca__titulo {
    font-family: var(--blog-display);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    color: #252525;
    margin: 0 0 1rem;
}
.bl-busca__abas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #d9d8d2;
    margin-bottom: 1.1rem;
}
.bl-busca__abas button {
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: .6rem 0;
    font: inherit;
    font-size: 1rem;
    color: #252525;
    cursor: pointer;
    margin-bottom: -1px;
}
.bl-busca__abas button[aria-selected="true"] { color: var(--blog-marca); border-bottom-color: var(--blog-marca); font-weight: 600; }
.bl-campo {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #fff;
    border: 1px solid #d9d8d2;
    border-radius: 12px;
    padding: .5rem .8rem;
    margin-bottom: .75rem;
    color: #5f5f66;
}
.bl-campo > span { display: grid; flex: 1 1 auto; min-width: 0; }
.bl-campo small { font-size: .72rem; color: var(--blog-tenue); }
.bl-campo select {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    color: #252525;
    padding: 0;
    width: 100%;
    cursor: pointer;
}
.bl-campo select:focus { outline: none; }
.bl-campo:focus-within { border-color: var(--blog-marca); }
.bl-busca__ir {
    width: 100%;
    border: 0;
    border-radius: 99px;
    padding: .9rem 1rem;
    margin-top: .35rem;
    background: var(--blog-marca);
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
}
.bl-busca__ir:hover { background: #262369; }
.bl-recentes-lista { margin: 0; padding: 0; }
.bl-recentes-lista li + li { border-top: 1px solid var(--bl-linha); }
.bl-recentes-lista a { display: block; padding: .7rem 0; }
.bl-recentes-lista strong { display: block; color: var(--blog-marca); font-size: .92rem; line-height: 1.35; }
.bl-recentes-lista small { display: block; color: var(--blog-tenue); font-size: .76rem; margin-top: .25rem; }
.bl-recentes-lista a:hover strong { text-decoration: underline; }

/* 4. Mini bio do autor */
.bl-autor {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: start;
    margin-top: 2.5rem;
    padding: 1.5rem;
    border: 1px solid var(--bl-linha);
    border-radius: var(--blog-raio);
    background: #fafafb;
}
.bl-autor__foto {
    width: 112px;
    height: 112px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3a37a0, var(--blog-marca));
    color: var(--blog-destaque);
    font-family: var(--blog-display);
    font-weight: 700;
    font-size: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Foto que não é quadrada (a da Catarina é vertical): recorta em vez de espremer,
       um pouco acima do centro para enquadrar o rosto */
    object-fit: cover;
    object-position: center 20%;
}
.bl-autor__rotulo { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--blog-tenue); font-weight: 700; }
.bl-autor__nome { display: block; font-family: var(--blog-display); font-size: 1.45rem; font-weight: 700; color: #252525; margin-top: .15rem; }
.bl-autor__cargo { display: block; font-size: .88rem; color: var(--blog-suave); margin-bottom: .6rem; }
.bl-autor p { margin: 0; font-size: .98rem; line-height: 1.6; color: #33333a; }
.bl-autor__linkedin { color: #5f5f66; }
.bl-autor__linkedin:hover { color: var(--blog-marca); }
@media (max-width: 575.98px) {
    .bl-autor { grid-template-columns: 72px minmax(0, 1fr); }
    .bl-autor__foto { width: 72px; height: 72px; font-size: 1.8rem; }
    .bl-autor__linkedin { grid-column: 2; }
}

/* 3. Pop-up de compra e locação fixo */
.bl-barra {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    box-shadow: 0 6px 24px -10px rgba(37, 37, 37, .35);
    transform: translateY(-110%);
    transition: transform .25s ease;
}
.bl-barra.is-visivel { transform: none; }
.bl-barra__faixa {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-top: .7rem;
    padding-bottom: .7rem;
}
.bl-barra__marca img { display: block; width: 120px; height: auto; }
.bl-barra__titulo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .92rem;
    color: var(--blog-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 1.25rem;
    border-left: 1px solid var(--bl-linha);
}
.bl-barra__botoes { display: flex; gap: .6rem; flex: 0 0 auto; }
.bl-pilula {
    display: inline-flex;
    align-items: center;
    padding: .55rem 1.2rem;
    border-radius: 99px;
    background: var(--blog-marca);
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
    white-space: nowrap;
}
.bl-pilula:hover { background: #262369; color: var(--blog-destaque); }
.bl-barra__progresso {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: var(--blog-destaque);
}
@media (max-width: 767.98px) {
    /* No celular a barra fica embaixo, perto do polegar ("próximo da barra final") */
    .bl-barra {
        top: auto;
        bottom: 0;
        transform: translateY(110%);
        box-shadow: 0 -6px 24px -10px rgba(37, 37, 37, .35);
    }
    .bl-barra__marca,
    .bl-barra__titulo { display: none; }
    .bl-barra__botoes { width: 100%; }
    .bl-barra__botoes .bl-pilula { flex: 1 1 0; justify-content: center; }
    .bl-barra__progresso { top: 0; bottom: auto; }
}

/* 2. Imóveis relacionados */
.bl-imoveis {
    margin-top: 2.5rem;
    padding: 2rem;
    background: #fff;
    border-radius: var(--blog-raio);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.bl-grade-imoveis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}
.bl-imovel { border: 1px solid var(--bl-linha); overflow: hidden; }
.bl-imovel figure { margin: 0; height: 170px; }
.bl-imovel figure a { display: block; height: 100%; }
.bl-imovel figure img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px 12px 0 0; }
.bl-imovel .imovel-text { padding: .8rem 1rem; }
.bl-imovel ul { padding-left: 0; margin-bottom: 0; }
.bl-imovel ul li { display: inline-block; }
@media (max-width: 1199.98px) {
    .bl-grade-imoveis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .bl-grade-imoveis {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: .5rem;
    }
    .bl-grade-imoveis > * { scroll-snap-align: start; }
    .bl-imoveis { padding: 1.25rem; }
}

/* leitura no tablet e no celular */
@media (max-width: 991.98px) {
    .bl-leitura__grade { grid-template-columns: 1fr; }
    .bl-lateral__fixa { position: static; }
    .bl-papel { padding: 2rem 2rem 2.25rem; }
}
@media (max-width: 575.98px) {
    .bl-leitura { padding-top: 1rem; }
    .bl-leitura > .container { width: 100%; padding: 0 12px; }
    .bl-papel { padding: 1.5rem 1.15rem 1.75rem; border-radius: 10px; }
}

/* ============================================== ajustes de 29/10 (agência) */

/* 1. Card principal dos recentes: a imagem ocupa a altura que sobrava em branco
   (o card estica para acompanhar os dois da direita; a figura fixa de 185px não). */
.bl-recentes__principal .card-blog figure {
    position: relative;
    flex: 1 1 auto;
    height: auto;
    min-height: 320px;
}
.bl-recentes__principal .card-blog figure img {
    position: absolute;
    inset: 0;
}
.bl-recentes__principal .card-blog .texto { flex: 0 0 auto; padding: 1.3rem 1.6rem 1.4rem; }
.bl-recentes__principal .card-blog h3 { font-size: 1.4rem; min-height: 0; margin-bottom: .6rem; }

/* 3. Resumo do painel nos cards: no máximo 3 linhas (2 nos compactos). */
.card-blog__resumo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.card-blog--compacto .card-blog__resumo { -webkit-line-clamp: 2; font-size: .88rem; }

/* 2 e 4. Guia de Bairros: 3 cards por linha, com o resumo. */
.bl-grade-guias {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
.bl-grade-guias .card-blog h3 { font-size: 1.15rem; min-height: 0; }
.bl-secao__rodape {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}
@media (max-width: 991.98px) {
    .bl-grade-guias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .bl-grade-guias { grid-template-columns: 1fr; }
    .bl-recentes__principal .card-blog figure { min-height: 220px; }
}
.bl-secao__rodape .bt-diagonal { border: 1px solid var(--blog-marca); }

/* O CSS do site põe a .bl-leitura em float. Sem o clear, a seção "Continue
   lendo" começava no topo do artigo e o título dela (position:relative) ficava
   por cima do texto e da lateral, engolindo os cliques nos links e no
   "Buscar imóvel". */
.blog-relacionados { clear: both; }

/* Links Mais Buscados no fim dos conteúdos: a marcação é a da home do site
   (.lista-buscas); aqui só o título do bairro, que no blog é h3 (o h2 é o da seção). */
.bl-mais-buscados { margin-top: 2.5rem; }
/* Sem o recuo negativo da .row: as setas alinham com o título e não encostam na borda no celular */
.bl-mais-buscados > .row { margin-left: 0; margin-right: 0; }
.bl-mais-buscados .lista-buscas { padding-left: 0; margin-bottom: 0; }
.bl-mais-buscados .lista-buscas > li { display: block; }
.bl-mais-buscados .lista-buscas li h3 {
    margin: 0;
    font-family: var(--blog-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--blog-marca);
}