/* ---------------------------------------------------------------- tokens */
/* PRETO, BRANCO E MARROM. Ate 26/10/2026 a marca era azul e amarela, a mesma
   paleta do Radar de Ofertas, e o padrao era o tema azul. O Bruno pediu a
   troca: o site abre CLARO - papel branco, letra preta, detalhe em marrom -
   e quem preferir troca no botao do topo para o ESCURO - fundo preto, letra
   branca, detalhe em bronze. A escolha fica guardada naquele aparelho.

   SAO DOIS TEMAS, E ELES USAM OS MESMOS NOMES. Os nomes "--ouro" ficaram por
   historia: hoje o "ouro" e o marrom. Trocar o nome em centenas de regras so
   arriscaria quebrar alguma.

   O marrom continua sendo DETALHE: filete, capitular, selo, linha sob o
   titulo, aba escolhida. Nunca fundo de bloco de texto. Os cinzas de apoio
   sao NEUTROS.

   Contraste medido (WCAG; AA pede 4,5:1 no texto e 3:1 em filete e icone):
       claro   marrom #8B5A2B sobre o branco 5,8:1, branco sobre ele 5,8:1
               marrom-texto #7A4A1F sobre o branco 7,4:1, sobre o cartao 6,5:1
       escuro  bronze #C99A5E sobre o preto 8,3:1, preto sobre ele 8,3:1
               bronze-texto #D6A86E sobre o preto 9,7:1, sobre o cartao 8,4:1
               letra #ECECEC sobre o preto 17,8:1 - o branco puro ofusca
               numa leitura longa, entao a letra e um branco um tom abaixo */

/* ---- tema CLARO: o PADRAO ---- */
:root{
  --papel:      #FFFFFF;   /* fundo da pagina: branco, sem meio-tom */
  --papel-fundo:#F6F6F6;   /* faixas e fundos de apoio, cinza NEUTRO */
  --superficie: #F0F0F0;   /* cartoes: um tom abaixo do fundo */
  --ouro:       #8B5A2B;   /* o marrom de marca, cheio */
  --ouro-fundo: rgba(139,90,43,.12);
  --ouro-tinta: #7A4A1F;   /* marrom para TEXTO sobre o claro */
  --sobre-ouro: #FFFFFF;   /* texto sobre o marrom cheio */
  /* E sobre o marrom RALO - o selo de Beato. Precisa de token proprio
     porque o fundo ralo e claro no tema claro e escuro no tema escuro: a
     mesma cor de letra nao serve nos dois. */
  --sobre-ouro-ralo: #000000;

  --preto:      rgba(0,0,0,.22);
  --tinta:      #000000;   /* a letra: preta sobre o branco   21,0:1 */
  --tinta-media:#333333;   /* subtitulo, ficha                12,6:1 */
  --tinta-fraca:#5E5E5E;   /* legenda, data, aviso             6,5:1 */
  --linha:      rgba(0,0,0,.13);

  --martir:     #A31212;

  /* A letra de leitura e a Literata - ver a nota em body, logo abaixo */
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", system-ui, -apple-system, sans-serif;

  --col: 68rem;
  --texto: 36rem;   /* medida de leitura: ~65 caracteres na Literata */

  /* o leitor manda no tamanho da letra; o A- / A+ mexe so aqui */
  --escala: 1;
  color-scheme: light;
}

/* ---- tema ESCURO: so para quem escolher ---- */
/* No escuro o que estrutura e a luz, entao "--preto" passa a ser um branco
   rebaixado - o nome ficou, o papel mudou. */
:root[data-tema="escuro"]{
  --papel:      #000000;
  --papel-fundo:#121212;
  --superficie: #161616;
  --ouro:       #C99A5E;   /* bronze */
  --ouro-fundo: rgba(201,154,94,.18);
  --ouro-tinta: #D6A86E;
  --sobre-ouro: #000000;
  --sobre-ouro-ralo: #D6A86E;
  --preto:      rgba(255,255,255,.26);
  --tinta:      #ECECEC;   /* 17,8:1 */
  --tinta-media:#BDBDBD;   /* 11,2:1 */
  --tinta-fraca:#9A9A9A;   /*  7,5:1 sobre o preto, 6,4:1 sobre o cartao */
  --linha:      rgba(255,255,255,.14);
  --martir:     #FF7B7B;
  color-scheme: dark;
}

*{box-sizing:border-box}
/* O tamanho de TUDO sai daqui. Como o site inteiro mede em rem, mexer nesta
   raiz move o texto, os espacos e os filetes juntos, sem desmontar o layout -
   e por isso o A- / A+ so precisa alterar --escala. Base 17px em vez dos 16
   de fabrica: a serifada do site pede um ponto a mais para ler no celular. */
html{-webkit-text-size-adjust:100%; font-size:calc(106.25% * var(--escala))}
/* A LETRA. Ate 26/10/2026 era a EB Garamond: bonita no papel, mas de olho
   pequeno (a altura do "x" e baixa) e traco fino, que na tela - sobretudo no
   celular e no tema escuro - some e cansa. A Literata foi desenhada para ler
   livro inteiro na tela (e a letra do Google Play Livros): olho grande, traco
   firme, serifa robusta e corte optico, que engrossa o desenho nos tamanhos
   pequenos. Com o olho maior, o corpo baixa de 19,5 para 18 px sem perder
   leitura, e a entrelinha 1,65 da folga para os acentos. Algarismos
   alinhados: referencia biblica com numero "dancando" atrapalha. */
body{
  margin:0; background:var(--papel); color:var(--tinta);
     -webkit-font-smoothing:antialiased;
  font-family:var(--serif); font-size:1.06rem; line-height:1.65;
  font-optical-sizing:auto;
}
img{max-width:100%; height:auto; display:block}
/* nada de rolagem lateral no celular: palavra comprida quebra, tabela rola
   dentro dela mesma, midia nunca passa da largura do pai */
h1,h2,h3,p,li,figcaption,.vn,.dt,.trilha{overflow-wrap:break-word}
table{display:block; max-width:100%; overflow-x:auto}
pre,code{overflow-wrap:break-word; white-space:pre-wrap}
a{color:inherit; text-decoration-color:var(--ouro); text-underline-offset:.18em}
a:hover{text-decoration-color:var(--preto)}
:focus-visible{outline:2px solid var(--preto); outline-offset:3px}

.env{max-width:var(--col); margin:0 auto; padding:0 1.25rem}
/* O respiro de cima e de baixo das paginas internas. Antes isto vinha num
   style="padding:2.5rem 0" no proprio <main>, e o atalho apagava a margem
   LATERAL do .env: no celular o texto encostava na borda da tela. */
.folha{padding-top:2.5rem; padding-bottom:2.5rem}

/* ------------------------------------------------------------- cabecalho */
/* O cabecalho GRUDA no topo. Numa biografia de tres telas, ou numa leitura
   longa da liturgia, trocar de secao nao pode obrigar a rolar tudo de volta.
   O fundo e opaco de proposito: sem ele o texto passa por baixo e vira sopa
   de letras. O z-index fica acima das abas da liturgia, que tambem grudam. */
.topo{position:sticky; top:0; z-index:20;
      border-bottom:1px solid var(--preto); background:var(--papel)}
/* --topo-alt e a altura do cabecalho, medida pelo JS. Ela MUDA: no celular o
   cabecalho quebra em duas linhas, e o A+/A- estica tudo. Quem precisa do
   numero e quem tambem gruda e o salto de ancora - que sem isto pararia com
   o titulo escondido atras do cabecalho. */
html{scroll-padding-top:calc(var(--topo-alt, 0px) + .6rem)}
.topo-i{display:flex; align-items:baseline; gap:2rem; flex-wrap:wrap;
        padding-top:1.1rem; padding-bottom:1.1rem}
/* o "Hoje" nao encosta na marca: o titulo do site precisa de ar a direita
   antes de comecar o menu */
.topo-i .marca{margin-right:1.6rem}
.marca{font-size:1.5rem; font-weight:600; letter-spacing:-.01em;
       text-decoration:none; white-space:nowrap}
.marca em{font-style:italic; color:var(--ouro-tinta)}
.menu{display:flex; gap:1.35rem; font-family:var(--sans); font-size:.85rem;
      flex-wrap:wrap}
/* So o menu DO CABECALHO se espalha pelo centro. flex:1 faz ele tomar o
   espaco livre depois da marca; o max-width impede que o ultimo botao va
   parar colado na borda direita; space-between distribui as cinco palavras
   com folga igual entre elas. As abas de dentro das paginas (Santos /
   Beatos / Veneraveis) tambem usam .menu e continuam juntinhas. */
.menu-faixa{display:contents}   /* no monitor ela nao existe: o <nav> e que
                                   e o item flex do cabecalho */
.topo-i .menu{flex:1 1 auto; max-width:42rem; justify-content:space-between;
              gap:1rem}
.menu a{text-decoration:none; color:var(--tinta-media); padding-bottom:.15rem;
        border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current]{color:var(--tinta); border-bottom-color:var(--ouro)}

/* --------------------------------------------- ajustes de leitura no topo */
/* Dois controles discretos: o tamanho da letra e o tema. Ficam no fim do
   cabecalho, do tamanho de um alvo de dedo, e a escolha de cada leitor fica
   guardada no aparelho dele. */
.ajustes{display:flex; align-items:center; gap:.5rem; margin-left:auto}
.letra-ctl{display:flex; border:1px solid var(--preto); border-radius:.4rem;
           overflow:hidden}
.letra-ctl button,.tema-btn{
  font-family:var(--sans); background:transparent; color:var(--tinta-media);
  border:0; cursor:pointer; line-height:1; padding:.5rem .6rem;
  min-width:2.4rem; min-height:2.4rem; font-size:.9rem}
.letra-ctl button+button{border-left:1px solid var(--preto)}
.letra-ctl button:hover,.tema-btn:hover{background:var(--ouro-fundo); color:var(--tinta)}
.letra-ctl button:disabled{opacity:.4; cursor:default; background:transparent}
.tema-btn{border:1px solid var(--preto); border-radius:.4rem}
/* o icone mostra o tema em que o site esta: lua no escuro, sol no claro */
.tema-btn svg{display:block; width:1.2rem; height:1.2rem; margin:0 auto;
              color:var(--ouro-tinta)}
.tema-btn .i-sol{display:none}
:root:not([data-tema="escuro"]) .tema-btn .i-sol{display:block}
:root:not([data-tema="escuro"]) .tema-btn .i-lua{display:none}

/* -------------------------------------------------- a liturgia do dia */
.secao-liturgia{border-top:3px solid var(--ouro)}
.lit-dia{font-family:var(--sans); font-size:.82rem; color:var(--tinta-fraca);
         margin:-.4rem 0 1.1rem}
.liturgia{list-style:none; margin:0; padding:0; max-width:var(--texto)}
.liturgia li{display:flex; gap:1rem; align-items:baseline; padding:.7rem 0;
             border-top:1px solid var(--linha)}
.liturgia li:first-child{border-top:0}
.lit-rot{flex:0 0 5.5rem; font-family:var(--sans); font-size:.72rem;
         text-transform:uppercase; letter-spacing:.08em; color:var(--tinta-fraca)}
.lit-ref{font-family:var(--serif); font-size:1.08rem; line-height:1.35}
.lit-ref b{color:var(--ouro-tinta); font-weight:600; white-space:nowrap}
/* --------------------------------------------------- as abas da liturgia */
/* Sem JavaScript as abas somem e as leituras aparecem todas, uma abaixo da
   outra - o conteudo nunca fica preso atras de um botao que nao funciona.
   Por isso as abas so aparecem quando o JS marca .com-js na raiz. */
.lit-abas{display:none}
/* As abas GRUDAM no topo quando a pessoa desce lendo: numa leitura longa,
   trocar de leitura nao pode obrigar a voltar la em cima. O fundo e opaco
   de proposito - senao o texto passa por baixo e vira sopa de letras. */
.com-js .lit-abas{display:flex; flex-wrap:wrap; gap:.4rem;
                  position:sticky; top:var(--topo-alt, 0px); z-index:5;
                  margin:0 0 1.4rem; padding:.7rem 0 .6rem;
                  background:var(--papel);
                  box-shadow:0 .55rem .5rem -.5rem rgba(0,0,0,.28)}
/* O fundo para na largura da coluna, de proposito. Estender com um ::before
   de inset negativo empurrava a pagina 5px para fora da tela no celular - e
   nao era preciso: o texto da leitura tem a mesma largura das abas, entao
   nada passa por baixo nas laterais. */
