/* Blog Verum Vita. Base, cabeçalho, rodapé, botões e tokens vêm de site/site.css (gerado do site).
   Aqui só o que é do blog. Mobile primeiro (70% do público no celular). */

/* Migalhas (iguais às do site) */
.migalhas { padding-top: 1.5rem; font-size: 1.125rem; }
.post-migalhas .migalhas { width: min(100% - 2 * var(--gutter), 48rem); }
.migalhas ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 0.25rem; }
.migalhas li { display: inline-flex; align-items: center; min-width: 0; }
.migalhas li + li::before { content: ''; flex: none; width: 0.4rem; height: 0.4rem; margin: 0 0.7rem; border-right: 1.5px solid var(--texto-2); border-top: 1.5px solid var(--texto-2); transform: rotate(45deg); }
.migalhas a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--frasco); }
.migalhas [aria-current] { color: var(--texto-2); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* Cabeçalho do blog e das páginas de assunto */
.bcab { padding-top: clamp(1rem, 0.5rem + 2vw, 2rem); }
.bcab h1 { margin-top: 0.5rem; font-size: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem); max-width: 22ch; }
.bcab__intro { margin-top: 1rem; max-width: 40rem; font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem); color: #1f4470; }
.assuntos ul { list-style: none; padding: 0; margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.625rem; }
.assuntos a {
  display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.25rem; border-radius: 999px;
  border: 1.5px solid var(--linha); background: #fff; color: var(--profundo); text-decoration: none;
  font-family: var(--f-titulo); font-weight: 600; font-size: 1rem; transition: border-color 0.2s, background 0.2s;
}
.assuntos a:hover { border-color: var(--dourado); color: var(--profundo); }
.assuntos a[aria-current='page'] { background: var(--profundo); border-color: var(--profundo); color: #fff; }
.assuntos__movel { display: none; }
@media (max-width: 47.99rem) {
  /* no celular, os assuntos ficam atrás de um botão para o primeiro texto aparecer na primeira tela */
  .assuntos__movel { display: block; margin-top: 1.5rem; }
  .assuntos__movel summary {
    display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3rem; padding: 0 1.25rem; border-radius: 999px;
    border: 1.5px solid var(--profundo); color: var(--profundo); font-family: var(--f-titulo); font-weight: 700; font-size: 1.0625rem;
    cursor: pointer; list-style: none;
  }
  .assuntos__movel summary::-webkit-details-marker { display: none; }
  .assuntos__movel summary::after { content: ''; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.3s var(--saida); }
  .assuntos__movel[open] summary::after { transform: translateY(2px) rotate(-135deg); }
  .assuntos ul { display: none; margin-top: 0.75rem; }
  .assuntos:has(.assuntos__movel[open]) ul { display: flex; }
}

/* Lista de textos: linhas, nunca cards. Celular: imagem em cima; desktop: lado a lado. */
.lista { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); margin-bottom: var(--secao); }
.lista__itens { list-style: none; padding: 0; border-top: 1px solid var(--linha); }
.item { display: grid; gap: 1rem; padding-block: 1.75rem; border-bottom: 1px solid var(--linha); }
.item__img { display: block; border-radius: 1rem; overflow: hidden; background: var(--nevoa); aspect-ratio: 16 / 9; }
.item__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--saida); }
.item:hover .item__img img { transform: scale(1.03); }
.item__semimg { display: block; width: 100%; height: 100%; background: var(--nevoa); }
.item__texto { display: grid; gap: 0.6rem; align-content: start; }
.item__titulo { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); line-height: 1.2; }
.item__titulo a { color: var(--profundo); text-decoration: none; }
.item__titulo a:hover { text-decoration: underline; text-decoration-color: var(--dourado); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.item__resumo { color: #1f4470; }
.item__dados { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; font-size: 1.125rem; color: var(--texto-2); }
.item__dados a { color: var(--frasco); font-weight: 600; display: inline-flex; align-items: center; min-height: 2.75rem; }
.item--novo .item__titulo { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.375rem); }

@media (min-width: 48rem) {
  .item { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
  .item--novo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; padding-block: 2.25rem; }
}

/* Paginação */
.paginas ul { list-style: none; padding: 0; margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.paginas a, .paginas span.current, .paginas span.dots {
  display: inline-flex; align-items: center; gap: 0.5rem; min-width: 3rem; min-height: 3rem; padding: 0 1rem;
  border-radius: 999px; border: 1.5px solid var(--linha); background: #fff; color: var(--profundo);
  font-family: var(--f-titulo); font-weight: 600; font-size: 1rem; text-decoration: none; justify-content: center;
}
.paginas a:hover { border-color: var(--dourado); }
.paginas span.current { background: var(--profundo); border-color: var(--profundo); color: #fff; }
.paginas span.dots { border: 0; background: none; }
.paginas svg { width: 1.125rem; height: 1.125rem; }

/* Lista vazia */
.vazio { padding: clamp(2rem, 1.5rem + 3vw, 3.5rem); background: var(--nevoa); border-radius: var(--raio); display: grid; gap: 1rem; justify-items: start; }
.vazio h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); }
.vazio p { max-width: 36rem; }

/* Post: coluna de leitura centralizada */
.post .envolve { width: min(100% - 2 * var(--gutter), 48rem); }
.junto { white-space: nowrap; }
/* Post */
.post__cab { padding-top: clamp(1rem, 0.5rem + 2vw, 2rem); }
.post__cab h1 { font-size: clamp(2rem, 1.45rem + 2.4vw, 3.25rem); max-width: 24ch; }
.post__dados { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; margin-top: 1rem; font-size: 1.125rem; color: var(--texto-2); }
.post__dados a { color: var(--frasco); font-weight: 600; display: inline-flex; align-items: center; min-height: 2.75rem; }
.post__img { margin-top: 1.5rem; position: relative; isolation: isolate; }
.post__img::before { content: ''; position: absolute; z-index: -1; inset: 7% -0.75rem -0.75rem 7%; border-radius: 1.75rem 1.75rem 50% 50% / 1.75rem 1.75rem 14% 14%; background: var(--nevoa); }
.post__img img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 1.75rem 1.75rem 50% 50% / 1.75rem 1.75rem 14% 14%; /* a "tigela" do guia, mais rasa no formato largo */
  box-shadow: var(--sombra);
}
.rapida { margin-top: 2rem; padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); background: var(--bebe); border-radius: var(--raio); }
.rapida__t { font-family: var(--f-titulo); font-weight: 700; font-size: 1.1875rem; color: var(--profundo); }
.rapida__txt { margin-top: 0.5rem; font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); line-height: 1.5; color: var(--profundo); }

