/* ──────────────────────────────────────────────────────────────
   newsletter.guizanoni.com — mesma gramática do painel novo.

   Um livro, não um mosaico: índice numerado, pontilhado de sumário,
   nada de gradiente e uma cor de cada vez. O que sustenta a página é
   a tipografia e o alinhamento, não a decoração.
   ────────────────────────────────────────────────────────────── */

/* O painel pode ser discreto porque quem usa olha dez vezes por dia. Uma
   página pública é lida uma vez, muitas vezes no celular no sol — por isso
   aqui o texto secundário e o pontilhado são bem mais escuros que lá. */
/* ESCURO É O PADRÃO. Diferente do painel interno, que segue a preferência do
   sistema: a Digital Thinkers nasce escura para todo mundo e só clareia se a
   pessoa pedir. É a cara da publicação, não uma preferência de sistema. */
:root { --ac:#5b4bd6; --ac-claro:#8b7bff; }
html, html[data-theme="dark"] {
  --bg:#0A0A0A; --fg:#ECE7DD; --muted:rgb(236 231 221 / .64); --faint:rgb(236 231 221 / .36);
  --line:rgb(255 255 255 / .17); --line2:rgb(255 255 255 / .44); --hover:rgb(255 255 255 / .06); --surf:rgb(255 255 255 / .05);
  --acx:var(--ac-claro); --sobre-ac:#fff; }
html[data-theme="light"] {
  --bg:#ECE7DD; --fg:#0A0A0A; --muted:rgb(10 10 10 / .62); --faint:rgb(10 10 10 / .34);
  --line:rgb(0 0 0 / .16); --line2:rgb(0 0 0 / .45); --hover:rgb(0 0 0 / .05); --surf:rgb(0 0 0 / .04);
  --acx:var(--ac); --sobre-ac:#fff; }

* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--fg); line-height:1.6;
       font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
       -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; }
a { color:inherit; text-decoration:none; }
.mono { font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; font-variant-numeric:tabular-nums; }

/* ── Assinatura ────────────────────────────────────────────── */
.pub-bar { display:flex; align-items:baseline; justify-content:space-between; gap:20px;
           width:100%; max-width:940px; margin:0 auto; padding:30px clamp(20px,5vw,30px) 0; flex-wrap:wrap; }
.pub-logo { display:inline-flex; align-items:center; gap:16px;
            font-size:clamp(22px,3.4vw,30px); font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--fg); }
/* 3× o tamanho original (36px). A marca do Gui é a âncora; a assinatura
   Digital Thinkers vem ao lado, não abaixo. */
.pub-logo .marca { width:108px; height:108px; display:block; flex:none; }
@media(max-width:640px){ .pub-logo .marca { width:72px; height:72px; } }
/* Uma marca por tema — a escura some no fundo preto e vice-versa. */
html[data-theme="dark"] .pub-logo .marca.clara { display:none; }
html:not([data-theme="dark"]) .pub-logo .marca.escura { display:none; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .pub-logo .marca.clara { display:none; }
  html:not([data-theme]) .pub-logo .marca.escura { display:block; }
}
.pub-bar nav { display:flex; align-items:center; gap:20px; font-size:12.5px; font-weight:600; }
.pub-bar nav a { color:var(--muted); }
.pub-bar nav a:hover { color:var(--fg); }
.pub-tema { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
            border:1px solid var(--line); background:transparent; color:var(--muted);
            cursor:pointer; border-radius:50%; transition:.13s; }
.pub-tema:hover { color:var(--fg); border-color:var(--line2); }

.pub-wrap { width:100%; max-width:940px; margin:0 auto; padding:0 clamp(20px,5vw,30px) 80px; }

.pub-foot { width:100%; max-width:940px; margin:auto auto 0; padding:26px clamp(20px,5vw,30px) 44px;
            border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); }
.pub-foot p { margin:0 0 5px; }
.pub-foot .dim { font-size:11.5px; color:var(--faint); }
.pub-foot a { color:var(--muted); text-decoration:underline; text-underline-offset:2px; }

/* ── Eyebrow: a etiqueta de tudo ───────────────────────────── */
.pub-eyebrow { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
               font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
               margin:clamp(34px,6vw,58px) 0 18px; }

/* ── Título grande ─────────────────────────────────────────── */
.pub-hero h1 { font-size:clamp(30px,6.4vw,58px); line-height:1.02; letter-spacing:-.045em;
               font-weight:800; margin:0 0 20px; max-width:15ch; }
.pub-hero h1 em { font-style:normal; color:var(--acx); }
.pub-hero .lead { font-size:clamp(16px,2.2vw,18.5px); color:var(--muted); margin:0 0 34px; max-width:54ch; }
.pub-hero .lead strong { color:var(--fg); font-weight:600; }