.lit-aba{font-family:var(--sans); font-size:.86rem; line-height:1;
         padding:.7rem 1rem; min-height:2.6rem; cursor:pointer;
         background:transparent; color:var(--tinta-media);
         border:1px solid var(--preto); border-radius:2rem}
.lit-aba:hover{color:var(--tinta); background:var(--ouro-fundo)}
.lit-aba[aria-selected="true"]{background:var(--ouro); color:var(--sobre-ouro);
                               border-color:var(--ouro); font-weight:600}

.lit-painel{max-width:var(--texto); margin:0 0 2rem}
.com-js .lit-painel{margin-bottom:0}
/* o atributo hidden vem no HTML para o JS assumir o comando. Sem JS ele
   esconderia tres das quatro leituras, entao aqui ele e desfeito: quem so
   esconde de verdade e a regra com .com-js. */
.lit-painel[hidden]{display:block}
.com-js .lit-painel[hidden]{display:none}
.lit-painel h3{font-family:var(--sans); font-size:.98rem; font-weight:600;
               line-height:1.4; margin:0 0 .3rem}
.lit-painel h3 b{color:var(--ouro-tinta); white-space:nowrap}
.lit-rubrica{font-family:var(--sans); font-size:.86rem; color:var(--tinta-fraca);
             margin:0 0 1rem; padding-bottom:.7rem;
             border-bottom:1px solid var(--linha)}
.lit-painel p{margin:0 0 .9rem; line-height:1.7}
.lit-painel p:last-child{margin-bottom:0}

/* ------------------------------------- o calendario da Liturgia Diaria */
/* So deixa clicar nos dias que existem no arquivo. Quem escolhe uma data
   nunca cai no vazio - os outros dias ficam la, apagados, sem serem botao. */
.lit-sel.sel-linha{display:none}
#liturgia-do-dia{margin-top:2.5rem}
.cal-lit{max-width:24rem; border:1px solid var(--preto); border-radius:.6rem;
         padding:1rem; background:var(--superficie)}
.cal-topo{display:flex; align-items:center; justify-content:space-between;
          gap:.5rem; margin-bottom:.9rem}
.cal-topo strong{font-family:var(--sans); font-size:1rem; font-weight:600}
.cal-topo strong::first-letter{text-transform:uppercase}
.cal-topo button{font-family:var(--sans); font-size:1.1rem; line-height:1;
                 background:transparent; color:var(--tinta-media); cursor:pointer;
                 border:1px solid var(--preto); border-radius:.4rem;
                 min-width:2.6rem; min-height:2.6rem}
.cal-topo button:hover{background:var(--ouro-fundo); color:var(--tinta)}
.cal-semana,.cal-dias{display:grid; grid-template-columns:repeat(7,1fr); gap:.25rem}
.cal-semana span{font-family:var(--sans); font-size:.7rem; text-align:center;
                 color:var(--tinta-fraca); padding-bottom:.3rem}
.cal-dia{font-family:var(--sans); font-size:.9rem; text-align:center;
         display:flex; align-items:center; justify-content:center;
         min-height:2.5rem; border-radius:.4rem; border:0;
         background:transparent; color:var(--tinta); cursor:pointer}
button.cal-dia:hover{background:var(--ouro-fundo)}
.cal-dia.cal-fora{color:var(--tinta-fraca); opacity:.45; cursor:default}
.cal-dia.cal-escolhido{background:var(--ouro); color:var(--sobre-ouro);
                       font-weight:600}
.cal-vazio{min-height:2.5rem}
@media (max-width:420px){
  .cal-lit{padding:.75rem}
  .cal-dia,.cal-vazio{min-height:2.3rem}
}
.lit-fonte{margin:1.1rem 0 0; font-family:var(--sans); font-size:.78rem;
           color:var(--tinta-fraca)}
/* A CNBB pede a fonte E o aviso de direitos "de forma visivel". Entao isto
   nao e letra miuda de rodape: fica logo abaixo do texto, com filete em ouro
   e contraste de leitura. */
.lit-direitos{margin:1.3rem 0 0; padding-top:.85rem; font-family:var(--sans);
              font-size:.8rem; line-height:1.55; color:var(--tinta-media);
              border-top:1px solid var(--linha); max-width:var(--texto)}
.lit-direitos .lit-cnbb{display:block; color:var(--tinta); margin-top:.45rem}
.lit-direitos .lit-cnbb:first-child{margin-top:0}
.lit-direitos .lit-copy{display:block; color:var(--tinta-media)}
.lit-direitos a{color:var(--tinta-fraca); text-decoration:none;
                border-bottom:1px solid var(--linha)}
.lit-direitos a:hover{color:var(--tinta); border-bottom-color:var(--ouro)}
.lit-apoie{font-family:var(--sans); font-size:.86rem; color:var(--tinta-media);
           max-width:var(--texto); margin:1rem 0 0}
.lit-apoie a{color:var(--ouro-tinta); font-weight:600}
.anuncio{margin:2rem 0; padding-top:.8rem; border-top:1px solid var(--linha);
         max-width:var(--texto); min-height:6rem}
.anuncio-rot{font-family:var(--sans); font-size:.68rem; text-transform:uppercase;
             letter-spacing:.08em; color:var(--tinta-fraca); margin:0 0 .4rem}
.consent{position:fixed; left:1rem; right:1rem; bottom:1rem;
         z-index:30; max-width:34rem; margin:0 auto; padding:1rem 1.1rem;
         background:var(--papel); color:var(--tinta); border:1px solid var(--preto);
         border-radius:.6rem; box-shadow:0 .4rem 1.4rem rgba(0,0,0,.25);
         font-family:var(--sans); font-size:.86rem}
.consent[hidden]{display:none}
.consent p{margin:0 0 .7rem}
.consent div{display:flex; gap:.5rem}
.consent button{flex:1; min-height:2.6rem; cursor:pointer; border-radius:2rem;
                font-family:var(--sans); font-size:.9rem; border:1px solid var(--preto);
                background:transparent; color:var(--tinta)}
#consent-sim{background:var(--ouro); color:var(--sobre-ouro); border-color:var(--ouro); font-weight:600}
/* o botao flutuante de apoio - ver apoie_flutuante() */
.fab{position:fixed; right:1.2rem; bottom:1.2rem; z-index:28;
     display:flex; flex-direction:column; align-items:flex-end; gap:.6rem;
     transition:transform .25s ease, opacity .25s ease}
.fab.fab-fora{transform:translateY(160%); opacity:0; pointer-events:none}
.fab-btn{display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
         min-height:2.6rem; padding:.55rem .95rem; border-radius:2rem;
         border:1px solid var(--ouro); background:var(--papel); color:var(--ouro-tinta);
         font-family:var(--sans); font-size:.82rem; font-weight:600;
         box-shadow:0 .25rem .9rem rgba(0,0,0,.14); opacity:.92}
.fab-btn:hover,.fab-btn[aria-expanded="true"]{opacity:1; background:var(--ouro);
                                               color:var(--sobre-ouro)}
.fab-mini .fab-btn span{display:none}
.fab-mini .fab-btn{padding:.55rem .7rem}
.fab-cartao{width:15.5rem; padding:1rem 1rem .9rem; border-radius:.7rem;
            border:1px solid var(--preto); background:var(--papel); color:var(--tinta);
            box-shadow:0 .5rem 1.6rem rgba(0,0,0,.22); font-family:var(--sans);
            position:relative; text-align:center}
.fab-cartao[hidden]{display:none}
.fab-x{position:absolute; top:.25rem; right:.35rem; width:2.2rem; height:2.2rem;
       border:0; background:transparent; color:var(--tinta-fraca); font-size:1.4rem;
       line-height:1; cursor:pointer}
.fab-tit{font-family:var(--serif); font-size:1.05rem; font-weight:600; margin:.1rem 1.6rem .3rem 0;
         text-align:left; color:var(--ouro-tinta)}
.fab-txt{font-size:.78rem; color:var(--tinta-media); margin:0 0 .7rem; text-align:left}
.fab-qr{display:block; width:11rem; height:11rem; margin:0 auto .7rem; padding:.4rem;
        background:#FFFFFF; border-radius:.4rem}
.fab-copiar{width:100%; min-height:2.5rem; cursor:pointer; border:0; border-radius:2rem;
            background:var(--ouro); color:var(--sobre-ouro); font-family:var(--sans);
            font-size:.86rem; font-weight:600}
.fab-ir{display:inline-block; margin-top:.6rem; font-size:.8rem; color:var(--ouro-tinta)}
@media (max-width:760px){
  /* no celular: so o icone, acima da barra de atalhos */
  .fab{right:.8rem; bottom:calc(4.9rem + env(safe-area-inset-bottom))}
  .fab-btn span{display:none}
  .fab-btn{padding:.6rem .7rem}
}
@media print{ .fab{display:none} }
.apoie{max-width:60rem}
.apoie-grade{display:grid; grid-template-columns:minmax(0,17rem) minmax(0,1fr); gap:2.5rem;
             align-items:start}
.apoie-santo{margin:0}
.apoie-santo img{width:100%; border-radius:.5rem; border:1px solid var(--linha)}
.apoie-santo figcaption{font-family:var(--sans); font-size:.7rem; line-height:1.4;
                        color:var(--tinta-fraca); margin-top:.5rem}
@media (max-width:760px){
  .apoie-grade{grid-template-columns:1fr; gap:1.2rem}
  /* no celular o Pix vem primeiro; o santo fecha a pagina */
  .apoie-santo{max-width:12rem; order:2}
}
.pix{border:1px solid var(--preto); border-radius:.6rem; background:var(--superficie);
     padding:1.2rem; margin:1.5rem 0; max-width:26rem}
.pix-qr{background:#FFFFFF; padding:.6rem; border-radius:.4rem; max-width:15rem;
        margin:0 auto 1rem}
.pix-qr svg{display:block; width:100%; height:auto}
.pix-rot{font-family:var(--sans); font-size:.78rem; font-weight:600; color:var(--ouro-tinta);
         margin:0 0 .4rem}
.pix-codigo{width:100%; font-family:ui-monospace,monospace; font-size:.78rem; resize:none;
            padding:.5rem; border:1px solid var(--preto); border-radius:.4rem;
            background:var(--papel); color:var(--tinta); word-break:break-all}
.pix-copiar{margin:.6rem 0 0; width:100%; min-height:2.8rem; cursor:pointer;
            font-family:var(--sans); font-size:.95rem; font-weight:600; border:0;
            border-radius:2rem; background:var(--ouro); color:var(--sobre-ouro)}
.pix-link{display:flex; align-items:center; justify-content:center; text-decoration:none;
          margin-top:0}
.pix-link + .pix-ficha + .pix-qr, .pix-link ~ .pix-rot{margin-top:1.4rem}
.pix-ficha{font-family:var(--sans); font-size:.82rem; color:var(--tinta-media); margin:.9rem 0 0}
.lit-direitos-min{font-size:.74rem; color:var(--tinta-fraca); padding-top:.6rem}
/* condicao 5: o que e nosso aparece marcado como nosso */
.lit-nosso{margin:1.4rem 0 0; padding:.9rem 1rem; max-width:var(--texto);
           background:var(--superficie); border-left:3px solid var(--ouro)}
.lit-nosso .rotulo{display:block; font-family:var(--sans); font-size:.7rem;
                   text-transform:uppercase; letter-spacing:.09em;
                   color:var(--ouro-tinta); margin-bottom:.4rem}
.lit-nosso p{margin:0 0 .6rem}
.lit-nosso p:last-child{margin-bottom:0}
.lit-fonte a{color:var(--tinta-fraca); text-decoration:none;
             border-bottom:1px solid var(--linha)}
.lit-fonte a:hover{color:var(--tinta); border-bottom-color:var(--ouro)}
@media (max-width:40rem){
  .liturgia li{flex-direction:column; gap:.15rem}
  .lit-rot{flex:none}
}

/* ------------------------------------------------------ voltar para tras */
/* Toda pagina que nao e a home tem uma saida visivel, logo abaixo do topo. */
.voltar{border-bottom:1px solid var(--linha); background:var(--papel-fundo)}
/* alinhado a direita: e uma saida, nao o comeco da leitura. O botao e o
   mesmo do "Enviar no WhatsApp" (.acoes .zap) - pedido do Bruno, 27/10/2026:
   um estilo so de botao no site, sem copia do CSS. */
.voltar .env{justify-content:flex-end; margin:0 auto; padding-top:.5rem; padding-bottom:.5rem}

/* --------------------------------- santo do dia (Vatican News, Santa Se) */
/* Lista sobria: o nome em serifada, o resumo em cinza menor. Sem selo, porque
   isto nao e classificacao canonica - e memoria da Igreja. */
.santos-do-dia{list-style:none; margin:0; padding:0}
.santos-do-dia li{padding:.85rem 0; border-top:1px solid var(--linha)}
.santos-do-dia li:first-child{border-top:0; padding-top:0}
.sd-nome{display:block; font-family:var(--serif); font-size:1.12rem;
         line-height:1.3; color:var(--tinta)}
.sd-resumo{display:block; margin-top:.3rem; max-width:var(--texto);
           font-size:.92rem; line-height:1.5; color:var(--tinta-media)}
/* no calendario do mes a mesma coisa cabe numa linha so */
.sd-linha{list-style:none; margin:.35rem 0 0; padding:0;
          font-family:var(--sans); font-size:.82rem; color:var(--tinta-fraca)}
.sd-linha li{padding:.15rem 0}
.sd-linha a{color:var(--tinta-media); text-decoration:none;
            border-bottom:1px solid var(--linha)}
.sd-linha a:hover{border-bottom-color:var(--ouro)}

/* ----------------------------------- celebracao do dia (Calendario Romano) */
/* O grau vem em caixa alta pequena, em ouro sobre preto ou so filete: e um
   selo, nao um bloco de cor. O nome da celebracao e o que o leitor le. */
.liturgia{display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem;
          margin:0 0 1.25rem; padding-bottom:.7rem;
          border-bottom:1px solid var(--linha)}
.lit-grau{font-family:var(--sans); font-size:.6rem; font-weight:600;
          text-transform:uppercase; letter-spacing:.09em; white-space:nowrap;
          padding:.22rem .5rem; border:1px solid var(--preto);
          color:var(--tinta)}
.lit-solenidade{background:var(--ouro); color:var(--sobre-ouro); border-color:var(--ouro)}
.lit-festa{background:var(--ouro-fundo)}
.lit-memoria{background:var(--superficie)}
.lit-comemoracao{background:var(--superficie); border-color:var(--linha);
                 color:var(--tinta-fraca)}
.lit-nome{font-family:var(--serif); font-size:1.35rem; line-height:1.25;
          color:var(--tinta)}
.lit-obs{font-family:var(--sans); font-size:.72rem; color:var(--tinta-fraca);
         flex-basis:100%}
@media (max-width:40rem){ .lit-nome{font-size:1.15rem} }

/* ------------------------------------------- entrada do dia (a abertura) */
.dia{padding:3rem 0 2.5rem; border-bottom:1px solid var(--preto)}
.dia-data{font-family:var(--sans); font-size:.8rem; color:var(--tinta-fraca);
          margin:0 0 1.75rem}
/* ------------------------------------------ o procurador, no alto da home */
/* Quem chega ao Santo Diario quer uma de duas coisas: o santo de HOJE, que
   ja esta logo abaixo, ou UMA pessoa. Procurar essa pessoa nao pode custar
   rolar a home inteira ate o rodape - que era onde a busca morava. */
.dia-topo{display:flex; gap:2.5rem; align-items:flex-start;
          justify-content:space-between; margin-bottom:1.75rem}
.dia-topo .dia-data{margin:.45rem 0 0}
/* o bloco da busca ficou mais largo (era 24rem): o painel de achados tem de
   caber DENTRO dele, e com 24rem os nomes compridos nao cabiam */
.busca-topo{flex:0 0 28rem; max-width:100%; position:relative}
.busca-conta{margin:.55rem 0 0; font-size:.78rem; line-height:1.4}
/* A lista de achados FLUTUA por cima. Se ela empurrasse a pagina, o santo do
   dia daria um pulo para baixo a cada letra digitada - e o leitor perderia
   de vista justamente o que veio ver. */
/* O PAINEL TEM EXATAMENTE A LARGURA DO CAMPO. Ja foi mais largo, para caber
   nome comprido numa linha so, e o efeito foi o oposto do pretendido: a lista
   transbordava para fora da caixa de busca e parecia solta na pagina, como se
   pertencesse a outra coisa. Preso ao campo (left:0 e right:0), ele e
   visivelmente a resposta DAQUELA caixa. Nome comprido quebra em duas linhas,
   e tudo bem. */
.busca-topo #resultado{position:absolute; left:0; right:0; z-index:15;
                       margin-top:0; background:var(--papel);
                       border:1px solid var(--preto); border-top:0;
                       max-height:24rem; overflow-y:auto;
                       box-shadow:0 .7rem 1.2rem -.4rem rgba(0,0,0,.45)}
