/* ==========================================================================
   Blog — /blog e /blog/<post>

   Identidade Capital Consórcio, conforme DESIGN.md e o manual de marca.

   Os tokens `--cc-*` são declarados aqui de novo, e isso é deliberado: esta
   folha não carrega css/webflow.css nem css/simulador-consorcio.css, então
   nenhuma variável chegaria de fora. É a mesma razão pela qual a folha do
   simulador declara a própria paleta. A fonte da verdade continua sendo o
   DESIGN.md; se um valor mudar lá, muda nas duas folhas.

   Uma página de texto tem uma exigência que as outras não têm: precisa ser
   confortável por dez minutos seguidos. Daí a coluna estreita, a entrelinha
   alta e o corpo maior que o do resto do site.
   ========================================================================== */

:root {
  --cc-azul: #355673;
  --cc-amarelo: #efce67;
  --cc-creme: #fcf5e0;
  --cc-verde: #dae8d1;
  --cc-offwhite: #f7f5f0;
  --cc-ink: #121d26;

  --cc-ink-70: #121d26b3;
  --cc-ink-65: #121d26a6;
  --cc-borda: #121d261f;

  --cc-grad-escuro: linear-gradient(135deg, #121d26 0%, #355673 100%);

  --cc-r-sm: 8px;
  --cc-r-md: 16px;
  --cc-r-lg: 24px;

  --cc-h1: clamp(1.9rem, 1.35rem + 2.2vw, 2.9rem);
  --cc-h2: clamp(1.5rem, 1.3rem + .9vw, 1.95rem);
  --cc-h3: 1.2rem;
  --cc-body-lg: 1.125rem;
  --cc-body: 1rem;
  --cc-body-sm: .875rem;
  --cc-caption: .8125rem;

  --cc-w-titulo: 900;
  --cc-w-corpo: 300;
  --cc-w-apoio: 400;

  /* A coluna de leitura. 68 caracteres é a faixa onde o olho não se perde na
     volta da linha; abaixo de 45 ele volta cedo demais e cansa igual. */
  --post-col: 68ch;
}

/* `normalize.css` não põe border-box, e sem ele `.post-shell` soma os 20px de
   padding aos 100% de largura e joga 40px para fora da tela. */
.post-page *,
.post-page *::before,
.post-page *::after {
  box-sizing: border-box;
}

.post-page {
  margin: 0;
  background-color: var(--cc-offwhite);
  color: var(--cc-ink);
  font-family: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: var(--cc-body-lg);
  font-weight: var(--cc-w-corpo);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* O e-mail da Porto tem 45 caracteres sem hífen nem espaço. Sem isto ele
     estoura a tela do celular e a página inteira passa a rolar de lado. */
  overflow-wrap: break-word;
}

.post-shell {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Títulos em minúsculas, manual pág. 8. O HTML mantém a capitalização, então
   busca, dados estruturados e leitor de tela não são afetados. */
.post-page h1,
.post-page h2,
.post-page h3 {
  text-transform: lowercase;
  text-wrap: balance;
  font-weight: var(--cc-w-titulo);
  line-height: 1.2;
}

/* Cor padrão de link, com especificidade zero no escopo. `:where()` faz esta
   regra pesar o mesmo que um `a` solto, então qualquer componente com classe
   (o botão flutuante do WhatsApp, os botões amarelos, o link claro do cartão
   final) vence sem precisar de override. Antes era `.post-page a`, que pesava
   mais que `.zap-flutuante` e pintava o rótulo do WhatsApp da cor do fundo. */
:where(.post-page) a {
  color: var(--cc-azul);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

:where(.post-page) a:hover {
  color: var(--cc-ink);
}

/* Anel de foco visível em tudo que recebe teclado. */
.post-page :focus-visible {
  outline: 3px solid var(--cc-azul);
  outline-offset: 2px;
  border-radius: var(--cc-r-sm);
}

/* ---------- Topo ---------------------------------------------------------- */

.post-topo {
  border-bottom: 1px solid var(--cc-borda);
  background-color: var(--cc-offwhite);
}

.post-topo-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 16px;
}

.post-marcas {
  display: flex;
  align-items: center;
  gap: 14px;
}

.post-logo {
  display: block;
  width: auto;
  height: 34px;
}

.post-marcas .post-logo-porto {
  height: 24px;
}

.post-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
}

.post-nav a {
  text-decoration: none;
  color: var(--cc-ink-70);
}

.post-nav a:hover {
  color: var(--cc-azul);
  text-decoration: underline;
}

/* ---------- Estrutura do artigo ------------------------------------------ */

.post-main {
  padding-block: 32px 64px;
}

.post-artigo {
  max-width: calc(var(--post-col) + 40px);
}

.post-migalha {
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-apoio);
  color: var(--cc-ink-65);
  margin-bottom: 24px;
}

