/* O blog público: só o que é do blog, sobre os tokens do estilo.css da versão em uso (--papel, --tinta,
   --magenta-texto, --raio…). O topo, o rodapé e a tipografia vêm do estilo.css. */
.blog { width: min(100% - 2 * var(--margem), 72rem); margin-inline: auto; padding-block: clamp(96px, 12vw, 160px) var(--secao); }
.blog h1 { max-width: 20ch; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.022em; }
.blog a { color: var(--magenta-texto); }
.blog img, .blog iframe, .blog video { max-width: 100%; height: auto; border-radius: var(--raio); }
.blog-cartao { border: 1px solid var(--fio); border-radius: var(--raio); background: var(--folha); }

/* ───────── Páginas do blog (Tarefa 8): lista, post, 404 e 503 ───────── */
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.blog h1 { max-width: 24ch; }
.blog .meta { margin-top: 14px; font-size: var(--t-micro); font-weight: 500; letter-spacing: .08em; color: var(--tinta-2); }
.blog .meta a { color: inherit; }
.blog .rotulo { margin-bottom: 24px; max-width: none; font-size: var(--t-micro); font-weight: 500; line-height: 1.3; letter-spacing: .18em; text-transform: uppercase; color: var(--magenta-texto); }
.blog-cab { display: grid; gap: 20px; margin-bottom: clamp(32px, 5vw, 64px); }
.blog-cab .lead { max-width: 36em; color: var(--tinta-2); }

/* busca e categorias */
.busca { display: flex; gap: 10px; max-width: 32rem; }
.busca input { flex: 1; min-width: 0; min-height: 54px; padding: 0 16px; border: 1px solid var(--fio-forte); border-radius: var(--raio); background: var(--folha); }
.categorias ul { display: flex; flex-wrap: wrap; gap: 8px; }
.categorias a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--fio-forte); border-radius: var(--raio); color: var(--tinta);
  font-size: var(--t-micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }

/* cartões e destaque */
.grade { display: grid; gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.cartao, .relacionado { display: grid; align-content: start; gap: 16px; }
.cartao-capa, .destaque-capa { display: block; overflow: hidden; border-radius: var(--raio); background: var(--areia); }
.cartao-capa img, .destaque-capa img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
.cartao-texto { display: grid; gap: 8px; }
.cartao h2, .cartao h3, .relacionado h3 { font-size: var(--t-h3); line-height: 1.12; letter-spacing: -.015em; }
.cartao h2 a, .cartao h3 a, .relacionado h3 a, .destaque h2 a { color: var(--tinta); text-decoration: none; }
.cartao-cat { font-size: var(--t-micro); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--magenta-texto); }
.cartao-resumo { color: var(--tinta-2); }
.destaque { display: grid; gap: clamp(20px, 3vw, 48px); align-items: center; margin-bottom: clamp(40px, 6vw, 88px); padding-bottom: clamp(40px, 6vw, 88px); border-bottom: 1px solid var(--fio); }
.destaque-capa img { aspect-ratio: 16 / 10; }
.destaque-texto { display: grid; gap: 14px; }
.destaque h2 { max-width: 20ch; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.022em; }
@media (min-width: 900px) { .destaque { grid-template-columns: 1.3fr 1fr; } }
.vazio { color: var(--tinta-2); }