.busca-topo #resultado:empty{display:none; border:0; box-shadow:none}

/* ---------------------------------------- o resultado da busca e uma LISTA */
/* Aqui o desenho das listas longas nao serve, e a tentativa de force-lo
   ficou grotesca: coluna de data fixa vazia na maioria das linhas, etiqueta
   dourada com borda no meio de um vao enorme e o selo jogado la na ponta -
   caixa dentro de caixa dentro de caixa.
   Num painel de busca o que se quer e uma lista densa, e o que diz "clique"
   nao e uma etiqueta no nome: e a LINHA INTEIRA acender. Entao aqui o nome
   volta a ser so nome, a data desce para uma segunda linha miudinha e a
   linha toda vira o botao. */
#resultado .verbetes{margin:0}
#resultado li{display:grid; grid-template-columns:1fr auto;
              align-items:center; gap:.8rem;
              position:relative; padding:.65rem .9rem}
#resultado .vn{grid-column:1; grid-row:1; font-size:1.05rem; line-height:1.3}
#resultado .selo{grid-column:2; grid-row:1}
/* NO PAINEL NAO ENTRA DATA NENHUMA, e por uma razao de uniformidade:
   so 796 das 1.551 pessoas tem memoria liturgica e so 1.409 tem ano de
   morte. Mostrando o que cada uma tem, a mesma lista saia com "13 de
   setembro" numa linha, "Ano 1936" na seguinte e nada na terceira - tres
   informacoes diferentes empilhadas, que e o contrario de informar.
   Aqui o painel responde uma pergunta so: QUEM e, e em que degrau esta. A
   data de festa fica na pagina da pessoa, onde nao concorre com nada.
   Nas listas longas ela continua, porque ali a coluna e fixa, alinhada, e
   serve para percorrer o calendario com os olhos. */
#resultado .vd,#resultado .ve{display:none}
/* o nome deixa de ser etiqueta: quem acende e a linha */
#resultado .vn a{background:none; border:0; padding:0; margin:0;
                 color:var(--tinta); display:inline}
#resultado .vn a::after{content:""; position:absolute; inset:0}
/* A linha acesa: fundo um tom acima e uma barra dourada na borda esquerda.
   O dourado translucido sozinho nao servia - sobre o azul escuro ele mistura
   para um cinza-oliva sujo, que parecia borrao, nao selecao. */
#resultado li:hover,#resultado li:focus-within{
                background:var(--superficie);
                box-shadow:inset .22rem 0 0 0 var(--ouro)}
#resultado li:hover .vn a,#resultado li:focus-within .vn a{color:var(--ouro-tinta)}
#resultado .aviso{margin:0; padding:.9rem}

.dia-grade{display:grid; grid-template-columns:15rem 1fr; gap:2.75rem; align-items:start}
.dia-grade.sem-retrato,.v-grade.sem-retrato{grid-template-columns:1fr}
.dia-nome{font-size:clamp(2.4rem,6.5vw,4rem); line-height:1.02; margin:.2rem 0 .5rem;
          font-weight:500; letter-spacing:-.02em}
.dia-ep{font-size:1.2rem; color:var(--tinta-media); margin:0 0 1.5rem; max-width:var(--texto)}
.dia-bio{max-width:var(--texto); margin:0 0 1.5rem}
/* O retrato NAO e cortado. Antes havia aqui um aspect-ratio 3/4 com
   object-fit:cover, e ele decepava cabeca e mao de toda pintura que nao fosse
   vertical - e ainda esticava foto pequena, que e a maioria: o Dicasterio
   publica muita imagem de 390px. Agora a moldura toma a forma da imagem e o
   `max-width` no <figure> impede que ela seja ampliada alem do que tem. */
.retrato{border:1px solid var(--preto); background:var(--superficie); padding:.4rem}
.retrato img{width:100%; height:auto; display:block}
.retrato figcaption{font-family:var(--sans); font-size:.68rem; color:var(--tinta-fraca);
                    padding:.45rem .2rem 0; line-height:1.35}

/* ----------------------------------------------- selo de grau canonico */
/* Os quatro selos tem o mesmo tamanho, sempre. Antes cada um media o que a
   palavra media - "Santo" era metade de "Servo de Deus" - e a coluna da
   direita das listas virava uma escadinha. A largura minima esta em `em`, e
   nao em `rem`, de proposito: assim ela acompanha o proprio selo quando a
   fonte cresce no celular e quando o leitor usa o A+. 9.2em e o que "Servo
   de Deus", o mais comprido, precisa - medido, nao chutado. */
.selo{display:inline-block; font-family:var(--sans); font-size:.73rem;
      padding:.2rem .6rem; border:1px solid var(--preto); white-space:nowrap;
      min-width:9.2em; text-align:center}
.selo-santo{background:var(--ouro); color:var(--sobre-ouro); font-weight:600}
.selo-beato{background:var(--ouro-fundo); color:var(--sobre-ouro-ralo);
            border-color:var(--ouro-tinta)}
.selo-veneravel{background:var(--superficie); color:var(--tinta-media)}
/* nem toda data do santoral e uma pessoa: "Nossa Senhora de Fatima", "Todos
   os Santos", "Comemoracao de todos os fieis defuntos". O site nao as chama
   de santo - chama pelo que sao. */
.secao-procedencia p{max-width:var(--texto)}
/* "Informacoes sendo processadas": o santo que a Igreja recorda naquele dia e que o
   site ainda vai preencher. A luzinha amarela pisca devagar; com
   prefers-reduced-motion a regra global tira a animacao e ela fica acesa e parada. */
.selo-processando{background:transparent; color:var(--tinta-fraca); border-style:dashed;
  display:inline-flex; align-items:center; gap:.45em}