.post__corpo { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.post__texto { max-width: var(--medida); }
.post__texto > h2:first-child { margin-top: 0; }
.post__texto figure { margin-block: 1.75em; }
.post__texto figure img { border-radius: 1rem; }
.post__texto figcaption { margin-top: 0.5rem; font-size: 1.125rem; color: var(--texto-2); }
.post__texto a { overflow-wrap: anywhere; }

/* Sumário "Neste artigo" (o Rank Math reconhece pela classe wp-block-rank-math-toc-block) */
.post__texto .sumario { margin-block: 0 2.25rem; padding: 1.25rem 1.5rem; background: var(--nevoa); border-radius: 1rem; }
.post__texto .sumario__t { margin: 0 0 0.5rem; font-family: var(--f-titulo); font-weight: 700; font-size: 1.125rem; color: var(--profundo); }
.post__texto .sumario ol { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.375rem; }
.post__texto .sumario a { color: var(--profundo); text-underline-offset: 0.2em; }
.post__texto h2[id] { scroll-margin-top: 6rem; }

/* Perguntas (mesmo desenho do site) */
.post__faq { margin-top: 3.5rem; }
.post__faq h2 { font-size: clamp(1.625rem, 1.35rem + 1vw, 2.125rem); margin-bottom: 1rem; }
.perguntas { border-top: 1px solid var(--linha); }
.pergunta { border-bottom: 1px solid var(--linha); }
.pergunta summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.5rem; padding: 1rem 0.25rem; cursor: pointer; list-style: none; }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta__q { font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); font-weight: 600; line-height: 1.3; }
.pergunta__sinal { position: relative; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1.5px solid var(--profundo); transition: background 0.2s; }
.pergunta__sinal::before, .pergunta__sinal::after { content: ''; position: absolute; inset: 50% auto auto 50%; width: 0.9rem; height: 2px; background: var(--profundo); translate: -50% -50%; transition: transform 0.4s var(--saida); }
.pergunta__sinal::after { transform: rotate(90deg); }
.pergunta[open] .pergunta__sinal, .pergunta summary:hover .pergunta__sinal { background: var(--nevoa); }
.pergunta[open] .pergunta__sinal::after { transform: rotate(0deg); }
.pergunta__r { padding: 0 1rem 1.5rem 0.25rem; color: #1f4470; }

/* Fim do post: produto na prateleira + convite para conversar */
.conversa {
  margin-top: 3.5rem; display: grid; gap: 1.5rem;
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); background: var(--nevoa); border-radius: var(--raio); position: relative;
}
.conversa__produto {
  --altura: 11rem;
  display: grid; justify-items: center; text-align: center; gap: 0.35rem; text-decoration: none; color: var(--profundo);
  position: relative; isolation: isolate; padding-bottom: 0.5rem;
}
.conversa__frasco { position: relative; display: grid; place-items: end center; width: 100%; height: calc(var(--altura) * 0.93); }
.conversa__frasco::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: 45%; background: var(--bebe); border-radius: 1rem 1rem 0 0; }
.conversa__frasco::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-block: 1.5px solid var(--dourado); }
.conversa__frasco img {
  height: var(--altura); width: auto; margin-bottom: calc(var(--altura) * -0.07);
  filter: drop-shadow(0 12px 9px rgb(18 58 102 / 0.22)); transition: transform 0.45s var(--saida);
}
.conversa__produto:hover img { transform: translateY(-8px) rotate(-1.5deg); }
.conversa__nome { margin-top: 1.1rem; font-family: var(--f-titulo); font-weight: 700; font-size: 1.1875rem; line-height: 1.25; }
.conversa__resumo { font-size: 1.125rem; color: var(--profundo); max-width: 22rem; }
.conversa__texto { display: grid; gap: 0.75rem; justify-items: start; align-content: center; }
.conversa__texto h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); }
.conversa__texto .botao { width: 100%; margin-top: 0.5rem; }
@media (min-width: 48rem) {
  .conversa:has(.conversa__produto) { grid-template-columns: 16rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
  .conversa__texto .botao { width: auto; }
}

/* Autoria e fontes */
.autoria { margin-top: 3.5rem; padding-top: 1.75rem; position: relative; display: grid; gap: 0.9rem; font-size: 1.125rem; }
.autoria::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-block: 1.5px solid var(--dourado); }
.autoria__t { font-family: var(--f-titulo); font-weight: 700; }
.fontes { padding-left: 1.3em; font-size: 1.125rem; display: grid; gap: 0.4rem; }
.fontes a { overflow-wrap: anywhere; }

/* Leia também */
.leia { margin-top: 3.5rem; margin-bottom: var(--secao); }
.leia .item { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); align-items: start; }
.leia .item__titulo { font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem); }
@media (max-width: 30rem) { .leia .item { grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; } .leia .item__resumo { display: none; } }
.leia > h2 { font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.375rem); margin-bottom: 1rem; }

/* 404 */
.nf { padding-bottom: var(--secao); }
.nf__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2rem; }

/* O que o WordPress coloca no conteúdo, no padrão do site */
.prosa .wp-block-image img, .prosa img { height: auto; }
.prosa .has-text-align-center { text-align: center; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }