/* ============================================================================
SCRIPTORIUM — folha de estilo única. NÃO muda entre italiano e alemão.
Paleta travada no CANON §7. Não invente cor.
---------------------------------------------------------------------------
TIPOGRAFIA REVISTA 31/07/2026 — o texto estava difícil de ler. Por quê:
1. O corpo era 'EB Garamond' a 18px. Garamond tem altura-x minúscula
(~0,44 em): 18px de Garamond lê como ~14px de uma fonte normal.
Agora o corpo é LORA — serifada, calligráfica, altura-x grande,
desenhada para tela. Mantém o ar de manuscrito e dobra a legibilidade.
2. 'Cormorant Garamond' é fonte de DISPLAY, de traço fino. Estava em botão
(17px), rótulo (15px), caixa-alta espaçada (12px) — nesses tamanhos ela
simplesmente some. Agora Cormorant só aparece de 22px pra cima
(títulos e capitular). Todo o resto é Lora.
3. Corpo a 18/1.6 numa coluna de 980px dava linha de ~110 caracteres.
Confortável é 65–75. Agora 19/1.75 com medida travada em 68ch.
4. --inchiostro-soft era #6b5a45 e carregava metade do texto em 13–14px
itálico. Escurecido, e os tamanhos pequenos subiram um degrau.
5. hyphens:auto — o alemão tem palavra composta gigante
('Skriptorium-Lesezeichen') que estourava o card.
Nomes de classe: NENHUM mudou. O app.js não foi tocado.
---------------------------------------------------------------------------
SEGUNDA REVISÃO 06/08/2026 — a revisão de 31/07 consertou o texto dos
ARTIGOS e nunca encostou em `.ramo`, que é a tela onde o aluno passa o
tempo todo. Quatro defeitos medidos na mappa aberta:
1. O cartão do ramo (--pergamena #f4e9d4) contra a tela atrás dele
(--carta #fbf5e7) dava contraste de 1,11:1. A borda --linea contra a
tela, 1,40:1. E `.ramo` não tinha sombra nenhuma. Resultado: não havia
separação óptica entre o papel e a mesa — o olho tinha que inferir
onde um cartão acabava pela distância, não pelo contraste.
Agora existem DUAS superfícies distintas, escolha do Daniel
(«papel x mesa», 06/08/2026):
--carta #fffdf7 = o PAPEL — todo cartão de leitura
--tavolo #ece0c6 = a MESA — o fundo da página e a tela do mapa
Cartão contra mesa sobe de 1,11 para 1,29:1, e quem faz o trabalho
pesado é a sombra (0 2px 9px rgba(43,33,24,.14)) + a borda #ddcba6.
2. Dentro do cartão o texto era MENOR que o do resto do app (corpo 19px;
cartão 18/15/15/12). E a citação — o conteúdo principal — era a menor,
a única em itálico e a única rebaixada em opacidade (.88).
Agora: citação 16px, romana, opacidade cheia. Glossa 16px.
3. O «CCC 1» em --oro-scuro a 12px dá 3,00:1 sobre pergaminho — reprova
no AA (mínimo 4,5:1). Passou para --inchiostro-soft, que sobre o papel
novo mede 8,21:1 (verificado no navegador).
(--oro puro dá 2,01:1 e continua proibido em texto.)
4. TUDO era serifado. Lora é boa, mas em 15px de texto corrido, com
itálico e opacidade por cima, vira ruído. O corpo passa a ser
SOURCE SANS 3; Cormorant continua sozinha nos títulos >=22px.
O ar de manuscrito fica onde ele funciona e some de onde atrapalha.
Consequência: Lora saiu do de fontes dos dois index.html.
⚠️ ISTO MEXE NO CANON §7. As 5 cores travadas continuam TODAS existindo e
nenhuma mudou de valor — ouro #c9a227, borgonha #6d1a2d, ultramarino
#1f3a72, tinta #2b2118 e pergaminho #f4e9d4. O que mudou é o PAPEL do
pergaminho: ele deixa de ser o fundo do cartão e continua no nó central,
no marcador e nos ícones. Entram 4 hexadecimais neutros novos — 2
estruturais (--carta e --tavolo, acima) e 2 que são só as linhas
re-tonalizadas para acompanhar: --linea #e6d8b8 e a borda do cartão
#ddcba6. Registrar no CANON §7 é decisão do Daniel.
============================================================================ */
:root{
--pergamena:#f4e9d4;
--oro:#c9a227;
--oro-scuro:#a5821c; /* ouro legível sobre pergaminho, p/ texto pequeno */
--borgogna:#6d1a2d;
--oltremare:#1f3a72;
--inchiostro:#2b2118;
--inchiostro-soft:#5c4b36;
/* PAPEL x MESA — 06/08/2026. Ver o bloco 1 da 2ª revisão no topo.
--carta é toda superfície de leitura; --tavolo é o que fica atrás dela.
Nunca use --tavolo como fundo de cartão nem --carta como fundo de página. */
--carta:#fffdf7;
--tavolo:#ece0c6;
--linea:#e6d8b8; /* linha sobre a mesa */
--linea-carta:#ddcba6; /* borda do cartão — precisa ser mais escura */
--linea-forte:#cdb589;
/* as 4 partes do Catecismo — cada uma com a sua rubrica */
--p1:#6d1a2d; /* La professione della fede */
--p2:#1f3a72; /* La celebrazione del mistero */
--p3:#2f6b4f; /* La vita in Cristo */
--p4:#8a5a1f; /* La preghiera cristiana */
/* as duas famílias. Não misture: display >=22px, o resto é corpo.
O corpo deixou de ser serifado em 06/08/2026 — ver bloco 4 no topo. */
--f-display:'Cormorant Garamond',Garamond,'Times New Roman',serif;
--f-corpo:'Source Sans 3','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family:var(--f-corpo);
font-size:18px; line-height:1.7; font-weight:400;
color:var(--inchiostro);
background-color:var(--tavolo);
background-image:
radial-gradient(circle at 20% 10%, rgba(201,162,39,.055), transparent 55%),
radial-gradient(circle at 85% 80%, rgba(109,26,45,.045), transparent 55%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
font-kerning:normal;
hyphens:auto; /* o alemão precisa: Skriptorium-Lesezeichen */
-webkit-hyphens:auto;
}
#app{max-width:980px;margin:0 auto;padding:18px 18px 80px}
/* medida de leitura: 68 caracteres. Sem isto a linha passa de 110 na tela grande. */
p{max-width:68ch;margin:0 0 1em}
p:last-child{margin-bottom:0}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.14;margin:0;
letter-spacing:-.005em;text-wrap:balance}
a{color:var(--borgogna)}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--oro-scuro);outline-offset:2px}
/* ---------- topo ---------- */
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
padding:10px 0 14px;border-bottom:2px solid var(--oro);margin-bottom:22px}
.top .spacer{flex:1}
.logo{font-family:var(--f-display);font-size:30px;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;color:var(--borgogna);text-decoration:none;line-height:1}
.logo small{display:block;font-family:var(--f-corpo);font-size:13px;font-weight:400;
color:var(--inchiostro-soft);text-transform:none;font-style:italic;
letter-spacing:.02em;margin-top:4px}
.navlink{font-size:16px;color:var(--inchiostro-soft);text-decoration:none;
border-bottom:1px solid transparent;padding-bottom:2px}
.navlink:hover{border-color:var(--oro);color:var(--borgogna)}
.giorni{font-size:15px;color:var(--oro-scuro);letter-spacing:.03em;white-space:nowrap}
/* ---------- botões ---------- */
.btn{display:inline-block;font-family:var(--f-corpo);font-size:15px;font-weight:600;
letter-spacing:.09em;text-transform:uppercase;text-decoration:none;cursor:pointer;
padding:11px 22px;border:1px solid var(--oro);border-radius:2px;line-height:1.2;
background:transparent;color:var(--borgogna);transition:.15s;hyphens:none}
.btn:hover{background:rgba(201,162,39,.12);border-color:var(--oro-scuro)}
.btn.primary{background:var(--borgogna);color:var(--pergamena);border-color:var(--borgogna)}
.btn.primary:hover{background:#57121f}
.btn:disabled,.btn.off{opacity:.4;cursor:not-allowed}
.back{display:inline-block;margin-bottom:16px;font-size:16px;color:var(--inchiostro-soft);
text-decoration:none;letter-spacing:.01em}
.back:hover{color:var(--borgogna)}
/* ---------- placas / cartões ---------- */
.card{background:var(--carta);border:1px solid var(--linea);border-radius:2px;
box-shadow:0 1px 0 rgba(43,33,24,.06);padding:20px 24px;margin-bottom:14px;position:relative;
max-width:72ch}
.card::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--mc,var(--oro))}
/* a rubrica do cartão — é o que o app.js põe antes do . Era negrito puro. */
.card>b{display:block;font-family:var(--f-corpo);font-size:13px;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--mc,var(--borgogna));
margin-bottom:8px;hyphens:none}
.card>b+br{display:none}
.sect{font-family:var(--f-corpo);font-size:14px;font-weight:600;letter-spacing:.19em;
text-transform:uppercase;color:var(--inchiostro-soft);margin:34px 0 14px;
display:flex;align-items:center;gap:12px;hyphens:none}
.sect::after{content:'';flex:1;height:1px;background:var(--linea-forte)}
.empty{text-align:center;color:var(--inchiostro-soft);font-style:italic;padding:36px 10px}
/* capitular iluminada */
.capitolare{float:left;font-family:var(--f-display);font-size:66px;font-weight:700;line-height:.8;
margin:8px 14px 2px 0;padding:8px 12px;color:var(--oro-scuro);
border:2px solid var(--oro);background:rgba(201,162,39,.1)}
/* ---------- hub ---------- */
.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.prod{background:var(--carta);border:1px solid var(--linea);border-top:4px solid var(--mc,var(--oro));
border-radius:2px;padding:22px;text-decoration:none;color:inherit;display:block;transition:.15s}
.prod:hover{box-shadow:0 3px 14px rgba(43,33,24,.12);transform:translateY(-2px)}
.prod h3{font-size:26px;color:var(--mc,var(--borgogna));margin-bottom:6px}
.prod .sotto{font-size:16px;color:var(--inchiostro-soft);font-style:italic;margin-bottom:14px;
line-height:1.5}
.prod.locked{opacity:.62;filter:saturate(.4)}
.barra{height:5px;background:rgba(43,33,24,.09);border-radius:3px;overflow:hidden;margin-top:12px}
.barra i{display:block;height:100%;background:var(--mc,var(--oro))}
.conta{font-size:15px;color:var(--inchiostro-soft);margin-top:6px;letter-spacing:.02em}
/* ---------- busca ---------- */
.cerca{width:100%;font-family:inherit;font-size:18px;padding:12px 15px;
background:var(--carta);border:1px solid var(--linea);border-radius:2px;color:inherit;margin-bottom:16px}
.cerca:focus{outline:none;border-color:var(--oro)}
/* ---------- lista de mapas ---------- */
.elenco{border-top:1px solid var(--linea)}
.riga{display:flex;align-items:center;gap:12px;padding:13px 8px;cursor:pointer;
border-bottom:1px solid var(--linea);border-left:3px solid var(--mc,transparent)}
.riga:hover{background:rgba(201,162,39,.07)}
.riga .fatto{width:18px;color:var(--oro-scuro)}
.riga .tit{flex:1;line-height:1.35}
.riga .ccc{font-size:14px;letter-spacing:.04em;color:var(--inchiostro-soft);white-space:nowrap}
.riga .stella{cursor:pointer;opacity:.3;font-size:17px}
.riga .stella.on{opacity:1;color:var(--oro)}
/* ---------- mapa ---------- */
.testata{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.testata h1{font-size:38px;color:var(--mc,var(--borgogna))}
.chip{font-family:var(--f-corpo);font-size:12px;font-weight:600;letter-spacing:.13em;
text-transform:uppercase;border:1px solid var(--oro);color:var(--inchiostro-soft);
padding:3px 10px;border-radius:2px;hyphens:none}
.azioni{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
/* ===========================================================================
A FOLHA — 10/08/2026. Substitui .telaio/.tela/.colonna/.centrale/.ramo,
o mapa de duas colunas ligado por curvas, que saiu do app.
Cada zona tem função: esquerda = agenda + ideia · centro = arte + o que
guardar · direita = os pontos numerados com a fonte. Ver o comentário
grande sobre foglioHTML() no app.js.
Uma folha só, que serve à tela e ao papel: em @media print ela vira A4.
=========================================================================== */
.foglio{background:var(--pergamena);border:1px solid var(--linea-carta);
border-radius:3px;overflow:hidden;box-shadow:0 3px 20px rgba(43,33,24,.16);margin-top:6px}
.f-testa{background:var(--mc,var(--borgogna));color:var(--pergamena);
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:7px 16px;font-family:var(--f-corpo);font-size:12px;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;hyphens:none}
.f-testa .marca{opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-testa .f-parte{opacity:.95;text-align:center}
.f-testa .f-pag{background:rgba(255,255,255,.15);border:1px solid rgba(244,233,212,.32);
border-radius:2px;padding:2px 11px;white-space:nowrap}
.f-titolo{text-align:center;padding:20px 26px 14px}
.f-titolo h1{font-family:var(--f-display);font-size:38px;font-weight:700;
line-height:1.06;color:var(--mc,var(--borgogna))}
.f-rif{display:inline-block;margin-top:10px;background:var(--oro);color:#3a2c08;
font-family:var(--f-corpo);font-size:12px;font-weight:700;letter-spacing:.12em;
padding:3px 13px;border-radius:2px;hyphens:none}
.f-somm{margin:10px auto 0;max-width:60ch;font-size:16px;font-style:italic;
color:var(--inchiostro-soft);line-height:1.5}
.f-corpo{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:16px;
padding:2px 18px 16px;align-items:start}
.f-col{display:flex;flex-direction:column;gap:12px}
.f-box{background:var(--carta);border:1px solid var(--linea-carta);border-radius:3px;
padding:13px 15px;box-shadow:0 1px 0 rgba(43,33,24,.05)}
.f-box > h3{display:flex;align-items:center;gap:8px;font-family:var(--f-corpo);
font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--mc,var(--borgogna));margin-bottom:9px;line-height:1.25;hyphens:none}
.f-box .bollo{width:21px;height:21px;flex:0 0 21px;border-radius:50%;
background:var(--mc,var(--borgogna));color:var(--pergamena);display:grid;
place-items:center;font-size:11px;font-weight:700;letter-spacing:0}
.f-box p{font-size:15px;line-height:1.55;color:var(--inchiostro-soft)}
.f-box p b{color:var(--inchiostro)}
/* esquerda — a agenda */
.f-agenda{list-style:none;display:flex;flex-direction:column;gap:9px}
.f-agenda li{display:flex;align-items:flex-start;gap:9px}
.f-agenda .ico{color:var(--oro-scuro);width:19px;height:19px;margin-top:2px}
.f-agenda b{display:block;font-size:15px;font-weight:600;color:var(--inchiostro);line-height:1.3}
.f-agenda i{font-size:14px;color:var(--inchiostro-soft);line-height:1.4}
/* centro — arte, legenda, citação */
.f-centro{display:flex;flex-direction:column;gap:11px}
.f-arte{border:2px solid var(--oro);border-radius:3px;padding:6px;background:var(--carta);position:relative}
.f-arte::after{content:'';position:absolute;inset:3px;border:1px solid rgba(201,162,39,.35);
border-radius:2px;pointer-events:none}
.f-arte img{width:100%;display:block;border-radius:2px}
.f-dida{font-family:var(--f-display);font-size:21px;font-weight:600;text-align:center;
color:var(--mc,var(--borgogna));line-height:1.25}
.f-cit{background:rgba(201,162,39,.11);border:1px solid var(--oro);border-radius:3px;padding:12px 14px}
.f-cit p{font-family:var(--f-display);font-size:17px;font-style:italic;line-height:1.45;
color:var(--inchiostro);text-wrap:pretty}
.f-cit span{display:block;margin-top:6px;font-family:var(--f-corpo);font-size:11px;
font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--oro-scuro);hyphens:none}
.f-ricorda{border-color:var(--oro)}
/* direita — os pontos numerados */
.f-punti{display:flex;flex-direction:column;gap:11px}
.f-punti .pt{display:flex;gap:10px;align-items:flex-start}
.f-punti .n{width:22px;height:22px;flex:0 0 22px;border-radius:3px;display:grid;
place-items:center;font-family:var(--f-corpo);font-size:12px;font-weight:700;color:#fff}
.f-punti b{display:block;font-size:15px;font-weight:700;color:var(--inchiostro);line-height:1.3}
.f-punti span{display:block;margin-top:2px;font-size:14px;color:var(--inchiostro-soft);
line-height:1.5;text-wrap:pretty}
.f-punti em{display:block;margin-top:3px;font-style:normal;font-family:var(--f-corpo);
font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--oro-scuro);hyphens:none}
/* rodapé de navegação */
.f-piede{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.f-piede .seg{padding:8px 7px;text-align:center;font-family:var(--f-corpo);font-size:10.5px;
font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.35;
color:rgba(244,233,212,.6);border-right:1px solid rgba(244,233,212,.16);hyphens:none}
.f-piede .seg:last-child{border-right:0}
.f-piede .seg b{display:block;font-size:9.5px;letter-spacing:.15em;opacity:.55;margin-bottom:2px}
.f-piede .seg.on{color:#fff;box-shadow:inset 0 0 0 999px rgba(255,255,255,.13)}
.f-piede .seg.on b{opacity:.95;color:var(--oro)}
.nota{background:rgba(201,162,39,.1);border:1px solid var(--oro);border-radius:2px;
padding:16px 20px;margin-top:20px;max-width:72ch}
.nota b{font-family:var(--f-corpo);font-size:13px;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--borgogna);display:block;margin-bottom:7px;hyphens:none}
/* ---------- schede / quiz ---------- */
.studio{max-width:640px;margin:0 auto;text-align:center}
.studio .meta{font-family:var(--f-corpo);font-size:13px;font-weight:600;letter-spacing:.15em;
text-transform:uppercase;color:var(--inchiostro-soft);margin-bottom:16px;hyphens:none}
.fcard{background:var(--carta);border:1px solid var(--linea);border-top:4px solid var(--mc,var(--oro));
border-radius:2px;padding:38px 28px;min-height:240px;display:flex;flex-direction:column;
align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 12px rgba(43,33,24,.08)}
.fcard .tipo{font-family:var(--f-corpo);font-size:12px;font-weight:600;letter-spacing:.19em;
text-transform:uppercase;color:var(--oro-scuro);margin-bottom:16px;hyphens:none}
.fcard .grande{font-family:var(--f-display);font-size:34px;font-weight:700;line-height:1.2}
.fcard .mezzo{font-size:17px;font-style:italic;color:var(--inchiostro-soft);margin-top:16px;
line-height:1.5}
.fcard .suggerimento{font-size:14px;color:var(--inchiostro-soft);margin-top:20px;
letter-spacing:.02em;line-height:1.5}
.voto{display:flex;gap:12px;justify-content:center;margin-top:20px}
.risultato{padding:34px 10px}
.risultato .grande{font-family:var(--f-display);font-size:58px;font-weight:700;
color:var(--oro-scuro);line-height:1}
.opzioni{display:grid;gap:10px;margin-top:18px}
.opz{font-family:inherit;font-size:17px;line-height:1.45;text-align:left;padding:13px 17px;
cursor:pointer;background:var(--carta);border:1px solid var(--linea);border-radius:2px;color:inherit}
.opz:hover{border-color:var(--oro)}
.opz.giusta{border-color:#2f6b4f;background:rgba(47,107,79,.12)}
.opz.sbagliata{border-color:var(--borgogna);background:rgba(109,26,45,.1)}
/* ---------- segnalibri ---------- */
.segGriglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.seg{background:var(--carta);border:1px solid var(--linea);border-radius:2px;
padding:0 0 16px;text-align:center;overflow:hidden;display:block;
text-decoration:none;color:inherit;transition:.15s}
.seg:hover{box-shadow:0 3px 14px rgba(43,33,24,.14);transform:translateY(-2px)}
.seg .anteprima{aspect-ratio:1/3;background:var(--pergamena);border-bottom:1px solid var(--linea);
display:flex;align-items:center;justify-content:center;overflow:hidden}
.seg .anteprima img{width:100%;height:100%;object-fit:cover}
.seg .anteprima .vuoto{font-size:14px;color:var(--inchiostro-soft);font-style:italic;padding:10px;
line-height:1.45}
.seg h4{font-family:var(--f-corpo);font-size:17px;font-weight:600;line-height:1.3;
margin:13px 10px 4px;color:var(--borgogna)}
.seg .sotto{font-size:15px;color:var(--inchiostro-soft);margin:0 10px 10px;font-style:italic;
line-height:1.4}
/* ---------- sfida ---------- */
.settimana{margin-bottom:30px}
.settimana h3{font-size:26px;color:var(--borgogna);margin-bottom:3px}
.settimana .obiettivo{font-size:16px;font-style:italic;color:var(--inchiostro-soft);
margin-bottom:14px;line-height:1.5;max-width:68ch}
.giorniGriglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.gio{background:var(--carta);border:1px solid var(--linea);border-radius:2px;padding:13px;
cursor:pointer;text-align:left}
.gio:hover{border-color:var(--oro)}
.gio.fatto{background:rgba(201,162,39,.14);border-color:var(--oro)}
.gio .n{font-family:var(--f-corpo);font-size:12px;font-weight:600;letter-spacing:.15em;
text-transform:uppercase;color:var(--oro-scuro);hyphens:none}
.gio h4{font-family:var(--f-corpo);font-size:17px;font-weight:600;line-height:1.3;margin-top:4px}
/* ---------- login ---------- */
.accesso{max-width:460px;margin:9vh auto 0;text-align:center}
.accesso h1{font-size:42px;color:var(--borgogna);margin-bottom:8px}
.accesso .sotto{color:var(--inchiostro-soft);font-style:italic;margin-bottom:28px;line-height:1.55}
.accesso input{width:100%;font-family:inherit;font-size:18px;padding:14px 16px;text-align:center;
background:var(--carta);border:1px solid var(--linea);border-radius:2px;color:inherit;margin-bottom:14px}
.accesso input:focus{outline:none;border-color:var(--oro)}
.avviso{background:rgba(109,26,45,.08);border:1px solid var(--borgogna);border-radius:2px;
padding:14px 17px;font-size:16px;line-height:1.55;margin-top:16px;text-align:left}
/* ---------- impressão ---------- */
@media print{
/* A4 EM PÉ, não deitado. A folha fecha em ~0,75 de proporção (largura/altura)
e o A4 vertical é 0,71 — cabe em uma página. Deitado (1,41) ela transbordava
para a segunda folha e o rodapé de navegação ficava órfão. */
@page{size:A4 portrait;margin:9mm}
.top,.azioni,.back,.navlink,.btn,.stampaAvviso{display:none !important}
body{background:#fff;font-size:10pt;line-height:1.45}
#app{max-width:none;padding:0}
p,.card,.nota{max-width:none}
/* a folha É a página: uma por papel, e nada dela pode quebrar ao meio. */
.foglio{box-shadow:none;border:none;margin:0;page-break-inside:avoid;break-inside:avoid}
.f-box{box-shadow:none;background:#fff}
.f-titolo{padding:12px 20px 8px}
.f-titolo h1{font-size:27pt}
.f-corpo{gap:10px;padding:0 12px 10px}
/* o pergaminho de fundo sai: senão o aluno gasta tinta com o #f4e9d4 */
.foglio{background:#fff}
}
@media(max-width:720px){
body{font-size:18px;line-height:1.7}
#app{padding:14px 13px 70px}
/* a folha empilha: o A4 apaisado não cabe em 375px de largura */
.f-corpo{grid-template-columns:1fr;gap:12px}
.f-titolo{padding:16px 15px 10px}
.f-titolo h1{font-size:29px}
.f-testa{font-size:10.5px;letter-spacing:.1em;gap:7px;padding:7px 11px}
.f-testa .marca{display:none}
.f-piede{grid-template-columns:repeat(2,1fr)}
.f-piede .seg{border-bottom:1px solid rgba(244,233,212,.16)}
.testata h1{font-size:29px}
.card{padding:17px 18px}
.capitolare{font-size:56px}
.fcard .grande{font-size:28px}
}
/* quem pediu menos movimento no sistema não leva transform nem transição */
@media(prefers-reduced-motion:reduce){
*{transition:none !important}
.prod:hover,.seg:hover{transform:none}
}
/* ícones dos ramos — SVG inline (app.js › ICONE), sem PNG e sem geração.
No pergaminho vale o ouro escuro; dentro do nó central, que tem fundo
colorido, vale o pergaminho. */
.ico{flex:0 0 auto;display:block}
.f-agenda .ico{color:var(--oro-scuro)}