.selo-processando::before{content:""; flex:none; width:.55em; height:.55em; border-radius:50%;
  background:#e8b923; box-shadow:0 0 .55em #e8b923; animation:luz-processando 2s ease-in-out infinite}
@keyframes luz-processando{0%,100%{opacity:1} 50%{opacity:.25}}
.dia-outro.proc small::before{content:""; display:inline-block; width:.55em; height:.55em;
  border-radius:50%; margin-right:.4em; background:#e8b923; box-shadow:0 0 .5em #e8b923;
  animation:luz-processando 2s ease-in-out infinite}
.selo-celebracao{background:transparent; color:var(--tinta-fraca);
                 border-color:var(--linha); font-style:italic}
.selo-servo{background:transparent; color:var(--tinta-fraca); border-style:dashed}

/* ---------------------------------------------------- A ESCADA DA CAUSA */
/* O elemento que so este site tem. Cada degrau e um ato real do Dicasterio,
   com data, Papa e local. Degrau vazio = etapa que ainda nao aconteceu. */
.escada{list-style:none; margin:2rem 0; padding:0; max-width:var(--texto)}
.escada li{position:relative; padding:0 0 1.15rem 2.1rem; border-left:1px solid var(--linha)}
.escada li:last-child{padding-bottom:0; border-left-color:transparent}
.escada li::before{content:""; position:absolute; left:-.44rem; top:.34rem;
  width:.8rem; height:.8rem; border:1px solid var(--preto);
  background:var(--papel); border-radius:50%}
.escada .feito::before{background:var(--ouro)}
/* degrau anterior ao grau atual, mas sem ato publicado: ouro vazado, para
   nao passar por dado confirmado o que a fonte nao confirma */
.escada .sem-data::before{background:var(--ouro-fundo)}
.escada .sem-data .degrau-d{font-style:italic}
.escada .agora::before{background:var(--ouro); box-shadow:0 0 0 .28rem var(--ouro-fundo)}
.escada .futuro::before{border-style:dashed}
.escada .vazio{opacity:.45}
.degrau{font-family:var(--sans); font-size:.9rem; font-weight:600; display:block}
.degrau-d{font-family:var(--sans); font-size:.8rem; color:var(--tinta-media)}
.degrau-obs{font-family:var(--sans); font-size:.75rem; color:var(--martir)}

/* ------------------------------------------------------------- secoes */
.secao{padding:2.5rem 0; border-bottom:1px solid var(--linha)}
.secao:last-of-type{border-bottom:0}
/* OS TITULOS, NUM LUGAR SO.
   Antes cada pagina escrevia o tamanho dentro do proprio HTML: o h1 repetia
   "font-size:2.4rem;font-weight:500" em oito lugares, com quatro margens
   diferentes, e os h2 de secao saiam ora a 1.6rem, ora a 1.4rem, conforme a
   pagina em que se estava. Ninguem decidiu isso - foi acontecendo, um
   copia-e-cola de cada vez. Agora e uma regra so: mudar o tamanho de todos os
   titulos do site e mudar uma linha. */
.titulo-pagina{font-size:2.4rem; font-weight:500; margin:0 0 .9rem;
               letter-spacing:-.015em}
.secao > h2,.titulo-secao{font-size:1.5rem; font-weight:500; margin:0 0 1.15rem;
                          letter-spacing:-.01em}
.titulo-secao{margin-top:2.2rem}
/* o titulo de cada bloco da home (Santo do Dia, Procurar um santo, a liturgia):
   mesmo estilo (o da liturgia e o .secao > h2, de 1.5rem) */
.titulo-home{margin:0 0 1.2rem; font-weight:500}
/* titulo em capitais romanas + subtitulo em cursiva dourada (pedido do
   Bruno, 30/10/2026; referencia "CHRISTO NIHIL PRAEPONERE") */
.th-t{display:block; font-family:"Cormorant SC",Georgia,serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em; line-height:1.15;
  font-size:clamp(1.5rem,6.2vw,2.15rem); color:var(--tinta)}
.th-s{display:block; font-family:"Parisienne",cursive; font-weight:400;
  font-size:clamp(1.25rem,5.4vw,1.6rem); line-height:1.25; margin-top:.2rem;
  color:var(--ouro-tinta); text-shadow:0 0 .6px currentColor}
.dia .titulo-home{margin-top:0}
.faixa-busca .titulo-home{margin-top:0}
.dia-vida{margin:0 0 1.5rem}

/* O paragrafo que abre cada pagina interna, e o link de volta no pe da
   lista. Os dois se repetiam escritos a mao, cada um com uma margem
   diferente - 1rem aqui, 1.5rem ali, 1.75rem acola -, e o leitor que passava
   de uma pagina a outra via o texto dar pequenos saltos sem motivo. */
.intro{margin:0 0 1.6rem; max-width:38rem}
.pe-lista{margin-top:2.25rem; font-family:var(--sans); font-size:.85rem}

/* lista de verbetes — linhas de um martirologio, nao cartoes iguais */
.verbetes{list-style:none; margin:0; padding:0}
.verbetes li{display:grid; grid-template-columns:4.5rem 1fr auto; gap:1rem;
             align-items:baseline; padding:.7rem 0; border-top:1px solid var(--linha)}
/* min-width:0 e a trava que impede o celular de rolar de lado: sem ela, um
   nome comprido (ou o .ve de 34rem) vira a largura MINIMA da coluna e
   empurra a pagina inteira para fora da tela. */
.verbetes li > *{min-width:0}
/* ...mas o SELO precisa da largura minima dele de volta: aquela regra e mais
   especifica que `.selo` e apagava os 9.2em, deixando a coluna da direita em
   escadinha. Nome comprido continua podendo encolher; o selo, nao. */
.verbetes li > .selo{min-width:9.2em}
.verbetes li:first-child{border-top:0}
.verbetes .vd{font-family:var(--sans); font-size:.78rem; color:var(--tinta-fraca)}
.verbetes .vn{font-size:1.1rem}
/* O NOME E O BOTAO. Nas listas ele era texto branco sobre azul, igualzinho
   ao resto - ninguem adivinha que ali se clica. Agora leva um fundo dourado
   discreto, que fica solido ao passar o mouse ou com o foco do teclado.
   Discreto de proposito: sao ate 2.175 linhas, e dourado solido em todas
   viraria uma parede amarela que cansa e briga com o selo "Santo". */
/* A ETIQUETA DOURADA - o que, no site inteiro, quer dizer "clique aqui".
   Vale para o nome nas listas, para o santo do dia e para o titulo de cada
   documento: se e a porta de uma pagina, tem esta cara. Antes o documento
   era um link cru, indistinguivel de texto - o mesmo defeito que o nome
   tinha.
   inline-block, e nao inline: assim a etiqueta e UM retangulo so mesmo
   quando o texto quebra em duas linhas. Em `inline` virava duas caixas
   soltas, uma por linha - feio, e parecia dois links. */
.verbetes .vn a,.sd-nome a,.docs .dt a{
                display:inline-block; max-width:100%;
                text-decoration:none; color:var(--ouro-tinta);
                background:var(--ouro-fundo);
                border:1px solid var(--ouro-tinta); border-radius:.3rem;
                padding:.1rem .5rem; margin-left:-.5rem}
.verbetes .vn a:hover,.verbetes .vn a:focus-visible,
.sd-nome a:hover,.sd-nome a:focus-visible,
.docs .dt a:hover,.docs .dt a:focus-visible{
                background:var(--ouro); color:var(--sobre-ouro);
                border-color:var(--ouro)}
.papas-filtro{display:flex; gap:.7rem; flex-wrap:wrap; margin:0 0 .6rem}
.papas-filtro .busca{flex:1 1 14rem; min-width:0; border:1px solid var(--preto);
  border-radius:.4rem; padding:.6rem .8rem; background:var(--papel); color:var(--tinta)}
.papas-filtro select{flex:0 1 11rem; border:1px solid var(--preto); border-radius:.4rem;
  padding:.6rem .6rem; background:var(--papel); color:var(--tinta); font:inherit}
.verbetes.papas-lista .ve{white-space:normal; overflow:visible; text-overflow:clip; max-width:none}
.papas-frase{font-size:.85rem; margin:-.2rem 0 1.3rem}
.papas-lista li > .selo{min-width:0}
.papas-lista li[hidden],.papas-sec[hidden]{display:none}
.verbetes .ve{display:block; font-size:.92rem; color:var(--tinta-fraca);
              max-width:34rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* --------------------------------------------------- pagina do verbete */
.verbete{padding-top:2.5rem; padding-bottom:1rem}   /* so em cima e embaixo: o atalho zerava o respiro lateral do .env */
.trilha{font-family:var(--sans); font-size:.78rem; color:var(--tinta-fraca); margin-bottom:1.5rem}
.trilha a{text-decoration:none}
.v-grade{display:grid; grid-template-columns:16rem 1fr; gap:3rem; align-items:start}
.v-nome{font-size:clamp(2rem,5vw,3.1rem); line-height:1.05; margin:.4rem 0 .6rem;
        font-weight:500; letter-spacing:-.02em}
.v-vida{font-family:var(--sans); font-size:.9rem; color:var(--tinta-fraca); margin:0 0 1.2rem}
.v-ep{font-size:1.15rem; color:var(--tinta-media); margin:0 0 1.5rem; max-width:var(--texto)}
.v-bio{max-width:var(--texto)}
.v-bio p{margin:0 0 1.1rem}
.v-bio h2{font-size:1.25rem; font-weight:600; margin:1.8rem 0 .6rem; color:var(--tinta)}
.v-credito{font-family:var(--sans); font-size:.82rem; color:var(--tinta-fraca);
           max-width:var(--texto); margin:-.3rem 0 1.5rem}
.v-causa-h{font-family:var(--sans); font-size:.8rem; font-weight:600;
           color:var(--tinta-fraca); margin:2rem 0 0}
.escada + .v-credito{margin-top:.6rem}
/* capitular em ouro, como nos livros liturgicos */
.v-bio > p:first-of-type::first-letter{
  float:left; font-size:3.6rem; line-height:.82; padding:.16rem .5rem .1rem 0;
  color:var(--ouro-tinta); font-weight:600;
}
/* o aviso de idioma fica FORA do .v-bio — senao a capitular cai nele */
.aviso + .v-bio{margin-top:0}
.festa{border:1px solid var(--preto); background:var(--ouro-fundo);
       padding:.9rem 1.1rem; margin:0 0 1.5rem; max-width:var(--texto)}
.festa b{font-family:var(--sans); font-size:.78rem; display:block;
         color:var(--ouro-tinta); font-weight:600}
.festa span{font-size:1.25rem}

/* a epigrafe: filete de ouro a esquerda, como a marca de citacao dos livros
   liturgicos. Sem aspas desenhadas — o filete ja diz que e citacao. */
.lema{margin:1.75rem 0 1.5rem; padding:.2rem 0 .2rem 1.1rem;
      border-left:3px solid var(--ouro); max-width:var(--texto);
      font-size:1.18rem; font-style:italic; color:var(--tinta-media); line-height:1.5}

.festa-nota{font-family:var(--sans); font-size:.8rem; color:var(--tinta-fraca);
            margin:-1rem 0 1.5rem; max-width:var(--texto)}
.fonte{font-family:var(--sans); font-size:.8rem; color:var(--tinta-fraca);
       border-top:1px solid var(--linha); padding-top:1rem; margin-top:2.5rem;
       max-width:var(--texto)}

/* ------------------------------------------------ as tres fases da vida */
/* a galeria vem logo apos a escada da causa, entao nao precisa da divisoria
   nem do respiro grande de uma secao de fim de pagina */
.secao-fases{padding-top:1.5rem; padding-bottom:1.75rem; border-bottom:0}
/* o titulo aqui nao e especial: e um titulo de secao como os outros. So a
   folga embaixo e menor, porque os cartoes ja tem respiro proprio. */
.secao-fases > h2{margin-bottom:.9rem}
.fases{display:grid; grid-template-columns:repeat(3,1fr);
       gap:.9rem; max-width:38rem; margin:.5rem 0 1rem}
.fase{margin:0; border:1px solid var(--preto); background:var(--superficie); padding:.4rem}
/* Na galeria os tres cartoes precisam ficar alinhados, entao a moldura tem
   altura fixa - mas com `contain`, que encaixa a imagem inteira dentro dela em
   vez de cortar. A sobra aparece como papel, nao como recorte. */
.fase img{aspect-ratio:3/4; object-fit:contain; width:100%;
          background:var(--papel-fundo)}
.fase figcaption{font-family:var(--sans); font-size:.72rem; padding:.45rem .2rem 0;
                 line-height:1.4; color:var(--tinta-media)}
.fase figcaption b{display:block; font-size:.82rem; color:var(--tinta)}
.fase-cred{display:block; color:var(--tinta-fraca); font-size:.66rem; margin-top:.2rem}
/* imagem gerada NUNCA passa sem aviso, e o aviso e vermelho de martir para
   nao se confundir com o resto da pagina */
.fase-ia{display:block; margin-top:.35rem; padding:.2rem .35rem;
         background:var(--martir); color:#fff; font-size:.66rem; font-weight:600}
/* a ilustracao do projeto: "Imagem ilustrativa." discreto, como no retrato */
.fase-leg{display:block; margin-top:.25rem; color:var(--tinta-fraca); font-size:.68rem}
.fase-vazia{border-style:dashed; opacity:.7}
/* fase que a pessoa NAO chegou a viver: nao e uma lacuna a preencher, e um
   fato. Por isso a borda pontilhada e o texto apagado - para nao parecer
   convite a procurar uma imagem que nao existe nem pode existir. */
.fase-ausente{border-style:dotted; opacity:.42}
.fase-ausente .fase-nada{font-style:italic; line-height:1.3}
/* a imagem que a propria Santa Se publica: filete de ouro para distinguir
   das outras, que vem do acervo livre */

.fase-nada{aspect-ratio:3/4; display:flex; align-items:center; justify-content:center;
           background:var(--ouro-fundo); color:var(--tinta-fraca);
           font-family:var(--sans); font-size:.75rem}

/* a galeria logo abaixo do nome (quando ha imagem): sem o respiro de secao */
.fases-topo{padding-top:.4rem; padding-bottom:.75rem}
.fases-topo > h2{font-family:var(--sans); font-size:.8rem; font-weight:600;
  color:var(--tinta-fraca); margin:0 0 .5rem}
.fases-topo .fases{margin-top:0}
/* o seletor de data na pagina de cada santo: a lista do dia abre ali mesmo */
.sel-santo{margin:0 0 1.5rem}
.sel-santo .sel-data{margin:0}
.sel-caixa{margin:.6rem 0 0; padding:.75rem 1rem; border:1px solid var(--linha);
  border-radius:.6rem; background:var(--papel-fundo); max-width:40rem}
.sel-caixa .sel-titulo{margin-top:0}
.fases-pessoa{font-family:var(--sans); font-size:.85rem; font-weight:600; margin:.6rem 0 .4rem}
/* a imagem simbolica (sem rosto): uma so, mais larga, logo abaixo do nome */
.fase-simbolica{margin:.4rem 0 1rem; max-width:26rem; border:1px solid var(--preto);
  background:var(--superficie); padding:.4rem}
.fase-simbolica img{width:100%; height:auto; display:block; max-height:55vh;
  object-fit:contain}
.fase-simbolica figcaption{font-family:var(--sans); font-size:.72rem; line-height:1.45;
  color:var(--tinta-media); padding:.45rem .2rem 0}
.fase-simbolica .fase-ia{display:inline-block; margin:0 0 .3rem}

/* ------------------------------------------------------------- calendario */
.meses{display:grid; grid-template-columns:repeat(auto-fill,minmax(10rem,1fr)); gap:.75rem}
.mes{border:1px solid var(--preto); background:var(--superficie);
     padding:.85rem 1rem; text-decoration:none; display:block}
.mes:hover{background:var(--ouro-fundo)}
.mes b{display:block; font-size:1.15rem; font-weight:500}
.mes span{font-family:var(--sans); font-size:.76rem; color:var(--tinta-fraca)}

.letra{font-size:1.5rem; font-weight:500; margin:2.25rem 0 .4rem;
       border-bottom:1px solid var(--preto); padding-bottom:.2rem}
.letra:first-of-type{margin-top:.5rem}

/* ------------------------------------------------------------- busca */
/* O rótulo em dourado: e ele que diz, parado na tela, que ali se procura.
   No celular nao existe passar o mouse - o convite tem de estar visivel. */
.busca-rot{display:block; font-family:var(--serif); font-size:1.1rem;
           color:var(--ouro-tinta); margin:0 0 .45rem}
/* A caixa e a lupa sao UMA peca so: a borda e da caixa, nao de cada parte,
   senao aparece uma linha dupla entre as duas. */
.busca-caixa{display:flex; border:1px solid var(--preto);
             background:var(--superficie); border-radius:.3rem; overflow:hidden}
.busca-caixa:focus-within{border-color:var(--ouro); box-shadow:0 0 0 2px var(--ouro-fundo)}
.busca{flex:1 1 auto; min-width:0; width:100%; font-family:var(--sans);
       font-size:1rem; padding:.7rem .9rem; border:0; background:transparent;
       color:var(--tinta)}
.busca:focus{outline:none}
.busca::placeholder{color:var(--tinta-fraca)}
/* a lupa nao e enfeite: e o botao. Dourada, do tamanho de um dedo. */
.busca-btn{flex:0 0 auto; display:flex; align-items:center; justify-content:center;
           width:3rem; min-height:2.9rem; border:0; cursor:pointer;
           background:var(--ouro); color:var(--sobre-ouro)}
.busca-btn:hover,.busca-btn:focus-visible{background:var(--ouro-tinta);
                                          color:var(--papel)}
.busca-btn svg{width:1.15rem; height:1.15rem; fill:none; stroke:currentColor;
               stroke-width:2.2; stroke-linecap:round}
#resultado{margin-top:1rem}
.aviso{font-family:var(--sans); font-size:.85rem; color:var(--tinta-fraca)}

/* ------------------------------------------------------------- documentos */
.docs-ctl{display:none; margin:0 0 1.6rem; max-width:var(--texto)}
.com-js .docs-ctl{display:block}
.docs-q{width:100%; border:1px solid var(--preto); border-radius:.5rem;
        background:var(--papel); min-height:2.9rem}
.docs-q:focus{outline:2px solid var(--ouro); outline-offset:1px}
.docs-chips{display:flex; flex-wrap:wrap; gap:.4rem; margin:.9rem 0 0}
.docs-chip{font-family:var(--sans); font-size:.82rem; line-height:1; cursor:pointer;
           padding:.6rem .85rem; min-height:2.4rem; border-radius:2rem;
           border:1px solid var(--preto); background:transparent; color:var(--tinta-media)}
.docs-chip span{color:var(--tinta-fraca); margin-left:.15rem}
/* no celular os filtros viram uma faixa que corre para o lado: treze
   botoes empilhados empurravam a lista para a segunda tela */
@media (max-width:760px){
  .docs-chips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:.2rem}
  .docs-chips::-webkit-scrollbar{display:none}
  .docs-chip{flex:0 0 auto; white-space:nowrap}
}
.docs-chip:hover{background:var(--ouro-fundo); color:var(--tinta)}
.docs-chip[aria-pressed="true"]{background:var(--ouro); border-color:var(--ouro);
                                color:var(--sobre-ouro); font-weight:600}
.docs-chip[aria-pressed="true"] span{color:inherit; opacity:.85}
.docs-conta{margin:.6rem 0 0}
.docs-conta:empty{display:none}
.docs-nada{font-size:1rem; margin:1rem 0 2rem}
.docs-grupo[hidden],.docs li[hidden],.docs-nada[hidden]{display:none}
.docs{list-style:none; margin:0; padding:0}
.docs li{padding:.75rem 0; border-top:1px solid var(--linha)}
.docs li:first-child{border-top:0}
.docs .dt{font-size:1.05rem}
.docs .dm{font-family:var(--sans); font-size:.78rem; color:var(--tinta-fraca); display:block}
.docs .dm-fora{margin-left:.5rem; font-style:italic; opacity:.75}

/* ------------------------------------------------- a pagina de um documento */
/* O leitor veio LER. A coluna e estreita de proposito - texto corrido em
   linha larga cansa -, o corpo e serifado como o resto do site, e a fonte
   fica no fim, pequena. Ela nao e mais o botao de saida que era: e uma
   referencia, como se faz no pe de um texto impresso. */
.doc-nome{max-width:var(--texto); line-height:1.1}
.doc-ficha{font-family:var(--sans); font-size:.82rem; color:var(--tinta-fraca);
           margin:.1rem 0 2rem}
.doc-idioma{max-width:var(--texto); margin:0 0 1.8rem; padding:.7rem .9rem;
            background:var(--superficie); border-left:3px solid var(--ouro)}
.doc-texto{display:block; max-width:var(--texto)}
.doc-texto p{margin:0 0 1.15rem; text-align:justify; hyphens:auto}
.doc-abre{font-family:var(--sans); font-size:.86rem; letter-spacing:.06em;
          color:var(--ouro-tinta); text-align:left !important; margin-bottom:1.8rem}
.doc-fonte{max-width:var(--texto); margin:2.5rem 0 0; padding-top:1rem;
           border-top:1px solid var(--linha); font-family:var(--sans);
           font-size:.76rem; line-height:1.5; color:var(--tinta-fraca)}
.doc-fonte a{color:var(--tinta-fraca)}
.doc-fonte a:hover{color:var(--ouro-tinta)}

/* ------------------------------------------------------------- rodape */
.rodape{border-top:1px solid var(--preto); background:var(--papel-fundo);
        margin-top:3rem; padding:2.25rem 0; font-family:var(--sans); font-size:.83rem;
        color:var(--tinta-media)}
.rodape p{margin:0 0 .6rem; max-width:44rem}
.rodape a{color:var(--ouro-tinta)}

/* ===================================================== A BUSCA (05/10/2026) */
/* Um desenho so para as quatro portas da busca: a lupa do cabecalho, a faixa
   da home, a porta dos santos e a pagina /busca/. O primeiro achado vem em
   DESTAQUE - retrato, datas e o comeco da historia -, os demais numa lista
   com miniatura. Nenhuma imagem e cortada: object-fit:contain, sempre. */

/* a lupa do cabecalho */
.menu a.menu-apoie{color:var(--ouro-tinta); font-weight:600}
.menu a.menu-apoie:hover,.menu a.menu-apoie[aria-current]{color:var(--ouro-tinta)}
/* o texto inteiro so cabe em tela larga; em 1024 px quebrava o cabecalho */
.menu-apoie-mais{display:none}
@media (min-width:1300px){ .menu-apoie-mais{display:inline} }
.apoie-topo{display:none; align-items:center; min-height:2.4rem; padding:.45rem .8rem;
            border:1px solid var(--ouro); border-radius:2rem; background:var(--ouro-fundo);
            color:var(--ouro-tinta); font-family:var(--sans); font-size:.86rem;
            font-weight:600; text-decoration:none; white-space:nowrap}
.busca-abre{display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--sans); font-size:.85rem; color:var(--tinta-media);
  text-decoration:none; border:1px solid var(--preto); border-radius:.4rem;
  padding:.45rem .75rem; min-height:2.4rem; line-height:1}
.busca-abre:hover,.busca-abre:focus-visible{background:var(--ouro-fundo); color:var(--tinta)}
.busca-abre svg{width:1.05rem; height:1.05rem; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round}
/* a lupa do topo leva o dourado do "Apoie" e do "Diario" (pedido do Bruno,
   29/10/2026: discreta demais). So a do topo; a da barra de baixo, nao. */
.topo .busca-abre{color:var(--ouro-tinta); border-color:var(--ouro); font-weight:600}
.topo .busca-abre:hover,.topo .busca-abre:focus-visible{color:var(--ouro-tinta)}

/* a caixa que abre por cima de qualquer pagina */
.b-dlg{width:min(46rem, calc(100vw - 2rem)); max-height:min(86vh, 50rem);
  margin:6vh auto auto; padding:0; border:1px solid var(--preto);
  border-radius:.6rem; background:var(--papel); color:var(--tinta);
  box-shadow:0 1.5rem 3rem -1rem rgba(0,0,0,.6); overflow:hidden}
.b-dlg::backdrop{background:rgba(5,10,30,.62)}
.b-dlg-i{display:flex; flex-direction:column; max-height:min(86vh, 50rem)}
.b-dlg-topo{display:flex; gap:.6rem; align-items:center; padding:.9rem;
  border-bottom:1px solid var(--linha); background:var(--papel-fundo)}
.b-dlg-topo .busca-caixa{flex:1 1 auto}
.b-fechar{font-family:var(--sans); font-size:.8rem; background:transparent;
  color:var(--tinta-media); border:1px solid var(--preto); border-radius:.4rem;
  padding:.55rem .7rem; min-height:2.6rem; cursor:pointer}
.b-fechar:hover{background:var(--ouro-fundo); color:var(--tinta)}
.b-dlg .busca-saida{overflow-y:auto; padding:.5rem .9rem 1.1rem}
.b-dlg .busca-saida:empty{display:none}

/* o painel que desce da caixa, na home e na porta dos santos */
.busca-bloco{position:relative}
.busca-bloco[data-busca="painel"] .busca-saida{position:absolute; left:0; right:0;
  top:100%; z-index:15; background:var(--papel); border:1px solid var(--preto);
  border-top:0; max-height:min(72vh, 38rem); overflow-y:auto; padding:.5rem .6rem .8rem;
  box-shadow:0 .9rem 1.6rem -.5rem rgba(0,0,0,.5)}
.busca-bloco[data-busca="painel"] .busca-saida:empty{display:none}

/* o destaque: quem a busca acha primeiro */
.b-dest{display:grid; grid-template-columns:8.5rem 1fr; gap:1.1rem;
  align-items:start; padding:1rem; margin:.4rem 0 .6rem;
  background:var(--superficie); border:1px solid var(--preto);
  border-top:3px solid var(--ouro); border-radius:.35rem}
.b-dest-sem{grid-template-columns:1fr}
.b-dest-img{display:block; background:var(--papel-fundo); border:1px solid var(--linha);
  padding:.25rem}
.b-dest-img img{width:100%; height:auto; max-height:15rem; object-fit:contain}
.b-dest-corpo{min-width:0}
.b-dest-nome{font-size:1.55rem; font-weight:500; line-height:1.1; margin:.45rem 0 .3rem;
  letter-spacing:-.01em}
.b-dest-nome a{text-decoration:none}
.b-dest-nome a:hover{text-decoration:underline; text-decoration-color:var(--ouro)}
.b-dest-ficha{font-family:var(--sans); font-size:.8rem; color:var(--tinta-fraca);
  margin:0 0 .45rem}
.b-dest-ep{font-size:1rem; line-height:1.4; color:var(--tinta-media); margin:0 0 .55rem}
.b-dest-txt{font-size:.98rem; line-height:1.55; margin:0 0 .8rem;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5;
  line-clamp:5; overflow:hidden}
.b-espera span{display:block; height:.75em; margin:.5em 0; border-radius:.2rem;
  background:var(--papel-fundo)}
.b-espera span:nth-child(2){width:92%} .b-espera span:nth-child(3){width:64%}
.b-dest-ir{display:inline-block; font-family:var(--sans); font-size:.86rem;
  font-weight:600; text-decoration:none; color:var(--sobre-ouro);
  background:var(--ouro); border-radius:.3rem; padding:.5rem .85rem}
.b-dest-ir:hover,.b-dest-ir:focus-visible{background:var(--ouro-tinta); color:var(--papel)}
.b-dest-cred{font-family:var(--sans); font-size:.66rem; line-height:1.35;
  color:var(--tinta-fraca); margin:.7rem 0 0}

/* a lista: miniatura, nome, uma linha do que fez, selo. A LINHA INTEIRA e o
   link - o mesmo acordo da busca antiga, que funcionava. */
.b-lista{list-style:none; margin:0; padding:0}
.b-lista li{border-top:1px solid var(--linha)}
.b-lista li:first-child{border-top:0}
.b-item{display:grid; grid-template-columns:auto 1fr auto; gap:.8rem;
  align-items:center; padding:.5rem .6rem; text-decoration:none; color:var(--tinta)}
.b-item:hover,.b-item:focus-visible{background:var(--superficie);
  box-shadow:inset .22rem 0 0 0 var(--ouro); outline:none}
.b-item:hover .b-nome,.b-item:focus-visible .b-nome{color:var(--ouro-tinta)}
.b-mini{width:2.6rem; height:3.3rem; flex:none; display:flex; align-items:center;
  justify-content:center; background:var(--papel-fundo); border:1px solid var(--linha)}
.b-mini img{width:100%; height:100%; object-fit:contain}
.b-sem{font-family:var(--serif); font-size:1.3rem; color:var(--ouro-tinta)}
.b-doc-ic{font-size:1.15rem}
.b-txt{min-width:0}
.b-nome{display:block; font-size:1.05rem; line-height:1.25}
.b-meta{display:block; font-family:var(--sans); font-size:.76rem; line-height:1.35;
  color:var(--tinta-fraca); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.b-item .selo{min-width:0; font-size:.66rem; padding:.15rem .45rem}
/* so no celular: a linha "data — grau" e o epiteto sozinho (no lugar de .b-meta-l) */
.b-sup,.b-ep{display:none}
.b-sup{font-family:var(--sans); font-size:.76rem; line-height:1.35; color:var(--tinta-fraca)}
.b-sup b{font-weight:600; color:var(--ouro-tinta)}

.b-grupo{font-family:var(--sans); font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.09em; color:var(--tinta-fraca);
  margin:1.1rem 0 .4rem}
.b-todos{display:block; margin:.7rem 0 0; padding:.7rem; text-align:center;
  font-family:var(--sans); font-size:.86rem; text-decoration:none;
  color:var(--ouro-tinta); border:1px solid var(--linha); border-radius:.3rem}
.b-todos:hover{background:var(--ouro-fundo); color:var(--tinta)}
.b-cred{font-family:var(--sans); font-size:.66rem; color:var(--tinta-fraca);
  margin:.9rem 0 0; line-height:1.4}
.b-aviso{margin:0; padding:.9rem .4rem}
.b-atalho{display:grid; grid-template-columns:1fr auto; gap:.1rem 1rem;
  align-items:center; padding:.75rem .9rem; margin:.4rem 0;
  border:1px solid var(--ouro-tinta); border-radius:.35rem; text-decoration:none;
  background:var(--ouro-fundo)}
.b-atalho b{font-family:var(--sans); font-size:.92rem; color:var(--tinta)}
.b-atalho span{font-family:var(--sans); font-size:.78rem; color:var(--tinta-media);
  grid-column:1}
.b-atalho .b-seta{grid-column:2; grid-row:1 / span 2; font-size:1.2rem;
  color:var(--ouro-tinta)}
.b-chips{display:flex; flex-wrap:wrap; gap:.45rem; margin:1rem 0 0}
/* os mais procurados da busca: cartoes com miniatura, como os santos de
   hoje, em grade de 2 colunas (pedido do Bruno, 29/10/2026) */
.b-pop{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; margin:.6rem 0 0}
.b-pop .dia-outro{max-width:none; min-width:0; padding:.3rem .6rem .3rem .3rem; gap:.55rem}
.b-pop .dia-outro .b-mini{width:2.3rem; height:2.9rem}
.b-pop .dia-outro b{font-size:.95rem; overflow-wrap:anywhere}
.b-chips a{font-family:var(--sans); font-size:.82rem; line-height:1.2;
  padding:.45rem .8rem; border:1px solid var(--preto); border-radius:2rem;
  text-decoration:none; color:var(--tinta-media)}
.b-chips a:hover,.b-chips a:focus-visible{background:var(--ouro-fundo); color:var(--tinta)}

/* a pagina /busca/ */
.pagina-busca .busca-bloco{max-width:48rem}
.pagina-busca .busca-saida{margin-top:1rem}
.b-abas{display:flex; gap:.4rem; margin:1rem 0 .6rem; flex-wrap:wrap}
.b-abas button{font-family:var(--sans); font-size:.86rem; padding:.6rem 1rem;
  min-height:2.6rem; cursor:pointer; background:transparent; color:var(--tinta-media);
  border:1px solid var(--preto); border-radius:2rem}
.b-abas button span{opacity:.75; margin-left:.2rem}
.b-abas button[aria-selected="true"]{background:var(--ouro); color:var(--sobre-ouro);
  border-color:var(--ouro); font-weight:600}
.pagina-busca .b-grade{display:grid; grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));
  column-gap:1.2rem}
