/* Blog da Radar Watch — a MESMA identidade da home e do /oportunidades.
 *
 * GG, 31/08/2026: "está muito cinza, muito escuro, com uns componentes
 * estranhos. Gostaria de algo mais clean, semelhante à home atual do radar
 * watch ou /oportunidades".
 *
 * O que saiu, e por que:
 *   .rw-aurora   manchas roxas/rosa borradas atras do topo. Era uma segunda
 *                identidade, que nao existe em nenhuma outra tela da casa.
 *   .rw-fio      borda e sublinhado em gradiente #4B3BFF -> #FF2D8A. Idem.
 *   .rw-grao     ruido por cima de tudo. Sujava o claro do papel.
 *   .rw-moldura  anel de gradiente em volta de cada foto.
 *   .rw-fosco    vidro fosco. So faz sentido com a aurora atras para filtrar.
 *   thead preto  a tabela virava um bloco escuro no meio do texto claro.
 *
 * O que ficou, identico ao resto do site:
 *   fundo #f4f4f2, tinta #141414, cartao branco com fio #e2e0da e raio 14-17px
 *   Instrument Sans no texto, Instrument Serif italico no destaque
 *   rotulo minusculo em maiuscula com tracking largo, em #8d8a83
 *   numero sempre em tabular-nums
 *
 * Este arquivo e escrito a mao. O build do Tailwind (build/tailwind.blog.js e
 * build/css/blog.src.css) saiu junto com a identidade antiga: nao ha mais
 * passo de build para o CSS do blog.
 */

:root{
  --papel:#f4f4f2;   /* fundo da pagina */
  --carta:#fff;      /* cartao */
  --tinta:#141414;   /* titulo e texto forte */
  --corpo:#33312c;   /* corpo do post, 1.500 palavras pedem um cinza quente */
  --suave:#55534e;   /* secundario */
  --fraco:#8d8a83;   /* rotulo e legenda */
  --linha:#e2e0da;   /* fio de borda */
  --fina:#f0eee9;    /* fio interno, dentro do cartao branco */
  --marca:#cfcbc2;   /* sublinhado de link em repouso */
  --verde:#4a7541;
  --verdefundo:#e8f0e6;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
     background:var(--papel);color:var(--corpo);
     -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}
.serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic;
       font-weight:400}
.larg{max-width:760px;margin:0 auto;padding:0 20px}
.larg-lista{max-width:1240px;margin:0 auto;padding:0 20px}

/* ── barra do topo ────────────────────────────────────────────────────── */
.topo{position:sticky;top:0;z-index:40;background:rgba(244,244,242,.88);
      -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
      border-bottom:1px solid var(--linha)}
.topo .dentro{max-width:1240px;margin:0 auto;padding:0 20px;height:62px;
              display:flex;align-items:center;justify-content:space-between;
              gap:14px}
.topo a{text-decoration:none}
.topo .selo{display:flex;align-items:center;gap:9px;white-space:nowrap}
.topo .selo img{height:21px;width:auto;display:block}
.topo .cta{display:inline-flex;align-items:center;gap:7px;background:var(--tinta);
           color:#fff;font-size:13.5px;font-weight:600;padding:9px 17px;
           border-radius:999px;white-space:nowrap;transition:opacity .15s}
.topo .cta:hover{opacity:.86}
#rw-progress{height:2px;width:0;background:var(--tinta);
             transition:width .15s linear}

/* ── cabecalho da pagina ──────────────────────────────────────────────── */
.rotulo{font-size:11px;letter-spacing:.11em;text-transform:uppercase;
        color:var(--fraco);font-weight:600}
.trilha{font-size:13px;color:var(--fraco);margin-bottom:18px}
.trilha a{text-decoration:none;border-bottom:1px solid var(--linha)}
.trilha a:hover{border-bottom-color:var(--tinta);color:var(--tinta)}
.trilha span{margin:0 7px}

h1{font-size:40px;font-weight:600;letter-spacing:-.035em;line-height:1.06;
   color:var(--tinta);text-wrap:balance}
@media (min-width:640px){h1{font-size:50px}}
.assina{margin-top:15px;display:flex;flex-wrap:wrap;align-items:center;
        gap:5px 10px;font-size:13.5px;color:var(--fraco)}
.assina time{font-variant-numeric:tabular-nums}