.post-migalha a {
  color: var(--cc-ink-65);
}

.post-chapeu {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background-color: var(--cc-verde);
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-apoio);
  text-transform: lowercase;
}

.post-titulo {
  font-size: var(--cc-h1);
  margin: 0 0 16px;
}

.post-resumo {
  font-size: var(--cc-body-lg);
  font-weight: var(--cc-w-apoio);
  color: var(--cc-ink-70);
  margin: 0 0 20px;
  text-wrap: pretty;
}

.post-meta {
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  color: var(--cc-ink-65);
  margin: 0 0 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--cc-borda);
}

.post-meta strong {
  font-weight: var(--cc-w-titulo);
  color: var(--cc-ink);
}

/* ---------- Índice -------------------------------------------------------- */

.post-indice {
  margin: 0 0 40px;
  padding: 20px 24px;
  border-radius: var(--cc-r-md);
  background-color: var(--cc-creme);
}

.post-indice h2 {
  font-size: var(--cc-body);
  margin: 0 0 10px;
}

.post-indice ol {
  margin: 0;
  padding-left: 20px;
  font-size: var(--cc-body);
  font-weight: var(--cc-w-apoio);
}

.post-indice li {
  margin-bottom: 4px;
}

/* ---------- Corpo do texto ------------------------------------------------ */

.post-corpo > * {
  max-width: var(--post-col);
}

.post-corpo h2 {
  font-size: var(--cc-h2);
  margin: 48px 0 16px;
  scroll-margin-top: 20px;
}

.post-corpo h3 {
  font-size: var(--cc-h3);
  margin: 32px 0 12px;
  scroll-margin-top: 20px;
}

.post-corpo p {
  margin: 0 0 20px;
  text-wrap: pretty;
}

.post-corpo strong {
  font-weight: var(--cc-w-titulo);
}

.post-lista {
  margin: 0 0 20px;
  padding-left: 22px;
}

.post-lista li {
  margin-bottom: 10px;
  padding-left: 4px;
}

/* Destaque. Sem faixa lateral colorida: a ênfase vem da superfície creme,
   como no resto do site. */
.post-destaque {
  margin: 32px 0;
  padding: 20px 24px;
  border-radius: var(--cc-r-md);
  background-color: var(--cc-creme);
  font-size: var(--cc-body-lg);
  font-weight: var(--cc-w-apoio);
  line-height: 1.6;
  text-wrap: pretty;
}

/* Chamada com botão no meio do texto. Creme como o destaque, para não brigar
   com a leitura, e o botão amarelo do resto do site. Sai da coluna de 68ch só
   o suficiente para o botão respirar. */
.post-chamada {
  margin: 36px 0;
  padding: 24px 28px;
  border-radius: var(--cc-r-lg);
  background-color: var(--cc-creme);
  border: 1px solid #efce6766;
}

.post-chamada-titulo {
  margin: 0 0 8px;
  font-size: var(--cc-h3);
  font-weight: var(--cc-w-titulo);
  line-height: 1.3;
  text-wrap: balance;
}

.post-chamada p {
  margin: 0 0 18px;
  font-size: var(--cc-body);
  font-weight: var(--cc-w-apoio);
  text-wrap: pretty;
}

