/* ============================================================================
   conteudo.css — base das páginas de conteúdo (modelos e guias).

   POR QUE EXISTE UM ARQUIVO EXTERNO, se o index.html tem tudo embutido:
   a home carrega ~340 regras, das quais dois terços servem só à cena animada
   da abertura. Repetir isso em cada página nova seria duplicação garantida, e
   a terceira página já pagaria o preço. Aqui vive só o que é comum — marca,
   cabeçalho, rodapé e tipografia de texto longo.

   A home continua com o CSS embutido de propósito: ela é uma peça só, e
   embutir poupa uma requisição na página que mais importa.
   ========================================================================== */

@font-face{font-family:'Inter';font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-latin.woff2') format('woff2')}
@font-face{font-family:'Saira';font-weight:100 900;font-display:swap;src:url('/assets/fonts/saira-latin.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:100 800;font-display:swap;src:url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2')}

:root{
  --deep:#010C28; --core:#000814;
  --primary:#0874E8; --ink-blue:#04337E; --signal:#0097F5;
  --ink:#0E1B2E; --body:#39424F; --muted:#5A6473; --border:#DCE3EC;
  --surface:#FFFFFF; --soft:#F3F6FA; --dark-muted:#A8BDD8;
  --success:#198754; --success-ink:#146942; --success-soft:rgba(25,135,84,.08);
  --danger:#dc3545; --danger-ink:#B11F2D; --danger-soft:rgba(220,53,69,.08);
  --warning:#8A5209; --warning-dark:#E8A33D; --warning-soft:rgba(138,82,9,.08);
  --primary-soft:rgba(8,116,232,.08);
  --f-body:'Inter',system-ui,sans-serif; --f-disp:'Saira',system-ui,sans-serif; --f-data:'JetBrains Mono',ui-monospace,monospace;
  --gut:1.8rem; --r:10px; --r-lg:14px; --pill:999px;
  --sh:0 1px 3px rgba(16,24,40,.06); --sh-lg:0 8px 22px rgba(16,24,40,.10);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--body);font-family:var(--f-body);
     font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gut)}
h1,h2,h3,h4{font-family:var(--f-disp);color:var(--ink);margin:0;font-weight:700;letter-spacing:-.025em}
a{color:var(--ink-blue)}

.cta{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-disp);font-weight:700;font-size:.95rem;
     background:linear-gradient(135deg,#0874E8,#04337E);color:#fff;text-decoration:none;
     padding:.78rem 1.6rem;border-radius:var(--r);box-shadow:var(--sh)}
