/* ============================================================
   Kit de Sobrevivencia — folha de estilo da VERSAO IMPRESSA.
   Carregada DEPOIS do <style> do documento, entao so precisa
   sobrescrever o que muda. Regras iguais e mais tardias vencem.

   Tres decisoes que valem pra todas as regras daqui pra baixo:
   1. Papel A4 branco. A Flavia pediu ("se a pessoa imprimir vai
      ficar ruim"), e fundo amarelo chapado em 9 folhas gasta
      cartucho de quem esta em crise, nao de quem projetou.
   2. Preto e branco. Imprime em qualquer impressora.
   3. Nenhum bloco chapado escuro. Onde havia fundo navy agora ha
      contorno. Mesma hierarquia, sem inundar de toner.
   ============================================================ */

:root{
  --amarelo:#FFFFFF;
  --creme:#FFFFFF;
  --creme-fundo:#FFFFFF;
  --areia:#FFFFFF;
  --navy:#000000;
  --navy-forte:#000000;
  --texto:#111111;
  --rosa:#8A8A8A;        /* unico meio-tom que sobra: cabo do martelo, detalhes */
  --rosa-clara:#CCCCCC;
  --ocre:#555555;
  --ocre-claro:#FFFFFF;
  --suave:#555555;
}

/* ---------- folha ---------- */
/* Margem SIMETRICA de proposito. A coluna estreita de leitura (126mm, ~62
   caracteres) vem do max-width do .doc, nao da margem da folha. Se a margem
   fosse assimetrica, a capa precisaria de margin negativo pra recentralizar —
   e margin negativo aqui NAO funciona: o Chrome corta o que sai da caixa da
   @page, sem aviso. Foi assim que "SOBREVIVENCIA" perdeu o A final. */
@page{ size:A4; margin:22mm 24mm }

