/* Arte Papelaria: caderno afetivo, fita washi e letra à mão */
:root { --manual: "Caveat", "Segoe Print", cursive; --washi: repeating-linear-gradient(135deg, var(--destaque-claro) 0 8px, color-mix(in srgb, var(--destaque) 24%, var(--papel)) 8px 16px); }

h2 { font-family: var(--manual); font-size: 21px; font-weight: 500; text-transform: none; letter-spacing: 0; line-height: 1; margin-bottom: 6px; }
.tela-celular h2 { font-size: 19px; }

.cabecalho { position: relative; border-bottom: 2px dashed var(--suave); }
.cabecalho::before { content: ""; position: absolute; left: 14px; top: -34px; width: 96px; height: 22px; background: var(--washi); transform: rotate(-2deg); }
.tela-celular .cabecalho::before { top: -21px; width: 70px; height: 16px; }

.dia-cab-txt strong, .pergunta, .mini-titulo, .sonho span { font-family: var(--manual); font-weight: 500; }
.dia-cab-txt strong { font-size: 32px; line-height: 1; }
.tela-celular .dia-cab-txt strong { font-size: 24px; }
.mini-titulo { font-size: 26px; line-height: 1; }
.tela-celular .mini-titulo { font-size: 21px; }
.pergunta { font-size: 34px; }
.tela-celular .pergunta { font-size: 26px; }

.caixa { border-radius: 6px 18px 6px 18px; }
.card-modulo { border-radius: 6px 18px 6px 18px; }
.zona-sticker { border-style: dashed; border-width: 2px; border-radius: 6px 18px 6px 18px; }
.aba.ativa { border-radius: 14px 0 0 14px; }

.capa-moldura::before { content: ""; display: block; width: 130px; height: 28px; margin: 0 auto 26px; background: var(--washi); transform: rotate(-3deg); }
.capa-frase { font-family: var(--manual); font-style: normal; font-size: 34px; line-height: 1.1; }
.capa-sobre { font-family: var(--manual); font-size: 24px; letter-spacing: .04em; text-transform: none; }
.tela-celular .capa-frase { font-size: 28px; }
.tela-celular .capa-sobre { font-size: 21px; }
.tela-celular .capa-moldura::before { width: 100px; height: 22px; margin-bottom: 18px; }

.roda-nome { font-family: var(--manual); font-size: 25px; font-weight: 500; }
.tela-celular .roda-nome { font-size: 30px; }

/* No PDF, o gradiente repetido vira uma função que cada leitor amostra do seu jeito (no MuPDF as listras quase somem).
   Na impressão, as mesmas listras em gradiente finito; 160px cobrem a maior fita (130x28 a 135°). */
@media print {
  :root {
    --washi-a: var(--destaque-claro);
    --washi-b: color-mix(in srgb, var(--destaque) 24%, var(--papel));
    --washi: linear-gradient(135deg,
      var(--washi-a) 0 8px, var(--washi-b) 8px 16px, var(--washi-a) 16px 24px, var(--washi-b) 24px 32px,
      var(--washi-a) 32px 40px, var(--washi-b) 40px 48px, var(--washi-a) 48px 56px, var(--washi-b) 56px 64px,
      var(--washi-a) 64px 72px, var(--washi-b) 72px 80px, var(--washi-a) 80px 88px, var(--washi-b) 88px 96px,
      var(--washi-a) 96px 104px, var(--washi-b) 104px 112px, var(--washi-a) 112px 120px, var(--washi-b) 120px 128px,
      var(--washi-a) 128px 136px, var(--washi-b) 136px 144px, var(--washi-a) 144px 152px, var(--washi-b) 152px 160px);
  }
}