.cta:hover{background:linear-gradient(135deg,#04337E,#010C28)}
.cta2{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-disp);font-weight:700;font-size:.95rem;
      background:var(--primary-soft);color:var(--ink-blue);text-decoration:none;padding:.78rem 1.5rem;border-radius:var(--r)}

/* ---------- cabeçalho e rodapé, iguais aos da home ---------- */
header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30}
header .wrap{display:flex;align-items:center;gap:2rem;padding-top:1rem;padding-bottom:1rem}
header img{height:46px}
header nav{margin-left:auto;display:flex;gap:1.6rem;font-size:.92rem}
header nav a{color:var(--muted);text-decoration:none}
header nav a:hover{color:var(--ink)}
header .cta-app{display:inline-flex;align-items:center;white-space:nowrap;
  font-family:var(--f-disp);font-weight:700;font-size:1rem;
  background:var(--primary);color:#fff;text-decoration:none;padding:.45rem 1.2rem;border-radius:var(--r)}
header .cta-app:hover{background:var(--ink-blue)}
header .cta-app:focus-visible{outline:2px solid var(--ink-blue);outline-offset:2px}
/* ---------- menu do celular ----------
   Regra de largura: em 360px a .wrap deixa 302px úteis. Logo (122px no recorte
   justo, proporção 3,58:1) + três links (~190px) + Entrar (~83px) passa de
   400px. Uma linha só não cabe, então o menu vira painel sob o cabeçalho.
   O painel fica DENTRO do header e no fluxo: assim ele empurra a página em vez
   de flutuar, e não há disputa de z-index com a barra fixa. */
header .menu-bt{display:none;align-items:center;justify-content:center;
  background:none;border:0;padding:.3rem;margin-left:.7rem;color:var(--ink);cursor:pointer}
header .menu-bt:focus-visible{outline:2px solid var(--ink-blue);outline-offset:2px;border-radius:6px}
header .menu-bt .ic-fechar{display:none}
header.aberto .menu-bt .ic-abrir{display:none}
header.aberto .menu-bt .ic-fechar{display:inline}

footer{background:var(--surface);border-top:1px solid var(--border);padding:1.9rem 0;font-size:.85rem;color:var(--muted);margin-top:4rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

/* ---------- trilha ---------- */
.trilha{font-size:.84rem;color:var(--muted);padding:1.2rem 0 0}
.trilha a{color:var(--muted);text-decoration:none}
.trilha a:hover{color:var(--ink-blue)}

/* ---------- artigo ----------
   Medida de linha em ~72 caracteres: acima disso o olho perde a volta da
   linha, e estas páginas são longas de propósito. */
/* padding-top, NUNCA o atalho padding: .artigo e .hub também carregam a classe
   .wrap, e o atalho zerava o padding lateral que vem dela. No desktop isso
   passou batido porque 72ch é bem menor que a tela e a margem automática
   disfarçava; no celular o texto encostava nas duas bordas.
   O max-width cresce o dobro da margem para o texto continuar com 72ch de
   medida real, já que box-sizing:border-box conta o padding dentro da largura. */
.artigo{max-width:calc(72ch + var(--gut) * 2);margin:0 auto;padding-top:1.5rem}
.artigo .eyebrow{display:inline-block;font-family:var(--f-disp);font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-blue);background:var(--primary-soft);
  padding:.35rem .8rem;border-radius:var(--pill);margin-bottom:1.1rem}
.artigo h1{font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.12;margin-bottom:1rem}
.artigo .chamada{font-size:1.15rem;color:var(--body);margin:0 0 2rem}
.artigo h2{font-size:clamp(1.3rem,2.4vw,1.65rem);margin:2.6rem 0 .8rem;scroll-margin-top:5rem}
.artigo h3{font-size:1.1rem;margin:1.8rem 0 .5rem}
.artigo p{margin:0 0 1.1rem}
.artigo ul,.artigo ol{margin:0 0 1.2rem;padding-left:1.3rem}
.artigo li{margin-bottom:.5rem}
.artigo strong{color:var(--ink);font-weight:600}
.artigo hr{border:0;border-top:1px solid var(--border);margin:2.6rem 0}

/* índice do artigo */
.indice{background:var(--soft);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.1rem 1.3rem;margin:0 0 2.4rem}
.indice b{display:block;font-family:var(--f-disp);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.indice ol{margin:0;padding-left:1.2rem;font-size:.94rem}
.indice li{margin-bottom:.3rem}

/* caixa de download — a peça principal destas páginas */
.baixar{background:var(--soft);border:1px solid var(--border);border-left:3px solid var(--primary);
        border-radius:var(--r-lg);padding:1.4rem 1.5rem;margin:0 0 2.4rem}
.baixar h2{margin:0 0 .4rem;font-size:1.15rem}
.baixar p{margin:0 0 1rem;font-size:.95rem;color:var(--muted)}
.baixar .arquivo{display:flex;align-items:center;gap:.6rem;font-family:var(--f-data);
                 font-size:.78rem;color:var(--muted);margin-top:.8rem}

/* destaque de ideia */
.nota{border-left:3px solid var(--warning-dark);background:var(--warning-soft);
      border-radius:var(--r);padding:1rem 1.2rem;margin:1.8rem 0;font-size:.97rem}
.nota b{color:var(--ink)}

/* tabela de conteúdo */
.artigo table{width:100%;border-collapse:collapse;font-size:.94rem;margin:1.4rem 0;
              vertical-align:middle;font-variant-numeric:tabular-nums}
.artigo th{text-align:left;font-family:var(--f-disp);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);font-weight:700;padding:.5rem .7rem;border-bottom:1px solid var(--border)}
.artigo td{padding:.65rem .7rem;border-bottom:1px solid var(--border)}
.artigo tr:last-child td{border-bottom:0}

/* exemplo de documento dentro do texto */
.doc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
     box-shadow:var(--sh);padding:1.2rem 1.4rem;margin:1.6rem 0;font-size:.92rem}
