/* PDF do guia grátis (impressão de /material): no estilo do site — páginas escuras de ponta a ponta,
   Bricolage Grotesque nos títulos, Figtree no texto, terracota e dourado nos destaques.
   Só vale na impressão (media="print" no <link>); a versão web continua com material.css. */

@page { size: A4; margin: 17mm 16mm 19mm;
  @bottom-left { content: "artificializando com ia · guia grátis"; font: 8pt Figtree, sans-serif; color: #8f8273; }
  @bottom-right { content: counter(page); font: 700 8pt Figtree, sans-serif; color: #cf7650; } }
@page capa { margin: 0; @bottom-left { content: none; } @bottom-right { content: none; } }

:root {
  --papel: #13100d; --papel-2: #241f1a; --branco: #1d1915;
  --tinta: #f1e9de; --tinta-2: #c8bcad; --tinta-3: #8f8273;
  --linha: #3a322a; --ouro: #cf7650; --ouro-forte: #e08d66; --ouro-claro: #2a2017;
  --grafite: #0c0a08; --grafite-2: #241f1a;
  --terra: #cf7650; --dourado: #e9c062;
  --fonte: Figtree, Helvetica, Arial, sans-serif;
}
html { background: #13100d; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
html, body { background-color: #13100d !important; }
body { color: var(--tinta-2); font-family: Figtree, Helvetica, Arial, sans-serif; font-size: 10.3pt; line-height: 1.55; }
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
h1, h2, h3, h4, .num, .fecho h2, .passos li::before, .marca-capa { font-family: "Bricolage Grotesque", Figtree, sans-serif; }
h1, h2, h3, h4 { color: var(--tinta); letter-spacing: -0.015em; }
a { color: var(--ouro-forte); text-decoration: none; }
strong, b { color: var(--tinta); }
code, .mono { background: #241f1a; color: var(--tinta); font-family: Figtree, sans-serif; }
.topo, .indice, .copiar, .nao-imprimir { display: none !important; }
main { max-width: none; margin: 0; padding: 0; }

/* ---------- capa ---------- */
.capa { page: capa; height: 297mm; min-height: 0; margin: 0; padding: 24mm 22mm; display: block; position: relative; overflow: hidden; break-after: page;
  background: #0c0603 url('/assets/guia-fundo.jpg') center/cover no-repeat; border: 0; color: #f1e9de; }
.capa::before { display: none; }
.capa > div { position: static; max-width: none; margin: 0; }
.marca-capa { display: block; margin: 0; font-weight: 800; font-size: 17pt; color: #f1e9de; letter-spacing: -0.01em; }
.marca-capa span { background: var(--terra); color: #12100e; border-radius: 6px; padding: 0 7px; margin-left: 4px; }
.capa .olho { display: block; margin: 30mm 0 5mm; color: var(--dourado); font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 10pt; letter-spacing: .14em; }
.capa .olho::before { display: none; }
.capa h1 { font-size: 44pt; line-height: 1.02; max-width: 150mm; color: #fff; letter-spacing: -0.025em; }
.capa h1 span { display: block; color: var(--dourado); }
.capa p.sub { font-size: 12.5pt; color: var(--tinta-2); max-width: 96mm; margin-top: 8mm; line-height: 1.5; }
.capa .autores { position: absolute; left: 22mm; bottom: 20mm; max-width: 80mm; margin: 0; font-size: 9.5pt; color: var(--tinta-3); }

/* ---------- abertura de cada seção: número grande em terracota, título creme ---------- */
.sec { padding: 0 0 4mm; margin: 0 0 6mm; break-inside: auto; }
.sec.quebra { break-before: page; }
.sec-cab { display: block; margin: 0 0 6mm; padding: 0 0 5mm; border-bottom: 1px solid var(--linha); position: relative; break-after: avoid; }
.sec-cab::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 28mm; height: 2px; background: var(--terra); }
.num { display: block; width: auto; height: auto; margin: 0 0 1mm; padding: 0; border: 0; border-radius: 0; background: none; color: var(--terra); font-size: 34pt; font-weight: 800; line-height: 1; letter-spacing: -0.04em; text-align: left; }
.sec h2 { font-size: 24pt; line-height: 1.08; font-weight: 800; max-width: 160mm; }
.sec .lede { margin-top: 3mm; max-width: 160mm; font-size: 11pt; color: var(--tinta-2); }
.sec h3 { margin: 7mm 0 3mm; font-size: 14pt; font-weight: 800; color: var(--dourado); break-after: avoid; }
.prosa { max-width: none; color: var(--tinta-2); }
.prosa.nota { font-size: 9.5pt; color: var(--tinta-3); }

/* ---------- cartões ---------- */
.grade { gap: 4mm; margin: 4mm 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartao { background: #1d1915; border: 1px solid var(--linha); border-radius: 4mm; padding: 5mm; break-inside: avoid; }
.cartao h4 { font-size: 13pt; font-weight: 800; color: var(--tinta); margin-bottom: 2mm; }
.cartao p { font-size: 9.9pt; color: var(--tinta-2); margin-bottom: 2.5mm; }
.cartao.topo-ouro { border-top: 3px solid var(--terra); }
.cartao .analogia { font-style: italic; color: var(--dourado); border-top: 1px dashed var(--linha); padding-top: 2.5mm; margin-top: 2.5mm; font-size: 9.8pt; }
.cartao .como { margin: 3mm 0 0; padding: 3mm 3.5mm; border-radius: 2.5mm; border: 0; border-left: 2px solid var(--terra); background: rgba(207,118,80,.10); color: #e6dccf; font-size: 9.5pt; }
.cartao .como b { color: var(--dourado); }

/* ---------- passos numerados ---------- */
.passos { gap: 3mm; margin: 4mm 0; }
.passos li { grid-template-columns: 9mm 1fr; gap: 4mm; padding: 4mm 5mm; background: #1d1915; border: 1px solid var(--linha); border-radius: 3.5mm; break-inside: avoid; }
.passos li::before { width: 8mm; height: 8mm; background: var(--terra); color: #12100e; font-size: 11pt; font-weight: 800; }
.passos li strong { color: var(--tinta); font-size: 10.8pt; }
.passos li span { color: var(--tinta-2); font-size: 9.9pt; }

/* ---------- avisos ---------- */
.aviso { max-width: none; margin: 4mm 0; padding: 4mm 5mm; border-radius: 3mm; border-left: 3px solid; font-size: 10pt; break-inside: avoid; color: var(--tinta-2); }
.aviso strong.t { color: var(--tinta); font-family: "Bricolage Grotesque", sans-serif; font-size: 11pt; margin-bottom: 1.5mm; }
.aviso.ouro { background: rgba(233,192,98,.08); border-color: var(--dourado); }
.aviso.azul { background: rgba(207,118,80,.09); border-color: var(--terra); }
.aviso.verm { background: rgba(214,90,60,.12); border-color: #e0674a; }
.aviso.verde { background: rgba(111,191,140,.09); border-color: #6fbf8c; }
.aviso p { color: var(--tinta-2); }

/* ---------- prompts prontos ---------- */
.prompt { background: #0c0a08; border: 1px solid var(--linha); border-radius: 3.5mm; margin: 4mm 0 5mm; break-inside: avoid; color: var(--tinta); }
.prompt-cab { padding: 3mm 4.5mm; background: #1d1915; border-bottom: 1px solid var(--linha); }
.prompt-cab b { color: var(--dourado); font-family: "Bricolage Grotesque", sans-serif; font-size: 11pt; }
.prompt-cab small { color: var(--tinta-3); font-size: 8.5pt; }
.prompt pre { padding: 4mm 4.5mm; font-family: Figtree, sans-serif; font-size: 9.2pt; line-height: 1.5; color: #e6dccf; }
.prompt .ph { color: var(--dourado); }

/* ---------- tabelas ---------- */
.tab-wrap { border: 1px solid var(--linha); border-radius: 3.5mm; overflow: hidden; margin: 4mm 0; background: #1d1915; }
table.t { width: 100%; border-collapse: collapse; }
table.t th { background: #241f1a; color: var(--dourado); font-family: Figtree, sans-serif; font-size: 8pt; padding: 2.5mm 3.5mm; }
table.t td { color: var(--tinta-2); font-size: 9.4pt; padding: 2.5mm 3.5mm; border-top: 1px solid var(--linha); background: transparent; }
table.t td:first-child { color: var(--tinta); font-weight: 700; }

/* ---------- ilustrações (telas) ---------- */
.maquete { background: #1d1915; border: 1px solid var(--linha); border-radius: 4mm; padding: 4mm; break-inside: avoid; }
.maquete .leg { color: var(--tinta-3); font-size: 8.8pt; }

/* ---------- fecho: página de chamada em terracota ---------- */
.fecho { break-before: page; break-inside: avoid; margin: 0; padding: 14mm 12mm; border-radius: 5mm; border: 0; background: linear-gradient(160deg, #d98259 0%, #cf7650 45%, #b8613c 100%); color: #1d1208; }
.fecho h2 { color: #12100e; font-size: 26pt; font-weight: 800; line-height: 1.05; }
.fecho p { color: #2a1a10; font-size: 11pt; max-width: none; }
.fecho .botao { background: #12100e; color: #f1e9de; font-family: Figtree, sans-serif; font-weight: 800; border-radius: 999px; }
.fecho .botao.claro { background: transparent; color: #12100e; border: 1.5px solid #12100e; }

/* ---------- ajustes de página ---------- */
@page { background: #13100d; }
@page capa { background: #0c0603; }
@page fim { margin: 0; background: #cf7650; @bottom-left { content: none; } @bottom-right { content: none; } }
/* título de seção nunca sozinho no pé da página: reserva espaço e devolve com margem negativa */
.sec-cab { break-inside: avoid; padding-bottom: 62mm; margin-bottom: -56mm; border-bottom: 0; }
.sec-cab::after { bottom: 56mm; }
.sec-cab > div { border-bottom: 1px solid var(--linha); padding-bottom: 5mm; }
/* fecho: a última página inteira em terracota */
.fecho { page: fim; break-before: page; height: 297mm; border-radius: 0; padding: 70mm 22mm 24mm; position: relative; }
.fecho h2 { font-size: 36pt; max-width: 150mm; }
.fecho p { font-size: 12.5pt; max-width: 150mm; margin: 7mm 0 9mm; line-height: 1.5; }
.fecho::before { content: "artificializando"; position: absolute; top: 24mm; left: 22mm; font: 800 17pt "Bricolage Grotesque", sans-serif; color: #12100e; letter-spacing: -0.01em; }
.fecho::after { content: "Material educativo do artificializando com ia, por Ítalo Loiola e Bruna Siqueira. artificializando.vercel.app"; position: absolute; left: 22mm; right: 22mm; bottom: 20mm; font: 9pt Figtree, sans-serif; color: #3a2416; }
.rodape { display: none !important; }
/* linha do cabeçalho de seção: cinza de ponta a ponta, com o começo em terracota, só sob o título */
.sec-cab::after { display: none; }
.sec-cab > div { border-bottom: 0; padding-bottom: 0; }
.sec-cab > div:not(.num) { padding-bottom: 5mm; background: linear-gradient(var(--terra), var(--terra)) left bottom / 28mm 2px no-repeat, linear-gradient(var(--linha), var(--linha)) left bottom / 100% 1px no-repeat; }
.grade:has(.topo-ouro) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- 09/11: paginação reequilibrada (menos quebras forçadas, espaços menores) ---------- */
.sec.quebra { break-before: auto; }
.sec { margin: 0 0 5mm; padding: 0 0 1mm; }
.sec .lede { margin-top: 2mm; }
.sec h3 { margin: 5mm 0 2.5mm; }
.grade { gap: 3mm; margin: 3mm 0; }
.cartao { padding: 4mm; }
.passos { gap: 2.5mm; margin: 3mm 0; }
.passos li { padding: 3mm 4.5mm; }
.aviso { margin: 3mm 0; padding: 3.5mm 4.5mm; }
.prompt { margin: 3mm 0 4mm; break-inside: auto; }
.prompt-cab { break-after: avoid; }
.prompt pre { orphans: 4; widows: 4; }
.tab-wrap { margin: 3mm 0; }
p, li { orphans: 3; widows: 3; }
.maquete { zoom: .8; margin: 3mm auto; }
.sec-cab > div:not(.num) { padding-bottom: 4mm; }
.num { font-size: 30pt; }
.sec h2 { font-size: 22pt; }
.sec .lede { font-size: 10.4pt; line-height: 1.45; }
.cartao.conceito p { font-size: 9.5pt; margin-bottom: 1.8mm; }
.cartao.conceito .como { font-size: 9.1pt; padding: 2.5mm 3mm; margin-top: 2mm; }
.cartao.conceito .analogia { padding-top: 1.8mm; margin-top: 1.8mm; }
/* seções curtas inteiras na mesma página (o título nunca fica sozinho no pé) */
#regras { break-inside: avoid; }
.cartao.conceito { padding: 3.5mm 4mm; }
.cartao.conceito h4 { font-size: 12pt; margin-bottom: 1.5mm; }
.cartao.conceito p { font-size: 9.2pt; line-height: 1.45; }
.cartao.conceito .como { font-size: 8.9pt; line-height: 1.45; }
#regra .grade { margin: 3mm 0 2mm; }
#regra .aviso { margin: 2.5mm 0; }
#palavras .sec-cab { padding-bottom: 0; margin-bottom: 4mm; }
#regras .sec-cab, #etica .sec-cab { padding-bottom: 0; margin-bottom: 4mm; }
#etica { break-inside: avoid; }
body { font-size: 10pt; line-height: 1.5; } .cartao p { font-size: 9.6pt; } .passos li span { font-size: 9.6pt; } .prompt pre { font-size: 9pt; line-height: 1.45; } table.t td { font-size: 9.2pt; }

/* revisão 2: prompt curto não se divide entre páginas (o longo continua quebrando normalmente) */
.prompt { break-inside: avoid; }