.pagina-busca .b-grade li:nth-child(2){border-top:0}
.b-mais{display:block; width:100%; margin:1rem 0 0; padding:.8rem; cursor:pointer;
  font-family:var(--sans); font-size:.88rem; background:transparent;
  color:var(--tinta); border:1px solid var(--preto); border-radius:.3rem}
.b-mais:hover{background:var(--ouro-fundo)}

/* os outros santos do dia, em cartoes, dentro da abertura da home */
.dia-outros{margin:0 0 2rem}
.dia-outros-rot{font-family:var(--sans); font-size:.74rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.09em; color:var(--ouro-tinta); margin:0 0 .8rem}
.dia-outros-lista{display:flex; flex-wrap:wrap; gap:.7rem}
.dia-outro{display:flex; align-items:center; gap:.7rem; max-width:21rem;
  padding:.45rem 1rem .45rem .45rem; border:1px solid var(--preto); border-radius:.5rem;
  background:var(--superficie); text-decoration:none; color:var(--tinta)}
.dia-outro:hover,.dia-outro:focus-visible{border-color:var(--ouro);
  box-shadow:0 0 0 2px var(--ouro-fundo)}
.dia-outro:hover b{color:var(--ouro-tinta)}
.dia-outro[aria-current]{border-color:var(--ouro); box-shadow:inset .25rem 0 0 0 var(--ouro)}
.dia-outro b{display:block; font-weight:500; font-size:1.05rem; line-height:1.2}
.dia-outro small{display:block; font-family:var(--sans); font-size:.72rem;
  color:var(--tinta-fraca); margin-top:.15rem}