/* páginas numeradas */
.paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: clamp(40px, 6vw, 80px); }
.paginacao ol { display: flex; flex-wrap: wrap; gap: 4px; }
.paginacao a, .paginacao [aria-current] { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: var(--raio); text-decoration: none; }
.paginacao [aria-current] { background: var(--magenta); color: #fff; }
.paginacao a { border: 1px solid var(--fio-forte); color: var(--tinta); }

/* post */
.blog-post article { display: block; }
.post-cab { display: grid; gap: 18px; max-width: 52rem; margin-bottom: clamp(28px, 4vw, 56px); }
.trilha ol { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: var(--t-micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.trilha li + li::before { content: '›'; margin-right: 10px; }
.trilha a { color: inherit; }
.subtitulo { font-size: var(--t-lead); font-weight: 300; line-height: 1.4; color: var(--tinta-2); }
.autoria { display: inline-flex; align-items: center; gap: 10px; }
.autoria img { width: 40px; height: 40px; border-radius: var(--raio); object-fit: cover; }
.post-capa { margin: 0 0 clamp(32px, 5vw, 64px); }
.post-capa img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-capa figcaption, .post-corpo figcaption { margin-top: 10px; font-size: var(--t-micro); color: var(--tinta-2); }
.post-layout { display: grid; gap: 28px; }
@media (min-width: 1100px) {
  .post-layout { gap: clamp(32px, 5vw, 80px); align-items: start; }
  .sumario { position: sticky; top: 96px; }
  /* no computador o sumário fica sempre aberto, ao lado */
  .sumario::details-content { content-visibility: visible; }
  .sumario summary { pointer-events: none; }
}
.sumario { border: 1px solid var(--fio); border-radius: var(--raio); background: var(--folha); }
.sumario summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none;
  font-size: var(--t-micro); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--magenta-texto); }
.sumario summary::-webkit-details-marker { display: none; }
.sumario summary::after { content: '+'; }
.sumario[open] summary::after { content: '−'; }
.sumario ol { display: grid; gap: 4px; padding: 0 16px 16px; }
.sumario a { display: block; padding: 6px 0; color: var(--tinta); font-size: .95em; line-height: 1.35; text-decoration: none; }
.sumario .n3 { padding-left: 14px; }
@media (min-width: 1100px) { .sumario summary::after, .sumario[open] summary::after { content: none; } }  /* depois das regras acima, para vencê-las */
.sumario a[aria-current] { color: var(--magenta-texto); font-weight: 500; }

/* corpo do post (o que o renderizador produz) */
.post-corpo { min-width: 0; }
.post-corpo > * + * { margin-top: 1.1em; }
.post-corpo h2 { max-width: none; margin-top: 2em; font-size: var(--t-h3); line-height: 1.12; }
.post-corpo h3 { margin-top: 1.6em; font-size: var(--t-lead); font-weight: 400; }
.post-corpo h4 { margin-top: 1.4em; font-weight: 500; }
.post-corpo ul, .post-corpo ol { padding-left: 1.4em; list-style: revert; }
.post-corpo li + li { margin-top: .4em; }
.post-corpo .centro { text-align: center; }
.post-corpo blockquote { margin-inline: 0; padding-left: 1.2em; border-left: 2px solid var(--magenta); font-size: var(--t-citacao); font-style: italic; }
.post-corpo figure { margin-inline: 0; }
/* Fotos nas 3 larguras. Texto = a coluna; larga e cheia saem dela: no celular a larga é a coluna inteira e a cheia vai de borda a borda;
   no computador a larga ocupa a coluna toda (mais larga que o texto) e a cheia segue até a borda direita da janela. */
main#conteudo { overflow-x: clip; }  /* a foto cheia usa 100vw, que inclui a barra de rolagem: sem isso a página rolaria de lado */
.post-corpo .foto-cheia { width: 100vw; margin-inline: calc(50% - 50vw); }
.post-corpo .foto-cheia img { border-radius: 0; }
.post-corpo .foto-cheia figcaption { padding-inline: var(--margem); }
@media (min-width: 1100px) {
  .post-layout { grid-template-columns: 16rem minmax(0, 1fr); }
  .post-corpo > * { max-width: 44rem; }
  .post-corpo > .foto-larga, .post-corpo > .foto-cheia { max-width: none; }
  .post-corpo > .foto-larga { width: auto; margin-inline: 0; }
  .post-corpo > .foto-cheia figcaption { padding-left: 0; }
  .post-corpo > .foto-cheia { width: auto; margin-inline: 0 calc((min(100vw - 2 * var(--margem), 72rem) - 100vw) / 2); }
}
.post-corpo .foto img { width: 100%; cursor: zoom-in; }
.post-corpo .foto:not([data-ampliar]) img { cursor: auto; }
.post-corpo .credito { font-style: italic; }
.post-corpo hr { border: 0; border-top: 1px solid var(--fio); }
.post-corpo mark { background: #FFE9B8; color: inherit; border-radius: 3px; }
.post-corpo .mt-pessego { background: #FDE3DA; }
.post-corpo .mt-rosa { background: #FFD3E1; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.post-corpo .cor-magenta { color: var(--magenta-texto); }
.post-corpo .tabela { overflow-x: auto; border: 1px solid var(--fio); border-radius: var(--raio); }
.post-corpo table { width: 100%; border-collapse: collapse; font-size: .95em; }
.post-corpo th, .post-corpo td { min-width: 8rem; padding: 10px 14px; border-bottom: 1px solid var(--fio); text-align: left; vertical-align: top; }
.post-corpo .caixa { padding: 18px 20px; border: 1px solid var(--fio); border-radius: var(--raio); background: var(--areia); }
.post-corpo .caixa-atencao { border-color: var(--magenta); }
.post-corpo .caixa-rotulo { margin: 0 0 6px; font-size: var(--t-micro); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--magenta-texto); }
.post-corpo .checklist { padding-left: 0; list-style: none; }
.post-corpo .checklist li { display: flex; gap: 10px; }
.post-corpo .checklist-caixa { flex: none; width: 18px; height: 18px; margin-top: .35em; border: 1px solid var(--fio-forte); border-radius: 4px; }
.post-corpo .feito .checklist-caixa { background: var(--magenta); border-color: var(--magenta); }
.post-corpo .video { position: relative; aspect-ratio: 16 / 9; background: var(--tinta); border-radius: var(--raio); overflow: hidden; }
.post-corpo .video-vertical { aspect-ratio: 9 / 16; max-width: 22rem; }
.post-corpo .video-play { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--raio); background: var(--tinta); overflow: hidden; cursor: pointer; }
.post-corpo .video-play img { width: 100%; height: 100%; object-fit: cover; }
.post-corpo .video-play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }  /* a figura tem overflow: hidden, então o anel vai por dentro */
.post-corpo .video-icone { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: var(--magenta); }
.post-corpo .video-icone::after { content: ''; position: absolute; left: 25px; top: 20px; border: 12px solid transparent; border-left: 18px solid #fff; }
.post-corpo iframe { width: 100%; height: 100%; border: 0; }
.bloco-fim { max-width: 44rem; margin-top: clamp(40px, 6vw, 80px); padding: 24px; border: 1px solid var(--fio); border-radius: var(--raio); background: var(--folha); }
.bloco-fim > * + * { margin-top: .9em; }

/* compartilhar e relacionados */
.compartilhar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: clamp(32px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--fio); }
.compartilhar-rotulo { font-size: var(--t-micro); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.compartilhar ul { display: flex; flex-wrap: wrap; gap: 8px; }
.compartilhar a, .compartilhar button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--fio-forte); border-radius: var(--raio); background: transparent; color: var(--tinta); cursor: pointer;
  font-size: var(--t-micro); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.relacionados { margin-top: clamp(56px, 8vw, 112px); padding-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--fio); }

