/* Páginas públicas da Academia (src/publico.js: /trilhas, /trilhas/<area>, /licoes/<slug>) e o índice que vai
   na casca do app em "/". Usa as variáveis do app.css. */
.pub-topo { max-width: 980px; margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; gap: 18px; }
.pub-topo .marca { color: var(--tx); text-decoration: none; }
.pub-topo nav { display: flex; gap: 18px; align-items: center; }
.pub-topo nav a { color: var(--tx2); text-decoration: none; font-weight: 600; font-size: 14px; }
.pub-topo nav a:hover { color: var(--tx); }
.pub-topo .pub-entrar { color: #031427; background: var(--azul); padding: 8px 14px; border-radius: 10px; }
.pub-topo .pub-entrar:hover { color: #031427; }
.pub-main { max-width: 980px; margin: 0 auto; padding: 0 24px 60px; }
.pub-rodape { max-width: 980px; margin: 0 auto; padding: 24px; border-top: 1px solid var(--linha); color: var(--tx3); font-size: 13px; }
.pub-rodape a { color: var(--tx2); }
.pub-migalhas { font-size: 13px; color: var(--tx3); margin: 6px 0 18px; }
.pub-migalhas a { color: var(--tx2); text-decoration: none; }
.pub-heroi { padding: 28px 0 20px; }
.pub-heroi h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 12px; }
.pub-heroi p { color: var(--tx2); font-size: 17px; max-width: 620px; margin: 0 0 18px; }
.pub-area { margin: 36px 0; }
.pub-area h2, .pub-area h3 { margin: 0 0 10px; letter-spacing: -.02em; }
.pub-area h2 a, .pub-area h3 a { color: var(--tx); text-decoration: none; background: linear-gradient(90deg, var(--c1), var(--c2)) left bottom / 100% 2px no-repeat; padding-bottom: 2px; }
.pub-area small, .pub-modulo small { color: var(--tx3); font-weight: 600; font-size: 13px; }
.pub-dores { margin: 0 0 16px; padding-left: 20px; color: var(--tx2); }
.pub-dores li { margin: 4px 0; }
.pub-dores a { color: var(--tx); }
.pub-modulo h3 { font-size: 15px; color: var(--tx2); margin: 22px 0 10px; }
.pub-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pub-licao { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--linha);
  color: var(--tx); text-decoration: none; transition: border-color .2s, transform .2s; }
.pub-licao:hover { border-color: var(--azul); transform: translateY(-2px); }
.pub-licao b { display: block; font-size: 14px; line-height: 1.3; }
.pub-licao small { color: var(--tx3); font-size: 12px; }
.pub-thumb { width: 58px; height: 58px; border-radius: 10px; overflow: hidden; flex: none; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--c1, var(--azul)), var(--c2, var(--roxo))); font-size: 24px; font-style: normal; }
.pub-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pub-mais { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 14px; text-decoration: none; }
.pub-artigo { max-width: 720px; }
.pub-capa { aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; display: grid; place-items: center; font-size: 80px; font-style: normal;
  background: linear-gradient(160deg, var(--c1), var(--c2)); }
.pub-capa img { width: 100%; height: 100%; object-fit: cover; animation: kb0 14s ease-out forwards; }
.pub-meta { color: var(--tx3); font-size: 13px; margin: 18px 0 6px; }
.pub-artigo h1 { font-size: clamp(28px, 4.5vw, 40px); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 12px; }
.pub-artigo h2, .pub-h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--tx3); margin: 30px 0 10px; }
.pub-artigo p, .pub-artigo li { font-size: 17px; line-height: 1.55; }
.pub-resumo { color: var(--tx2); }
.pub-artigo blockquote { margin: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--c1); font-size: 21px; font-weight: 700; line-height: 1.35; }
.pub-ideia { font-size: 22px !important; font-weight: 800; letter-spacing: -.01em; line-height: 1.3 !important; }
.pub-pontos { padding-left: 22px; }
.pub-pontos li { margin: 8px 0; }
.pub-pontos li::marker { color: var(--c1); font-weight: 800; }
.pub-speedio { color: var(--tx2); }
.pub-cta { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 30px 0 18px; padding: 18px;
  border-radius: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--c1) 22%, var(--card)), var(--card)); border: 1px solid var(--linha); }
.pub-cta b { display: block; font-size: 17px; }
.pub-cta small { color: var(--tx2); font-size: 14px; }
/* índice em "/", embaixo da landing */
.pub-indice { max-width: 980px; margin: 0 auto; padding: 10px 24px 80px; }
.pub-indice > h2 { font-size: 26px; letter-spacing: -.02em; margin: 0 0 6px; }
.pub-indice > p { color: var(--tx2); margin: 0; }
@media (max-width: 600px) { .pub-topo, .pub-main, .pub-indice { padding-left: 18px; padding-right: 18px; } }