@media (max-width:760px){
  /* no celular os cartoes deslizam de lado numa linha so */
  .dia-outros-lista{flex-wrap:nowrap; overflow-x:auto; padding-bottom:.4rem;
    scrollbar-width:none; overscroll-behavior-x:contain}
  .dia-outros-lista::-webkit-scrollbar{display:none}
  .dia-outro{flex:0 0 auto; max-width:16rem}
}

/* a faixa da busca na home, logo abaixo do santo do dia */
.faixa-busca{padding:1.8rem 0 2rem; background:var(--papel-fundo);
  border-bottom:1px solid var(--linha)}
.faixa-busca .busca-bloco{max-width:40rem}

/* o menu no rodape: a porta para Documentos e Sobre quando, no celular, a
   barra de baixo toma o lugar do menu de cima */
.rodape-menu{display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin:0 0 1.3rem;
  padding-bottom:1.1rem; border-bottom:1px solid var(--linha)}
.rodape-menu a{color:var(--tinta); text-decoration:none; font-size:.9rem}
.rodape-menu a:hover{text-decoration:underline; text-decoration-color:var(--ouro)}

.barra-baixo{display:none}

/* ------------------------------------------------- o verbete, repaginado */
/* As acoes - compartilhar, copiar o link - ficam logo abaixo do nome: quem
   quer mandar o santo do dia para a familia no WhatsApp nao deve precisar
   rolar a biografia inteira para achar o botao. */
.acoes{display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.6rem}
.acoes a,.acoes button{display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--sans); font-size:.84rem; line-height:1; cursor:pointer;
  padding:.6rem .95rem; min-height:2.5rem; border-radius:2rem; text-decoration:none;
  border:1px solid var(--preto); background:transparent; color:var(--tinta)}
.acoes a:hover,.acoes button:hover{background:var(--ouro-fundo)}
.acoes .zap{background:var(--ouro); color:var(--sobre-ouro); border-color:var(--ouro);
  font-weight:600}
