/* =====================================================================
   Estilo dos posts do Kaptu Blog.

   Arquivo separado, e não <style> dentro de cada post, por um motivo
   prático: post é coisa que se acumula. Com o estilo repetido em cada
   arquivo, mudar uma margem viraria editar trinta arquivos — e no
   trigésimo alguém esquece um. Aqui muda em um lugar e vale para todos.

   As variáveis são as mesmas do resto do site (ver o :root do
   index.html). Se um dia a marca mudar de cor, muda lá e aqui.
   ===================================================================== */
:root{
  --tinta:#0E1116; --tinta-60:#0E1116a0; --tinta-40:#0E111666;
  --papel:#fff; --nevoa:#F4F5F7; --borda:#E4E6EA;
  --acento:#6D28D9; --acento-esc:#4C1D95; --acento-luz:#F3EEFF;
  --r-g:22px; --r-m:14px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{background:var(--papel);color:var(--tinta);overflow-x:hidden;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;border-radius:var(--r-m)}

.topo{position:sticky;top:0;z-index:40;display:flex;align-items:center;
  padding:11px 20px;background:var(--papel);border-bottom:1px solid var(--borda)}
.topo .marca img{height:34px;width:auto;border-radius:0}
.topo .menu{display:none;gap:20px;margin-left:22px}
.topo .menu a{font-size:14.5px;font-weight:600;color:var(--tinta-60);white-space:nowrap}
.topo .menu a:hover,.topo .menu a.on{color:var(--acento)}
.topo .dir{margin-left:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:999px;font-weight:700;font-size:15px}
.btn-1{background:var(--acento);color:#fff}
.btn-2{background:var(--papel);color:var(--tinta);border:1.5px solid var(--borda)}
.btn-p{padding:9px 16px;font-size:14px}

/* 68 caracteres por linha: é a medida em que o olho volta para a
   esquerda sem se perder. Post em largura de tela cheia cansa e a
   pessoa desiste no meio — a leitura é o produto aqui. */
.env{max-width:720px;margin:0 auto;padding:0 20px}

.volta{display:inline-block;margin:26px 0 6px;color:var(--tinta-60);
  font-weight:700;font-size:14.5px}
.volta:hover{color:var(--acento)}

article .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:12.5px;color:var(--tinta-40);font-weight:600;margin-top:18px}
article .meta .tag{background:var(--acento-luz);color:var(--acento);
  padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800}

article h1{font-size:34px;line-height:1.12;font-weight:800;
  letter-spacing:-.02em;margin-top:14px}
article .linha-fina{font-size:19px;color:var(--tinta-60);margin-top:14px;line-height:1.5}

article p{margin-top:18px;font-size:17px;line-height:1.7}
article h2{font-size:23px;font-weight:800;letter-spacing:-.01em;margin-top:36px}
article h3{font-size:19px;font-weight:800;margin-top:28px}

article ul,article ol{margin:16px 0 0 22px}
article li{margin-top:9px;font-size:17px;line-height:1.65}

article strong{font-weight:800}
article a{color:var(--acento);font-weight:700;text-decoration:underline;
  text-underline-offset:3px}

article blockquote{margin:26px 0 0;padding:18px 22px;background:var(--nevoa);
  border-left:4px solid var(--acento);border-radius:0 var(--r-m) var(--r-m) 0;
  font-size:18px;font-weight:600;line-height:1.5}

article figure{margin-top:26px}
article figcaption{font-size:13.5px;color:var(--tinta-40);margin-top:8px;text-align:center}

article hr{border:0;border-top:1px solid var(--borda);margin:34px 0}

/* Tabela some em tela pequena se não puder rolar sozinha. */
article .tabela{overflow-x:auto;margin-top:22px}
article table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:420px}
article th,article td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--borda)}
article th{font-weight:800;background:var(--nevoa)}

.chamada{background:var(--nevoa);border-radius:var(--r-g);padding:30px 24px;
  text-align:center;margin:46px 0 40px}
.chamada h2{font-size:23px;font-weight:800;letter-spacing:-.01em}
.chamada p{color:var(--tinta-60);margin:10px auto 18px;max-width:44ch}

.rodape{border-top:1px solid var(--borda);padding:26px 0 40px;
  text-align:center;color:var(--tinta-40);font-size:13.5px;line-height:2}
.rodape a{color:var(--tinta-60);font-weight:600}

@media(min-width:900px){
  .topo{padding:16px 44px} .topo .menu{display:flex}
  article h1{font-size:42px}
}