/* ── corpo do post ────────────────────────────────────────────────────── */
.rw-prose{font-size:17.5px;line-height:1.72;color:var(--corpo)}
.rw-prose > * + *{margin-top:1.15rem}
.rw-prose h2{font-size:27px;font-weight:600;letter-spacing:-.03em;
             line-height:1.18;color:var(--tinta);margin-top:2.9rem;
             padding-top:1.5rem;border-top:1px solid var(--linha);
             scroll-margin-top:80px;text-wrap:balance}
.rw-prose h3{font-size:19.5px;font-weight:600;letter-spacing:-.02em;
             color:var(--tinta);margin-top:2rem;scroll-margin-top:80px}
.rw-prose p > strong,.rw-prose li > strong{color:var(--tinta);font-weight:600}
/* link: mesmo tratamento do .nome a do /oportunidades — sublinhado fino que
   escurece no hover. Sem cor propria: cor de link no meio de 1.500 palavras
   e exatamente o "muito componente" que saiu daqui. */
.rw-prose a{color:var(--tinta);text-decoration:underline;
            text-decoration-thickness:1px;text-underline-offset:3px;
            text-decoration-color:var(--marca);transition:text-decoration-color .15s}
.rw-prose a:hover{text-decoration-color:var(--tinta)}
.rw-prose ul,.rw-prose ol{padding-left:1.15rem}
.rw-prose ul{list-style:disc}
.rw-prose ol{list-style:decimal}
.rw-prose li + li{margin-top:.4rem}
.rw-prose li::marker{color:var(--fraco)}
.rw-prose blockquote{border-left:2px solid var(--linha);padding-left:1.1rem;
                     font-family:'Instrument Serif',Georgia,serif;
                     font-style:italic;font-size:20px;line-height:1.5;
                     color:var(--suave)}
.rw-prose code{background:var(--fina);border-radius:5px;padding:.12em .38em;
               font-size:.9em}
.rw-prose hr{border:0;border-top:1px solid var(--linha);margin:2.2rem 0}

/* Abertura em italico. E a linha que resume o post, e serif italico e o
   destaque da casa (o .serif da home e do /oportunidades). */
.rw-prose .rw-deck{font-family:'Instrument Serif',Georgia,serif;
                   font-style:italic;font-size:22px;line-height:1.45;
                   color:var(--suave);letter-spacing:-.005em;
                   margin-bottom:1.9rem;text-wrap:pretty}

/* ── tabela: e o formato que carrega o argumento em quase todo post ─────
   O scroll horizontal mora no DIV (blog.py embrulha), nao na table: com
   `display:block` na propria tabela ela para de esticar e as colunas ficam
   espremidas no canto de um cartao branco largo. */
.rw-tabela{overflow-x:auto;border:1px solid var(--linha);border-radius:14px;
           background:var(--carta)}
.rw-prose table{width:100%;border-collapse:separate;border-spacing:0;
                font-size:15px;font-variant-numeric:tabular-nums}
