/*
  O CSS do blog, em arquivo próprio — mesma razão do site.css e do
  admin.css: bloco embutido depende de hash no CSP, e hash que descasa
  apaga o estilo da página inteira.

  Irmão do site.css: mesmo papel claro, mesmo verde, mesma tipografia.
  Repetir os tokens é o preço de o site não depender do bundle do app.
*/
:root {
    --papel: #f7faf8;
    --papel-alto: #ffffff;
    --tinta: #10140f;
    --tinta-suave: #4a5350;
    --tinta-fraca: #7c8783;
    --linha: #e2e9e5;
    /* O mesmo verde do site e do app. Eram tres verdes quase iguais e
       diferentes, que e o pior dos tres mundos. */
    --verde: #157f3c;
    --verde-forte: #0e5f2c;
    --topo-seguro: env(safe-area-inset-top, 0px);
  }
  *, *::before, *::after { box-sizing: border-box; }
  /*
    Todo link comeca estilizado.

    Nao havia regra nenhuma aqui, entao qualquer <a> sem classe saia no
    roxo padrao do navegador — numa pagina que nao tem roxo em lugar
    nenhum. Regra na raiz e nao remendo: o proximo link ja nasce certo.
  */
  a { color: var(--verde-forte); text-underline-offset: 3px; }
  a:hover { color: var(--verde); }
  .barra a.marca, .botao { text-decoration: none; }
  body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  .barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: calc(var(--topo-seguro) + 0.8rem) 1.35rem 0.8rem;
    border-bottom: 1px solid var(--linha);
    background: var(--papel-alto);
  }
  .barra a.marca {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--tinta);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    text-decoration: none;
  }
  /* O nome, com "prato" em verde — igual ao site. */
  .barra a.marca span { color: var(--verde); }
  .botao {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    background: var(--verde);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
  }
  main { max-width: 680px; margin: 0 auto; padding: 3rem 1.35rem 4rem; }
  h1 {
    margin: 0 0 0.6rem;
    font-size: clamp(2rem, 6.5vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.08;
    text-wrap: balance;
  }
  h2 {
    margin: 2.2rem 0 0.7rem;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
  p { margin: 0 0 1.2rem; text-wrap: pretty; }
  .olho {
    margin: 0 0 0.6rem;
    color: var(--verde);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .data { margin: 0 0 2.5rem; color: var(--tinta-fraca); font-size: 0.9rem; }
  .lista { display: grid; gap: 1rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
  .cartao {
    display: block;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--linha);
    border-radius: 20px;
    background: var(--papel-alto);
    color: inherit;
    text-decoration: none;
  }
  .cartao h2 { margin: 0 0 0.35rem; font-size: 1.25rem; }
  .cartao p { margin: 0 0 0.5rem; color: var(--tinta-suave); font-size: 1rem; }
  .cartao span { color: var(--tinta-fraca); font-size: 0.85rem; }
  .corpo { font-size: 1.08rem; }
  .corpo p { color: var(--tinta-suave); }
  .vazio {
    padding: 2.5rem 1.5rem;
    border: 1px dashed var(--linha);
    border-radius: 20px;
    color: var(--tinta-fraca);
    text-align: center;
  }
  .fim {
    margin: 3.5rem 0 0;
    padding: 2rem 1.5rem;
    border: 1px solid var(--linha);
    border-radius: 20px;
    background: var(--papel-alto);
    text-align: center;
  }
  .fim p { color: var(--tinta-suave); }
  .voltar {
    display: inline-block;
    margin-bottom: 1.8rem;
    color: var(--tinta-fraca);
    font-size: 0.92rem;
    text-decoration: none;
  }
  .rodape {
    padding: 2rem 1.35rem 3rem;
    border-top: 1px solid var(--linha);
    color: var(--tinta-fraca);
    font-size: 0.86rem;
    text-align: center;
  }

/*
  O CHAMADO NO MEIO DO TEXTO.

  A medicao e consistente: chamado dentro do texto converte de 3% a 8% de
  quem o ve; no fim do post, de 1% a 3%; na barra lateral, menos de 1%.
  Quem esta no meio esta engajado AGORA; quem chega ao fim ja decidiu ir
  embora.

  Ele e visivelmente OUTRA coisa do que o texto — fundo, borda, respiro —
  pra ninguem confundir anuncio com paragrafo. Fingir que e texto e o que
  faz alguem parar de ler o texto.
*/
.chamado {
  margin: 2.5rem 0;
  padding: 1.4rem 1.35rem;
  border: 1px solid var(--linha);
  border-left: 3px solid var(--verde);
  border-radius: 14px;
  background: var(--papel-alto);
}

.chamado p {
  margin: 0 0 0.5rem;
  color: var(--tinta-suave);
}

.chamado p strong {
  color: var(--tinta);
}

.chamado .botao {
  margin-top: 0.5rem;
}

/* O tempo de leitura, colado na data. Responde "cabe agora?" antes de
   comecar — e quem sabe que cabe, le. */
.leitura {
  color: var(--tinta-fraca);
}

/*
  "Leia tambem".

  Quem terminou de ler e quem mais provavelmente le outro, e cada pagina a
  mais na visita e uma chance a mais de o chamado pegar. Pro buscador e
  ligacao interna: mostra que os textos sao um conjunto.
*/
.tambem {
  margin: 3rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linha);
}

.tambem h2 {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.tambem ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tambem li + li {
  margin-top: 0.6rem;
}

.tambem a {
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
}

.tambem a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}