:root {
  --papel: #fbf7f1;
  --tinta: #2e2925;
  --suave: #8a7f75;
  --linha: #e7dfd4;
  --destaque: #c4765a;
  --destaque-claro: #f1ddd2;
  --aba: #efe7dc;
  --sobre-destaque: #ffffff;   /* texto sobre a cor de destaque */
  --zona: #cfc4b7;             /* texto da área de sticker */
  --circulo: #e9e1d4;          /* círculo claro da capa */
  --fds: #f6efe6;              /* fundo de sábado e domingo */
  --fora: #d3c9bd;             /* dias de outro mês */
  --agua: #9cc3d5;
  --card: #fffdf9;
  --cornell: #f8f2ea;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", "Segoe UI", Arial, sans-serif;
  --pauta: 34px;
  /* roda da vida: uma cor por área; a caneta do site oferece estas mesmas cores */
  --roda-1: #4f8fb8;
  --roda-2: #dd8f47;
  --roda-3: #4f9a78;
  --roda-4: #c4564d;
  --roda-5: #8d8fc7;
  --roda-6: #e08fa8;
  --roda-7: #e0b23e;
  --roda-8: #93ab4f;
  --roda-9: #8a62a8;
  --roda-10: #a47a56;
  --roda-11: #c2558f;
  --roda-12: #4fb0b5;
}

body { font-family: var(--sans); color: var(--tinta); }
.pagina { background: var(--papel); }

/* ---------- estrutura: conteúdo + abas ---------- */
.folha { display: flex; height: 100%; }
.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 44px 48px 40px; }
.formato-retrato .folha { flex-direction: column-reverse; }
.formato-retrato .conteudo { min-height: 0; }

.abas { width: 74px; display: flex; flex-direction: column; background: var(--aba); padding: 18px 0; }
.formato-retrato .abas { width: 100%; height: 64px; flex-direction: row; padding: 0 14px; }
.aba {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--suave);
}
.aba.ativa { background: var(--destaque); color: var(--sobre-destaque); border-radius: 10px 0 0 10px; margin-left: 8px; }
.formato-retrato .aba.ativa { border-radius: 0 0 10px 10px; margin: 0 0 8px; }
.aba.icone { font-size: 18px; }

/* ---------- cabeçalhos ---------- */
.cabecalho { display: flex; align-items: baseline; gap: 18px; border-bottom: 2px solid var(--tinta); padding-bottom: 12px; margin-bottom: 26px; }
.cabecalho h1 { font-family: var(--serif); font-weight: 600; font-size: 48px; margin: 0; line-height: 1; }
.cabecalho .rotulo { font-size: 14px; text-transform: uppercase; letter-spacing: .14em; color: var(--suave); }
.cabecalho .setas { margin-left: auto; display: flex; gap: 8px; }
.seta { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--linha); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--suave); }
h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--destaque); margin: 0 0 10px; font-weight: 600; }