.rw-prose thead{background:#faf9f7}
.rw-prose th{font-size:11px;text-transform:uppercase;letter-spacing:.1em;
             color:var(--fraco);font-weight:600;padding:.8rem .85rem;
             text-align:left;white-space:nowrap;
             border-bottom:1px solid var(--linha)}
/* a primeira coluna carrega o nome da peca e e a que pode quebrar linha */
.rw-prose td:first-child{min-width:9rem}
.rw-prose td{border-top:1px solid var(--fina);padding:.72rem .85rem;
             text-align:left;vertical-align:top}
.rw-prose tbody tr:first-child td{border-top:0}
.rw-prose td strong{color:var(--tinta);font-weight:600}

/* ── indice "o que voce vai descobrir" ────────────────────────────────── */
.rw-toc{background:var(--carta);border:1px solid var(--linha);
        border-radius:14px;padding:18px 20px;margin:2rem 0 2.4rem}
.rw-toc > p{font-size:11px;text-transform:uppercase;letter-spacing:.11em;
            font-weight:600;color:var(--fraco);margin:0 0 10px}
.rw-toc ul{list-style:none;padding:0;margin:0}
.rw-toc li{margin:0;padding:9px 0;border-top:1px solid var(--fina);
           font-size:15.5px}
.rw-toc li:first-child{border-top:0;padding-top:0}
.rw-toc li:last-child{padding-bottom:0}
.rw-toc a{color:var(--corpo);text-decoration:none;
          border-bottom:1px solid transparent}
.rw-toc a:hover{color:var(--tinta);border-bottom-color:var(--tinta)}

/* ── imagem do corpo ──────────────────────────────────────────────────── */
.rw-fig{margin:2.4rem 0}
.rw-fig img{width:100%;height:auto;display:block;border-radius:14px;
            border:1px solid var(--linha)}
.rw-fig figcaption{margin-top:10px;font-size:13.5px;color:var(--fraco);
                   text-wrap:pretty}
.destaque{margin-top:26px}
.destaque img{width:100%;height:auto;display:block;border-radius:16px;
              border:1px solid var(--linha)}

/* ── CTA de fim de post ───────────────────────────────────────────────── */
.oferta{margin-top:52px;background:var(--carta);border:1px solid var(--linha);
        border-radius:17px;padding:26px 24px}
@media (min-width:640px){.oferta{padding:32px 30px}}
.oferta h2{margin-top:9px;font-size:27px;font-weight:600;letter-spacing:-.03em;
           line-height:1.14;color:var(--tinta);text-wrap:balance}
.oferta p{margin-top:11px;font-size:16px;line-height:1.6;color:var(--suave);
          max-width:52ch}
.oferta .botao{margin-top:20px;display:inline-flex;align-items:center;gap:9px;
               background:var(--tinta);color:#fff;font-size:15px;
               font-weight:600;padding:13px 24px;border-radius:999px;
               text-decoration:none;transition:opacity .15s}
.oferta .botao:hover{opacity:.86}
.oferta .rodape{margin-top:11px;font-size:13px;color:var(--fraco)}

/* ── CTA 2 de 3: overlay aos 50% de rolagem ───────────────────────────────
   Uma vez por sessao (a chave do sessionStorage e fixa, nao leva o pathname
   junto). O cartao e o mesmo .oferta do fim do post, so que centrado: nada
   de vidro fosco nem gradiente, que sairam com a identidade antiga. */
#rw-overlay{position:fixed;inset:0;z-index:50;display:none;
            align-items:flex-end;justify-content:center;padding:16px;
            background:rgba(20,18,14,.45)}
@media (min-width:640px){#rw-overlay{align-items:center}}
#rw-overlay.aberto{display:flex}
#rw-ov-card{position:relative;width:100%;max-width:430px;background:var(--carta);
            border:1px solid var(--linha);border-radius:17px;padding:26px 24px;
            box-shadow:0 24px 60px rgba(20,18,14,.22);
            transform:translateY(12px);opacity:0;
            transition:transform .22s ease,opacity .22s ease}
#rw-ov-card.entrou{transform:none;opacity:1}
#rw-ov-card h2{margin-top:9px;font-size:23px;font-weight:600;
               letter-spacing:-.03em;line-height:1.16;color:var(--tinta);
               text-wrap:balance}
#rw-ov-card .texto{margin-top:10px;font-size:15px;line-height:1.55;
                   color:var(--suave)}
#rw-ov-card .botao{margin-top:18px;display:flex;align-items:center;
                   justify-content:center;gap:9px;background:var(--tinta);
                   color:#fff;font-size:15px;font-weight:600;padding:13px 20px;
                   border-radius:999px;text-decoration:none;
                   transition:opacity .15s}
#rw-ov-card .botao:hover{opacity:.86}
#rw-ov-fechar{position:absolute;top:10px;right:12px;width:30px;height:30px;
              border:0;background:none;font-size:26px;line-height:1;
              color:var(--fraco);cursor:pointer;border-radius:999px}
#rw-ov-fechar:hover{color:var(--tinta)}
#rw-ov-depois{margin-top:11px;width:100%;border:0;background:none;
              font:inherit;font-size:13.5px;color:var(--fraco);cursor:pointer;
              padding:4px}
#rw-ov-depois:hover{color:var(--tinta)}
@media (prefers-reduced-motion:reduce){
  #rw-ov-card{transition:none;transform:none;opacity:1}
}