.acoes .zap:hover{background:var(--ouro-tinta); color:var(--papel)}
.pe-lista.acoes{margin-top:2.25rem}
.acoes svg{width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.v-tempo{font-family:var(--sans); font-size:.78rem; color:var(--tinta-fraca);
  margin:-.6rem 0 1.2rem}
/* a procedencia continua la, inteira - so recolhida. Ela e honestidade com o
   leitor, nao a primeira coisa que ele veio ler. */
.fontes{margin:2.5rem 0 0; max-width:var(--texto); border-top:1px solid var(--linha);
  padding-top:.4rem}
.fontes summary{cursor:pointer; font-family:var(--sans); font-size:.86rem;
  color:var(--tinta-media); padding:.7rem 0; list-style-position:inside}
.fontes summary:hover{color:var(--tinta)}
.fontes[open] summary{color:var(--tinta)}
.fontes p{max-width:var(--texto)}
.relacionados{margin:2.5rem 0 0; max-width:var(--texto)}
.relacionados h2{font-size:1.3rem; font-weight:500; margin:0 0 .3rem}
.relacionados .aviso{margin:0 0 .5rem}

/* ------------------------------------------------------------- telefone */
@media (max-width:760px){
  /* a barra de baixo entra e o menu de cima sai: o cabecalho que gruda
     volta a ser uma linha so, e a leitura ganha o espaco */
  /* o aviso de cookies sobe acima da barra de atalhos */
  .consent{bottom:calc(4.6rem + env(safe-area-inset-bottom))}
  .barra-baixo{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:25;
    background:var(--papel); border-top:1px solid var(--preto);
    padding:.25rem .2rem calc(.25rem + env(safe-area-inset-bottom))}
  .barra-baixo a{flex:1 1 0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:.18rem; min-height:3.1rem; text-decoration:none;
    font-family:var(--sans); font-size:.68rem; color:var(--tinta-fraca)}
  .barra-baixo a[aria-current],.barra-baixo .barra-mais[aria-current]{color:var(--ouro-tinta)}
  .barra-baixo .barra-mais{flex:1 1 0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:.18rem; min-height:3.1rem; background:transparent; border:0;
    padding:0; cursor:pointer; font-family:var(--sans); font-size:.68rem; color:var(--tinta-fraca)}
  .barra-baixo .barra-mais[aria-expanded="true"]{color:var(--ouro-tinta)}
  .barra-baixo .barra-menu{position:fixed; right:.5rem; z-index:26;
    bottom:calc(3.9rem + env(safe-area-inset-bottom)); min-width:11rem;
    background:var(--papel); border:1px solid var(--ouro); border-radius:.5rem;
    box-shadow:0 .4rem 1.2rem rgba(0,0,0,.45); padding:.3rem}
  .barra-baixo .barra-menu:not([hidden]){display:block}
  .menu-aberto .fab{display:none}
  .barra-baixo .barra-menu a{display:block; flex:none; min-height:0; padding:.75rem .9rem;
    font-size:1rem; color:var(--tinta); border-radius:.35rem; text-align:left}
  .barra-baixo .barra-menu a[aria-current]{color:var(--ouro-tinta); background:var(--ouro-fundo)}
  .barra-baixo svg{width:1.4rem; height:1.4rem; fill:none; stroke:currentColor;
    stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
  body{padding-bottom:calc(4rem + env(safe-area-inset-bottom))}
  .topo-i .menu-faixa{display:none}
  .apoie-topo{display:inline-flex}
  .topo .busca-abre span{display:none}
  .topo .busca-abre{padding:.45rem .6rem}
  .barra-baixo .busca-abre{border:0; border-radius:0; padding:0; min-height:3.1rem;
    font-size:.68rem; gap:.18rem}
  .b-dlg{width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0;
    border:0; border-radius:0}
  .b-dlg-i{max-height:100dvh; height:100%}
  .b-dest{grid-template-columns:5.5rem 1fr; gap:.8rem; padding:.8rem}
  .b-dest-nome{font-size:1.3rem}
  .b-dest-txt{-webkit-line-clamp:4; line-clamp:4}
  .b-item .selo{display:none}
  /* o mesmo desenho das listas: "data — grau" em cima, nome, epiteto */
  .b-item .b-sup,.b-item .b-ep{display:block}
  .b-item .b-meta-l{display:none}
  .pagina-busca .b-grade{grid-template-columns:1fr}

  body{font-size:1.1rem; line-height:1.7}
  /* so as laterais: o atalho 'padding' aqui zerava o respiro de cima
     que a classe .folha da as paginas internas */
  .env{padding-left:1rem; padding-right:1rem}
  .folha{padding-top:1.9rem; padding-bottom:2rem}
  .dia{padding:1.7rem 0 1.9rem}
  .dia-grade,.v-grade{grid-template-columns:1fr; gap:1.5rem}
  /* no celular nao ha duas colunas: a busca vai para cima do dia, que e a
     ordem em que o polegar alcanca */
  .dia-topo{flex-direction:column-reverse; gap:1.4rem; margin-bottom:1.4rem}
  .busca-topo{flex:1 1 auto; width:100%}
  .dia-topo .dia-data{margin:0}
  .retrato{max-width:14rem; margin-left:auto; margin-right:auto}
  /* Cada linha da lista no celular (pedido do Bruno, 29/10/2026: "tem a
     data, traco, beato, santo"): 1.a linha miuda "12 de julho — Santos", com
     o grau em texto dourado e sem a etiqueta; 2.a o nome; 3.a o epiteto numa
     linha so, com reticencias. A busca (.b-sup, .b-ep) segue o mesmo desenho. */
  .verbetes li{grid-template-columns:auto 1fr; column-gap:0; row-gap:.15rem}
  .verbetes .vd{grid-row:1; grid-column:1; font-size:.82rem}
  .verbetes .vd:empty{display:none}
  .verbetes .vn{grid-row:2; grid-column:1 / -1}
  .verbetes .ve{max-width:100%}
  .verbetes li > .selo{grid-row:1; grid-column:2; justify-self:start; min-width:0;
    background:none; border:0; padding:0; font-size:.82rem; font-weight:600;
    color:var(--ouro-tinta); text-align:left}
  .verbetes li:has(> .vd:not(:empty)) > .selo::before{content:"—";
    margin:0 .35em; color:var(--tinta-fraca); font-weight:400}
  .menu{width:100%; margin-left:0; gap:1rem}
  /* O cabecalho gruda, entao cada linha dele custa altura de leitura o tempo
     TODO, em toda rolagem. As seis palavras nao cabem numa linha de celular,
     e em duas linhas o cabecalho comia 160px de uma tela de 780 - um quinto
     da leitura, sempre. Entao o menu vira uma faixa de uma linha so, que
     desliza com o dedo: o cabecalho cai para duas linhas e nenhum item se
     perde, fica todo a um arrasto de distancia. */
  .topo-i .menu{max-width:none; justify-content:flex-start;
                gap:.1rem 1.15rem; width:100%;
                flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
                scrollbar-width:none; -ms-overflow-style:none}
  .topo-i .menu::-webkit-scrollbar{display:none}
  .topo-i .menu a{white-space:nowrap; flex:0 0 auto}
  /* a sombrinha na borda direita avisa que ha mais palavras la adiante */
  .menu-faixa{display:block; order:3; position:relative; width:100%}
  .menu-faixa::after{content:""; position:absolute; top:0; bottom:0;
                             right:0; width:1.6rem; pointer-events:none;
                             background:linear-gradient(to right,
                               rgba(0,0,0,0), var(--papel))}
  /* grudado, ele rouba altura da leitura: encolhe a folga */
  .topo-i{gap:.35rem 1.5rem; padding-top:.7rem; padding-bottom:.7rem}
  .topo-i .marca{margin-right:0; order:1}
  /* no celular: marca a esquerda e os ajustes a direita na MESMA linha;
     o menu cai inteiro para a linha de baixo */
  .ajustes{order:2; margin-left:auto}
  .topo-i .menu{order:3}
  .fases{grid-template-columns:repeat(2,1fr); gap:.7rem}
  .fase figcaption{font-size:.72rem}
  /* no celular a galeria do alto vira uma faixa que corre de lado, e o
     retrato desce para depois do texto: o nome e as fases cabem na
     primeira tela, sem rolar */
  .v-grade.com-fases > div:first-child:not(:last-child){order:2}
  .fases-topo .fases{display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:.6rem; margin-right:-1rem; padding-right:1rem; padding-bottom:.3rem}
  .fases-topo .fase{flex:0 0 44%; scroll-snap-align:start}
  .meses{grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr))}
  /* miudezas que no monitor passam e no celular viram formiga */
  .selo{font-size:.79rem}
  .lit-grau{font-size:.7rem}
  .lit-rot{font-size:.8rem}
  .retrato figcaption,.fonte{font-size:.78rem}
}
@media (max-width:420px){
  .fases{grid-template-columns:1fr 1fr}
  .marca{font-size:1.35rem}
  .meses{grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr))}
}

/* ------------------------------------------- seletor de data, "Data 27 outubro" */
/* No modelo do "Santo do Dia" da Vatican News, com o marrom no lugar do
   vermelho. O dia de hoje leva um anel; o dia escolhido, o marrom cheio. */
