@charset "UTF-8";

/* ============================================================
   Super Márcia — Blog
   Mesmos tokens do site principal. O blog é extensão da home,
   não um produto à parte: mesma fonte, mesma paleta, mesmo
   header, mesmo rodapé.
   ============================================================ */

:root{
  --brand:#14A3B1;
  --brand-2:#0EA5E9;
  --brand-dark:#0C7A85;
  --brand-light:#E0F7FA;
  --ink:#0B1320;
  --muted:#5B677A;
  --line:#E6EAEE;
  --bg:#F7F9FB;
  --card:#FFFFFF;
  --gelo:#F4F7FB;
  --shadow-soft:0 2px 6px rgba(13,38,76,.06), 0 8px 24px rgba(13,38,76,.05);
  --shadow-hover:0 6px 16px rgba(13,38,76,.08), 0 14px 38px rgba(13,38,76,.06);
  --radius:14px;
  --radius-lg:20px;
  --gutter:28px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  background:var(--card);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--brand-dark);text-decoration:none}
a:hover{color:var(--brand)}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;line-height:1.2;font-weight:700}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

.container{max-width:1250px;margin:0 auto;padding:0 var(--gutter)}

/* ============================================================
   Cabeçalho — cópia fiel do da home
   Mesmos valores. A única regra extra é o menu de telas
   pequenas, que a home resolve de outro jeito.
   ============================================================ */

.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:68px;padding:0 var(--gutter);max-width:1250px;margin:0 auto;
}
.header-logo img{height:36px;width:auto}
.header-nav{display:flex;align-items:center;gap:32px}
.header-nav a{font-size:14px;font-weight:500;color:var(--muted);transition:color .2s}
.header-nav a:hover{color:var(--brand)}
.header-nav a.is-atual{color:var(--ink);font-weight:600}

.header-acessar{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px !important;font-weight:600 !important;color:var(--ink) !important;
  padding:9px 18px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--card);
  transition:all .2s ease;white-space:nowrap;
}
.header-acessar:hover{
  border-color:var(--brand) !important;color:var(--brand) !important;
  box-shadow:0 2px 10px rgba(20,163,177,.15);
}

.header-cta{
  background:linear-gradient(135deg, var(--brand-2), var(--brand));
  color:#fff !important;padding:10px 20px;border-radius:999px;
  font-size:14px;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 4px 14px rgba(20,163,177,.3);
  transition:all .2s ease;white-space:nowrap;
}
.header-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(20,163,177,.4)}

/* Menu de telas pequenas */
.header-menu{
  display:none;flex-direction:column;gap:5px;
  background:none;border:0;cursor:pointer;padding:8px;
}
.header-menu span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}

/* Compensa o cabeçalho fixo */
.pagina{padding-top:68px}

/* ============================================================
   Capa da seção
   ============================================================ */

.capa{
  background:var(--card);
  border-bottom:1px solid var(--line);
  padding:64px 0 56px;
}
.capa h1{font-size:44px;margin-bottom:14px}
.capa p{font-size:19px;color:var(--muted);margin:0;max-width:620px}
.capa--compacta{padding:44px 0 36px}
.capa--compacta h1{font-size:32px}