.doc .cab{font-family:var(--f-disp);font-weight:700;color:var(--ink);font-size:.95rem;
          padding-bottom:.6rem;border-bottom:1px solid var(--border);margin-bottom:.8rem}
.doc dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem}
.doc dt{font-family:var(--f-disp);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
        color:var(--muted);font-weight:700;padding-top:.2rem;white-space:nowrap}
.doc dd{margin:0;color:var(--ink)}

/* fecho da página */
.fecho-art{background:var(--deep);color:var(--dark-muted);padding:3.5rem 0;text-align:center;margin-top:4rem}
.fecho-art h2{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);max-width:24ch;margin:0 auto}
.fecho-art p{margin:1rem auto 1.8rem;max-width:46ch}
.fecho-art .cta{background:var(--signal);color:var(--deep);box-shadow:none}
.fecho-art .cta:hover{background:#fff}

/* lista de materiais (página /modelos) */
.hub{padding-top:1.5rem}
.hub h1{font-size:clamp(1.9rem,3.6vw,2.6rem);max-width:20ch}
.hub .chamada{font-size:1.15rem;margin:1rem 0 2.6rem;max-width:60ch}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
      border-radius:var(--r-lg);padding:1.4rem;box-shadow:var(--sh);text-decoration:none;color:inherit}
.card:hover{box-shadow:var(--sh-lg);border-color:rgba(90,100,115,.42)}
.card .tipo{font-family:var(--f-disp);font-size:.66rem;font-weight:700;letter-spacing:.11em;
            text-transform:uppercase;color:var(--primary);margin-bottom:.6rem}
.card h2{font-size:1.08rem;margin:0 0 .5rem;line-height:1.3}
.card p{margin:0;font-size:.93rem;color:var(--muted);flex:1}
.card .ir{margin-top:1rem;font-family:var(--f-disp);font-weight:700;font-size:.86rem;color:var(--ink-blue)}

@media(max-width:920px){
  /* O painel: some por padrão, entra em coluna quando o cabeçalho abre, e sangra
     até a borda da tela — encaixotado pelo padding da .wrap pareceria um cartão
     solto em vez de uma faixa do cabeçalho.

     A margem lateral cai de 1,8rem para 1,25rem no celular. Em 390px de largura,
     28,8px de cada lado comem 15% da tela e espremem a linha de texto; 20px é o
     que a maior parte dos aplicativos usa e devolve 18px de leitura. */
  :root{--gut:1.25rem}
  header .wrap{flex-wrap:wrap;gap:0}
  header .menu-bt{display:inline-flex}
  header .cta-app{margin-left:auto}
  /* Dois erros moravam aqui. O primeiro: width:100% com margem negativa dos dois
     lados NÃO sangra — a margem direita empurra o que vem depois, não a borda do
     próprio elemento, então o painel saía deslocado e sobrava uma faixa branca à
     direita (visto no print de 10/08). A largura precisa crescer de uma vez.
     O segundo: o número 1,8rem estava escrito à mão em três lugares. Agora vem
     de --gut, a mesma medida que a .wrap usa — mexer na margem lateral da página
     não pode voltar a quebrar o painel. */
  header nav{display:none;order:4;
    flex:0 0 calc(100% + var(--gut) * 2);
    margin:0 calc(var(--gut) * -1);padding:0 var(--gut);
    flex-direction:column;gap:0;background:var(--soft);border-top:1px solid var(--border)}
  header.aberto nav{display:flex}
  header nav a{padding:.9rem 0;font-size:1rem;color:var(--ink);border-bottom:1px solid var(--border)}
  header nav a:last-child{border-bottom:0}
  body{font-size:16px}

  /* ---------- densidade no celular ----------
     Medida do print de 10/08: entre a trilha e o primeiro cartão havia ~150px
     de ar, e a primeira tela terminava antes de qualquer material aparecer.
     Numa página cuja função é fazer a pessoa escolher um material, deixar a
     escolha fora do campo de visão é o defeito, não o excesso de espaço em si.
     As folgas do desktop foram calibradas para uma linha de 72 caracteres; no
     celular a linha tem metade disso e o mesmo respiro vira vazio. */
  .trilha{padding-top:.9rem}
  .hub,.artigo{padding-top:.7rem}
  .hub .chamada,.artigo .chamada{font-size:1.05rem;margin-bottom:1.8rem}
  .hub h1,.artigo h1{line-height:1.15}
  .cards{gap:.9rem}
  .card{padding:1.15rem}
  .card p{font-size:.9rem}
  .artigo h2{margin-top:2rem}
  .indice,.baixar{padding:1rem 1.1rem;margin-bottom:1.8rem}
  .fecho-art{padding:2.6rem 0;margin-top:2.6rem}
  footer{margin-top:2.6rem}

  /* Quatro colunas em 350px dariam 80px por caixa — cabe a sigla e mais nada.
     Duas colunas mantêm a leitura de "vários sistemas lado a lado" sem espremer. */
  .arq-base{grid-template-columns:1fr 1fr}
  .arq-nucleo b{font-size:1.05rem}
}