.linhas { flex: 1; min-height: var(--pauta); background: repeating-linear-gradient(transparent 0 calc(var(--pauta) - 1px), var(--linha) calc(var(--pauta) - 1px) var(--pauta)); }
.caixa { border: 1.5px solid var(--linha); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; min-height: 0; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { height: var(--pauta); border-bottom: 1px solid var(--linha); display: flex; align-items: center; gap: 12px; }
.checks li::before { content: ""; width: 16px; height: 16px; border: 1.5px solid var(--suave); border-radius: 4px; flex: none; }

/* espaço reservado para colar stickers */
.zona-sticker { border: 1.5px dashed var(--linha); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--zona); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- capa ---------- */
.capa { height: 100%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.capa::before, .capa::after { content: ""; position: absolute; border-radius: 50%; }
.capa::before { width: 440px; height: 440px; right: calc(20% - 220px); top: calc(20% - 220px); background: var(--destaque-claro); }
.capa::after { width: 320px; height: 320px; left: calc(12% - 160px); bottom: calc(12% - 160px); background: var(--circulo); }
.capa-moldura { text-align: center; position: relative; z-index: 1; }
.capa-sobre { text-transform: uppercase; letter-spacing: .3em; font-size: 14px; color: var(--suave); margin: 0 0 18px; }
.capa-titulo { font-family: var(--serif); font-weight: 400; font-size: 120px; margin: 0; line-height: 1; }
.capa-ano { font-family: var(--serif); font-size: 64px; color: var(--destaque); margin: 8px 0 26px; }
.capa-frase { font-style: italic; color: var(--suave); margin: 0 0 40px; }
.botao { display: inline-block; padding: 16px 34px; border-radius: 40px; background: var(--tinta); color: var(--papel); font-weight: 600; letter-spacing: .06em; }

/* ---------- assinatura: a página "este planner pertence a" ---------- */
.dono { --dono-largura: 720px; --dono-letra: 96px; width: var(--dono-largura); max-width: 100%; }
.tela-celular .dono { --dono-largura: 320px; --dono-letra: 58px; }
/* altura fixa: a linha não sobe nem desce quando um nome longo diminui para caber */
.dono-linha { height: calc(var(--dono-letra) * 1.5); display: flex; flex-direction: column; justify-content: flex-end; border-bottom: 1.5px solid var(--tinta); margin-bottom: 14px; }
.dono-nome { font-family: "Mrs Saint Delafield", "Segoe Script", cursive; font-size: var(--dono-letra); color: var(--tinta); line-height: 1.5; min-height: 1.5em; white-space: nowrap; }
.dono-ajuda { font-size: 13px; line-height: 1.5; color: var(--suave); margin: 0 0 36px; }

/* ---------- ano ---------- */
.grade-ano { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 22px 30px; }
.formato-retrato .grade-ano { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); }
.mini-titulo { display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; margin-bottom: 8px; color: var(--destaque); }
.mini-grade { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; text-align: center; font-size: 12.5px; }
.mini-cab { color: var(--suave); font-size: 10.5px; font-weight: 600; padding-bottom: 4px; }
.mini-dia { padding: 3px 0; border-radius: 6px; }

/* ---------- mês ---------- */
.mes-corpo { flex: 1; display: flex; gap: 28px; min-height: 0; }
.formato-retrato .mes-corpo { flex-direction: column; }
.grade-mes { flex: 1; display: grid; grid-template-columns: 34px repeat(7, 1fr); grid-template-rows: 26px repeat(var(--linhas), 1fr); border-left: 1px solid var(--linha); border-top: 1px solid var(--linha); }
.mes-cab { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.sem-cab, .sem-num { border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.sem-num { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--suave); background: var(--aba); }
.mes-dia { border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 8px 10px; font-size: 15px; font-weight: 500; }
.mes-dia.fds { background: var(--fds); }
.mes-dia.fora { color: var(--fora); }
.mes-lateral { width: 300px; display: flex; flex-direction: column; gap: 18px; }
.formato-retrato .mes-lateral { width: auto; flex-direction: row; height: 260px; }
.mes-lateral .caixa { flex: 1; }

/* ---------- semana ---------- */
.grade-semana { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; min-height: 0; }
.formato-retrato .grade-semana { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, minmax(0, 1fr)); }
.dia-semana-cab { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.dia-semana-cab .n { font-family: var(--serif); font-size: 28px; font-weight: 600; }
.dia-semana-cab .s { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.dia-semana-cab.fora { opacity: .4; }
.semana-extra { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.semana-extra .caixa { overflow: hidden; }
.grade-semana > .caixa { min-height: 0; overflow: hidden; }
.semana-extra .zona-sticker { height: 110px; }

/* ---------- dia ---------- */
.dia-cab-num { font-family: var(--serif); font-size: 72px; font-weight: 600; line-height: .9; color: var(--destaque); }
/* Nome do dia em cima; mês, semana e feriado na mesma linha embaixo (o feriado só desce se não couber) */
.dia-cab-txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; }
.dia-cab-txt strong { flex: 0 0 100%; font-family: var(--serif); font-size: 26px; font-weight: 600; }
.dia-cab-txt span a { color: var(--suave); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-right: 14px; }
.dia-corpo { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; min-height: 0; }
.formato-retrato .dia-corpo { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
.formato-retrato .dia-dir .caixa:last-child { flex: 0 0 auto; }
.formato-retrato .dia-dir .caixa:last-child .linhas { flex: 0 0 calc(var(--pauta) * 3); }
.agenda { display: flex; flex-direction: column; }
.hora { flex: 1; display: flex; border-bottom: 1px solid var(--linha); font-size: 12px; color: var(--suave); }
.hora span { width: 48px; padding-top: 4px; }
.dia-dir { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.dia-dir .caixa:last-child { flex: 1; }
.cabecalho .zona-sticker { margin-left: auto; align-self: center; }
.cabecalho .zona-sticker + .setas { margin-left: 16px; }
.dia-linha-extra { display: flex; gap: 18px; }
.dia-linha-extra .caixa { flex: 1; }
.copos { display: flex; gap: 7px; }
.copos i { width: 20px; height: 26px; border: 1.5px solid var(--agua); border-top: none; border-radius: 0 0 6px 6px; }
.remedios { display: flex; gap: 14px; font-size: 12px; color: var(--suave); }
.remedios span { display: flex; align-items: center; gap: 6px; }
.remedios i, .tabela .ck i, .rastreador i { width: 15px; height: 15px; border: 1.5px solid var(--suave); border-radius: 4px; display: inline-block; }
.dia-dir .caixa.oracao { flex: 0 0 auto; }
.oracao .linhas { flex: 0 0 calc(var(--pauta) * 2); }

/* ---------- módulos ---------- */
.grade-modulos { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 18px; }
.formato-retrato .grade-modulos { grid-template-columns: repeat(2, 1fr); }
.card-modulo { border: 1.5px solid var(--linha); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; background: var(--card); }
.card-num { font-family: var(--serif); color: var(--destaque); font-size: 22px; }
.card-modulo strong { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.card-desc { font-size: 13px; color: var(--suave); line-height: 1.4; }
.card-ir { margin-top: auto; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--destaque); }

.mod-col { flex: 1; display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.mod-linha { flex: 1; display: flex; gap: 18px; min-height: 0; }
.formato-retrato .mod-linha { flex-direction: column; }
.grade-areas { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 18px; }
.formato-retrato .grade-areas { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }

.campos { display: flex; gap: 22px; margin-bottom: 20px; }
.campo { flex: 1; border-bottom: 1.5px solid var(--linha); padding-bottom: 22px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }

.tabela { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.tabela th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); padding: 0 6px 6px; border-bottom: 1.5px solid var(--tinta); white-space: nowrap; overflow: hidden; }
.tabela th.c { text-align: center; }
.tabela td { height: var(--pauta); border-bottom: 1px solid var(--linha); padding: 0 6px; }
.tabela td + td { border-left: 1px solid var(--linha); }
.tabela td.ck { text-align: center; }
.tabela td.fixo { font-weight: 500; }

.cornell { flex: 1; display: grid; grid-template-columns: 30% 1fr; grid-template-rows: 1fr 22%; gap: 0; border: 1.5px solid var(--linha); border-radius: 14px; overflow: hidden; }
.cornell > div { padding: 14px 18px; display: flex; flex-direction: column; }
.cornell-chaves { border-right: 1.5px solid var(--linha); background: var(--cornell); }
.cornell-resumo { grid-column: 1 / -1; border-top: 1.5px solid var(--linha); }

.rastreador { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 10px; }
.rastreador th { color: var(--suave); font-weight: 600; padding-bottom: 6px; }
.rastreador th:first-child { width: 150px; }
.rastreador td { height: 32px; text-align: center; border-bottom: 1px solid var(--linha); }
.rastreador td.fixo { text-align: left; font-size: 12.5px; font-weight: 500; }
.rastreador i { width: 13px; height: 13px; border-radius: 50%; }

.resumo-fin { display: flex; gap: 14px; margin-bottom: 18px; }
.resumo-fin .caixa { flex: 1; padding: 12px 16px; }
.resumo-fin .rs { font-family: var(--serif); font-size: 22px; color: var(--suave); }
.cofrinho { display: grid; grid-template-columns: repeat(5, minmax(0, 40px)); gap: 6px; }
.formato-retrato .cofrinho { grid-template-columns: repeat(10, 40px); }
.formato-retrato .mod-linha > .mod-col,
.formato-retrato .mod-linha > .caixa { flex: 0 0 auto !important; }
.formato-retrato .mod-linha > :last-child { flex: 1 1 auto !important; min-height: 0; }
.formato-retrato .mod-linha > .mod-col .linhas { flex: 0 0 calc(var(--pauta) * 2); }
.cofrinho i { aspect-ratio: 1; border: 1.5px solid var(--linha); border-radius: 50%; font-size: 9.5px; font-style: normal; color: var(--suave); display: flex; align-items: center; justify-content: center; }

.oracao-dias { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.formato-retrato .oracao-dias { grid-template-columns: repeat(16, 1fr); }
.oracao-dias i { aspect-ratio: 1; border: 1.5px solid var(--linha); border-radius: 50%; font-size: 11px; font-style: normal; color: var(--suave); display: flex; align-items: center; justify-content: center; }

/* ---------- notas ---------- */
.notas-corpo { flex: 1; --pauta: 38px; }

/* ---------- cartela de stickers ---------- */
.cartela-dica { font-size: 13px; color: var(--suave); margin: -10px 0 22px; }
.cartela { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 34px 40px; }
.cartela img { max-width: 220px; max-height: 170px; }
.cartela-dica a { color: var(--destaque); font-weight: 600; }

/* ---------- feriados, eventos e agenda ---------- */
.mini-dia.feriado { background: var(--destaque-claro); color: var(--destaque); font-weight: 600; }
.mes-dia { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mes-dia.feriado { color: var(--destaque); }
.ev { display: block; font-size: 10.5px; font-weight: 500; line-height: 1.25; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-feriado { color: var(--destaque); }
.dia-semana-cab + .ev, .fora + .ev { margin: -2px 0 4px; }
.dia-eventos { font-style: normal; font-size: 13px; font-weight: 600; color: var(--destaque); }
.agenda-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.agenda-topo h2 { margin: 0 auto 0 0; }
.botao-agenda { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--destaque); border: 1.5px solid var(--destaque-claro); border-radius: 20px; padding: 4px 10px; white-space: nowrap; }
.cab-agenda { margin-left: auto; align-self: center; }
.cab-agenda + .setas { margin-left: 12px; }
.tela-celular .botao-agenda { font-size: 10px; padding: 3px 8px; }
.tela-celular .ev { font-size: 8.5px; }
.tela-celular .mes-dia { gap: 1px; }
.tela-celular .dia-eventos { font-size: 11px; }

/* ---------- módulos do catálogo ---------- */
.mod-intro { font-size: 14px; color: var(--suave); margin: -8px 0 16px; line-height: 1.45; max-width: 90ch; }
.mod-txt { font-size: 13.5px; line-height: 1.5; margin: 0; }

.grade-2x2 { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; min-height: 0; }
.formato-retrato .grade-2x2 { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); }
.nota-mes { margin-top: 16px; flex-direction: row; align-items: center; gap: 18px; }
.nota-mes h2 { margin: 0; }
.escala { display: flex; gap: 8px; flex-wrap: wrap; }
.escala i, .leitura i, .s52 i, .pomodoros i { border: 1.5px solid var(--linha); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; }
.escala i { width: 34px; height: 34px; font-size: 13px; color: var(--suave); }

.pomodoros td:nth-child(2) { display: flex; gap: 5px; align-items: center; }
.pomodoros i { width: 17px; height: 17px; border-color: var(--suave); }
.tela-celular .pomodoros i { width: 12px; height: 12px; }
.tela-celular .pomodoros td:nth-child(2) { gap: 3px; }

.mapa-mental { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 16px; min-height: 0; }
.ramo { border: 1.5px solid var(--linha); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; }
.centro { border: 2px solid var(--destaque); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--destaque-claro); }
.centro span { font-family: var(--serif); font-size: 16px; color: var(--destaque); }

.cartoes { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); gap: 12px 18px; min-height: 0; }
.cartao { display: flex; border: 1.5px solid var(--linha); border-radius: 12px; overflow: hidden; }
.cartao .lado { flex: 1; padding: 10px 12px; }
.cartao .verso { background: var(--fds); border-left: 1.5px dashed var(--linha); }
.tela-celular .cartoes { grid-template-columns: 1fr; grid-template-rows: repeat(8, 1fr); gap: 8px; }

.leituras { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(16, 1fr); column-gap: 24px; }
.leitura { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--linha); font-size: 13.5px; }
.leitura .ld { width: 22px; color: var(--suave); font-size: 12px; }
.leitura .lt { flex: 1; font-weight: 500; }
.leitura i { width: 16px; height: 16px; border-radius: 4px; border-color: var(--suave); }
.tela-celular .leitura { font-size: 11.5px; gap: 6px; }
.tela-celular .leituras { column-gap: 12px; }

.diario { flex: 1; }
.pergunta { font-family: var(--serif); font-size: 26px; line-height: 1.25; margin: 4px 0 18px; color: var(--destaque); }
.tela-celular .pergunta { font-size: 20px; }

.semanas-52 { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: column; grid-template-rows: repeat(13, 1fr); gap: 6px 18px; }
.formato-retrato .semanas-52 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(26, 1fr); gap: 2px 18px; }
.s52 { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--linha); font-size: 13px; }
.s52 .sn { width: 24px; color: var(--suave); font-size: 11.5px; }
.s52 .sv { flex: 1; font-weight: 500; }
.s52 i { width: 16px; height: 16px; border-color: var(--suave); }
.tela-celular .s52 { font-size: 11px; }
.tela-celular .s52 i { width: 13px; height: 13px; }
.cofrinho.largo { grid-template-columns: repeat(10, minmax(0, 52px)); }

.checks.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.grade-meses { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 12px; min-height: 0; }
.formato-retrato .grade-meses { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); }
.tela-celular .grade-meses { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(6, 1fr); gap: 8px; }
.grade-meses .caixa { padding: 10px 12px; }