@media screen{
  body{ background:#DCDCDC; padding:26px 0 }
  .doc{ max-width:820px; margin:0 auto; background:#fff;
        padding:52px 234px 52px 94px;   /* mesma proporcao da margem A4 */
        box-shadow:0 22px 64px -34px rgba(0,0,0,.55); border-radius:0 }
  .doc .capa{ min-height:1010px; height:auto; margin:-52px -234px 0 -94px }  /* sangra a folha inteira */
}
@media print{
  body{ background:#fff; padding:0 }
  .doc{ max-width:132mm; margin:0; padding:0; box-shadow:none; border-radius:0 }
  .doc .capa{ height:253mm; margin-right:-30mm }   /* volta aos 162mm da caixa da pagina */
  .so-tela{ display:none !important }
}

/* ---------- o texto passa a FLUIR, nao ha mais uma pagina por secao ---------- */
.pg{ padding:0; margin-top:34px }
.pg + .pg{ break-before:auto }
.capa{ break-after:page }
/* A pagina da autora NAO leva break-before:page. Custava uma folha e meia:
   deixava a anterior pela metade e ainda jogava o rodape sozinho numa folha so.
   O que precisa ficar junto e a oferta com o fecho — esse sim, break-inside. */
.oferta-pg{ break-inside:avoid }
.autora-pg,.oferta-pg{ display:block; justify-content:normal }

/* ---------- capa ---------- */
/* .doc .capa e nao .capa: o documento ja tem um .capa{height:197mm} dentro de um
   @media print, e empatado em especificidade a briga vira loteria de ordem */
.doc .capa{
  min-height:0; padding:26mm 0 0; background:#fff; justify-content:flex-start;
}
.capa .selo{ color:#000; font-size:13px }
.capa .risco{ background:#000; width:52px; height:1.4px; margin-top:17px }
.capa h1{ color:#000; font-size:62px; margin-top:38px }
.capa .sub{ color:#000; font-size:16px; margin-top:30px; max-width:30ch }
.capa .ferramentas{ width:270px; margin-top:56px }
.capa .autora{ color:#000; font-size:18px; margin-top:56px }
.capa .rodape{ border-top-color:#000; font-size:10.5px; color:#000; padding-top:22px }
.capa .rodape span{ color:#8A8A8A }

/* ---------- numero da secao ----------
   NAO pendurar na margem com margin-left negativo: o Chrome CORTA tudo que sai da
   caixa da @page, e os 11 numeros somem sem erro nenhum. Medido em 25/08/2026.
   E como o sumario impresso nao tem numero de PAGINA, o leitor navega pelo numero
   da SECAO — entao ele nao pode faltar. */
.num{ background:#fff; color:#000; border:1.4px solid #000 }

/* ---------- blocos que eram chapados escuros viram contorno ---------- */
.destaque{
  background:none; color:#000; border-left:3.5px solid #000;
  border-radius:0; padding:3px 0 3px 18px;
}
.oferta{
  background:none; color:#111; border:2px solid #000; border-radius:8px;
}
.oferta .rot{ color:#000 }
.oferta h3{ color:#000 }
.oferta p{ color:#333 }
.oferta li.item{ color:#222 }
.oferta li.item::before{ background:#000 }
.oferta .url{ color:#555 }
.botao{ background:none; color:#000; border:1.6px solid #000 }
.fecho{
  background:none; color:#555; border-radius:0; border-top:1px solid #CCC;
  padding:16px 0 0; margin-top:34px;
}
.fecho .marca{ color:#000 }
.fecho p{ color:#666 }

/* ---------- blocos que eram chapados claros viram contorno fino ---------- */
/* No celular esses blocos sao cartoes com fundo colorido, e cada secao cabe
   numa tela — entao break-inside:avoid nao custa nada. No A4 o texto flui, e
   um cartao de 90mm que nao cabe empurra a folha inteira: medido, 5 folhas de
   16 terminavam com 80-100mm em branco.
   Regua lateral resolve as duas coisas de uma vez: le melhor no papel que uma
   pagina cheia de caixa arredondada, e FRAGMENTA sem ficar feio — a regua so
   continua na folha seguinte, enquanto uma borda fechada vira duas caixas. */
.caixa,.hab,.evite{
  background:none; border:0; border-left:2px solid #B5B5B5; border-radius:0;
  padding:1px 0 1px 16px; break-inside:auto;
}
.diga{ background:none; border:0; border-left:2px solid #777; border-radius:0; padding:1px 0 1px 16px }
.grupo-ciclo,.ciclo{ break-inside:auto }
.diga .ic{ color:#555 }
.caixa .rot{ color:#555 }
.caixa h3 .ic{ color:#000 }
.hab .letra{ color:#555 }
.hab .frase .ic{ color:#555 }
.metafora{ border:1px solid #000 }
.ciclo .et{ background:none; border:1px solid #999; color:#000 }
.ciclo .et.forte{ background:#000; color:#fff; border-color:#000 }
.ciclo .seta{ color:#000 }
.quatro div{ background:none; border:1.5px solid #000; color:#000 }
.sintomas span{ border-color:#000; color:#000 }

/* etiquetas EVITE / PROCURE: cheio contra vazado, que le sem cor ---------- */
.evite .tag.no{ background:#000; color:#fff }
.evite .tag.sim{ background:none; color:#000; border:1px solid #000 }

/* ---------- listas, links, foto ---------- */
li.item::before,li.item.rosa::before{ background:#000 }
.rot,.antetitulo{ color:#555 }
.selo{ color:#555 }
.lnk{ color:#000; border-bottom:1px solid #000 }
.pilula{ background:none; border:1.2px solid #000; color:#000 }
.pilula .ic{ color:#000 }
.retrato{ border:3px solid #DDD }
.sumario li::before{ color:#000 }
.fala{ border-left-color:#000; color:#000 }

/* ---------- aviso que so aparece na tela ---------- */
.so-tela{
  max-width:820px; margin:0 auto 22px; padding:16px 22px; border-radius:10px;
  background:#1E2536; color:#EFEFEF; font-size:14px; line-height:1.55;
}
.so-tela b{ color:#fff }
.so-tela a{ color:#fff }

/* ---------- ritmo vertical do papel ----------
   No celular cada secao e uma pagina inteira, entao sobra folego de graca.
   No A4 o texto FLUI: cada bloco com break-inside:avoid que nao cabe empurra
   uma pagina inteira e deixa buraco. Duas medidas, nesta ordem de impacto:

   1. Teto de altura nas ilustracoes. Na largura da coluna elas nasciam com
      94mm (e a dos 4 habitos, quadrada, com 132mm) — quase meia folha cada.
      Com 70mm o desenho continua legivel e cabem ~150mm a mais de texto.
   2. Espacos entre secoes menores, que no papel ja tem a margem branca larga
      da folha fazendo o trabalho de respiro.                                */
figure img,.metafora img{
  width:auto; max-width:100%; max-height:70mm; margin-left:auto; margin-right:auto;
}
figure{ margin-top:18px }
figcaption{ text-align:center }
.metafora img{ margin-top:14px }
.pg{ margin-top:26px }
.sec + .sec{ margin-top:30px }
.retrato{ width:112px; height:112px }

/* nenhuma quebra pode deixar uma linha solta */
p,li,.hab p,.evite p{ orphans:3; widows:3 }