/* Filtros por trilha — categorias reais, não decoração */
.filtros{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.filtro{
  font-size:13.5px;font-weight:500;color:var(--muted);
  padding:7px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);transition:all .18s;
}
.filtro:hover{border-color:var(--brand);color:var(--brand)}
.filtro.is-ativo{background:var(--ink);border-color:var(--ink);color:#fff}

/* ============================================================
   Destaque
   ============================================================ */

.destaque{padding:56px 0 12px}
.destaque-link{
  display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center;
  color:inherit;
}
.destaque-img{
  border-radius:var(--radius-lg);overflow:hidden;background:var(--gelo);
  aspect-ratio:16/10;box-shadow:var(--shadow-soft);transition:box-shadow .25s;
}
.destaque-link:hover .destaque-img{box-shadow:var(--shadow-hover)}
.destaque-img img{width:100%;height:100%;object-fit:cover}
.destaque h2{font-size:34px;margin:14px 0 16px;color:var(--ink);transition:color .2s}
.destaque-link:hover h2{color:var(--brand-dark)}
.destaque .resumo{font-size:17px;color:var(--muted);margin:0 0 22px}

/* ============================================================
   Etiqueta de trilha
   ============================================================ */

.etiqueta{
  display:inline-block;font-size:12.5px;font-weight:600;
  color:var(--brand-dark);background:var(--brand-light);
  padding:5px 12px;border-radius:999px;
}

/* ============================================================
   Assinatura com avatar
   ============================================================ */

.assina{display:flex;align-items:center;gap:11px}
/* Serve tanto para <img> (foto real) quanto para <span> (iniciais,
   usado quando o autor nao tem foto cadastrada). */
.avatar{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand);
  color:#fff;font-weight:700;font-size:14px;letter-spacing:.02em;
  overflow:hidden;
}
img.avatar{
  object-fit:cover;background:var(--gelo);
  box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--line);
}
.avatar--g{width:52px;height:52px;font-size:18px}
img.avatar--g{box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--line)}
.autor-card img.avatar{box-shadow:0 0 0 3px #fff}
.assina-txt{min-width:0}
.assina-nome{font-size:14px;font-weight:600;color:var(--ink);display:block;line-height:1.35}
.assina-meta{font-size:13px;color:var(--muted);display:block;line-height:1.35}

/* ============================================================
   Grade de posts
   ============================================================ */

.grade-secao{padding:44px 0 72px}
.grade-titulo{font-size:22px;margin-bottom:26px}
.grade{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
}

.post-card{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  color:inherit;transition:transform .22s,box-shadow .22s,border-color .22s;
}
.post-card:hover{
  transform:translateY(-3px);box-shadow:var(--shadow-hover);
  border-color:transparent;
}
.post-card-img{aspect-ratio:16/9;background:var(--gelo);overflow:hidden}
.post-card-img img{width:100%;height:100%;object-fit:cover}
.post-card-corpo{padding:20px 21px 22px;display:flex;flex-direction:column;flex:1}
.post-card h3{font-size:18px;margin:11px 0 9px;color:var(--ink)}
.post-card:hover h3{color:var(--brand-dark)}
.post-card .resumo{
  font-size:14.5px;color:var(--muted);margin:0 0 18px;flex:1;line-height:1.6;
}
.post-card .assina{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.post-card .avatar{width:32px;height:32px;font-size:12px}

/* ============================================================
   Paginação
   ============================================================ */

.paginacao{
  display:flex;justify-content:center;align-items:center;gap:14px;
  margin-top:52px;
}
.paginacao a,.paginacao span{
  font-size:14px;font-weight:600;padding:10px 20px;border-radius:999px;
}
.paginacao a{border:1.5px solid var(--line);color:var(--ink);transition:all .2s}
.paginacao a:hover{border-color:var(--brand);color:var(--brand)}
.paginacao span{color:var(--muted);font-weight:500}

.vazio{padding:80px 0 100px;text-align:center;color:var(--muted)}
.vazio h2{font-size:22px;color:var(--ink);margin-bottom:10px}

/* ============================================================
   Artigo — capa
   ============================================================ */

.artigo-capa{
  background:var(--card);
  border-bottom:1px solid var(--line);padding:36px 0 42px;
}
/* Mesma largura e mesmo recuo do .artigo-layout: sem isso o título
   começa mais para dentro que o primeiro parágrafo, e a coluna da
   esquerda fica desalinhada de cima a baixo. */
.artigo-capa-inner{
  max-width:1160px;margin:0 auto;padding:0 var(--gutter);
}
/* Dentro da capa, o texto respeita a mesma coluna do corpo: a largura
   total menos a lateral e o vão entre as duas. */
.artigo-capa-inner > *{max-width:calc(100% - 312px - 72px)}
.artigo-capa-inner .artigo-meta{max-width:calc(100% - 312px - 72px)}

.migalha{font-size:13.5px;color:var(--muted);margin-bottom:20px}
.migalha a{color:var(--muted)}
.migalha a:hover{color:var(--brand)}
.migalha i{font-style:normal;margin:0 8px;opacity:.5}

/* text-wrap:balance distribui as linhas do titulo de forma pareja,
   evitando a ultima linha com uma palavra solta. */
.artigo-capa h1{
  font-size:40px;margin:14px 0 18px;line-height:1.18;letter-spacing:-.025em;
  text-wrap:balance;
}
.capa h1,.destaque h2,.post-card h3,.trilha-card h3{text-wrap:balance}
.artigo-lead{font-size:19px;color:var(--muted);margin:0 0 28px;line-height:1.6}

.artigo-meta{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  padding-top:22px;border-top:1px solid var(--line);
}

/* Compartilhar */
.share{display:flex;align-items:center;gap:8px}
.share a,.share button{
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);background:var(--card);
  color:var(--muted);cursor:pointer;transition:all .18s;padding:0;
}
.share a:hover,.share button:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-light)}
.share .ok{border-color:var(--brand);color:var(--brand);background:var(--brand-light)}