/* ── Índice (o padrão que dá o tom) ────────────────────────── */
.rotulo { font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
          margin:clamp(38px,6vw,56px) 0 12px; }
.indice { border-top:1px solid var(--line); }
.lin { display:flex; align-items:center; gap:clamp(8px,1.4vw,14px); padding:14px clamp(6px,1.4vw,12px);
       border-bottom:1px solid var(--line); transition:background .1s, color .1s; }
.lin .idx { flex:none; width:28px; font-size:11.5px; color:var(--faint); letter-spacing:.02em; }
.lin .nm { flex:none; font-size:clamp(16px,2.2vw,20px); font-weight:800; letter-spacing:-.03em; line-height:1.15;
           max-width:64%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lin .pontos { flex:1; min-width:14px; height:1px; border-bottom:1.5px dotted var(--faint); transform:translateY(-2px); }
.lin .gp { flex:none; text-align:right; white-space:nowrap; font-size:10px; letter-spacing:.16em;
           text-transform:uppercase; color:var(--faint); }
.lin .sb { flex-basis:100%; font-size:13.5px; color:var(--muted); padding-left:28px; margin-top:-2px; }
.lin.aberta { flex-wrap:wrap; align-items:baseline; }
/* A linha do índice vira botão de formulário sem deixar de ser uma linha. */
.lin-form { display:block; }
button.lin { width:100%; border:0; border-bottom:1px solid var(--line); background:transparent;
             color:inherit; font:inherit; text-align:left; cursor:pointer; }

/* Uma cor de cada vez, e ela PINTA. É o gesto do painel: a linha ativa toma a
   cor inteira em vez de receber um cinza a mais. Cada linha traz a sua própria
   cor em --cor (o território tem a dele); sem isso, cai no roxo da publicação. */
a.lin, button.lin { --cor:var(--acx); transition:background .12s, color .12s; }
a.lin:hover, button.lin:hover, a.lin:focus-visible, button.lin:focus-visible {
  background:var(--cor); color:var(--sobre-ac); border-bottom-color:transparent; outline:0; }
a.lin:hover .idx, button.lin:hover .idx,
a.lin:hover .gp,  button.lin:hover .gp,
a.lin:hover .sb,  button.lin:hover .sb { color:rgb(255 255 255 / .78); }
a.lin:hover .nm,  button.lin:hover .nm { color:var(--sobre-ac); }
a.lin:hover .pontos, button.lin:hover .pontos { border-bottom-color:rgb(255 255 255 / .42); }
@media(max-width:640px){ .lin .nm { max-width:100%; white-space:normal; } .lin .pontos { display:none; } }

/* ── Formulário ────────────────────────────────────────────── */
.pub-form { display:grid; grid-template-columns:1fr 1fr auto; gap:0; align-items:stretch;
            border:1px solid var(--line2); border-radius:0; }
.pub-form input[type=email], .pub-form input[type=text] {
  padding:15px 16px; border:0; border-right:1px solid var(--line); background:transparent;
  color:var(--fg); font:inherit; font-size:15px; min-width:0; }
.pub-form input::placeholder { color:var(--faint); }
.pub-form input:focus { outline:0; background:var(--hover); }
.pub-form button { padding:15px 26px; border:0; background:var(--fg); color:var(--bg);
                   font:inherit; font-size:14px; font-weight:800; letter-spacing:-.01em;
                   cursor:pointer; white-space:nowrap; transition:background .13s; }
.pub-form button:hover { background:var(--acx); color:#fff; }
.pub-form .pub-mini { grid-column:1/-1; border-top:1px solid var(--line); padding:10px 16px;
                      font-size:11.5px; letter-spacing:.02em; color:var(--muted); }
.pub-trap { position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; opacity:0; }
@media(max-width:640px){
  .pub-form { grid-template-columns:1fr; }
  .pub-form input { border-right:0; border-bottom:1px solid var(--line); }
}

/* ── Blocos de texto ───────────────────────────────────────── */
.pub-box { border-top:1px solid var(--line); padding:22px 0 0; margin:clamp(38px,6vw,56px) 0 0; }
.pub-box h2 { font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
              font-weight:600; margin:0 0 16px; }
.pub-promessa { list-style:none; }
.pub-promessa li { display:flex; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px; }
.pub-promessa li:last-child { border-bottom:0; }
.pub-promessa li::before { content:counter(item,decimal-leading-zero); counter-increment:item;
                           font-family:ui-monospace,Menlo,monospace; font-size:11.5px; color:var(--faint);
                           flex:none; width:28px; padding-top:4px; }
.pub-promessa { counter-reset:item; }

.pub-msg { padding:14px 16px; font-size:14.5px; font-weight:600; margin:24px 0 0;
           border-left:3px solid var(--acx); background:var(--surf); }
.pub-msg.err { border-left-color:#dc2626; }

/* ── Destaque manual ───────────────────────────────────────── */
/* Único bloco da página com borda colorida — é o que ele é: uma interrupção
   assumida no meio de um texto que não vende nada. */
.pub-destaque { border:1px solid var(--acx); padding:22px 24px; margin:26px 0 34px; max-width:62ch; }
.pub-destaque .rot { font-size:10px; letter-spacing:.24em; text-transform:uppercase;
                     color:var(--acx); font-weight:700; margin-bottom:9px; }
.pub-destaque h2 { font-size:clamp(19px,2.6vw,23px); font-weight:800; letter-spacing:-.03em;
                   line-height:1.25; margin:0 0 8px; }
.pub-destaque p { font-size:15.5px; color:var(--muted); margin:0; }
.pub-destaque .pub-btn { margin-top:16px; }

/* ── Edição publicada ──────────────────────────────────────── */
.pub-ed h1 { font-size:clamp(28px,5.2vw,44px); line-height:1.06; letter-spacing:-.045em;
             font-weight:800; margin:0 0 18px; max-width:18ch; }
.pub-ed .lede { font-size:clamp(17px,2.2vw,19px); line-height:1.6; margin:0 0 8px; max-width:62ch; }

.pub-item { border-top:1px solid var(--line); padding:22px 0 26px; }
.pub-item .cab { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.pub-item .cab .idx { flex:none; font-size:11.5px; color:var(--faint);
                      font-family:ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums; }
.pub-item .cab .pontos { flex:1; height:1px; border-bottom:1.5px dotted var(--faint); }
.pub-item .cab .gp { flex:none; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.pub-item p { font-size:16.5px; line-height:1.62; max-width:62ch; }
.pub-item .mh { font-weight:800; letter-spacing:-.01em; }
.pub-item .res { display:block; font-size:13.5px; color:var(--muted); margin-top:9px; max-width:62ch;
                 padding-left:13px; border-left:2px solid var(--line2); }
.pub-item .fonte { display:inline-block; margin-top:12px; font-size:12px; letter-spacing:.14em;
                   text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line2); padding-bottom:2px; }
.pub-item .fonte:hover { color:var(--acx); border-bottom-color:var(--acx); }

.pub-nao { border-top:1px solid var(--line); border-bottom:1px solid var(--line);
           padding:20px 0; margin:8px 0 0; }
.pub-nao .rot { font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
.pub-nao p { font-size:15px; color:var(--muted); max-width:62ch; }

.pub-refletir { font-size:clamp(20px,3.2vw,27px); line-height:1.32; font-weight:800; letter-spacing:-.03em;
                margin:clamp(34px,5vw,48px) 0 6px; max-width:22ch; }
.pub-refletir::before { content:""; display:block; width:44px; height:2px; background:var(--acx); margin-bottom:20px; }

.pub-tags { display:flex; gap:22px; flex-wrap:wrap; margin:30px 0 0;
            font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.pub-tag { color:var(--muted); border-bottom:1px solid transparent; padding-bottom:2px; }
.pub-tag:hover, .pub-tag.on { color:var(--fg); border-bottom-color:var(--fg); }

/* ── Preferências e botões ─────────────────────────────────── */
.pub-check { display:flex; align-items:flex-start; gap:12px; padding:14px 0; font-size:15px;
             border-bottom:1px solid var(--line); }
.pub-check input { margin-top:4px; width:16px; height:16px; accent-color:var(--acx); flex:none; }
.pub-check .sub { display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.pub-btn { display:inline-block; padding:14px 24px; border:1px solid var(--line2); background:transparent;
           color:var(--fg); font:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:.13s; }
.pub-btn:hover { border-color:var(--fg); background:var(--hover); }
.pub-btn.pri { background:var(--fg); border-color:var(--fg); color:var(--bg); }
.pub-btn.pri:hover { background:var(--acx); border-color:var(--acx); color:#fff; }
.pub-btn.quiet { border-color:transparent; color:var(--muted); padding-left:0; padding-right:0;
                 border-bottom:1px solid var(--line2); }
.pub-btn.quiet:hover { background:transparent; color:var(--fg); border-bottom-color:var(--fg); }
.pub-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:24px; }
.pub-sel { padding:14px 15px; border:1px solid var(--line2); background:transparent; color:var(--fg);
           font:inherit; font-size:15px; border-radius:0; }