.post-chamada .post-btn {
  margin-top: 2px;
}

/* ---------- Tabelas ------------------------------------------------------- */

/* A tabela é o único bloco que pode passar da coluna de leitura, e mesmo assim
   dentro do próprio scroll: no celular uma tabela de quatro colunas não cabe,
   e espremer transformaria cada célula numa torre de palavras. */
.post-tabela-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 28px;
  border-radius: var(--cc-r-md);
  border: 1px solid var(--cc-borda);
}

.post-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cc-body);
  font-weight: var(--cc-w-apoio);
}

.post-tabela th,
.post-tabela td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--cc-borda);
  line-height: 1.5;
}

.post-tabela thead th {
  background-color: var(--cc-creme);
  font-weight: var(--cc-w-titulo);
  font-size: var(--cc-body-sm);
  white-space: nowrap;
}

.post-tabela tbody th {
  font-weight: var(--cc-w-titulo);
}

.post-tabela tbody tr:last-child th,
.post-tabela tbody tr:last-child td {
  border-bottom: none;
}

/* ---------- FAQ ----------------------------------------------------------- */

.post-faq {
  margin: 28px 0;
}

.post-faq-item {
  border-bottom: 1px solid var(--cc-borda);
}

.post-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 36px 18px 0;
  position: relative;
  font-size: var(--cc-body-lg);
  font-weight: var(--cc-w-titulo);
  line-height: 1.4;
}

.post-faq-item summary::-webkit-details-marker {
  display: none;
}

.post-faq-item summary:after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: var(--cc-w-apoio);
  color: var(--cc-azul);
}

.post-faq-item[open] summary:after {
  content: "−";
}

.post-faq-item p {
  margin: 0 0 18px;
  font-weight: var(--cc-w-corpo);
  color: var(--cc-ink-70);
}

/* ---------- CTA ----------------------------------------------------------- */

.post-cta {
  margin: 56px 0 0;
  padding: 32px;
  border-radius: var(--cc-r-lg);
  background: var(--cc-grad-escuro);
  color: var(--cc-offwhite);
}

.post-cta h2 {
  font-size: var(--cc-h3);
  margin: 0 0 12px;
  color: var(--cc-offwhite);
}

.post-cta p {
  margin: 0 0 20px;
  font-size: var(--cc-body);
  font-weight: var(--cc-w-apoio);
  color: #f7f5f0d9;
  text-wrap: pretty;
}

.post-cta-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 0;
}

.post-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: var(--cc-body);
  font-weight: var(--cc-w-titulo);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, transform .1s ease;
}

.post-btn-primario {
  background-color: var(--cc-amarelo);
  color: var(--cc-ink);
  box-shadow: 0 3px 0 #c9a63f, 0 10px 24px #121d2640;
}

.post-btn-primario:hover {
  background-color: #e8c250;
  color: var(--cc-ink);
  transform: translateY(-2px);
}

.post-btn-primario:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #c9a63f;
}

.post-cta-secundario {
  align-self: center;
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  color: #f7f5f0cc;
}

.post-cta-secundario:hover {
  color: var(--cc-offwhite);
}

@media (prefers-reduced-motion: reduce) {
  .post-btn-primario:hover,
  .post-btn-primario:active {
    transform: none;
  }
}

/* ---------- Quem escreveu ------------------------------------------------- */

.post-autor {
  margin: 40px 0 0;
  padding: 24px 28px;
  border-radius: var(--cc-r-lg);
  border: 1px solid var(--cc-borda);
  background-color: #fff;
}

.post-autor-rotulo {
  margin: 0 0 14px;
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-apoio);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cc-ink-65);
}