/* foto ampliada (o <dialog> que o blog.js cria) */
.ampliada { width: min(100vw - 24px, 1400px); max-width: none; max-height: 100dvh; padding: 0; border: 0; background: transparent; color: var(--creme); }
.ampliada::backdrop { background: rgba(47, 47, 43, .9); }
.ampliada img { display: block; width: auto; max-width: 100%; max-height: calc(100dvh - 140px); margin-inline: auto; border-radius: var(--raio); object-fit: contain; }
.ampliada p { margin-top: 10px; text-align: center; font-size: var(--t-micro); }
.ampliada p:empty { display: none; }
.ampliada-fechar { display: block; min-height: 44px; margin: 0 0 10px auto; padding: 0 16px; border: 1px solid currentColor; border-radius: var(--raio); background: transparent; color: inherit; cursor: pointer;
  font-size: var(--t-micro); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }

/* ───────── Mídia rica (Tarefa 18): galeria, antes/depois, Instagram, arquivo, mapa, perguntas, cartão de post e notas ───────── */
.post-corpo .galeria { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.post-corpo .galeria-foto { margin: 0; }
.post-corpo .galeria-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; }

/* antes/depois: sem JS uma foto embaixo da outra; com JS sobrepostas, a de depois cortada em --corte (o blog.js põe o controle).
   Pela media query, e não por classe posta no JS, para a página não pular quando o script roda. */