/* Imagem de topo, sobrepondo a capa.
   Proporcao fixa e object-fit: sem isso, print de tela com borda escura
   ou razao estranha vaza para fora do card. */
.artigo-hero{max-width:1000px;margin:-26px auto 0;padding:0 var(--gutter)}
.artigo-hero img{
  width:100%;aspect-ratio:16/8;object-fit:cover;object-position:center top;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);
  background:var(--gelo);
}

/* ============================================================
   Artigo — duas colunas
   ============================================================ */

.artigo-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 312px;
  gap:72px;align-items:start;
  max-width:1160px;margin:0 auto;padding:52px var(--gutter) 88px;
}

.artigo-lado{position:sticky;top:92px;display:grid;gap:18px}

.lado-bloco{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px;
}
.lado-rot{
  display:block;font-size:12px;font-weight:600;color:var(--muted);
  margin-bottom:8px;
}
.lado-bloco h3{font-size:17px;margin:0 0 8px;line-height:1.3}
.lado-bloco p{margin:0 0 16px;font-size:14px;color:var(--muted);line-height:1.6}

.lado-autor{display:flex;align-items:center;gap:14px}
.lado-autor .lado-rot{margin-bottom:2px}
.lado-autor .assina-nome{font-size:15.5px}

.lado-trilha{background:var(--gelo);border-color:transparent}