.post-autor-inner {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.post-autor-foto {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}

/* Enquanto a foto não chega, as iniciais em azul sobre creme. Sem imagem
   genérica de pessoa: isso seria fingir uma foto que não existe. */
.post-autor-iniciais {
  display: grid;
  place-items: center;
  background-color: var(--cc-creme);
  color: var(--cc-azul);
  font-size: 1.35rem;
  font-weight: var(--cc-w-titulo);
  letter-spacing: .02em;
}

.post-autor-nome {
  margin: 0 0 2px;
  font-size: var(--cc-body-lg);
  font-weight: var(--cc-w-titulo);
  line-height: 1.3;
}

.post-autor-nome a {
  text-decoration: none;
  color: var(--cc-ink);
}

.post-autor-nome a:hover {
  text-decoration: underline;
}

.post-autor-cargo {
  margin: 0 0 10px;
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  color: var(--cc-ink-65);
}

.post-autor-bio {
  margin: 0 0 10px;
  font-size: var(--cc-body);
  font-weight: var(--cc-w-apoio);
  line-height: 1.6;
  text-wrap: pretty;
}

.post-autor-links {
  margin: 0;
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
}

@media screen and (max-width: 479px) {
  .post-autor-inner {
    flex-direction: column;
    gap: 14px;
  }
}

/* ---------- Página de autor ----------------------------------------------- */

.post-perfil-topo {
  display: flex;
  gap: 24px;
  align-items: center;
  margin: 0 0 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--cc-borda);
}

.post-perfil-topo .post-autor-foto {
  width: 112px;
  height: 112px;
}

.post-perfil-topo .post-autor-iniciais {
  font-size: 2rem;
}

.post-perfil-topo .post-titulo {
  margin-bottom: 6px;
}

.post-perfil-lista {
  margin: 44px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--cc-borda);
}

.post-perfil-lista h2 {
  font-size: var(--cc-h3);
  margin: 0 0 14px;
}

.post-perfil-lista ul {
  margin: 0;
  padding-left: 20px;
  font-size: var(--cc-body);
  font-weight: var(--cc-w-apoio);
}

.post-perfil-lista li {
  margin-bottom: 10px;
}

.post-autor-data {
  color: var(--cc-ink-65);
  font-size: var(--cc-body-sm);
}

@media screen and (max-width: 479px) {
  .post-perfil-topo {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Relacionados -------------------------------------------------- */

.post-relacionados {
  margin: 48px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--cc-borda);
}

.post-relacionados h2 {
  font-size: var(--cc-h3);
  margin: 0 0 12px;
}

.post-relacionados ul {
  margin: 0;
  padding-left: 20px;
  font-size: var(--cc-body);
  font-weight: var(--cc-w-apoio);
}

.post-relacionados li {
  margin-bottom: 8px;
}

/* ---------- Índice do blog ------------------------------------------------ */

.post-lista-cartoes {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
}

.post-cartao {
  padding: 28px;
  border-radius: var(--cc-r-lg);
  border: 1px solid var(--cc-borda);
  background-color: #fff;
}

.post-cartao-chapeu {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background-color: var(--cc-verde);
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-apoio);
  text-transform: lowercase;
}

.post-cartao h2 {
  font-size: var(--cc-h3);
  margin: 0 0 10px;
}

.post-cartao h2 a {
  text-decoration: none;
}

.post-cartao h2 a:hover {
  text-decoration: underline;
}

.post-cartao p {
  margin: 0 0 10px;
  font-size: var(--cc-body);
  font-weight: var(--cc-w-apoio);
  color: var(--cc-ink-70);
  text-wrap: pretty;
}

.post-cartao-meta {
  margin: 0;
  font-size: var(--cc-caption);
  color: var(--cc-ink-65);
}

@media screen and (min-width: 760px) {
  .post-lista-cartoes {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Rodapé -------------------------------------------------------- */

.post-rodape {
  border-top: 1px solid var(--cc-borda);
  padding-block: 40px 56px;
  background-color: var(--cc-offwhite);
}

.post-rodape-marcas {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.post-divisor {
  width: 1px;
  height: 28px;
  background-color: var(--cc-borda);
}

.post-logo-porto {
  display: block;
  width: auto;
  height: 26px;
}

.post-rodape p {
  margin: 0;
  max-width: 78ch;
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  line-height: 1.7;
  color: var(--cc-ink-70);
}

.post-rodape a {
  color: var(--cc-ink-70);
}