.post-corpo .antes-depois-fotos { display: grid; gap: 12px; }
.post-corpo .antes-depois-fotos > div { position: relative; }
.post-corpo .antes-depois img { display: block; width: 100%; }
.post-corpo .antes-depois-rotulo { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: var(--raio); background: rgba(47, 47, 43, .78); color: #fff;
  font-size: var(--t-micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
@media (scripting: enabled) {
  .post-corpo .antes-depois-fotos { position: relative; gap: 0; overflow: hidden; border-radius: var(--raio); --corte: 50%; }
  .post-corpo .antes-depois-fotos > div { grid-area: 1 / 1; }
  .post-corpo .antes-depois-fotos img { height: 100%; object-fit: cover; border-radius: 0; }
  .post-corpo .antes-depois-depois { clip-path: inset(0 0 0 var(--corte)); }
  .post-corpo .antes-depois-depois .antes-depois-rotulo { left: auto; right: 12px; }
  .post-corpo .antes-depois-fotos::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--corte); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
}
.post-corpo .antes-depois input[type=range] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; appearance: none; background: transparent; cursor: ew-resize; }
.post-corpo .antes-depois input[type=range]::-webkit-slider-thumb { appearance: none; width: 44px; height: 44px; border: 2px solid #fff; border-radius: var(--raio); background: var(--magenta); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.post-corpo .antes-depois input[type=range]::-moz-range-thumb { width: 44px; height: 44px; border: 2px solid #fff; border-radius: var(--raio); background: var(--magenta); }
.post-corpo .antes-depois input[type=range]:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

/* Instagram (cartão; o embed oficial entra no lugar do botão quando abre) */
.post-corpo .instagram { display: grid; gap: 10px; max-width: 30rem; padding: 14px; border: 1px solid var(--fio); border-radius: var(--raio); background: var(--folha); }
.post-corpo .instagram-abrir { display: grid; gap: 10px; width: 100%; padding: 0; border: 0; background: transparent; color: var(--tinta); text-align: left; cursor: pointer; }
.post-corpo .instagram-abrir img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.post-corpo .instagram-chamada, .post-corpo .post-mapa-chamada, .post-corpo .arquivo-acao, .post-corpo .cartao-post-rotulo {
  font-size: var(--t-micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--magenta-texto); }
.post-corpo .instagram-abrir[aria-busy] { opacity: .6; cursor: progress; }
.post-corpo .instagram figcaption { margin: 0; }
.post-corpo .instagram-link { justify-self: start; }
.post-corpo .instagram blockquote.instagram-media { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }  /* só até o embed trocar pelo iframe */
.post-corpo .instagram iframe { height: auto; min-height: 480px; }

/* arquivo para baixar */
.post-corpo .arquivo a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 16px 20px; border: 1px solid var(--fio-forte); border-radius: var(--raio); background: var(--folha); color: var(--tinta); text-decoration: none; }
.post-corpo .arquivo-nome { font-weight: 500; overflow-wrap: anywhere; }
.post-corpo .arquivo-meta { font-size: var(--t-micro); color: var(--tinta-2); }

/* mapa: fachada no tamanho do mapa (a página não pula no clique) */
.post-corpo .post-mapa { display: grid; gap: 10px; }
.post-corpo .post-mapa-abrir, .post-corpo .post-mapa iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--raio); }
.post-corpo .post-mapa-abrir { display: grid; place-content: center; gap: 10px; padding: 24px; border: 1px solid var(--fio); background: var(--areia); color: var(--tinta); text-align: center; cursor: pointer; }
.post-corpo .post-mapa-endereco { font-size: var(--t-lead); line-height: 1.3; }
.post-corpo .post-mapa-link { justify-self: start; font-size: var(--t-micro); }