.lado-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;padding:10px 18px;border-radius:999px;
  border:1.5px solid var(--brand);color:var(--brand-dark);transition:all .18s;
}
.lado-btn:hover{background:var(--brand);color:#fff}
.lado-btn--cheio{
  width:100%;background:linear-gradient(135deg,var(--brand-2),var(--brand));
  border-color:transparent;color:#fff;
  box-shadow:0 4px 14px rgba(20,163,177,.28);
}
.lado-btn--cheio:hover{color:#fff;transform:translateY(-1px)}

.lado-lista ul{list-style:none;margin:0;padding:0}
.lado-lista li + li{margin-top:6px;padding-top:14px;border-top:1px solid var(--line)}
.lado-lista a{display:flex;gap:12px;align-items:flex-start;color:inherit}
.lado-lista img{
  width:56px;height:56px;flex:0 0 56px;border-radius:9px;
  object-fit:cover;background:var(--gelo);
}
.lado-lista strong{
  display:block;font-size:14px;font-weight:600;line-height:1.4;color:var(--ink);
}
.lado-lista a:hover strong{color:var(--brand-dark)}
.lado-lista em{
  display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:4px;
}

.lado-cta{
  background:var(--ink);border-color:transparent;color:#fff;padding:24px 22px;
}
.lado-cta h3{color:#fff;font-size:16.5px}
.lado-cta p{color:rgba(255,255,255,.72);font-size:13.5px}

/* ============================================================
   Corpo do texto
   Inter, como no resto do site. Corpo a 18px com entrelinha 1.75
   para aguentar leitura longa sem trocar de família.
   O editor gera <div> por parágrafo e <div><br></div> como
   espaçador — as duas primeiras regras existem por isso.
   ============================================================ */

.artigo-corpo{
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:18px;line-height:1.75;color:#26333F;
  max-width:none;margin:0;padding:0;
  letter-spacing:-.003em;
}
.artigo-corpo div{margin:0 0 1.35em}
.artigo-corpo div:empty{margin:0;height:.5em}
.artigo-corpo div br:only-child{display:none}
.artigo-corpo p{margin:0 0 1.35em}
.artigo-corpo b,.artigo-corpo strong{font-weight:600;color:var(--ink)}

.artigo-corpo h2,.artigo-corpo h3{
  font-family:"Inter",system-ui,sans-serif;color:var(--ink);
}
.artigo-corpo h2{font-size:29px;margin:1.9em 0 .55em;letter-spacing:-.02em}
.artigo-corpo h3{font-size:22px;margin:1.6em 0 .45em;letter-spacing:-.015em}

.artigo-corpo ul,.artigo-corpo ol{margin:0 0 1.35em;padding-left:1.5em}
.artigo-corpo li{margin:0 0 .55em}
.artigo-corpo li::marker{color:var(--brand)}

/* Link no corpo: itálico e sublinhado, para se distinguir do texto
   mesmo em impressão ou para quem não enxerga bem a diferença de cor. */
.artigo-corpo a{
  color:var(--brand-dark);
  font-style:italic;
  text-decoration:underline;
  text-decoration-color:rgba(20,163,177,.45);
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  transition:color .15s,text-decoration-color .15s,background-color .15s;
  border-radius:3px;
}
.artigo-corpo a:hover{
  color:var(--brand);
  text-decoration-color:var(--brand);
  background:var(--brand-light);
  box-shadow:0 0 0 2px var(--brand-light);
}
/* Link externo ganha uma seta discreta — só nos links do texto.
   O bloco de compartilhar vive dentro do .artigo-corpo, então
   precisa ficar de fora desta regra. */
.artigo-corpo .share a::after,
.artigo-fim a::after{content:none !important}
.artigo-corpo p a[target="_blank"]::after,
.artigo-corpo div a[target="_blank"]::after,
.artigo-corpo li a[target="_blank"]::after{
  content:"↗";
  font-style:normal;font-size:.72em;
  margin-left:2px;vertical-align:.15em;opacity:.6;
  text-decoration:none;display:inline-block;
}
/* Imagem dentro de link não deve herdar itálico nem sublinhado */
.artigo-corpo a:has(img),.artigo-corpo a:has(img) *{font-style:normal !important;text-decoration:none !important;}
.artigo-corpo a:has(img){text-decoration:none;background:none;box-shadow:none}
.artigo-corpo a img{border-radius:var(--radius)}

.artigo-corpo img{border-radius:var(--radius);margin:1.9em 0}
.artigo-corpo figure{margin:1.9em 0}
.artigo-corpo figcaption{
  font-size:13.5px;color:var(--muted);
  margin-top:9px;text-align:center;
}

.artigo-corpo blockquote{
  margin:1.9em 0;padding:20px 26px;
  background:var(--gelo);border-left:3px solid var(--brand);
  border-radius:0 var(--radius) var(--radius) 0;color:var(--ink);font-size:17.5px;
}
.artigo-corpo blockquote p:last-child,.artigo-corpo blockquote div:last-child{margin-bottom:0}

.artigo-corpo pre{
  overflow-x:auto;background:#0F1B2D;color:#E3EAF3;
  padding:18px 20px;border-radius:var(--radius);
  font-size:14.5px;line-height:1.6;margin:1.9em 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.artigo-corpo code{
  background:var(--gelo);padding:2px 7px;border-radius:5px;
  font-size:.85em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--brand-dark);
}
.artigo-corpo pre code{background:none;padding:0;color:inherit}

.artigo-corpo table{
  width:100%;border-collapse:collapse;margin:1.9em 0;font-size:15px;
}
.artigo-corpo th,.artigo-corpo td{
  border-bottom:1px solid var(--line);padding:12px 14px;text-align:left;
}
.artigo-corpo th{font-weight:600;background:var(--gelo)}

.artigo-corpo iframe,.artigo-corpo video{
  max-width:100%;width:100%;aspect-ratio:16/9;height:auto;
  border-radius:var(--radius);margin:1.9em 0;border:0;
}
.artigo-corpo hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

/* Sem margin-right:auto no rótulo: os ícones ficam logo depois
   da frase, não jogados na outra ponta da linha. */
.artigo-fim{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-top:52px;padding-top:24px;border-top:1px solid var(--line);
  font-family:"Inter",system-ui,sans-serif;
}
.artigo-fim-rot{font-size:14.5px;font-weight:600;color:var(--ink)}
.artigo-fim .share{gap:8px}
.artigo-fim .share a,.artigo-fim .share button{width:38px;height:38px}

/* Placeholder quando o post não tem imagem nenhuma */
.sem-img{
  display:flex;align-items:center;justify-content:center;
  background:var(--gelo);border:1px solid var(--line);
}
.sem-img-marca img{width:46px;height:46px;opacity:.34}

/* ============================================================
   Telas menores
   ============================================================ */

@media (max-width:1180px){
  .artigo-capa-inner{max-width:760px}
  .artigo-capa-inner > *,
  .artigo-capa-inner .artigo-meta{max-width:100%}
  .artigo-layout{grid-template-columns:1fr;gap:40px;max-width:760px}
  .artigo-lado{position:static;grid-template-columns:1fr 1fr;gap:16px}
  .lado-cta{grid-column:1/-1}
}

@media (max-width:1000px){
  .grade{grid-template-columns:repeat(2,1fr);gap:26px}
  .destaque-link{grid-template-columns:1fr;gap:26px}
  .destaque h2{font-size:28px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
}

@media (max-width:760px){
  :root{--gutter:20px}

  .header-nav{
    display:none;position:absolute;top:68px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    padding:10px var(--gutter) 20px;box-shadow:var(--shadow-soft);
  }
  .header-nav.is-aberto{display:flex}
  .header-nav > a{padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
  .header-acessar,.header-cta{margin-top:14px;justify-content:center}
  .header-menu{display:flex}

  .capa{padding:40px 0 34px}
  .capa h1{font-size:31px}
  .capa p{font-size:16.5px}

  .destaque{padding:34px 0 4px}
  .destaque h2{font-size:24px}
  .destaque .resumo{font-size:15.5px}

  .grade{grid-template-columns:1fr;gap:22px}
  .grade-secao{padding:32px 0 52px}

  .artigo-capa{padding:26px 0 32px}
  .artigo-capa h1{font-size:28px}
  .artigo-lead{font-size:17px}
  .artigo-corpo{font-size:17px}
  .artigo-corpo h2{font-size:24px}
  .artigo-corpo h3{font-size:20px}
  .artigo-hero{margin-top:-14px}
  .artigo-meta{flex-direction:column;align-items:flex-start;gap:16px}
  .artigo-layout{padding:32px var(--gutter) 56px}

  .artigo-lado{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:32px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ============================================================
   Blindagem do conteúdo vindo do editor
   O texto colado de Word/Pages traz font-family, tamanho e cor
   inline. sm_corpo() remove no PHP; estas regras garantem o
   resultado mesmo em conteúdo antigo já salvo.
   ============================================================ */

.artigo-corpo *{
  font-family:inherit !important;
  color:inherit;
  background-color:transparent;
}
.artigo-corpo span,
.artigo-corpo font,
.artigo-corpo div,
.artigo-corpo p,
.artigo-corpo li{
  font-size:inherit !important;
  line-height:inherit !important;
  letter-spacing:normal !important;
}
.artigo-corpo h2,.artigo-corpo h3,.artigo-corpo h4,
.artigo-corpo p,.artigo-corpo div,.artigo-corpo li,.artigo-corpo span{
  font-family:"Inter",system-ui,sans-serif !important;
}
.artigo-corpo h2 *,.artigo-corpo h3 *,.artigo-corpo h4 *{
  font-size:inherit !important;font-weight:inherit !important;
}
.artigo-corpo code,.artigo-corpo pre,.artigo-corpo pre *{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace !important;
}
.artigo-corpo pre,.artigo-corpo pre *{color:#E3EAF3 !important}
.artigo-corpo a{color:var(--brand-dark) !important;font-style:italic !important;text-decoration:underline !important}
/* Botões de compartilhar não são texto: sem itálico, sem sublinhado */
.artigo-corpo .share a,.artigo-corpo .share button,.artigo-fim a,.artigo-fim button{
  font-style:normal !important;text-decoration:none !important;
}

/* Restos do editor que porventura escapem da limpeza no PHP */
.artigo-corpo .block-toolbar,
.artigo-corpo .block-btn,
.artigo-corpo .drop-hint,
.artigo-corpo button{display:none !important}

/* Parágrafos que o editor deixa como <p class="p1"> */
.artigo-corpo p[class]{margin:0 0 1.35em}

/* Imagens do corpo: nunca ultrapassam a coluna, e print com fundo
   escuro ganha borda em vez de encostar no branco da pagina. */
.artigo-corpo img{
  max-width:100%;height:auto;
  border:1px solid var(--line);
}
.artigo-corpo p img,.artigo-corpo div img{margin-left:auto;margin-right:auto}
.artigo-corpo iframe{border:1px solid var(--line)}

/* ============================================================
   Academy
   ============================================================ */

.container--estreito{max-width:840px}
.capa-meta{font-size:14.5px;color:var(--muted);margin:16px 0 0 !important}

.grade--trilhas{grid-template-columns:repeat(3,1fr)}
.grade-titulo--sec{margin-top:60px}
.grade-nota{font-size:15px;color:var(--muted);margin:-16px 0 26px}

.trilha-card{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 22px 20px;color:inherit;
  transition:transform .22s,box-shadow .22s,border-color .22s;
}
a.trilha-card:hover{
  transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:transparent;
}
.trilha-card h3{font-size:18px;margin:12px 0 8px;color:var(--ink)}
a.trilha-card:hover h3{color:var(--brand-dark)}
.trilha-card p{margin:0 0 16px;font-size:14.5px;color:var(--muted);line-height:1.6;flex:1}
.trilha-n{
  font-size:13px;font-weight:600;color:var(--muted);
  padding-top:14px;border-top:1px solid var(--line);
}

.trilha-selo{
  align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px;
  color:var(--brand-dark);background:var(--brand-light);
}
.trilha-selo--fechado{color:var(--muted);background:var(--gelo)}

.trilha-card--fechada{background:var(--card);border-style:dashed}
.trilha-card--fechada h3{color:var(--muted)}

.academy-cta{
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
  margin-top:44px;padding:26px 28px;
  background:var(--gelo);border-radius:var(--radius-lg);
}
.academy-cta h3{font-size:18px;margin-bottom:5px}
.academy-cta p{margin:0;font-size:14.5px;color:var(--muted)}

/* Lista de aulas da trilha */
.aulas{list-style:none;margin:0;padding:0;counter-reset:none}
.aulas li + li{margin-top:10px}
.aula{
  display:flex;gap:16px;align-items:flex-start;
  padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);color:inherit;transition:all .2s;
}
.aula:hover{border-color:var(--brand);box-shadow:var(--shadow-soft)}
.aula-n{
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-light);color:var(--brand-dark);
  font-size:13.5px;font-weight:700;
}
.aula-txt{flex:1;min-width:0}
.aula-txt strong{display:block;font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.4}
.aula:hover .aula-txt strong{color:var(--brand-dark)}
.aula-resumo{display:block;font-size:14px;color:var(--muted);margin-top:5px;line-height:1.55}
.aula-txt em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:7px}
.aula-seta{flex:0 0 18px;color:var(--muted);margin-top:6px}
.aula:hover .aula-seta{color:var(--brand)}

/* Anterior / próxima dentro da aula */
.aula-nav{
  display:flex;gap:16px;justify-content:space-between;
  margin-top:52px;padding-top:26px;border-top:1px solid var(--line);
}
.aula-nav-item{
  flex:1;max-width:48%;padding:14px 18px;
  border:1px solid var(--line);border-radius:var(--radius);
  color:inherit;transition:all .2s;
}
.aula-nav-item:hover{border-color:var(--brand);box-shadow:var(--shadow-soft)}
.aula-nav-item span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px}
.aula-nav-item strong{display:block;font-size:15px;font-weight:600;color:var(--ink);line-height:1.4}
.aula-nav-item--fim{text-align:right;margin-left:auto}

/* Índice da trilha na lateral */
.lado-aulas{list-style:none;margin:0;padding:0;counter-reset:none}
.lado-aulas li{margin-bottom:4px}
.lado-aulas a,.lado-aulas span{
  display:flex;gap:10px;align-items:flex-start;
  font-size:13.5px;line-height:1.45;color:var(--muted);
  padding:7px 8px;border-radius:8px;
}
.lado-aulas a:hover{background:var(--card);color:var(--ink)}
.lado-aulas .is-atual span{background:var(--card);color:var(--ink);font-weight:600}
.lado-aula-n{
  flex:0 0 20px;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);color:var(--muted);font-size:11px;font-weight:700;
}
.lado-aulas .is-atual .lado-aula-n{background:var(--brand);color:#fff}

@media (max-width:1000px){
  .grade--trilhas{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .grade--trilhas{grid-template-columns:1fr}
  .academy-cta{flex-direction:column;align-items:flex-start;padding:22px}
  .aula-nav{flex-direction:column}
  .aula-nav-item{max-width:100%;text-align:left}
  .aula-nav-item--fim{margin-left:0}
}

/* ============================================================
   Continue lendo — cards compactos no fim do artigo
   Lista horizontal em vez de grade de cards altos: a miniatura
   tem proporção fixa e o texto é curto, então todas as linhas
   ficam da mesma altura independente do tamanho do post.
   ============================================================ */

.mais{
  border-top:1px solid var(--line);
  margin-top:80px;padding:52px 0 72px;background:var(--bg);
}
/* Mesma largura do .artigo-layout: a seção alinha com o texto
   que a pessoa acabou de ler, em vez de flutuar estreita no meio. */
.mais .container{max-width:1160px}

.mais-topo{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:20px;
}
.mais-topo h2{
  font-size:18px;font-weight:700;letter-spacing:-.015em;margin:0;color:var(--ink);
}
.mais-todos{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  font-size:13.5px;font-weight:600;color:var(--brand-dark);
  transition:gap .16s;
}
.mais-todos:hover{gap:8px}
.mais-todos svg{flex:0 0 auto}

.mais-lista{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
}
/* Um item só ocupa a linha inteira, senão fica um card solto e
   metade da largura vazia. */
.mais-lista:has(li:only-child){grid-template-columns:1fr}

.mini{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);
  color:inherit;transition:border-color .18s,box-shadow .18s,transform .18s;
}
.mini:hover{
  border-color:transparent;box-shadow:var(--shadow-soft);
  transform:translateY(-1px);
}

.mini-img{
  flex:0 0 56px;width:56px;height:56px;border-radius:9px;
  overflow:hidden;background:var(--gelo);
  display:grid;place-items:center;
}
.mini-img img{width:100%;height:100%;object-fit:cover;display:block}
.mini-vazia{background:var(--gelo)}
.mini-vazia .mini-marca{width:24px;height:24px;object-fit:contain;opacity:.3}

.mini-txt{flex:1;min-width:0;display:block}
.mini-trilha{
  display:block;font-size:11px;font-weight:600;color:var(--brand-dark);
  margin-bottom:3px;text-transform:none;
}
.mini-txt strong{
  display:block;font-size:15px;font-weight:600;line-height:1.35;
  color:var(--ink);letter-spacing:-.01em;
  /* Duas linhas no máximo: título longo não pode esticar a linha */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.mini:hover .mini-txt strong{color:var(--brand-dark)}
.mini-meta{
  display:block;font-size:12px;color:var(--muted);margin-top:4px;
}

.mini-seta{flex:0 0 15px;color:var(--line);transition:color .18s,transform .18s}
.mini:hover .mini-seta{color:var(--brand);transform:translateX(2px)}

@media (max-width:860px){
  .mais-lista{grid-template-columns:1fr}
}
@media (max-width:760px){
  .mais{margin-top:52px;padding:36px 0 52px}
  .mais-topo h2{font-size:17px}
  .mini{padding:11px 12px;gap:12px}
  .mini-img{flex-basis:48px;width:48px;height:48px}
  .mini-txt strong{font-size:14.5px}
}

/* ============================================================
   Rodapé — cópia fiel do da home
   Mesmas classes e mesmos valores. Ao mexer no rodapé da home,
   replique aqui: são dois arquivos, uma aparência só.
   ============================================================ */

.footer{background:#080E1A;padding:64px 0 0}

.footer-grid{
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1fr 1fr;
  gap:48px;padding-bottom:48px;
}

.footer-logo{display:block;margin-bottom:16px}
.footer-logo img{height:32px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.footer-desc{
  font-size:14px;color:rgba(255,255,255,.45);line-height:1.65;
  margin-bottom:12px;max-width:260px;
}
.footer-cnpj{font-size:12px;color:rgba(255,255,255,.25);letter-spacing:.01em}
.footer-cnpj a{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.25)}

.footer-col-titulo{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.35);margin-bottom:20px;
}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.footer-links a{
  font-size:14px;color:rgba(255,255,255,.55);text-decoration:none;
  transition:color .18s ease;display:inline-flex;align-items:center;gap:8px;
}
.footer-links a:hover{color:var(--brand)}
.footer-links a svg{flex-shrink:0;opacity:.7;transition:opacity .18s ease}
.footer-links a:hover svg{opacity:1}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.07);padding:20px 0;
  display:flex;align-items:center;justify-content:center;
}
.footer-copy{font-size:13px;color:rgba(255,255,255,.22);text-align:center}

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:540px){
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer{padding-top:48px}
}

/* ============================================================
   Página não encontrada
   ============================================================ */

.erro{padding:88px 0 64px;text-align:center}
.erro .container{max-width:640px}

.erro-cod{
  display:block;font-size:88px;font-weight:800;line-height:1;
  letter-spacing:-.04em;color:var(--gelo);margin-bottom:-14px;
  user-select:none;
}
.erro h1{
  font-size:32px;font-weight:700;letter-spacing:-.025em;
  margin:0 0 14px;color:var(--ink);
}
.erro p{
  font-size:17px;color:var(--muted);line-height:1.65;
  margin:0 auto 30px;max-width:480px;
}

.erro-acoes{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.erro-bt{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 22px;border-radius:999px;
  font-size:14.5px;font-weight:600;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  transition:border-color .18s,color .18s,transform .18s;
}
.erro-bt:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.erro-bt--pri{
  background:linear-gradient(135deg,var(--brand-2),var(--brand));
  border-color:transparent;color:#fff;
  box-shadow:0 4px 14px rgba(20,163,177,.3);
}
.erro-bt--pri:hover{color:#fff;border-color:transparent;box-shadow:0 6px 20px rgba(20,163,177,.4)}

@media (max-width:760px){
  .erro{padding:56px 0 44px}
  .erro-cod{font-size:64px}
  .erro h1{font-size:25px}
  .erro p{font-size:16px}
  .erro-acoes{flex-direction:column}
  .erro-bt{width:100%}
}