@media screen {
/* Material grátis no visual da vitrine: sobrescreve os tokens do guia (guia.css) para o tema escuro. */
:root {
  --papel: #12100e; --papel-2: #241f1a; --branco: #1d1915;
  --tinta: #f1e9de; --tinta-2: #c8bcad; --tinta-3: #8f8273;
  --linha: #3a322a; --ouro: #cf7650; --ouro-forte: #e08d66; --ouro-claro: #2a2017;
  --grafite: #15120f; --grafite-2: #241f1a;
  --verde-claro: #16261c; --vermelho-claro: #2a1714; --azul-claro: #161d29;
  --fonte: "Bricolage Grotesque", system-ui, sans-serif;
}
body { background: var(--papel); }
h1, h2, h3, h4 { letter-spacing: -0.025em; }
.topo { background: rgba(18,16,14,.95); border-bottom-color: var(--linha); position: sticky; top: 0; z-index: 10; }
.marca-m { display: flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; font-weight: 800; font-size: 19px; }
.marca-m img { width: 32px; height: 32px; border-radius: 8px; }
.marca-m b { background: #cf7650; color: #12100e; border-radius: 6px; padding: 0 6px; font-size: 15px; }
.capa { background: radial-gradient(ellipse 60% 80% at 85% 0%, rgba(233,170,90,.16), transparent 60%), #0d0b09; border-bottom: 1px solid var(--linha); }
.capa h1 { text-transform: none; }
.olho, .indice .rot, .prompt-cab small, .maquete .leg, .campo b { font-family: "JetBrains Mono", ui-monospace, monospace; }
.indice nav { box-shadow: none; }
.cartao.topo-ouro { border-top-color: #cf7650; }
.num { background: #241f1a; color: #e9c062; border: 1px solid var(--linha); }
.passos li::before { background: #241f1a; color: #e9c062; }
.prompt { border: 1px solid var(--linha); }
.prompt-cab { background: #1d1915; }
.copiar { background: #cf7650; }
.aviso.ouro { color: #f1e9de; } .aviso.verm { color: #f6d7d0; } .aviso.verde { color: #d3efdc; } .aviso.azul { color: #d6e2f5; }
.janela { background: #fff; color: #1e1c1b; }
table.t th { background: #241f1a; }
.fecho { background: #1c1611; border: 1px solid #6a4a2a; }
.botao { background: #cf7650; }
.prosa strong, .passos li strong { color: var(--tinta); }

}

/* guia básico (09/11/2026): cartões de conceito com o "como usar" */
.cartao.conceito { display: flex; flex-direction: column; }
.cartao.conceito .analogia { margin-top: 4px; }
.cartao .como { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--papel-2); font-size: 14.5px; color: var(--tinta-2); }
.cartao .como b { color: var(--tinta); }

/* capa do PDF: a marca só aparece na impressão (assets/guia-pdf.css) */
.marca-capa { display: none; }

/* ---------- 09/11/2026: revisão do /material ---------- */
/* sem fonte monoespaçada: legendas, etiquetas e rótulos em Figtree */
.olho, .indice .rot, .prompt-cab small, .maquete .leg, .campo b { font-family: Figtree, system-ui, sans-serif !important; }
/* avisos azuis viram terracota (dentro da paleta) */
.aviso.azul { background: rgba(207,118,80,.10) !important; border-color: #cf7650 !important; color: #f1e9de !important; }
.aviso.azul p { color: #e6dccf; }
/* ilustrações (telas claras): tokens claros dentro da janela, para o texto ter contraste na web e no PDF */
.janela { --tinta: #1e1c1b; --tinta-2: #4a4440; --tinta-3: #6f675e; --papel-2: #efe8dc; --grafite: #2a2420; --grafite-2: #2a2420; --ouro-claro: #f6e7c8; color: #1e1c1b; background: #fff; }
.janela .painel .ttl { color: #1e1c1b; }
.janela .bal.acao { background: #f6e7c8; color: #3e2f19; border: 1px solid #e3c98f; }
.janela .bal.acao b { color: #3e2f19; }
.janela .bal.ia { color: #3a3530; }
.janela .bal.eu { background: #2a2420; color: #f5f0e8; }
@media screen {
  /* 10 conceitos em 2 colunas e as 4 ferramentas em 2x2 */
  @media (min-width: 700px) { #palavras .grade, #ferramenta h3 + .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  /* fecho: espaço entre título e texto; no celular, botões empilhados em largura total */
  .fecho h2 { margin-bottom: 14px; text-wrap: balance; }
  .fecho p { margin-bottom: 18px; }
  @media (max-width: 600px) { .fecho .botao { display: flex; width: 100%; justify-content: center; text-align: center; margin: 10px 0 0; } }
  .capa h1, .sec h2 { text-wrap: balance; }
  /* tabelas: no celular, cada linha vira um cartão empilhado */
  @media (max-width: 600px) {
    .tab-wrap { overflow: visible; border: 0; background: none; }
    table.t { min-width: 0; }
    table.t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    table.t, table.t tbody, table.t tr, table.t td { display: block; width: 100%; }
    table.t tr { margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 12px; background: var(--branco); }
    table.t td { padding: 4px 0; border: 0; }
    table.t td:first-child { font-size: 16px; padding-bottom: 6px; }
    table.t td[data-rot]:not(:first-child)::before { content: attr(data-rot); display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #c9a87c; margin-bottom: 2px; }
  }
}
@media screen and (max-width: 600px) { .fecho .botao { font-size: 15px; padding: 14px 12px; white-space: nowrap; } }
@media screen { .fecho h2 { margin-bottom: 18px; } }