/* perguntas frequentes */
.post-corpo .post-faq { border-top: 1px solid var(--fio); }
.post-corpo .post-faq details { border-bottom: 1px solid var(--fio); }
.post-corpo .post-faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 500; cursor: pointer; list-style: none; }
.post-corpo .post-faq summary::-webkit-details-marker { display: none; }
.post-corpo .post-faq summary::after { content: '+'; color: var(--magenta-texto); }
.post-corpo .post-faq details[open] summary::after { content: '−'; }
.post-corpo .post-faq details > div { padding-bottom: 16px; }
.post-corpo .post-faq details > div > * + * { margin-top: .8em; }

/* cartão de link para outro post */
.post-corpo .cartao-post a { display: flex; align-items: center; gap: 16px; padding: 12px; border: 1px solid var(--fio-forte); border-radius: var(--raio); background: var(--folha); color: var(--tinta); text-decoration: none; }
.post-corpo .cartao-post-capa { flex: none; width: clamp(88px, 22vw, 140px); }
.post-corpo .cartao-post-capa img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.post-corpo .cartao-post-texto { display: grid; gap: 6px; }
.post-corpo .cartao-post-titulo { font-size: var(--t-lead); line-height: 1.25; }

/* notas de fonte */
.post-corpo sup a { padding: 0 2px; font-size: .85em; text-decoration: none; }
.post-corpo .notas-fim { margin-top: 2.4em; padding-top: 18px; border-top: 1px solid var(--fio); }
.post-corpo .notas { font-size: .9em; color: var(--tinta-2); }
.post-corpo .notas li:target { color: var(--tinta); }
.post-corpo .notas a { text-decoration: none; }

/* captação (Tarefa 19): WhatsApp, cartões de condomínio, região e imóvel; valem no corpo e no bloco do fim */
.blog .post-zap { margin-block: 1.4em; }
.blog .post-zap-botao { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: var(--raio); background: var(--magenta); color: #fff;
  font-size: var(--t-micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.blog .post-zap-botao:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.blog .cartao-local, .blog .cartao-imovel { margin-block: 1.4em; }
.blog .cartao-local a, .blog .cartao-imovel a, .blog .cartao-imovel:not(:has(a)) { display: flex; align-items: center; gap: 16px; padding: 12px; border: 1px solid var(--fio-forte); border-radius: var(--raio); background: var(--folha); color: var(--tinta); text-decoration: none; }
.blog .cartao-local-foto, .blog .cartao-imovel-foto { flex: none; width: clamp(110px, 28vw, 200px); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--raio); background: var(--areia); }
.blog .cartao-local-foto img, .blog .cartao-imovel-foto img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.blog .cartao-local-texto, .blog .cartao-imovel-texto { display: grid; gap: 6px; min-width: 0; }
.blog .cartao-local-rotulo, .blog .cartao-imovel-rotulo { font-size: var(--t-micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--magenta-texto); }
.blog .cartao-local-nome, .blog .cartao-imovel-titulo { font-size: var(--t-lead); line-height: 1.25; overflow-wrap: anywhere; }
.blog .cartao-local-linha, .blog .cartao-imovel-dados { font-size: var(--t-micro); color: var(--tinta-2); }
.blog .cartao-imovel-preco { font-weight: 500; }
.blog .cartao-local a:hover .cartao-local-nome, .blog .cartao-imovel a:hover .cartao-imovel-titulo { text-decoration: underline; }
.blog .cartao-local a:focus-visible, .blog .cartao-imovel a:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }

/* No blog a logo do topo aparece sempre (no estilo.css só depois de rolar, regra da home) e o menu já abre espaço para ela. */
body:has(.blog) .topo-logo { opacity: 1; visibility: visible; }
body:has(.blog) .topo-nav { translate: calc(124px + clamp(28px, 3vw, 48px)) 0; }