/* ---------- diagrama de arquitetura (/arquitetura) ----------
   HTML e CSS, NÃO SVG, e o motivo é uma lição já paga: texto dentro de SVG
   escala junto com o container. Os rótulos da cena da home viravam 4,5px num
   celular de 360px, e não há font-size que resolva — o que encolhe é o desenho
   inteiro. Em HTML o texto mantém o tamanho e as caixas reflowam sozinhas. */
.arq{margin:2rem 0 2.4rem}
.arq b{display:block;font-family:var(--f-disp);color:var(--ink);letter-spacing:-.015em}

.arq-topo{background:var(--soft);border:1px solid var(--border);border-radius:var(--r-lg);padding:1rem 1.2rem}
.arq-topo b{font-size:1rem;margin-bottom:.2rem}
.arq-topo span{font-size:.92rem;color:var(--muted)}

/* A seta é decorativa e some do leitor de tela: o texto já diz a ordem. */
.arq-seta{height:26px;position:relative}
.arq-seta::before{content:"";position:absolute;left:50%;top:2px;width:2px;height:16px;background:var(--border);transform:translateX(-50%)}
.arq-seta::after{content:"";position:absolute;left:50%;top:17px;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:7px solid var(--border);transform:translateX(-50%)}

/* O bloco do produto é o único com tinta cheia: numa página que explica onde
   ele entra, a hierarquia visual precisa dizer isso antes da leitura. */
.arq-nucleo{background:linear-gradient(135deg,#0874E8,#04337E);border-radius:var(--r-lg);padding:1.2rem 1.3rem;color:#fff}
.arq-nucleo b{color:#fff;font-size:1.12rem;margin-bottom:.25rem}
.arq-nucleo span{display:block;font-size:.92rem;color:#CFE4FB}
.arq-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0 0;padding:0}
.arq-chips li{font-family:var(--f-disp);font-size:.78rem;font-weight:700;background:rgba(255,255,255,.16);
  color:#fff;padding:.3rem .7rem;border-radius:var(--pill)}

.arq-base{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.arq-cx{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:.85rem .9rem;text-align:center}
.arq-cx b{font-size:.98rem}
.arq-cx span{display:block;font-size:.8rem;color:var(--muted);margin-top:.2rem;line-height:1.5}
.arq-cx em{display:block;font-style:normal;font-family:var(--f-disp);font-size:.68rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--primary);margin-top:.4rem}
.arq-cx.nosso{border-color:rgba(8,116,232,.45);background:var(--primary-soft)}
.arq-leg{text-align:center;font-size:.84rem;color:var(--muted);margin:.8rem 0 0}
.arq-baixar{text-align:center;margin:1rem 0 0;font-size:.86rem}
.arq-baixar a{font-family:var(--f-disp);font-weight:700;color:var(--ink-blue);text-decoration:none}
.arq-baixar a:hover{text-decoration:underline}
.arq-baixar span{display:block;font-family:var(--f-data);font-size:.74rem;color:var(--muted);margin-top:.25rem}