.sel-data{position:relative; margin:0 0 1.25rem; font-family:var(--sans)}
.sel-linha{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.sel-ico svg{display:block; width:1.25rem; height:1.25rem; fill:none; stroke:var(--ouro);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.sel-rot{font-size:.8rem; color:var(--tinta-fraca); text-transform:uppercase;
  letter-spacing:.06em}
.sel-botao{display:inline-flex; align-items:center; gap:.35rem; min-height:2.5rem;
  padding:.35rem .8rem; border:1px solid var(--preto); border-radius:2rem;
  background:transparent; color:var(--ouro-tinta); font:600 1rem var(--sans); cursor:pointer}
.sel-botao:hover,.sel-botao[aria-expanded="true"]{background:var(--ouro-fundo)}
.sel-botao svg{width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .15s}
.sel-botao[aria-expanded="true"] svg{transform:rotate(180deg)}
.sel-cal{position:absolute; z-index:30; top:calc(100% + .4rem); left:0; width:18.5rem;
  max-width:calc(100vw - 2rem); padding:.85rem; background:var(--papel);
  border:1px solid var(--preto); border-radius:.75rem; box-shadow:0 8px 28px rgba(0,0,0,.18)}
.sel-cal[hidden]{display:none}
.sel-cab{display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem}
.sel-mes{font-weight:600; font-size:.95rem; color:var(--tinta)}
.sel-ant,.sel-seg{width:2.4rem; height:2.4rem; border:0; border-radius:50%;
  background:transparent; color:var(--ouro-tinta); font-size:1.5rem; line-height:1; cursor:pointer}
.sel-ant:hover,.sel-seg:hover{background:var(--ouro-fundo)}
.sel-sem,.sel-grade{display:grid; grid-template-columns:repeat(7,1fr); gap:.15rem;
  text-align:center}
.sel-sem span{font-size:.72rem; color:var(--tinta-fraca); padding:.2rem 0}
.sel-dia{aspect-ratio:1; min-height:2.25rem; border:1px solid transparent; border-radius:50%;
  background:transparent; color:var(--tinta); font:.88rem var(--sans); cursor:pointer;
  padding:0}
.sel-dia:hover{background:var(--ouro-fundo)}
.sel-hoje{border-color:var(--ouro); color:var(--ouro-tinta); font-weight:600}
.sel-dia[aria-pressed="true"]{background:var(--ouro); border-color:var(--ouro);
  color:var(--sobre-ouro); font-weight:600}
/* o anel do site (cinza ralo) some sobre o dia; aqui o foco e marrom */
.sel-data :focus-visible{outline:2px solid var(--ouro); outline-offset:2px}
.sel-titulo{font-family:var(--sans); font-size:.8rem; color:var(--tinta-fraca); margin:0 0 .3rem}
.sel-secao{margin:0 0 2rem}
.sel-lista li{grid-template-columns:1fr auto}
.sel-lista .vn a{margin-left:0}
@media (max-width:760px){ .sel-lista li{grid-template-columns:1fr} }
.dia .sel-data{margin-bottom:.9rem}

/* ------------------------------------------------------------ dedo, nao mouse */
/* Vale para telefone e tablet (pointer:coarse), nao para quem usa mouse.
   O dedo cobre uns 9 mm: um link de 17 px de altura e um alvo que erra. */
@media (pointer:coarse){
  /* a LINHA INTEIRA da lista vira o botao, nao so as letras do nome */
  .verbetes li,.docs li{position:relative; padding-top:.95rem; padding-bottom:.95rem}
  .verbetes .vn a::after,.docs .dt a::after{content:""; position:absolute;
                                            inset:0; z-index:1}
  .verbetes .vn a,.docs .dt a{position:static}
  .verbetes .selo,.docs .dm{position:relative; z-index:2}

  .topo-i .menu a{padding:.5rem 0}
  .trilha{font-size:.82rem}
  .trilha a{display:inline-block; padding:.4rem 0; margin:-.4rem 0}
  .mes{padding:1.1rem 1rem}
  .lit-fonte a,.fonte a{display:inline-block; padding:.35rem 0}
  .busca{font-size:1rem; padding:.85rem .9rem}
  .busca-btn{width:3.3rem; min-height:3.1rem}
}
/* --------------------------------------------- celular: primeira tela */
/* Pedido do Bruno em 29/10/2026, com prints do celular: o topo de cada aba
   comia a primeira tela inteira - na home a ilustracao do santo ficava
   cortada; na Liturgia, Santos e Calendario o conteudo so aparecia depois de
   rolar. Tudo aqui vale so abaixo de 760px: o desktop fica como estava. */
@media (max-width:760px){
  .topo-i{padding-top:.6rem; padding-bottom:.6rem}
  .voltar .env{padding-top:.3rem; padding-bottom:.3rem}
  .voltar .zap{min-height:2.2rem; padding-top:.3rem; padding-bottom:.3rem; font-size:.85rem}
  .folha{padding-top:.9rem}
  .trilha{margin-bottom:.3rem}
  .titulo-pagina{font-size:1.75rem; line-height:1.15; margin-bottom:.35rem}
  .intro{font-size:.8rem; line-height:1.45; margin-bottom:.8rem}
  /* home: data, "Hoje...", "Os N santos de hoje" e os cartoes mais juntos,
     para a ilustracao do santo caber quase inteira na primeira tela */
  .dia{padding-top:.7rem; padding-bottom:1.5rem}
  .dia .sel-data{margin-bottom:.35rem}
  .dia-data{margin-bottom:.6rem}
  .dia-outros{margin-bottom:.5rem}
  .dia-outros-rot{margin-bottom:.4rem}
  .dia-outro{padding:.25rem .8rem .25rem .3rem; gap:.55rem}
  .dia-outro .b-mini{width:2.1rem; height:2.7rem}
  .dia-outro b{font-size:.98rem}
  .dia-grade .retrato{margin-top:.3rem}
  /* Liturgia: o calendario do mes vira um seletor de data, como na home */
  .lit-sel.sel-linha{display:flex; margin:0 0 .5rem}
  .cal-lit.fechado{display:none}
  #liturgia-do-dia{margin-top:1rem}
  /* Calendario: os cartoes dos meses mais baixos */
  .mes{padding-top:.7rem; padding-bottom:.7rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* CENARIO DAS LATERAIS (Bruno, 30/10/2026): pinturas sacras recriadas por IA
   nas faixas vazias ao lado da coluna, so na home. So em tela larga; no
   celular nem existe (o JS nao monta e nao baixa imagem). */
.cenario{display:none}
@media (min-width:88rem){
  .cenario{display:block; position:fixed; top:var(--topo-alt,0px); bottom:0; z-index:-1;
           width:calc((100vw - var(--col)) / 2); overflow:hidden;
           pointer-events:none}
  .cenario.esq{left:0;
    -webkit-mask-image:linear-gradient(to right,#000 35%,transparent 100%);
            mask-image:linear-gradient(to right,#000 35%,transparent 100%)}
  .cenario.dir{right:0;
    -webkit-mask-image:linear-gradient(to left,#000 35%,transparent 100%);
            mask-image:linear-gradient(to left,#000 35%,transparent 100%)}
  .cenario i{position:absolute; inset:0; background:center/cover no-repeat;
             opacity:0; transition:opacity 3s ease-in-out; transform-origin:50% 0;
             filter:brightness(.6) saturate(.9)}
  .cenario i.vis{opacity:1; animation:cenario-zoom 16s linear forwards}
  /* tema claro: a pintura se apaga para o branco, mais leve */
  :root[data-tema="claro"] .cenario i{filter:saturate(.85)}
  :root[data-tema="claro"] .cenario i.vis{opacity:.55}
  /* legenda: titulo + frase curta, embaixo da pintura e acima da marca */
  .cenario-leg{position:fixed; bottom:8vh; z-index:-1; margin:0; padding:0 1.2rem;
               box-sizing:border-box; width:calc((100vw - var(--col)) / 2);
               text-align:center; color:#f3eadf; text-shadow:0 1px 6px rgba(0,0,0,.9);
               opacity:0; transition:opacity .9s ease-in-out; pointer-events:none}
  .cenario-leg.esq{left:0}
  .cenario-leg.dir{right:0}
  .cenario-leg.vis{opacity:.95}
  .cenario-leg .cl-marca{display:flex; align-items:center; justify-content:center;
    gap:.5rem; margin-top:1.1rem; opacity:.85}
  .cenario-leg .cl-marca img{width:1.55rem; height:auto; display:block;
    filter:drop-shadow(0 1px 4px rgba(0,0,0,.8))}
  .cenario-leg .cl-marca em{font-family:var(--serif); font-style:normal; font-size:1.3rem;
    letter-spacing:.01em; line-height:1}
  :root[data-tema="claro"] .cenario-leg .cl-marca img{filter:brightness(0) opacity(.75)}
  .cenario-leg b{display:block; font-size:1rem; line-height:1.3}
  .cenario-leg span{display:block; margin-top:.3rem; font-size:.82rem; font-style:italic; line-height:1.35}
  :root[data-tema="claro"] .cenario-leg{color:#3b2a1a; text-shadow:0 1px 4px rgba(255,255,255,.95)}
}
.cenario-leg{display:none}
@media (min-width:88rem){.cenario-leg{display:block}}
@keyframes cenario-zoom{from{transform:scale(1.02)} to{transform:scale(1.14)}}

/* ================== T-0023: conteudos diarios, video, coluna, grade ===== */
/* os quatro botoes do Santo Diario, acima das abas das leituras */
.lit-extras{margin:0 0 1.1rem; max-width:var(--texto)}
.lit-extras-bts{display:flex; flex-wrap:wrap; gap:.4rem}
.lit-extra-bt{font-family:var(--sans); font-size:.82rem; line-height:1; cursor:pointer;
  padding:.6rem .95rem; min-height:2.5rem; border-radius:2rem;
  border:1px solid var(--ouro); background:var(--ouro-fundo); color:var(--ouro-tinta); font-weight:600}
.lit-extra-bt:hover{background:var(--ouro); color:var(--sobre-ouro)}
.lit-extra-bt[aria-expanded="true"]{background:var(--ouro); color:var(--sobre-ouro);
  box-shadow:0 0 0 2px var(--papel), 0 0 0 4px var(--ouro)}
.lit-extra-painel{margin:.9rem 0 0; padding:1rem 1.15rem; border:1px solid var(--ouro);
  border-radius:.6rem; background:var(--superficie)}
.lit-extra-painel[hidden]{display:none}
.lit-extra-painel h3{font-family:var(--sans); font-size:.98rem; font-weight:600; margin:0 0 .15rem}
.lit-extra-painel .le-sub{font-family:var(--serif); font-style:italic; color:var(--tinta-media);
  margin:0 0 .7rem}
.lit-extra-painel p{margin:0 0 .8rem; line-height:1.7}
.lit-extra-painel .le-assina{font-family:var(--sans); font-size:.74rem; color:var(--tinta-fraca);
  margin:.4rem 0 0; padding-top:.55rem; border-top:1px solid var(--linha)}
.lit-extra-painel .selo-processando{margin:0}

/* a coluna da esquerda: processo -> imagem -> video (T-0028) */
.col-lateral{display:flex; flex-direction:column; gap:1.3rem; min-width:0}
.col-causa{border:1px solid var(--linha); border-radius:.5rem; padding:.8rem .85rem .75rem;
  background:var(--superficie)}
.col-causa-h{font-family:var(--sans); font-size:.72rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ouro-tinta); margin:0 0 .65rem}
.col-causa .escada{margin:0; max-width:none}
.col-causa .escada li{padding:0 0 .7rem 1.25rem}
.col-causa .escada li::before{width:.62rem; height:.62rem; left:-.34rem; top:.28rem}
.col-causa .escada .agora::before{box-shadow:0 0 0 .2rem var(--ouro-fundo)}
.col-causa .degrau{font-size:.8rem; line-height:1.3}
.col-causa .degrau-d{display:block; font-size:.72rem; line-height:1.35; overflow-wrap:anywhere}
.col-causa .degrau-obs{display:block; font-size:.7rem}
.col-lateral .retrato{margin:0}

/* o video do santo: cartao compacto; o player so nasce no clique */
.video-santo{border:1px solid var(--preto); border-radius:.5rem; background:var(--superficie);
  padding:.6rem}
.vs-tit{font-family:var(--sans); font-size:.72rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ouro-tinta); margin:0 0 .5rem}
.vs-capa{display:flex; align-items:center; gap:.7rem; width:100%; padding:0; cursor:pointer;
  background:transparent; border:0; color:var(--tinta); text-align:left}
.vs-capa img{width:3.6rem; aspect-ratio:9/16; height:auto; object-fit:cover; flex:none;
  border:1px solid var(--linha); border-radius:.3rem; background:var(--papel)}
.vs-play{display:inline-flex; align-items:center; gap:.4rem; font-family:var(--sans);
  font-size:.86rem; font-weight:600; padding:.55rem .9rem; min-height:2.5rem; border-radius:2rem;
  border:1px solid var(--ouro); background:var(--ouro); color:var(--sobre-ouro)}
.vs-capa:hover .vs-play,.vs-capa:focus-visible .vs-play{box-shadow:0 0 0 3px var(--ouro-fundo)}
.vs-player{display:block; width:100%; aspect-ratio:9/16; height:auto; max-height:80vh;
  background:#000; border-radius:.3rem}
.vs-nota{font-family:var(--sans); font-size:.68rem; color:var(--tinta-fraca); line-height:1.35;
  margin:.5rem 0 0}
.vs-aviso{margin:0}

/* Os santos de hoje: quatro colunas iguais, 4+4+3, cartoes do mesmo tamanho.
   So neste bloco: a busca reaproveita o .dia-outro e fica como estava. */
.dia-outros .dia-outros-lista{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:1fr; gap:.55rem; overflow:visible; flex-wrap:initial; padding-bottom:0}
.dia-outros .dia-outro{max-width:none; min-width:0; height:100%; flex:initial;
  display:grid; grid-template-columns:2.4rem minmax(0,1fr); align-items:center; gap:.6rem;
  padding:.4rem .6rem .4rem .4rem}
.dia-outros .dia-outro .b-mini{width:2.4rem; height:3rem}
.dia-outros .dia-outro b{font-size:.9rem; line-height:1.2; min-height:3.6em;
  display:flex; align-items:center; overflow-wrap:anywhere; hyphens:auto}
.dia-outros .dia-outro b.longo{font-size:.8rem}
.dia-outros .dia-outro small{font-size:.68rem; line-height:1.25; min-height:2.5em}
@media (max-width:1000px){
  .dia-outros .dia-outros-lista{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .dia-outros .dia-outros-lista{grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem}
  .dia-outros .dia-outro{padding:.3rem .45rem .3rem .3rem; gap:.45rem;
    grid-template-columns:2.1rem minmax(0,1fr)}
  .dia-outros .dia-outro .b-mini{width:2.1rem; height:2.7rem}
  .dia-outros .dia-outro b{font-size:.84rem; min-height:0}
  .dia-outros .dia-outro b.longo{font-size:.78rem}
  .dia-outros .dia-outro small{font-size:.64rem; min-height:0}
  /* os quatro botoes cabem numa linha so no celular */
  .lit-extras-bts{gap:.3rem}
  .lit-extra-bt{padding:.55rem .7rem; font-size:.8rem}
  /* a coluna da esquerda desce para depois da historia: nome e texto primeiro */
  .col-lateral.com-causa{order:2}
  .col-lateral .retrato{max-width:14rem; margin-left:auto; margin-right:auto}
}
@media (max-width:300px){
  .dia-outros .dia-outros-lista{grid-template-columns:1fr}
}

/* Liturgia: o botao-calendario (mes e dia), e a grade recolhida */
.lit-cab{display:flex; align-items:center; justify-content:space-between; gap:1rem 1.5rem;
  flex-wrap:wrap; margin:0 0 .6rem}
.lit-cab .aviso.intro{margin:0; flex:1 1 18rem}
.cal-botao{display:inline-flex; align-items:center; gap:.75rem; cursor:pointer;
  padding:.35rem .9rem .35rem .35rem; border-radius:.6rem; border:1px solid var(--ouro);
  background:var(--superficie); color:var(--tinta); font-family:var(--sans); text-align:left}
.cal-botao:hover,.cal-botao[aria-expanded="true"]{background:var(--ouro-fundo)}
.cb-folha{display:flex; flex-direction:column; width:3.3rem; flex:none; overflow:hidden;
  border-radius:.4rem; border:1px solid var(--ouro); background:var(--papel); text-align:center}
.cb-mes{display:block; background:var(--ouro); color:var(--sobre-ouro); font-size:.66rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:.18rem 0}
.cb-dia{display:block; font-family:var(--serif); font-size:1.65rem; font-weight:600; line-height:1.15;
  color:var(--ouro-tinta); padding:.05rem 0 .12rem}
.cb-txt{display:flex; flex-direction:column; gap:.15rem}
.cb-data{font-size:.92rem; font-weight:600}
.cb-acao{display:inline-flex; align-items:center; gap:.25rem; font-size:.76rem; color:var(--ouro-tinta)}
.cb-acao svg{width:.9rem; height:.9rem; fill:none; stroke:currentColor; stroke-width:2.2;
  transition:transform .2s ease}
.cal-botao[aria-expanded="true"] .cb-acao svg{transform:rotate(180deg)}
.cal-lit.fechado{display:none}
.cal-lit{margin:0 0 0 auto}
.cal-pe{margin:.7rem 0 0; text-align:center}
.cal-hoje{font-family:var(--sans); font-size:.8rem; cursor:pointer; padding:.45rem .9rem;
  border-radius:2rem; border:1px solid var(--ouro); background:transparent; color:var(--ouro-tinta)}
.cal-hoje:hover{background:var(--ouro-fundo)}
#liturgia-do-dia{margin-top:1.2rem}

/* frases de santos para baixar (/frases/) */
.frases{list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.frase{display:flex; flex-direction:column; border:1px solid var(--preto); border-radius:.6rem;
  background:var(--superficie); padding:.6rem}
.frase[hidden]{display:none}
.frase figure{margin:0; flex:1}
.frase img{display:block; width:100%; height:auto; border-radius:.35rem}
.fr-txt{font-family:var(--serif); font-style:italic; font-size:1rem; line-height:1.45; margin:.7rem 0 .3rem}
.fr-autor{font-family:var(--sans); font-size:.8rem; font-weight:600; margin:0 0 .25rem}
.fr-nota{font-family:var(--sans); font-size:.7rem; color:var(--tinta-fraca); margin:0 0 .7rem}
.fr-baixar{display:flex; align-items:center; justify-content:center; min-height:2.6rem;
  border-radius:2rem; background:var(--ouro); color:var(--sobre-ouro); font-family:var(--sans);
  font-size:.88rem; font-weight:600; text-decoration:none}
.fr-baixar:hover{box-shadow:0 0 0 3px var(--ouro-fundo)}
@media (max-width:760px){ .frases{grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem}
  .frase{padding:.4rem} .fr-txt{font-size:.88rem} }
@media (max-width:360px){ .frases{grid-template-columns:1fr} }

/* cabecalho: "Apoie" e "Procurar santo" (Bruno, T-0023) */
@media (min-width:761px){
  .topo .busca-abre{padding:.45rem 1.1rem; min-width:10.5rem; justify-content:center}
}