/* ── continue lendo ───────────────────────────────────────────────────── */
.mais{margin-top:52px}
.mais h2{font-size:22px;font-weight:600;letter-spacing:-.03em;color:var(--tinta)}
.mais ul{list-style:none;margin-top:16px;display:grid;gap:14px;
         grid-template-columns:1fr}
@media (min-width:640px){.mais ul{grid-template-columns:repeat(3,1fr)}}

/* ── cartao de post, usado na listagem e no continue lendo ────────────── */
.peca{background:var(--carta);border:1px solid var(--linha);border-radius:17px;
      overflow:hidden;transition:box-shadow .15s,transform .15s}
.peca:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(20,18,14,.10)}
.peca a{display:block;text-decoration:none}
.peca img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
          background:#faf9f7}
.peca .miolo{display:block;padding:15px 17px 17px}
.peca .titulo{display:block;margin:0;font-size:16.5px;font-weight:600;
              letter-spacing:-.015em;line-height:1.32;color:var(--tinta)}
.peca .resumo{margin-top:7px;font-size:14px;line-height:1.5;color:var(--suave);
              display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
              overflow:hidden}
.peca .ficha{display:block;margin-top:11px;font-size:12.5px;color:var(--fraco);
             font-variant-numeric:tabular-nums}

/* ── listagem ─────────────────────────────────────────────────────────── */
.inicio,.arquivo{margin-top:54px}
.arquivo{padding-top:38px;border-top:1px solid var(--linha)}
.cabecalho-secao h2{margin-top:9px;max-width:720px;font-size:29px;
                    line-height:1.16;letter-spacing:-.03em;color:var(--tinta);
                    text-wrap:balance}
.grade-inicio{margin-top:22px}
.filtros{margin-top:22px;display:grid;gap:14px}
.busca-blog{display:grid;gap:7px;max-width:720px;color:var(--suave);
            font-size:13.5px;font-weight:600}
.busca-blog input{width:100%;border:1px solid var(--linha);border-radius:12px;
                  background:var(--carta);color:var(--tinta);font:inherit;
                  font-size:16px;font-weight:400;padding:13px 15px;outline:none}
.busca-blog input:focus{border-color:var(--tinta);box-shadow:0 0 0 2px rgba(20,20,20,.08)}
.atalhos{display:flex;flex-wrap:wrap;gap:8px}
.atalhos button{border:1px solid var(--linha);border-radius:999px;background:var(--carta);
                color:var(--suave);font:inherit;font-size:13.5px;padding:8px 13px;
                cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.atalhos button:hover{border-color:var(--tinta);color:var(--tinta)}
.atalhos button.ativo{background:var(--tinta);border-color:var(--tinta);color:#fff}
.contagem{min-height:1.4em;color:var(--fraco);font-size:13.5px}
.vazio{margin-top:28px;padding:22px;border:1px dashed var(--linha);
       border-radius:14px;color:var(--suave);background:var(--carta)}
.peca[hidden],.vazio[hidden]{display:none}
.grade{margin-top:36px;display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:640px){.grade{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grade{grid-template-columns:repeat(3,1fr)}}
.sub{margin-top:13px;font-size:17px;line-height:1.55;color:var(--suave);
     max-width:620px}

/* ── avisos ───────────────────────────────────────────────────────────── */
.aviso{background:var(--carta);border:1px solid var(--linha);border-radius:12px;
       padding:12px 15px;font-size:13.5px;color:var(--suave);margin-bottom:20px}
.aviso b{color:var(--tinta)}

/* ── rodape ───────────────────────────────────────────────────────────── */
.rodape{margin-top:70px;border-top:1px solid var(--linha);background:var(--carta)}
.rodape .dentro{max-width:1240px;margin:0 auto;padding:32px 20px;
                font-size:13.5px;color:var(--fraco)}
.rodape .linhas{display:flex;flex-wrap:wrap;align-items:center;gap:7px 16px}
.rodape a{text-decoration:none;border-bottom:1px solid transparent}
.rodape a:hover{color:var(--tinta);border-bottom-color:var(--tinta)}
.rodape img{height:19px;width:auto;display:block}
.rodape .nota{margin-top:15px;max-width:64ch;line-height:1.6}

@media (max-width:640px){
  .rw-prose{font-size:16.5px}
  .rw-prose h2{font-size:23px}
  .rw-prose .rw-deck{font-size:19.5px}
  .oferta h2{font-size:23px}
}