.legenda-cores { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13px; margin-bottom: 14px; }
.legenda-cores .dica { color: var(--suave); width: 100%; font-size: 12.5px; }
.legenda-cores span:not(.dica) { display: inline-flex; align-items: center; gap: 7px; }
.legenda-cores i { width: 18px; height: 18px; border: 1.5px solid var(--suave); border-radius: 50%; }
.grade-pixels { flex: 1; }
.pixels { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; font-size: 10px; }
.pixels th { color: var(--suave); font-weight: 600; padding-bottom: 4px; }
.pixels th:first-child { width: 40px; }
.pixels td { text-align: center; padding: 1px; }
.pixels td.fixo { text-align: left; font-weight: 600; color: var(--suave); }
.pixels td i { display: block; width: 100%; aspect-ratio: 1; max-height: 52px; border: 1px solid var(--linha); border-radius: 3px; }
.formato-retrato .pixels td i { aspect-ratio: auto; height: 100%; min-height: 14px; }
.formato-retrato .pixels td { height: calc(100% / 32); }

/* ---------- roda da vida ---------- */
.roda-corpo { flex: 1; display: flex; gap: 28px; min-height: 0; }
.roda-area { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.roda { width: 100%; height: 100%; display: block; }
.roda-lado { flex: 0 0 330px; display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.roda-lado .campos { margin-bottom: 0; }
.roda-lado .caixa { flex: 1; }
.formato-retrato .roda-corpo { flex-direction: column; }
.formato-retrato .roda-area { flex: 0 0 auto; aspect-ratio: 1; max-height: 62%; }
.formato-retrato .roda-lado { flex: 1 1 0; }
.roda-cel { fill: transparent; stroke: var(--linha); stroke-width: 1.5; }
.roda-cel.pintada { fill: var(--cor); }
.roda-borda { fill: var(--cor); stroke: var(--papel); stroke-width: 2; }
.roda-nome { font-family: var(--sans); font-size: 18px; font-weight: 600; fill: var(--tinta); pointer-events: none; }
.roda-nota { fill: var(--suave); }
.roda-miolo { fill: var(--papel); stroke: var(--linha); stroke-width: 1.5; }
.roda-ponto { fill: var(--destaque); }
.roda-escala { font-family: var(--sans); font-size: 13px; font-weight: 600; text-anchor: middle; fill: var(--suave); stroke: var(--papel); stroke-width: 3px; paint-order: stroke; pointer-events: none; }
.tela-celular .roda-corpo, .tela-celular .roda-lado { gap: 10px; }
.tela-celular .roda-nome { font-size: 24px; }
.tela-celular .roda-escala { font-size: 18px; }
.tela-celular .roda-lado .campo { padding-bottom: 14px; }
/* ---------- vision board: colagem de revista, sem cantos arredondados ---------- */
.conteudo.vb { padding: 24px 28px 26px; }
.vb-cab { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.vb-titulo { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 18px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.vb-titulo i { width: 1px; height: 16px; background: var(--tinta); }
.vb-partes { margin-left: auto; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--linha); border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.vb-partes a { padding: 6px 14px; border-radius: 16px; }
.vb-partes a.ativa { background: var(--tinta); color: var(--papel); }
.vb-meses { display: flex; gap: 16px; margin-bottom: 12px; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.vb-meses a.ativa { color: var(--destaque); font-weight: 600; box-shadow: 0 2px 0 var(--destaque); }

.vb-colagem { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); gap: 6px; }
.vb-colagem > * { min-width: 0; min-height: 0; }

.vb-foto { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--suave); }
.vb-foto::after { content: "+"; font-size: 20px; font-weight: 400; line-height: 1; opacity: .45; }
.vb-foto.tom1 { background: var(--destaque-claro); }
.vb-foto.tom2 { background: var(--aba); }
.vb-foto.tom3 { background: var(--circulo); }
.vb-foto.tom4 { background: var(--fds); }
.vb-etiqueta { position: absolute; left: 0; top: 10px; z-index: 1; padding: 4px 10px; background: var(--papel); color: var(--tinta); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

/* cqw e cqh medem o próprio quadro: o texto acompanha o tamanho dele em qualquer formato (por isso ficam nos filhos) */
.vb-texto { container-type: size; overflow: hidden; display: flex; flex-direction: column; justify-content: center; background: var(--card); color: var(--tinta); }
.vb-edita { overflow-wrap: break-word; }
.vb-frase { font-family: var(--serif); }
.vb-frase .vb-edita { padding: 0 8cqw; font-size: min(11.5cqw, 21cqh); line-height: 1.12; }
.vb-frase.estilo-serif { text-align: center; font-style: italic; font-weight: 400; }
.vb-frase.estilo-forte { font-weight: 600; letter-spacing: -.01em; }
.vb-frase.estilo-tinta { background: var(--tinta); color: var(--papel); font-weight: 400; }
.vb-frase.estilo-claro { background: var(--destaque); color: var(--sobre-destaque); text-align: center; font-weight: 400; }
.vb-palavra { background: var(--papel); border: 1px solid var(--linha); text-align: center; font-family: var(--serif); font-style: italic; color: var(--destaque); }
.vb-palavra .vb-edita { padding: 0 5cqw; font-size: min(14.5cqw, 34cqh); line-height: 1.1; }
.vb-bloco-mes { background: var(--papel); border: 1px solid var(--linha); font-family: var(--serif); }
.vb-bloco-mes strong { padding: 0 7cqw; margin-bottom: 3cqh; font-size: min(11cqw, 24cqh); font-weight: 600; line-height: 1.05; }
.vb-bloco-mes .vb-edita { padding: 0 7cqw; font-size: min(5.6cqw, 10cqh); line-height: 1.32; }
.vb-do-ano { align-items: center; text-align: center; }
.vb-do-ano.estilo-tinta { background: var(--tinta); color: var(--papel); }
.vb-do-ano small { font-size: min(3.4cqw, 7cqh); letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.vb-palavra-ano { width: 100%; padding: 0 6cqw; margin: 4cqh 0; font-family: var(--serif); font-size: min(11cqw, 24cqh); font-style: italic; line-height: 1.1; }
.vb-palavra-ano:empty::before { content: attr(data-vazio); opacity: .55; }
.vb-do-ano .vb-ano-num { font-family: var(--serif); font-size: min(6cqw, 12cqh); letter-spacing: .1em; }

.vb-tema { margin: 0 0 14px; font-family: var(--serif); font-size: 17px; line-height: 1.35; color: var(--suave); }
.vb-tema b { color: var(--destaque); font-weight: 600; }
.vb-paginas { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; }
.formato-retrato .vb-paginas { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
.vb-reflexao .vb-foto-mes { grid-row: span 2; }
.formato-retrato .vb-reflexao .vb-foto-mes { grid-row: auto; grid-column: 1 / -1; }
.vb-link { margin-left: auto; align-self: center; }
.vb-link + .cab-agenda { margin-left: 0; }
.vb-link + .setas { margin-left: 12px; }

.tela-celular .conteudo.vb { padding: 18px 14px 14px; }
.tela-celular .vb-cab { gap: 8px; margin-bottom: 8px; }
.tela-celular .vb-titulo { gap: 7px; font-size: 12px; letter-spacing: .08em; }
.tela-celular .vb-titulo i { height: 12px; }
.tela-celular .vb-partes { font-size: 9px; letter-spacing: .03em; padding: 2px; }
.tela-celular .vb-partes a { padding: 4px 7px; }
.tela-celular .vb-meses { gap: 0; justify-content: space-between; margin-bottom: 8px; font-size: 9px; letter-spacing: .02em; }
.tela-celular .vb-colagem { gap: 4px; }
.tela-celular .vb-foto::after { font-size: 15px; }
.tela-celular .vb-etiqueta { top: 6px; padding: 2px 6px; font-size: 8px; letter-spacing: .06em; }
.tela-celular .vb-tema { font-size: 13.5px; margin-bottom: 10px; }
.tela-celular .vb-paginas { gap: 10px; }
.tela-celular .vb-link span { display: none; }
.tela-android-paisagem .vb-cab { margin-bottom: 4px; }
.tela-android-paisagem .vb-meses { margin-bottom: 8px; }
.tela-android-paisagem .conteudo.vb { padding-top: 14px; padding-bottom: 16px; }

/* ---------- versão sem data ---------- */
.mini-dia.vazia { border-bottom: 1px solid var(--linha); margin: 0 3px; min-height: 16px; }
.dias-marcar { display: inline-flex; gap: 6px; }
.dias-marcar i { width: 26px; height: 26px; border: 1.5px solid var(--linha); border-radius: 50%; font-style: normal; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--suave); display: inline-flex; align-items: center; justify-content: center; }
.tela-celular .dias-marcar { gap: 3px; }
.tela-celular .dias-marcar i { width: 21px; height: 21px; font-size: 10px; }

/* ---------- papéis de notas ---------- */
.notas-corpo { flex: 1; }
.papel-pautado { background: repeating-linear-gradient(transparent 0 calc(var(--pauta) - 1px), var(--linha) calc(var(--pauta) - 1px) var(--pauta)); }
.papel-quadriculado { background-image: linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px); background-size: 24px 24px; border: 1px solid var(--linha); }
.papel-pontilhado { background-image: radial-gradient(circle, var(--suave) 1.1px, transparent 1.6px); background-size: 24px 24px; opacity: .9; }
.papel-branco { border: 1.5px dashed transparent; }

/* Pautas no PDF: o Chrome grava repeating-linear-gradient como uma função que cada leitor amostra do seu jeito
   (MuPDF e Ghostscript perdem ou engrossam linhas). Na impressão, cada linha vira um retângulo vetorial: um fio
   de 1px e sua sombra sem desfoque repetida a cada pauta, nas mesmas posições. 50 cobrem a página mais alta. */
@media print {
  .linhas, .papel-pautado { background: none; position: relative; z-index: 0; overflow: hidden; }
  .linhas::before, .papel-pautado::before {
    content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(var(--pauta) - 1px); height: 1px;
    background: var(--linha);
    box-shadow:
      0 calc(var(--pauta) * 1) var(--linha), 0 calc(var(--pauta) * 2) var(--linha), 0 calc(var(--pauta) * 3) var(--linha), 0 calc(var(--pauta) * 4) var(--linha), 0 calc(var(--pauta) * 5) var(--linha),
      0 calc(var(--pauta) * 6) var(--linha), 0 calc(var(--pauta) * 7) var(--linha), 0 calc(var(--pauta) * 8) var(--linha), 0 calc(var(--pauta) * 9) var(--linha), 0 calc(var(--pauta) * 10) var(--linha),
      0 calc(var(--pauta) * 11) var(--linha), 0 calc(var(--pauta) * 12) var(--linha), 0 calc(var(--pauta) * 13) var(--linha), 0 calc(var(--pauta) * 14) var(--linha), 0 calc(var(--pauta) * 15) var(--linha),
      0 calc(var(--pauta) * 16) var(--linha), 0 calc(var(--pauta) * 17) var(--linha), 0 calc(var(--pauta) * 18) var(--linha), 0 calc(var(--pauta) * 19) var(--linha), 0 calc(var(--pauta) * 20) var(--linha),
      0 calc(var(--pauta) * 21) var(--linha), 0 calc(var(--pauta) * 22) var(--linha), 0 calc(var(--pauta) * 23) var(--linha), 0 calc(var(--pauta) * 24) var(--linha), 0 calc(var(--pauta) * 25) var(--linha),
      0 calc(var(--pauta) * 26) var(--linha), 0 calc(var(--pauta) * 27) var(--linha), 0 calc(var(--pauta) * 28) var(--linha), 0 calc(var(--pauta) * 29) var(--linha), 0 calc(var(--pauta) * 30) var(--linha),
      0 calc(var(--pauta) * 31) var(--linha), 0 calc(var(--pauta) * 32) var(--linha), 0 calc(var(--pauta) * 33) var(--linha), 0 calc(var(--pauta) * 34) var(--linha), 0 calc(var(--pauta) * 35) var(--linha),
      0 calc(var(--pauta) * 36) var(--linha), 0 calc(var(--pauta) * 37) var(--linha), 0 calc(var(--pauta) * 38) var(--linha), 0 calc(var(--pauta) * 39) var(--linha), 0 calc(var(--pauta) * 40) var(--linha),
      0 calc(var(--pauta) * 41) var(--linha), 0 calc(var(--pauta) * 42) var(--linha), 0 calc(var(--pauta) * 43) var(--linha), 0 calc(var(--pauta) * 44) var(--linha), 0 calc(var(--pauta) * 45) var(--linha),
      0 calc(var(--pauta) * 46) var(--linha), 0 calc(var(--pauta) * 47) var(--linha), 0 calc(var(--pauta) * 48) var(--linha), 0 calc(var(--pauta) * 49) var(--linha), 0 calc(var(--pauta) * 50) var(--linha);
  }

  /* Quadriculado: em mosaico, o Chrome grava o gradiente como imagem de 72 dpi, que borra ao ampliar. Mesma técnica das pautas. */
  .papel-quadriculado { background-image: none; position: relative; z-index: 0; overflow: hidden; }
  .papel-quadriculado::before, .papel-quadriculado::after { content: ""; position: absolute; z-index: -1; top: 0; left: 0; background: var(--linha); }
  .papel-quadriculado::before {
    right: 0; height: 1px;
    box-shadow:
      0 24px var(--linha), 0 48px var(--linha), 0 72px var(--linha), 0 96px var(--linha), 0 120px var(--linha), 0 144px var(--linha), 0 168px var(--linha), 0 192px var(--linha),
      0 216px var(--linha), 0 240px var(--linha), 0 264px var(--linha), 0 288px var(--linha), 0 312px var(--linha), 0 336px var(--linha), 0 360px var(--linha), 0 384px var(--linha),
      0 408px var(--linha), 0 432px var(--linha), 0 456px var(--linha), 0 480px var(--linha), 0 504px var(--linha), 0 528px var(--linha), 0 552px var(--linha), 0 576px var(--linha),
      0 600px var(--linha), 0 624px var(--linha), 0 648px var(--linha), 0 672px var(--linha), 0 696px var(--linha), 0 720px var(--linha), 0 744px var(--linha), 0 768px var(--linha),
      0 792px var(--linha), 0 816px var(--linha), 0 840px var(--linha), 0 864px var(--linha), 0 888px var(--linha), 0 912px var(--linha), 0 936px var(--linha), 0 960px var(--linha),
      0 984px var(--linha), 0 1008px var(--linha), 0 1032px var(--linha), 0 1056px var(--linha), 0 1080px var(--linha), 0 1104px var(--linha), 0 1128px var(--linha), 0 1152px var(--linha),
      0 1176px var(--linha), 0 1200px var(--linha), 0 1224px var(--linha), 0 1248px var(--linha), 0 1272px var(--linha), 0 1296px var(--linha), 0 1320px var(--linha), 0 1344px var(--linha);
  }
  .papel-quadriculado::after {
    bottom: 0; width: 1px;
    box-shadow:
      24px 0 var(--linha), 48px 0 var(--linha), 72px 0 var(--linha), 96px 0 var(--linha), 120px 0 var(--linha), 144px 0 var(--linha), 168px 0 var(--linha), 192px 0 var(--linha),
      216px 0 var(--linha), 240px 0 var(--linha), 264px 0 var(--linha), 288px 0 var(--linha), 312px 0 var(--linha), 336px 0 var(--linha), 360px 0 var(--linha), 384px 0 var(--linha),
      408px 0 var(--linha), 432px 0 var(--linha), 456px 0 var(--linha), 480px 0 var(--linha), 504px 0 var(--linha), 528px 0 var(--linha), 552px 0 var(--linha), 576px 0 var(--linha),
      600px 0 var(--linha), 624px 0 var(--linha), 648px 0 var(--linha), 672px 0 var(--linha), 696px 0 var(--linha), 720px 0 var(--linha), 744px 0 var(--linha), 768px 0 var(--linha),
      792px 0 var(--linha), 816px 0 var(--linha), 840px 0 var(--linha), 864px 0 var(--linha), 888px 0 var(--linha), 912px 0 var(--linha), 936px 0 var(--linha), 960px 0 var(--linha),
      984px 0 var(--linha), 1008px 0 var(--linha), 1032px 0 var(--linha), 1056px 0 var(--linha), 1080px 0 var(--linha), 1104px 0 var(--linha), 1128px 0 var(--linha), 1152px 0 var(--linha),
      1176px 0 var(--linha), 1200px 0 var(--linha), 1224px 0 var(--linha), 1248px 0 var(--linha), 1272px 0 var(--linha), 1296px 0 var(--linha), 1320px 0 var(--linha), 1344px 0 var(--linha);
  }
}

/* Pontilhado no PDF gerado: pontos vetoriais em SVG (notas.html), pelo mesmo motivo. O site continua com o gradiente. */
.pontos { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; fill: none; stroke: var(--suave); stroke-width: 2.7; stroke-linecap: round; }

/* ---------- índice de módulos ---------- */
.indice-modulos { flex: 1; column-count: 3; column-gap: 28px; }
.formato-retrato .indice-modulos { column-count: 2; }
.grupo-modulos { break-inside: avoid; margin-bottom: 20px; }
.grupo-modulos h2 { border-bottom: 1.5px solid var(--linha); padding-bottom: 6px; margin-bottom: 4px; }
.item-modulo { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--linha); }
.item-modulo strong { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.item-desc { grid-column: 1; font-size: 12px; color: var(--suave); line-height: 1.35; }
.item-qtd { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 11px; font-weight: 600; color: var(--destaque); white-space: nowrap; }
.tela-celular .indice-modulos { column-gap: 16px; }
.tela-celular .item-modulo strong { font-size: 14px; }
.tela-celular .item-desc { display: none; }
.tela-celular .item-qtd { font-size: 10px; }
.tela-celular .grupo-modulos { margin-bottom: 12px; }

/* ---------- guia de uso ---------- */
.capa-guia { display: block; margin-top: 18px; font-size: 13px; color: var(--suave); text-decoration: underline; }
.guia { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 18px; min-height: 0; }
.formato-retrato .guia { grid-template-columns: 1fr; grid-template-rows: none; align-content: start; }
.guia-intro { font-size: 15px; line-height: 1.5; color: var(--suave); margin: -8px 0 20px; max-width: 80ch; }
.passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.45; }
.legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.legenda .tag { display: inline-block; min-width: 46px; text-align: center; background: var(--aba); border-radius: 6px; padding: 2px 6px; margin-right: 10px; font-size: 12px; font-weight: 600; color: var(--suave); }
.guia-dicas li { height: auto; min-height: var(--pauta); padding: 6px 0; font-size: 14.5px; line-height: 1.4; }
.guia-txt { font-size: 14.5px; line-height: 1.45; margin: 0; }
.guia-botao { margin-top: auto; align-self: flex-start; padding: 12px 24px; font-size: 14px; }
.formato-retrato .guia-botao { margin-top: 14px; }

/* ---------- celular (480 × 1040) ---------- */
.tela-celular { --pauta: 28px; --escala-coluna: .62; }
.tela-celular .conteudo { padding: 24px 20px 20px; }
.tela-celular .abas { height: 56px; padding: 0 6px; }
.tela-celular .aba.mes:not(.ativa) { display: none; }
.tela-celular .aba { font-size: 14px; }
.tela-celular .cabecalho { gap: 10px; margin-bottom: 16px; }
.tela-celular .cabecalho h1 { font-size: 30px; }
.tela-celular .cabecalho .rotulo { font-size: 11px; letter-spacing: .08em; }
.tela-celular .seta { width: 34px; height: 34px; }
.tela-celular h2 { font-size: 11px; margin-bottom: 6px; }
.tela-celular .caixa { padding: 12px 14px; border-radius: 12px; }

.tela-celular .capa-titulo { font-size: 76px; }
.tela-celular .capa-ano { font-size: 46px; }
.tela-celular .capa::before { width: 300px; height: 300px; right: -90px; top: -70px; }
.tela-celular .capa::after { width: 220px; height: 220px; left: -80px; bottom: -60px; }

.tela-celular .grade-ano { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(6, 1fr); gap: 12px 22px; }
.tela-celular .mini-titulo { font-size: 16px; margin-bottom: 4px; }
.tela-celular .mini-grade { font-size: 11.5px; row-gap: 0; }
.tela-celular .mini-dia { padding: 1px 0; }

.tela-celular .grade-mes { grid-template-columns: 24px repeat(7, 1fr); }
.tela-celular .mes-dia { padding: 5px 6px; font-size: 13px; }
.tela-celular .mes-cab { font-size: 9.5px; letter-spacing: .04em; }
.tela-celular .sem-num { font-size: 9px; }
.tela-celular .mes-corpo { gap: 14px; }
.tela-celular .mes-lateral { height: 230px; gap: 10px; }
.tela-celular .mes-lateral .zona-sticker { flex: 0 0 70px; height: auto !important; }

.tela-celular .grade-semana { gap: 10px; }
.tela-celular .dia-semana-cab .n { font-size: 22px; }

.tela-celular .dia-cab-num { font-size: 50px; }
.tela-celular .dia-cab-txt strong { font-size: 20px; }
.tela-celular .dia-cab-txt span a { font-size: 11px; margin-right: 10px; }
.tela-celular .cabecalho .zona-sticker { width: 74px !important; height: 50px !important; font-size: 9px; }
.tela-celular .dia-corpo { gap: 14px; }
.tela-celular .dia-dir { gap: 10px; }
.tela-celular .dia-linha-extra { gap: 10px; }
.tela-celular .copos { gap: 5px; }
.tela-celular .copos i { width: 14px; height: 20px; }
.tela-celular .remedios { flex-direction: column; gap: 4px; font-size: 11px; }
.tela-celular .dia-dir > .caixa:last-child:not(.oracao) { display: none; }
.tela-celular .hora { font-size: 10.5px; }
.tela-celular .hora span { width: 38px; padding-top: 2px; }

.tela-celular .grade-modulos { gap: 10px; }
.tela-celular .card-modulo { padding: 12px 14px; gap: 4px; }
.tela-celular .card-modulo strong { font-size: 18px; }
.tela-celular .card-num { font-size: 16px; }
.tela-celular .card-desc { font-size: 12px; }
.tela-celular .card-ir { font-size: 10.5px; }

.tela-celular .mod-col, .tela-celular .mod-linha { gap: 10px; }
.tela-celular .mod-linha[style*="margin-top"] { margin-top: 10px !important; }
.tela-celular .grade-areas { gap: 10px; }
.tela-celular .campos { flex-wrap: wrap; gap: 12px 18px; margin-bottom: 14px; }
.tela-celular .campo { flex: 1 1 40%; padding-bottom: 18px; font-size: 10px; }
.tela-celular .tabela { font-size: 11.5px; }
.tela-celular .tabela th { font-size: 8.5px; letter-spacing: .02em; padding: 0 3px 5px; }
.tela-celular .tabela td { padding: 0 3px; }
.tela-celular .rastreador th:first-child { width: 100px; }
.tela-celular .rastreador td { height: 28px; }
.tela-celular .rastreador td.fixo { font-size: 10.5px; }
.tela-celular .rastreador + .rastreador { margin-top: 14px; }
.tela-celular .resumo-fin { flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tela-celular .resumo-fin .caixa { flex: 1 1 28%; padding: 8px 10px; }
.tela-celular .resumo-fin .rs { font-size: 17px; }
.tela-celular .cofrinho { grid-template-columns: repeat(10, 1fr); }
.tela-celular .oracao-dias { grid-template-columns: repeat(11, 1fr); gap: 4px; }
.tela-celular .oracao-dias i { font-size: 10px; }
.tela-celular .cornell > div { padding: 10px 12px; }

.tela-celular .cartela { gap: 22px 24px; }
.tela-celular .cartela img { max-width: 190px; max-height: 120px; }
.tela-celular .guia { gap: 10px; }
.tela-celular .guia-intro { font-size: 13px; margin: -4px 0 12px; }
.tela-celular .passos, .tela-celular .legenda { font-size: 13px; gap: 6px; }
.tela-celular .guia-dicas li, .tela-celular .guia-txt { font-size: 13px; }
.tela-celular .legenda .tag { min-width: 40px; font-size: 11px; }

/* índice com muitos módulos: sem descrição */
.indice-modulos.compacto .item-desc { display: none; }
.indice-modulos.compacto .item-modulo { padding: 5px 0; }
.indice-modulos.compacto .item-modulo strong { font-size: 15px; }
.indice-modulos.compacto .grupo-modulos { margin-bottom: 14px; }
.tela-celular .indice-modulos.compacto .item-modulo strong { font-size: 12.5px; }
.tela-celular .indice-modulos.compacto .item-modulo { padding: 3px 0; }
/* Mais de 40 módulos: uma linha por módulo, sem a contagem de páginas */
.indice-modulos.denso .item-qtd { display: none; }
.indice-modulos.denso .item-modulo { padding: 2px 0; }
.indice-modulos.denso .item-modulo strong { font-size: 13px; line-height: 1.25; }
.indice-modulos.denso .grupo-modulos { margin-bottom: 8px; }
.indice-modulos.denso .grupo-modulos h2 { margin-bottom: 1px; padding-bottom: 2px; }
.tela-celular .indice-modulos.denso .item-modulo { padding: 1px 0; }
.tela-celular .indice-modulos.denso .item-modulo strong { font-size: 11.5px; }
.formato-retrato .mod-linha.lado-a-lado { flex-direction: row; }
.formato-retrato .mod-linha.lado-a-lado > * { flex: 1 1 0 !important; }
.tela-celular .pomodoros th:nth-child(3), .tela-celular .pomodoros td:nth-child(3) { display: none; }
.tela-celular .passos, .tela-celular .legenda, .tela-celular .guia-dicas li { font-size: 12px; }
.tela-celular .guia .caixa { padding: 10px 12px; }
.tela-celular .guia-dicas li { padding: 3px 0; }
.tela-celular .rastreador td { height: 24px; }
/* Android em pé (800 × 1280): tela estreita, a agenda do dia precisa do espaço da caixa de notas */
.tela-android-retrato .dia-dir > .caixa:last-child:not(.oracao) { display: none; }
.tela-android-retrato .dia-corpo { gap: 16px; }

/* checklist que preenche a caixa inteira: só cabem linhas inteiras, o excedente fica oculto */
.checks.cheia { flex: 1; min-height: 0; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; overflow: hidden; }
.checks.cheia li { flex: none; width: 100%; box-sizing: border-box; }
.tabela-cheia { flex: 1; min-height: 0; overflow: hidden; }