/* Blog dentro do site (15/10/2026). Só o que falta: reaproveita estilo.css (topo, rodapé, .artigo, .migalhas,
   .resposta-rapida, .aviso). Mobile first; nada de rolagem lateral da página; alvos de toque com 44 px ou mais. */

/* Faixa de aviso do topo: igual à da página inicial (home.css) */
.home-aviso { margin: 0; background: var(--indigo-escuro); color: #fff; font-size: .875rem; font-weight: 700; line-height: 1.35; text-align: center; padding: 9px 16px; }
.home-aviso a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* "Blog" destacado no menu */
.home-topo .home-menu a[aria-current] { color: var(--indigo); }
@media (min-width: 960px) { .home-topo .home-menu a[aria-current] { box-shadow: inset 0 -3px 0 var(--amarelo); } }

.blog-largo { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.blog-lista { background: #f5f6fb; padding: 20px 0 48px; }
.blog-lista__titulo { color: var(--indigo-escuro); font-size: clamp(1.625rem, 6vw, 2.5rem); margin: .25rem 0 .5rem; }
.blog-lista__frase { color: var(--texto-suave); margin: 0 0 1rem; max-width: 760px; }
.blog-secao-titulo { color: var(--indigo-escuro); font-size: clamp(1.25rem, 4.5vw, 1.625rem); margin: 1.5rem 0 1rem; }
.blog-vazio { background: #fff; border: 1px solid var(--borda); border-radius: 14px; padding: 20px; }

/* Chips de categorias: rolagem lateral só dentro da faixa */
.blog-chips { margin: 0 -16px 20px; }
.blog-chips ul { list-style: none; margin: 0; padding: 4px 16px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.blog-chips ul::-webkit-scrollbar { display: none; }
.blog-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--borda); border-radius: 999px; background: #fff; color: var(--texto); font-weight: 700; font-size: .9375rem; text-decoration: none; white-space: nowrap; }
.blog-chips a:hover { border-color: var(--indigo); color: var(--indigo); }
.blog-chips a[aria-current] { background: var(--indigo); border-color: var(--indigo); color: #fff; }

/* Cards */
.blog-grade { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.blog-card { background: #fff; border: 1px solid #dcdfee; border-radius: 14px; overflow: hidden; min-width: 0; }
.blog-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.blog-card__link:hover .blog-card__titulo, .blog-card__link:focus-visible .blog-card__titulo { color: var(--indigo); text-decoration: underline; }
.blog-card__img { display: block; aspect-ratio: 1200 / 630; background: var(--indigo-claro); overflow: hidden; }
.blog-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-card__img--vazia { background: linear-gradient(135deg, var(--indigo-claro), #f5f6fb); }
.blog-card__corpo { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.blog-card__cat { font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--indigo); }
.blog-card__titulo { margin: 0; font-size: 1.0625rem; line-height: 1.3; color: var(--indigo-escuro); overflow-wrap: anywhere; }
.blog-card__resumo { color: var(--texto-suave); font-size: 1rem; }
.blog-card__data { font-size: .9375rem; color: var(--texto-suave); margin-top: auto; }
.blog-card--destaque { margin-bottom: 20px; }
.blog-card--destaque .blog-card__titulo { font-size: clamp(1.25rem, 5vw, 1.75rem); }
@media (min-width: 600px) { .blog-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) {
  .blog-card--destaque .blog-card__link { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .blog-card--destaque .blog-card__img { aspect-ratio: auto; min-height: 100%; }
  .blog-card--destaque .blog-card__corpo { padding: 28px; justify-content: center; gap: 10px; }
}
@media (min-width: 960px) { .blog-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

/* Paginação */
.blog-pag { margin: 28px 0 0; }
.blog-pag ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.blog-pag__num, .blog-pag__seta { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; color: var(--texto); font-weight: 700; text-decoration: none; }
.blog-pag a:hover { border-color: var(--indigo); color: var(--indigo); }
.blog-pag__num[aria-current] { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.blog-pag__reticencias { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--texto-suave); }

/* Perfil da autora */
.blog-perfil { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--borda); border-radius: 14px; padding: 20px; margin: 8px 0 8px; }
.blog-perfil .blog-lista__titulo { margin: 0; }
.blog-perfil__papel { margin: .25rem 0 0; color: var(--texto-suave); font-weight: 600; }
.blog-perfil__bio { margin: .75rem 0 0; }

/* Avatar (foto ou iniciais) */
.blog-avatar { flex: none; border-radius: 50%; object-fit: cover; }
.blog-avatar--iniciais { display: inline-flex; align-items: center; justify-content: center; background: var(--indigo-claro); color: var(--indigo); font-family: var(--fonte-titulo); font-weight: 800; font-size: 1rem; }
.blog-perfil .blog-avatar--iniciais { font-size: 1.75rem; }

/* Post */
.blog-post { background: #fff; padding-bottom: 0; }
.blog-post > .secao__interno { padding-bottom: 32px; }
.blog-pilula { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--indigo-claro); color: var(--indigo); font-size: .875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.blog-pilula:hover { background: var(--indigo); color: #fff; }
.blog-autoria { display: flex; align-items: center; gap: 12px; margin: 0 0 1rem; }
.blog-autoria p { margin: 0; line-height: 1.35; }
.blog-autoria a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; color: var(--texto); text-decoration: none; }
.blog-autoria a:hover { color: var(--indigo); text-decoration: underline; }
.blog-autoria span { display: block; font-size: .9375rem; color: var(--texto-suave); }
.blog-destaque { margin: 0 0 1.25rem; }
.blog-destaque img { display: block; width: 100%; height: auto; border-radius: 14px; }
.blog-sumario { margin: 0 0 1.5rem; border: 1px solid var(--borda); border-radius: 12px; padding: 0 16px; }
.blog-sumario summary { display: flex; align-items: center; min-height: 48px; font-weight: 800; color: var(--indigo-escuro); cursor: pointer; }
.blog-sumario ol { margin: 0 0 12px; padding-left: 1.25rem; }
.blog-sumario li a { display: block; padding: 10px 0; font-weight: 600; }
.artigo__corpo { overflow-wrap: break-word; }
.artigo__corpo img { display: block; max-width: 100%; height: auto; border-radius: 12px; margin: 1rem auto; }
.artigo__corpo figure { margin: 1.25rem 0; }
.artigo__corpo figcaption { font-size: .9375rem; color: var(--texto-suave); text-align: center; }
.artigo__corpo table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1rem 0; }
.artigo__corpo th, .artigo__corpo td { border: 1px solid var(--borda); padding: 8px 10px; text-align: left; vertical-align: top; }
.artigo__corpo blockquote { margin: 1.25rem 0; padding: .25rem 0 .25rem 1rem; border-left: 4px solid var(--indigo-claro); color: var(--texto-suave); }
.artigo__corpo ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.artigo__corpo h2[id] { scroll-margin-top: 16px; }

/* Produto citado */
.blog-produto { margin: 1.75rem 0; border: 1px solid var(--borda); border-radius: 14px; padding: 14px 16px; }
.blog-produto__rotulo { margin: 0 0 8px; font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.blog-produto__link { display: flex; gap: 14px; align-items: center; color: inherit; text-decoration: none; min-height: 44px; }
.blog-produto__link img { flex: none; width: 96px; height: 96px; object-fit: contain; background: #f5f6fb; border-radius: 10px; }
.blog-produto__texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.blog-produto__texto strong { color: var(--indigo-escuro); line-height: 1.3; }
.blog-produto__preco { font-weight: 800; color: var(--texto); }
.blog-produto__ver { color: var(--indigo); font-weight: 700; text-decoration: underline; }

.blog-aviso { margin: 1.75rem 0; }

/* Sobre a autora */
.blog-sobre { margin: 1.75rem 0 0; padding: 18px; background: var(--indigo-claro); border-left: 5px solid var(--amarelo); border-radius: 12px; }
.blog-sobre__titulo { font-size: 1.125rem; margin: 0 0 12px; }
.blog-sobre__linha { display: flex; gap: 14px; align-items: flex-start; }
.blog-sobre__nome { margin: 0; font-weight: 800; color: var(--indigo-escuro); }
.blog-sobre__bio { margin: 4px 0 0; }
.blog-sobre__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.blog-sobre .blog-avatar--iniciais { background: #fff; }

/* Leia também: no celular, cards horizontais com miniatura; no computador, 3 colunas */
.blog-relacionados { border-top: 1px solid var(--borda); background: #f5f6fb; padding: 8px 0 48px; }
.blog-rel-grade { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.blog-card--rel .blog-card__link { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; }
.blog-card--rel .blog-card__img { height: 100%; aspect-ratio: auto; min-height: 84px; }
.blog-card--rel .blog-card__corpo { padding: 12px 14px; gap: 4px; }
.blog-card--rel .blog-card__titulo { font-size: 1rem; }
@media (min-width: 960px) {
  .blog-rel-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .blog-card--rel .blog-card__link { display: flex; }
  .blog-card--rel .blog-card__img { height: auto; aspect-ratio: 1200 / 630; min-height: 0; }
  .blog-card--rel .blog-card__corpo { padding: 14px 16px 16px; }
  .blog-card--rel .blog-card__titulo { font-size: 1.0625rem; }
}