/* ══════════════════════════════════════════════════════════════════════
   «LÁPIS DE COR» — a folha de estilo comum do sítio da Biblioteca Escolar
   Agrupamento de Escolas Gomes Monteiro · Boticas · outubro de 2026

   Cada página continua a ter o seu estilo dentro dela, como sempre teve.
   Esta folha entra DEPOIS desse estilo e muda só o que é comum a todas:
   as cores, a letra, o cabeçalho, as faixas de título com fotografia e o
   modo escuro. Se faltar (ou se for preciso desfazer tudo de uma vez), as
   páginas voltam a ter o aspecto antigo — nada deixa de funcionar.

   As cores não foram escolhidas a olho: cada uma tem quatro forças,
   calculadas para que toda a letra do sítio passe o contraste mínimo
   (4,5:1 no texto normal, 3:1 no texto grande). Antes de mudar uma cor,
   veja a regra que ela segue na secção 2.
   ══════════════════════════════════════════════════════════════════════ */


/* ——— 1. A letra, servida daqui e não da Google ———
   Títulos: Source Serif 4. Texto, menus e botões: Atkinson Hyperlegible
   Next, do Braille Institute, feita para se ler bem — o I, o l e o 1 nunca
   se confundem. As duas são livres (licença OFL). Cada letra vem em dois
   ficheiros: o «latin» chega para o português; o «latin-ext» só é
   descarregado se a página tiver um č, um ł, um ő… */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(../fontes/source-serif-4-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(../fontes/source-serif-4-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;
  src:url(../fontes/source-serif-4-latin-wght-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;
  src:url(../fontes/source-serif-4-latin-ext-wght-italic.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fontes/atkinson-hyperlegible-next-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fontes/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:italic;font-weight:200 800;font-display:swap;
  src:url(../fontes/atkinson-hyperlegible-next-latin-wght-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:italic;font-weight:200 800;font-display:swap;
  src:url(../fontes/atkinson-hyperlegible-next-latin-ext-wght-italic.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}


/* ——— 2. A paleta ———
   Base: papel (fundo), tinta (letra), tinta-2 (letra secundária).
   Sete cores, uma por área do sítio, cada uma em quatro forças:
     forte — fundo com letra branca por cima (≥ 6,2:1), ou letra sobre branco
     vivo  — botões, pastilhas, traços; nunca é letra
     tinte — o véu por cima das fotografias, com letra tinta (≥ 10,5:1)
     claro — fundo de secção (≥ 14:1 com a tinta)
   A giesta (amarelo) é a cor da acção: botões e pastilhas, SEMPRE com letra
   tinta. Nunca é letra — sobre branco não passa de 1,4:1.
   As áreas: céu — a biblioteca e a marca · giesta — comunidade ·
   laranja — catálogo e coleção · urze — biblioteca digital ·
   água — recursos · lameiro — projetos · cereja — notícias e agenda. */
:root{
  --l-tinta:#17213d; --l-tinta-2:#46526c; --l-papel:#fffdf7;
  --veu-ceu:179 214 251; --traco-ceu:#0063ac; --linha-ceu:#43a4ff; --fundo-ceu:#e9f2fd;
  --veu-giesta:236 209 109; --traco-giesta:#17213d; --linha-giesta:#fad320; --fundo-giesta:#fdf2c7;
  --veu-laranja:249 200 171; --traco-laranja:#9b4a00; --linha-laranja:#fb7c00; --fundo-laranja:#fdeee5;
  --veu-urze:217 204 251; --traco-urze:#7842c5; --linha-urze:#b28aff; --fundo-urze:#f2effd;
  --veu-agua:150 223 232; --traco-agua:#006b74; --linha-agua:#00b0be; --fundo-agua:#d6f9fd;
  --veu-lameiro:151 231 168; --traco-lameiro:#007031; --linha-lameiro:#00b855; --fundo-lameiro:#d6fddd;
  --veu-cereja:249 199 192; --traco-cereja:#c0161c; --linha-cereja:#ff7569; --fundo-cereja:#fdedeb;
  --forte-ceu:#0063ac; --forte-lameiro:#007031; --forte-cereja:#c0161c; --forte-urze:#7842c5;
  --acao:#fad320; --foco:#0063ac; --tira:#0063ac; --sobre-tira-2:#e6f0fb; --sobre-urze:#f1ebff;
  /* as variáveis que as páginas já usavam, com as cores novas */
  --fundo:var(--l-papel); --prata:var(--l-papel); --cartao:#fff; --linha:#e7e3d9; --grelha:#eeeae0;
  --texto:var(--l-tinta); --suave:var(--l-tinta-2);
  --cinza-900:var(--l-tinta); --cinza-600:var(--l-tinta-2); --cinza-400:#5f6680; --cinza-200:#d6d9e3;
  --laranja:var(--forte-ceu); --laranja-forte:var(--forte-ceu); --laranja-medio:var(--forte-ceu);
  --laranja-100:#b3d6fb; --laranja-050:#e9f2fd;
  --azul:var(--forte-ceu); --azul-fundo:var(--forte-ceu); --azul-100:#b3d6fb; --azul-050:#e9f2fd;
  --ouro:#fad320; --ouro-050:#fdf2c7;
  --verde:#007031; --verde-050:#d6fddd; --vermelho:#c0161c; --vermelho-050:#fdedeb;
  --centeio:#fdf2c7; --faixa:#fdf2c7;
  --escuro:var(--tira); --escuro-linha:rgba(255,255,255,.3); --escuro-texto:#fff; --escuro-suave:var(--sobre-tira-2);
  --raio:6px; --raio-s:4px;
  --sans:"Atkinson Hyperlegible Next","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
}
/* o modo escuro: segue o que o telemóvel ou o computador de quem lê tiver escolhido */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --veu-ceu:5 56 99; --traco-ceu:#89c3ff; --linha-ceu:#89c3ff; --fundo-ceu:#0e2235;
    --veu-giesta:66 54 0; --traco-giesta:#f4ce23; --linha-giesta:#f4ce23; --fundo-giesta:#272004;
    --veu-laranja:88 39 0; --traco-laranja:#ffa56d; --linha-laranja:#ffa56d; --fundo-laranja:#311a0b;
    --veu-urze:61 42 94; --traco-urze:#c7adff; --linha-urze:#c7adff; --fundo-urze:#231b33;
    --veu-agua:0 63 69; --traco-agua:#00d6e7; --linha-agua:#00d6e7; --fundo-agua:#00262a;
    --veu-lameiro:3 67 27; --traco-lameiro:#66da85; --linha-lameiro:#66da85; --fundo-lameiro:#0f2615;
    --veu-cereja:93 32 28; --traco-cereja:#ffa196; --linha-cereja:#ffa196; --fundo-cereja:#331714;
    --forte-ceu:#053863; --forte-lameiro:#03431b; --forte-cereja:#5d201c; --forte-urze:#3d2a5e;
    --foco:#89c3ff; --tira:#003768; --sobre-tira-2:#d6e4f5; --sobre-urze:#e9e1ff;
    --fundo:#0c1221; --prata:#0c1221; --cartao:#151d2e; --linha:#2e364a; --grelha:#1d2638;
    --texto:#edf0f7; --suave:#bbc3d4;
    --cinza-900:#edf0f7; --cinza-600:#bbc3d4; --cinza-400:#9ca5b8; --cinza-200:#39425a;
    --laranja:#89c3ff; --laranja-forte:#89c3ff; --laranja-medio:var(--forte-ceu); --laranja-100:#053863; --laranja-050:#0e2235;
    --azul:#89c3ff; --azul-fundo:var(--forte-ceu); --azul-100:#053863; --azul-050:#0e2235;
    --ouro:#fad320; --ouro-050:#272004;
    --verde:#66da85; --verde-050:#0f2615; --vermelho:#ffa196; --vermelho-050:#331714;
    --centeio:#272004; --faixa:#272004;
    --escuro:var(--tira); --escuro-linha:rgba(255,255,255,.2); --escuro-texto:#fff; --escuro-suave:var(--sobre-tira-2);
    --sombra:0 1px 2px rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.4);
    --sombra-f:0 2px 6px rgba(0,0,0,.5),0 14px 38px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --veu-ceu:5 56 99; --traco-ceu:#89c3ff; --linha-ceu:#89c3ff; --fundo-ceu:#0e2235;
  --veu-giesta:66 54 0; --traco-giesta:#f4ce23; --linha-giesta:#f4ce23; --fundo-giesta:#272004;
  --veu-laranja:88 39 0; --traco-laranja:#ffa56d; --linha-laranja:#ffa56d; --fundo-laranja:#311a0b;
  --veu-urze:61 42 94; --traco-urze:#c7adff; --linha-urze:#c7adff; --fundo-urze:#231b33;
  --veu-agua:0 63 69; --traco-agua:#00d6e7; --linha-agua:#00d6e7; --fundo-agua:#00262a;
  --veu-lameiro:3 67 27; --traco-lameiro:#66da85; --linha-lameiro:#66da85; --fundo-lameiro:#0f2615;
  --veu-cereja:93 32 28; --traco-cereja:#ffa196; --linha-cereja:#ffa196; --fundo-cereja:#331714;
  --forte-ceu:#053863; --forte-lameiro:#03431b; --forte-cereja:#5d201c; --forte-urze:#3d2a5e;
  --foco:#89c3ff; --tira:#003768; --sobre-tira-2:#d6e4f5; --sobre-urze:#e9e1ff;
  --fundo:#0c1221; --prata:#0c1221; --cartao:#151d2e; --linha:#2e364a; --grelha:#1d2638;
  --texto:#edf0f7; --suave:#bbc3d4;
  --cinza-900:#edf0f7; --cinza-600:#bbc3d4; --cinza-400:#9ca5b8; --cinza-200:#39425a;
  --laranja:#89c3ff; --laranja-forte:#89c3ff; --laranja-medio:var(--forte-ceu); --laranja-100:#053863; --laranja-050:#0e2235;
  --azul:#89c3ff; --azul-fundo:var(--forte-ceu); --azul-100:#053863; --azul-050:#0e2235;
  --ouro:#fad320; --ouro-050:#272004;
  --verde:#66da85; --verde-050:#0f2615; --vermelho:#ffa196; --vermelho-050:#331714;
  --centeio:#272004; --faixa:#272004;
  --escuro:var(--tira); --escuro-linha:rgba(255,255,255,.2); --escuro-texto:#fff; --escuro-suave:var(--sobre-tira-2);
  --sombra:0 1px 2px rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.4);
  --sombra-f:0 2px 6px rgba(0,0,0,.5),0 14px 38px rgba(0,0,0,.55);
}


/* ——— 3. O que se usa em todo o lado ——— */
body{font-family:var(--sans)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500}
.olho{font-size:13px;letter-spacing:.12em}
.btn{border-radius:var(--raio-s)}
/* o contorno de foco tem de se ver em qualquer fundo (3:1, pelo menos) */
:focus-visible{outline-color:var(--foco)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--foco);outline-offset:2px}
.servico :focus-visible,footer.pe :focus-visible,.pe :focus-visible,.digital :focus-visible{outline-color:#fff}

/* a acção: tudo o que era laranja com letra escura passa a amarelo-giesta
   com letra tinta (o «html» à frente ganha às regras que algumas páginas
   escrevem depois desta folha, como as das notícias) */
html .btn--cheio,html .saltar,html .filtro[aria-pressed="true"],html .txt-btn[aria-pressed="true"],
html .po-mini[aria-pressed="true"],html .po-chip[aria-pressed="true"],html .po-tocar,html .po-cartao .bolha,
html .f[aria-pressed="true"],html .pg[aria-current="page"],html .barra-abrir .quantos,
html .barra-abrir[aria-expanded="true"],html .ficha .escrever:hover,html .ficha .fechar:hover,
html .ver-livros,html .mt-cat,html .com-enviar,html .ib--desc,html .ib[aria-pressed="true"],
html .seta:hover,html .painel a.b--cheio,html .filtros a[aria-current],html .ag-hoje .ag-dia,
html .aj-bt,html .aj-aba[aria-selected="true"],html .aj-enviar{
  background:var(--acao);border-color:var(--acao);color:var(--l-tinta);box-shadow:none}
html .ag-hoje .ag-dia *{color:var(--l-tinta)}
/* fundos de cor com letra branca: ficam escuros nos dois modos */
html .filtro--ciclo[aria-pressed="true"],html .f--ciclo[aria-pressed="true"],html .destaque .selo,html .e--novo{
  background:var(--forte-ceu);border-color:var(--forte-ceu);color:#fff}
html .f--nov[aria-pressed="true"],html .lf-selo .anos span.agora{
  background:var(--forte-lameiro);border-color:var(--forte-lameiro);color:#fff}
html .f--pnl[aria-pressed="true"],html .chip button:hover{
  background:var(--forte-cereja);border-color:var(--forte-cereja);color:#fff}


/* ——— 4. A tira de cima e o cabeçalho ———
   A tira azul-céu com o telefone e o tamanho da letra; por baixo, o
   cabeçalho branco, igual em todas as páginas (o das Notícias e o do
   Patrono eram escuros, e passam a ser como os outros). */
.servico{background:var(--tira);color:var(--sobre-tira-2);border-bottom:0;
  --escuro-texto:#fff;--escuro-suave:var(--sobre-tira-2);--escuro-linha:rgba(255,255,255,.4)}
.servico a{color:#fff}
html .topo{background:color-mix(in srgb,var(--cartao) 96%,transparent);color:var(--texto);
  backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--linha)}
html .topo .marca :is(b,strong){color:var(--texto);font-family:var(--serif);font-weight:600}
html .topo .marca span span,html .topo .marca > span > span{color:var(--suave)}
html .topo nav.menu > ul > li > a,html .topo .abre-sub{color:var(--texto);background:none}
html .topo nav.menu > ul > li > a:hover{background:var(--fundo-ceu);color:var(--traco-ceu)}
html .topo nav.menu a[aria-current],html .topo nav.menu .tem-sub.contem > a{color:var(--traco-ceu);background:none}
html .topo nav.menu ul.sub{background:var(--cartao);border-color:var(--linha)}
html .topo nav.menu ul.sub a{color:var(--texto)}
html .topo nav.menu ul.sub a:hover,html .topo nav.menu ul.sub a[aria-current]{background:var(--fundo-ceu);color:var(--traco-ceu)}
html .topo .hamb{color:var(--texto);border-color:var(--linha);background:none}
html .topo .btn--linha{color:var(--texto);border-color:var(--linha)}


/* ——— 5. A área de cada página ———
   Cada página diz no <body data-area="…"> a que área pertence; daí vêm a
   cor do véu, do traço por cima do título e da linha por baixo da faixa. */
[data-area]{--area-veu:var(--veu-ceu);--area-traco:var(--traco-ceu);--area-linha:var(--linha-ceu);--area-fundo:var(--fundo-ceu)}
[data-area="giesta"]{--area-veu:var(--veu-giesta);--area-traco:var(--traco-giesta);--area-linha:var(--linha-giesta);--area-fundo:var(--fundo-giesta)}
[data-area="laranja"]{--area-veu:var(--veu-laranja);--area-traco:var(--traco-laranja);--area-linha:var(--linha-laranja);--area-fundo:var(--fundo-laranja)}
[data-area="urze"]{--area-veu:var(--veu-urze);--area-traco:var(--traco-urze);--area-linha:var(--linha-urze);--area-fundo:var(--fundo-urze)}
[data-area="agua"]{--area-veu:var(--veu-agua);--area-traco:var(--traco-agua);--area-linha:var(--linha-agua);--area-fundo:var(--fundo-agua)}
[data-area="lameiro"]{--area-veu:var(--veu-lameiro);--area-traco:var(--traco-lameiro);--area-linha:var(--linha-lameiro);--area-fundo:var(--fundo-lameiro)}
[data-area="cereja"]{--area-veu:var(--veu-cereja);--area-traco:var(--traco-cereja);--area-linha:var(--linha-cereja);--area-fundo:var(--fundo-cereja)}


/* ——— 6. As faixas de título com fotografia ———
   A fotografia vê-se à direita; à esquerda, por trás do texto, um véu na
   cor da área (claro no modo claro, escuro no escuro), forte o bastante
   para a letra passar o contraste com QUALQUER fotografia que lá se ponha.
   No telemóvel a fotografia fica numa faixa por cima e o texto por baixo,
   em fundo liso: num ecrã estreito nenhum véu segura a letra pequena. */
.ag-abre,.aj-abre,.cl-abre,.ar-abre,.es-abre,.hi-abre,section.abre,.po-abre,.rc-abre,.sg-abre,html .chapeu,.lf-abre,html .cabeca{
  position:relative;isolation:isolate;color:var(--texto);
  --escuro-texto:var(--texto);--escuro-suave:var(--texto);--suave:var(--texto);--escuro-linha:var(--linha);
  --cinza-400:var(--texto);--cinza-600:var(--texto);
  --veu:linear-gradient(90deg,rgb(var(--area-veu) / .95) 0%,rgb(var(--area-veu) / .9) 58%,rgb(var(--area-veu) / .26) 100%);
  background-color:rgb(var(--area-veu));background-image:var(--veu);
  background-size:cover;background-position:50% 50%;background-repeat:no-repeat;
  border-bottom:4px solid var(--area-linha)}
.ag-abre,.aj-abre,.cl-abre,.ar-abre,.es-abre,.hi-abre,section.abre,.po-abre,.rc-abre,.sg-abre,html .chapeu{
  padding-block:3.4rem 3.1rem}
:is(.ag-abre,.aj-abre,.cl-abre,.ar-abre,.es-abre,.hi-abre,section.abre,.po-abre,.rc-abre,.sg-abre,.chapeu,.lf-abre,.cabeca) :is(h1,h2,h3,h4,p,b,strong,blockquote,cite,small,label,li,dt,dd,figcaption,.datas,.lead){color:var(--texto)}
/* o título fica do lado do véu forte; com fotografia, nunca chega à parte onde ela se vê */
:is(.ag-abre,.aj-abre,.cl-abre,.ar-abre,.es-abre,.hi-abre,section.abre,.po-abre,.rc-abre,.sg-abre,.chapeu,.cabeca) h1{max-width:14em}
:is(.ag-abre,.aj-abre,.cl-abre,.ar-abre,.es-abre,.hi-abre,section.abre,.po-abre,.rc-abre,.sg-abre,.chapeu,.lf-abre,.cabeca) .olho{color:var(--texto)}
:is(.ag-abre,.aj-abre,.cl-abre,.ar-abre,.es-abre,.hi-abre,section.abre,.po-abre,.rc-abre,.sg-abre,.chapeu,.lf-abre,.cabeca) .olho::before{
  content:"";display:block;width:30px;height:4px;border-radius:2px;background:var(--area-traco);margin:0 0 .55rem}
/* as ligações no meio do texto (as pastilhas e os botões ficam com o estilo deles) */
:is(.ag-abre,.aj-abre,.cl-abre,.ar-abre,.es-abre,.hi-abre,section.abre,.po-abre,.rc-abre,.sg-abre,.chapeu,.lf-abre,.cabeca) :is(p,li) a:not(.btn){
  color:var(--texto);text-decoration:underline;text-underline-offset:3px}
:is(.cabeca) h1 em{color:var(--area-traco)}
section.abre .retrato{border-color:var(--linha)}
.cabeca::before{background:var(--veu)}
.cabeca::after{display:none}
.cabeca .busca input{background:var(--cartao);color:var(--texto);border-color:var(--cinza-400)}
.cabeca .busca input::placeholder{color:var(--suave)}
/* o que estava escrito a branco para um cabeçalho escuro */
html .cabeca .nas-sinopses{color:var(--texto)}
html .cabeca .nas-sinopses:hover{color:var(--area-traco)}
html .cabeca .livre{background:var(--cartao);border-color:var(--linha-lameiro);color:var(--traco-lameiro)}

/* as fotografias, uma por página (ficheiros em img/cabecalhos/) */
.ag-abre{background-image:var(--veu),url(../img/cabecalhos/agenda.webp)}
.aj-abre{background-image:var(--veu),url(../img/cabecalhos/ajuda.webp)}
.cl-abre{background-image:var(--veu),url(../img/cabecalhos/clube.webp)}
.ar-abre{background-image:var(--veu),url(../img/cabecalhos/escritores.webp)}
.es-abre{background-image:var(--veu),url(../img/cabecalhos/estatisticas.webp)}
.hi-abre{background-image:var(--veu),url(../img/cabecalhos/historia.webp)}
section.abre{background-image:var(--veu),url(../img/cabecalhos/patrono.webp)}
.po-abre{background-image:var(--veu),url(../img/cabecalhos/poemas.webp)}
.rc-abre{background-image:var(--veu),url(../img/cabecalhos/recursos.webp)}
.sg-abre{background-image:var(--veu),url(../img/cabecalhos/sugestoes.webp)}
html .chapeu{background-image:var(--veu),url(../img/cabecalhos/noticias.webp)}
/* os projetos e a Biblioteca Digital ficam sem paisagem: faixa lisa na cor da área */
.lf-abre{background-image:none;background-color:var(--area-fundo)}

/* o crédito da fotografia, em cima à direita */
.credito{position:absolute;right:12px;top:10px;z-index:3;margin:0;max-width:calc(100% - 24px);
  font:500 12px/1.25 var(--sans);color:#fff !important;background:rgba(18,26,40,.78);padding:3px 8px;border-radius:3px}
.credito a{color:#fff !important;text-decoration:none !important}
.credito a:hover{text-decoration:underline !important}


/* ——— 7. A página inicial ——— */
.abertura{background:var(--fundo-ceu);color:var(--texto);
  --escuro-texto:var(--texto);--escuro-suave:var(--suave);--escuro-linha:var(--linha)}
.abertura .fundo{filter:none;transform:none;object-position:50% 45%}
.abertura::after{background:linear-gradient(90deg,rgb(var(--veu-ceu) / .95) 0%,rgb(var(--veu-ceu) / .9) 46%,
  rgb(var(--veu-ceu) / .36) 66%,rgb(var(--veu-ceu) / .06) 100%)}
.abertura::before{display:none}
.abertura h1{color:var(--texto);font-size:clamp(2rem,4.6vw,44px);font-weight:500}
.abertura .olho--claro{color:var(--texto)}
.abertura .olho--claro::before{content:"";display:block;width:30px;height:4px;border-radius:2px;background:var(--traco-ceu);margin:0 0 .55rem}
.abertura .estado{background:color-mix(in srgb,var(--cartao) 75%,transparent);border-color:var(--linha);color:var(--texto)}
.abertura .btn--fantasma{border-color:var(--texto);color:var(--texto)}
.montra-quadro{transform:none}
.montra{--escuro-texto:#fff;--escuro-suave:var(--sobre-tira-2)}
.montra-quadro,.mt-texto{background:var(--forte-ceu)}
.mt-foto::after{background:linear-gradient(transparent,var(--forte-ceu) 88%)}
html .mt-data,html .mt-resumo{color:var(--sobre-tira-2)}
html .mt-ler,html a.mt-cartao:hover .mt-ler{color:#fff;text-decoration:underline;text-underline-offset:3px}
html .mt-progresso i{background:var(--acao)}
html .mt-pausa{color:var(--texto);background:var(--cartao);border-color:var(--linha)}
html .mt-pausa:hover{color:var(--texto);border-color:var(--traco-ceu)}
html .mt-ponto::before{border-color:var(--suave)}
html .mt-ponto:hover::before,html .mt-ponto[aria-current="true"]::before{background:var(--traco-ceu);border-color:var(--traco-ceu)}
/* a janela do Nobel (até 15 de outubro): o «olho» era amarelo sobre branco */
html .jn-olho{color:var(--traco-ceu)}
/* os atalhos e as oito áreas levam a cor da área para onde vão */
.atalhos li:nth-child(1) a{border-top:5px solid var(--linha-laranja)}
.atalhos li:nth-child(2) a{border-top:5px solid var(--linha-urze)}
.atalhos li:nth-child(3) a{border-top:5px solid var(--linha-agua)}
.atalhos li:nth-child(4) a{border-top:5px solid var(--linha-giesta)}
.grelha-sec .sec{border-top:5px solid var(--sec-cor,var(--linha-ceu))}
.grelha-sec .sec:nth-child(1),.grelha-sec .sec:nth-child(8){--sec-cor:var(--linha-ceu)}
.grelha-sec .sec:nth-child(2){--sec-cor:var(--linha-laranja)}
.grelha-sec .sec:nth-child(3){--sec-cor:var(--linha-urze)}
.grelha-sec .sec:nth-child(4){--sec-cor:var(--linha-agua)}
.grelha-sec .sec:nth-child(5){--sec-cor:var(--linha-lameiro)}
.grelha-sec .sec:nth-child(6){--sec-cor:var(--linha-cereja)}
.grelha-sec .sec:nth-child(7){--sec-cor:var(--linha-giesta)}
.grelha-sec .sec::before{background:var(--sec-cor)}
/* a Biblioteca Digital na cor dela; o espaço em amarelo; os projetos em verde */
.digital{background:var(--forte-urze);--escuro-texto:#fff;--escuro-suave:var(--sobre-urze);--escuro-linha:rgba(255,255,255,.32)}
.digital .olho--claro{color:#fff}
#espaco{background:var(--fundo-giesta)}
#projetos{background:var(--fundo-lameiro)}
/* letra escura escrita à mão sobre fundos que no modo escuro ficam escuros */
html .nota--ouro,html .pt--a{color:var(--texto)}
html .aj-recado--bom{color:var(--traco-lameiro)}
/* a janela do Nobel: o botão azul ficava azul-claro com letra branca no modo escuro */
html .jn-bt--cheio{background:var(--forte-ceu);border-color:var(--forte-ceu);color:#fff}
html .jn-bt--cheio:hover,html .jn-bt--cheio:focus-visible{background:var(--l-tinta);border-color:var(--l-tinta);color:#fff}
/* a agenda: o «até» dos acontecimentos de vários dias estava esbatido */
html .ag-dia .ate{opacity:1}
/* «Hoje na história»: os pontos entre as ligações estavam quase apagados */
html .hi-arts span{opacity:.8}
/* os projetos e os recursos têm cores próprias; quando são letra, misturam-se com
   a cor do texto para passarem o contraste nos dois modos (a cor continua a ver-se) */
html .etapa .quem,html .etapa .todos a{color:color-mix(in srgb,var(--c) 60%,var(--texto))}
html .mv-conta,html .fase .q,html .res-c h3,html .fase.seguinte :is(b,strong)::after{color:color-mix(in srgb,var(--mv-azul) 60%,var(--texto))}
html .fase.agora :is(b,strong)::after{color:color-mix(in srgb,var(--mv-verm) 60%,var(--texto))}
html .res-c li:first-child i{color:color-mix(in srgb,var(--mv-amar) 50%,var(--texto))}
/* o cartão do secundário estava esbatido (opacidade .75) e a letra não passava:
   fica inteiro, com a borda tracejada a dizer que é «de fora» */
html .res-c.fora{opacity:1;border-style:dashed}
html .destaque .texto .olho{color:var(--traco-cereja)}
html .como .num{color:var(--area-traco)}
/* o «olho» claro é para fundos escuros: sobre o azul fica azul-claro, não laranja */
html .olho--claro{color:var(--sobre-tira-2)}
/* o rodapé fecha com o mesmo azul da tira de cima */
footer.pe,html .pe{background:var(--tira);--escuro-texto:#fff;--escuro-suave:var(--sobre-tira-2);--escuro-linha:rgba(255,255,255,.28)}


/* ——— 7b. O leitor de livros (digital/leitor.html) ———
   É uma aplicação com as cores dela: barras escuras e o papel do livro.
   Fica com a letra nova e com o amarelo da acção; as barras não mudam. */
[data-pagina="leitor"]{--laranja:var(--acao);--laranja-forte:var(--acao);--laranja-medio:var(--forte-ceu);--foco:var(--acao)}
html [data-pagina="leitor"] .topo{background:var(--ui);color:var(--ui-texto);border-bottom:1px solid var(--ui-linha);
  backdrop-filter:none;-webkit-backdrop-filter:none}
html [data-pagina="leitor"] .pe{background:var(--ui);border-top:1px solid var(--ui-linha)}
[data-pagina="leitor"] .num{color:color-mix(in srgb,var(--tinta) 72%,transparent)}
[data-pagina="leitor"] .seta{background:rgba(10,20,28,.74)}


/* ——— 8. No telemóvel ——— */
@media (max-width:760px){
  .abertura{background:var(--fundo-ceu)}
  .abertura .fundo{position:relative;inset:auto;display:block;width:100%;height:210px;z-index:0;object-position:50% 50%}
  .abertura::after{inset:0 0 auto;height:210px;background:linear-gradient(180deg,rgb(var(--veu-ceu) / 0) 60%,rgb(var(--veu-ceu) / .35) 100%)}
  .abertura .credito{top:182px}
  .ag-abre,.aj-abre,.cl-abre,.ar-abre,.es-abre,.hi-abre,section.abre,.po-abre,.rc-abre,.sg-abre,html .chapeu{
    background-image:none;padding-block:0 1.8rem}
  :is(.ag-abre,.aj-abre,.cl-abre,.ar-abre,.es-abre,.hi-abre,section.abre,.po-abre,.rc-abre,.sg-abre,.chapeu)::before{
    content:"";display:block;height:160px;margin-bottom:1.3rem;background-size:cover;background-position:50% 50%}
  :is(.ag-abre,.aj-abre,.cl-abre,.ar-abre,.es-abre,.hi-abre,section.abre,.po-abre,.rc-abre,.sg-abre,.chapeu) .credito{top:128px}
  .ag-abre::before{background-image:url(../img/cabecalhos/agenda-800.webp)}
  .aj-abre::before{background-image:url(../img/cabecalhos/ajuda-800.webp)}
  .cl-abre::before{background-image:url(../img/cabecalhos/clube-800.webp)}
  .ar-abre::before{background-image:url(../img/cabecalhos/escritores-800.webp)}
  .es-abre::before{background-image:url(../img/cabecalhos/estatisticas-800.webp)}
  .hi-abre::before{background-image:url(../img/cabecalhos/historia-800.webp)}
  section.abre::before{background-image:url(../img/cabecalhos/patrono-800.webp)}
  .po-abre::before{background-image:url(../img/cabecalhos/poemas-800.webp)}
  .rc-abre::before{background-image:url(../img/cabecalhos/recursos-800.webp)}
  .sg-abre::before{background-image:url(../img/cabecalhos/sugestoes-800.webp)}
  html .chapeu::before{background-image:url(../img/cabecalhos/noticias-800.webp)}
  /* as do Catálogo e das Apreciações: a fotografia da biblioteca numa faixa por cima */
  .cabeca .fundo{position:relative;inset:auto;display:block;height:160px;z-index:0}
  .cabeca::before{display:none}
}