/* liturgiadiaria.css — estilos da página /liturgiadiaria/ e das páginas de cada dia
   (scripts/build-paginas-liturgia.mjs). */

@font-face {
  font-family: 'Inria Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/inria-serif-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inria Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/inria-serif-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inria Serif'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/inria-serif-700.woff2') format('woff2');
}
/* Georgia ajustada para ocupar o mesmo espaço da Inria: o texto não se mexe quando a fonte chega */
@font-face {
  font-family: 'Inria reserva';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 102.9%; ascent-override: 95.2%; descent-override: 21.4%; line-gap-override: 0%;
}
/* Layout do Figma "Catecismo" › MacBook Pro 16" - 1 (node 65:3):
   lateral (título + calendário) · faixa floral · coluna de leitura · faixa floral · respiro */
:root {
  --lp-fundo: #fcfaf7;
  --lp-tinta: #000;
  --lp-texto: rgba(0, 0, 0, 0.67);
  --lp-suave: rgba(0, 0, 0, 0.45);
  --lp-linha: rgba(0, 0, 0, 0.08);
  --lp-vermelho: #cb2e2e; /* o mesmo da cruz do divisor */
  --lp-faixa-w: 120px;
  --font-titulo: 'Times New Roman', Times, Georgia, serif;
  --font-leitura: 'Inria Serif', 'Inria reserva', Georgia, serif;
  --font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html, body { background: var(--lp-fundo); min-height: 100%; }
body { font-family: var(--font-leitura); color: var(--lp-texto); }

.lp-pagina {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) var(--lp-faixa-w) minmax(0, 500px) var(--lp-faixa-w) minmax(290px, 1fr);
  min-height: 100vh;
}

/* ── Lateral ─────────────────────────────────────────────────────────── */
.lp-lateral {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  padding: 1.5rem 2rem 3rem 1.95rem;
}

.lp-cabeca { position: relative; }
.lp-titulo {
  display: flex;
  flex-direction: column;
  font-family: var(--font-titulo);
  font-style: italic;
  font-weight: 400;
  font-size: 78px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--lp-tinta);
  margin: 0 0 0.15rem; /* a linha da semana fica colada na data */
}
/* "Liturgia Diária" pequeno em cima; a data grande no lugar onde o título entrou */
.lp-marca { font-size: 0.3em; line-height: 1; letter-spacing: -0.01em; margin-bottom: 0.3em; color: var(--lp-cor-titulo, inherit); transition: color 0.3s; }
.lp-titulo-data { line-height: 0.95; white-space: nowrap; }

/* Entrada (liturgiadiaria.js › abrirCabecalho): o título grande entra e dá lugar à data */
.lp-intro {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-titulo);
  font-style: italic;
  font-size: 78px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--lp-tinta);
  pointer-events: none;
  white-space: nowrap;
}
.lp-intro span { display: block; will-change: transform, opacity, filter; }

.lp-data {
  min-height: 1.5em; /* alturas reservadas: o conteúdo chega sem empurrar a página */
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--lp-suave);
  margin: 0 0 0.35rem;
}
.lp-data::first-letter { text-transform: uppercase; }
.lp-data:empty, .nome-dia:empty { display: none; }

.tempo-wrap { display: flex; align-items: center; gap: 0.5rem; min-height: 1.15rem; margin-bottom: 0.35rem; }
.cor-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tempo-badge {
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-suave);
}

.nome-dia {
  min-height: 1.45em;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--lp-tinta);
  margin: 0;
}
.nome-dia .complemento {
  display: block;
  margin-top: 0.15rem;
  font-style: normal;
  font-size: 0.8rem;
  color: var(--lp-suave);
}

.lp-nav { display: none; }

/* ── Calendário ──────────────────────────────────────────────────────── */
/* Coluna da direita, depois do ornamento; fica parada enquanto a leitura rola */
.lp-direita {
  grid-column: 5;
  grid-row: 1;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto; /* o texto sobre o santo pode passar da altura da tela */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 3.25rem 2rem 3rem 2.25rem;
}
.cal-wrap { max-width: 257px; min-height: 163px; } /* altura de um mês de 5 semanas; o de 6 cresce já no primeiro desenho */
.cal-header { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin-bottom: 0.6rem; }
/* "Hoje": aparece quando o dia aberto não é o de hoje; fica à esquerda sem deslocar o mês */
.cal-hoje {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--lp-cor-dia, var(--color-primary));
  background: color-mix(in srgb, var(--lp-cor-dia, var(--color-primary)) 10%, transparent);
  border: 0;
  border-radius: 100px;
  padding: 0.28rem 0.6rem;
  cursor: pointer;
  animation: cal-hoje-entra 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.cal-hoje:hover { background: color-mix(in srgb, var(--lp-cor-dia, var(--color-primary)) 18%, transparent); }
@keyframes cal-hoje-entra { from { opacity: 0; transform: translate(-6px, -50%); } to { opacity: 1; transform: translateY(-50%); } }
/* O selo do tempo litúrgico ficou redundante: a linha da semana já diz ("… do Tempo Comum") */
.tempo-wrap { display: none; }
.cal-mes { min-width: 7.5rem; text-align: center; }
.cal-mes { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; color: var(--lp-tinta); }
.cal-btn {
  background: none; border: none; cursor: pointer; color: var(--lp-suave);
  font-size: 1rem; padding: 0.1rem 0.4rem; border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}
.cal-btn:hover { color: var(--lp-tinta); background: rgba(0, 0, 0, 0.05); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow {
  font-family: var(--font-sans); font-size: 0.56rem; font-weight: 600; text-align: center;
  color: var(--lp-suave); padding: 0.2rem 0; text-transform: uppercase;
}
.cal-dia {
  position: relative;
  font-family: var(--font-sans); font-size: 0.66rem; text-align: center; padding: 0.26rem 0 0.5rem; /* espaço para a bolinha dos dias especiais */
  border-radius: 4px; cursor: pointer; color: var(--lp-suave); text-decoration: none;
  transition: background 0.1s, color 0.1s;
}
/* Dias especiais: bolinha embaixo do número (azul-acinzentado para Nossa Senhora, dourado para santos) */
.cal-dia.tem-destaque::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: #8fa6c4;
}
.cal-dia.destaque-santo::after { background: #c9ab6b; }
.cal-dia.hoje.tem-destaque::after { background: rgba(255, 255, 255, 0.85); }

/* Dica do dia especial */
.lp-dica {
  position: fixed;
  z-index: 60;
  max-width: 13.5rem;
  padding: 0.5rem 0.7rem 0.55rem;
  border-radius: 8px;
  background: #fffdf9;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 10px 28px rgba(30, 24, 16, 0.14), 0 2px 6px rgba(30, 24, 16, 0.06);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transform-origin: var(--seta-x, 50%) bottom;
  transition: opacity 0.18s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.lp-dica.abaixo { transform-origin: var(--seta-x, 50%) top; transform: translateY(-4px) scale(0.98); }
.lp-dica.visivel { opacity: 1; transform: none; }
.lp-dica.medindo { transition: none; visibility: hidden; opacity: 1; }
.lp-dica::after {
  content: '';
  position: absolute;
  left: var(--seta-x, 50%);
  bottom: -5px;
  width: 9px;
  height: 9px;
  margin-left: -5px;
  background: #fffdf9;
  border-right: 1px solid rgba(0, 0, 0, 0.07);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  transform: rotate(45deg);
}
.lp-dica.abaixo::after { bottom: auto; top: -5px; transform: rotate(225deg); }
.lp-dica-tipo {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--lp-suave);
}
.lp-dica-tipo::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #8fa6c4; }
.lp-dica-santo::before { background: #c9ab6b; }
.lp-dica-nome {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-leitura);
  font-style: italic;
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--lp-tinta);
}
.lp-dica-toque { display: block; margin-top: 0.3rem; font-size: 0.66rem; color: var(--lp-suave); }

/* Lenis (rolagem suave) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
/* --lp-cor-dia: cor litúrgica do dia aberto (liturgiadiaria.js › COR_CALENDARIO) */
.cal-dia:hover { background: color-mix(in srgb, var(--lp-cor-dia, var(--color-primary)) 10%, transparent); color: var(--lp-tinta); }
.cal-dia.hoje { background: var(--lp-cor-dia, var(--color-primary)); color: #fff; font-weight: 600; }
.cal-dia.selecionado { background: color-mix(in srgb, var(--lp-cor-dia, var(--color-primary)) 16%, transparent); color: var(--lp-cor-dia, var(--color-primary)); font-weight: 600; }
.cal-dia.vazio { cursor: default; }
.cal-dia.fora-range { opacity: 0.3; pointer-events: none; }

/* ── Faixas florais ──────────────────────────────────────────────────── */
/* Fixas: ocupam a altura da tela e ficam paradas enquanto a leitura rola */
.lp-faixa {
  grid-row: 1;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  /* Uma cor só sobre o fundo claro: o desenho vira máscara pela luminosidade
     (o claro da arte pinta de vermelho, o preto some e deixa ver a página) */
  background: var(--lp-vermelho);
  -webkit-mask: url('/assets/img/liturgia-faixa.webp') repeat-y center top / 100% auto;
  mask: url('/assets/img/liturgia-faixa.webp') repeat-y center top / 100% auto;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
}
.lp-faixa-esq { grid-column: 2; }
.lp-faixa-dir { grid-column: 4; }

/* ── Coluna de leitura ───────────────────────────────────────────────── */
.lp-main {
  --lp-main-topo: 3.25rem;
  --lp-main-lado: 2.5rem;
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  padding: var(--lp-main-topo) var(--lp-main-lado) 8rem;
}

.lp-conteudo { min-height: 70vh; } /* espaço reservado: a leitura cresce sem empurrar o rodapé */
.leitura-card { position: relative; scroll-margin-top: 5rem; } /* abaixo das abas fixas */
/* Com o ornamento em cima, a aba leva ao título da leitura, não à cruz */
.leitura-card + .leitura-card { scroll-margin-top: -5rem; }
.leitura-card.secao-menor + .leitura-card { scroll-margin-top: 5rem; }

/* Ornamento com a cruz entre as seções */
.leitura-card + .leitura-card::before,
.missa-extra::before {
  content: '';
  display: block;
  width: min(386px, 100%);
  height: 77px;
  margin: 4.5rem auto;
  background: url('/assets/img/liturgia-divisor.svg') center / contain no-repeat;
}
/* A aclamação anuncia o evangelho: os dois ficam juntos, sem ornamento entre eles */
.leitura-card.secao-menor + .leitura-card::before { display: none; }
.leitura-card.secao-menor + .leitura-card { margin-top: 2.5rem; }

.leitura-label {
  font-family: var(--font-titulo);
  font-style: italic;
  font-weight: 400;
  font-size: 65px;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--lp-tinta);
  text-transform: none;
}
.secao-menor .leitura-label { font-size: 40px; line-height: 1.3; margin-bottom: 0.35rem; }

.leitura-ref {
  font-size: 16px;
  line-height: 1.5;
  color: var(--lp-tinta);
  margin-bottom: 11px;
}

.leitura-titulo {
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--lp-tinta);
  margin: 0 0 11px;
}

.leitura-texto {
  font-size: 16px;
  line-height: 1.6;
  color: var(--lp-texto);
}
.leitura-texto p { margin: 0; }

/* Capitular: primeira letra da leitura, na mesma serifada dos títulos, cobrindo --cap-linhas
   linhas: o topo da maiúscula alinha com o topo das maiúsculas da 1ª linha e a base com a
   linha de base da última. As contas usam as métricas reais das fontes (texto: Inria Serif
   16px, entrelinha 25.6px, maiúscula 0.68, ascendente 0.976, descendente 0.223;
   capitular: Times New Roman, maiúscula 0.662, ascendente 0.891, descendente 0.216).
   ('initial-letter' faria isso sozinho, mas o Chrome só o aplica em ::first-letter, e aqui
   o número do versículo vem antes da letra.) */
.capitular {
  --cap-linhas: 4;
  --cap-l: 25.6px;                                   /* entrelinha do texto */
  --cap-topo: 7.94px;                                /* do topo da linha ao topo da maiúscula */
  --cap-base: 18.82px;                               /* do topo da linha à linha de base */
  --cap-f: calc(((var(--cap-linhas) - 1) * var(--cap-l) + var(--cap-base) - var(--cap-topo)) / 0.662);
  float: left;
  font-family: var(--font-titulo);
  font-size: var(--cap-f);
  height: calc(var(--cap-linhas) * var(--cap-l) - 1px);  /* o texto volta à margem na linha seguinte */
  line-height: calc(var(--cap-linhas) * var(--cap-l));
  margin: 0 0.06em 0 0;
  color: var(--lp-vermelho);
  /* Encaixa a linha de base da letra na linha de base da última linha que ela cobre */
  position: relative;
  top: calc((var(--cap-linhas) - 1) * var(--cap-l) + var(--cap-base)
            - var(--cap-linhas) * var(--cap-l) / 2 - 0.3375 * var(--cap-f));
}

.vers-num {
  font-size: 0.66em;
  color: var(--lp-vermelho);
  vertical-align: super;
  margin-right: 0.15em;
  user-select: none;
}

/* Salmo: refrão e estrofes em parágrafos, com uma linha de respiro */
.salmo-refrao, .acl-verso { margin-bottom: 24px; }
.salmo-r-label { margin-right: 0.3rem; color: var(--lp-tinta); }
.salmo-estrofe { margin-bottom: 24px; }
.salmo-r-sep { display: none; }
.salmo-r-sep.com-texto { display: block; margin-bottom: 24px; font-style: italic; }
.leitura-texto > :last-child { margin-bottom: 0; }

.salmo-ou, .leitura-alt-ou {
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-suave);
  margin: 0 0.35rem;
}

/* Leitura "à escolha": recolhida sob a principal */
.leitura-alt { margin-top: 1.75rem; padding-top: 0.9rem; border-top: 1px dotted rgba(0, 0, 0, 0.28); }
.leitura-alt > summary { cursor: pointer; font-size: 0.9rem; color: var(--lp-suave); }
.leitura-alt > summary .leitura-alt-ou { margin-left: 0; }
.leitura-alt[open] > summary { margin-bottom: 1rem; }

/* Outras missas do dia (vigília, noite, aurora, leituras à escolha) */
.missa-extra > summary {
  cursor: pointer;
  font-family: var(--font-titulo);
  font-style: italic;
  font-size: 40px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--lp-tinta);
  list-style-position: outside;
}
.missa-extra[open] > summary { margin-bottom: 2.5rem; }

.loading, .erro {
  font-style: italic;
  color: var(--lp-suave);
  text-align: center;
  padding: 4rem 0;
  font-size: 1rem;
}

/* ── Entrada do texto, linha a linha (liturgiadiaria.js › animarEntrada) ── */
.lp-palavra { display: inline-block; }
.lp-oculto { opacity: 0; }
.lp-entra {
  animation: lp-entrada 0.5s cubic-bezier(0.2, 0.65, 0.25, 1) both;
  animation-delay: var(--lp-atraso, 0ms);
}
@keyframes lp-entrada {
  from { opacity: 0; transform: translateY(0.4em); }
  to   { opacity: 1; transform: none; }
}
/* O desfoque não fica em cada palavra (pesa): uma única camada presa ao pé da tela desfoca o texto
   que ainda está chegando, com a intensidade sumindo para cima, como nas bordas do iOS/macOS. */
.lp-borda-desfoque {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; /* acima das faixas de ornamento */
  height: 9rem;
  pointer-events: none;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  /* Vinheta: forte nos cantos de baixo, some em direção ao centro e ao topo */
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.85), transparent 55%), radial-gradient(120% 140% at 50% 0%, transparent 45%, #000 85%);
  mask-image: linear-gradient(to top, rgba(0,0,0,.85), transparent 55%), radial-gradient(120% 140% at 50% 0%, transparent 45%, #000 85%);
  -webkit-mask-composite: source-over; mask-composite: add;
}
@media (prefers-reduced-motion: reduce) {
  .lp-oculto { opacity: 1; }
  .lp-entra { animation: none; }
}

/* ── Abas (celular) ──────────────────────────────────────────────────── */
/* Ocupa a largura toda da coluna (margens negativas = padding do .lp-main) */
/* Barra compacta (celular): quando o cabeçalho já sumiu, a data por extenso aparece no
   respiro de cima da barra das abas, e a fita volta pequena no mesmo lugar de antes (canto direito).
   Não ocupa espaço no fluxo (margem negativa) e as abas não se mexem. */
.lp-compacto {
  --lp-compacto-h: 1.25rem;
  position: sticky;
  top: 0;
  z-index: 11;
  display: flex;
  align-items: flex-end;
  height: var(--lp-compacto-h);
  margin: calc(-1 * var(--lp-main-topo)) calc(-1 * var(--lp-main-lado)) calc(-1 * var(--lp-compacto-h));
  padding: 0 var(--lp-main-lado);
  font-size: 0.7rem;
  line-height: 1;
  color: var(--lp-suave);
  white-space: nowrap;
  pointer-events: none;
}
#lp-compacto-data {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.lp-compacto-fita {
  position: absolute;
  top: 0;
  right: 3.125rem;
  width: 11px;
  height: 24px;
  background: var(--lp-cor-dia, var(--lp-suave));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0H11V24L5.5 19.5L0 24Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0H11V24L5.5 19.5L0 24Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.2s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.lp-compacto-on #lp-compacto-data { opacity: 1; transform: none; }
/* A fita só desce junto com a data da barra compacta */
.lp-compacto-on .lp-compacto-fita { opacity: 1; transform: none; transition-delay: 0.08s; }
@media (max-width: 760px) { .lp-main .lp-tabs { padding-top: 1.25rem; } } /* o respiro onde a data aparece */

/* O que sai do alto da tela ao rolar encolhe e some (liturgiadiaria.js › configurarRolagem) */
@media (max-width: 760px) {
  .lp-lateral > .lp-cabeca, .lp-lateral > .tempo-wrap, .lp-lateral > .nome-dia, .lp-lateral > .lp-avisos,
  .lp-direita > .cal-wrap, .lp-direita > .lp-avisos, .lp-direita > .lp-sobre { transform-origin: left top; }
}

.lp-tabs {
  display: flex;
  overflow-x: auto;
  gap: 0.25rem;
  min-height: 3.05rem;
  margin: 0 calc(-1 * var(--lp-main-lado)) 2.75rem;
  padding: 0.9rem calc(var(--lp-main-lado) - 0.9rem) 0;
  scrollbar-width: none;
  border-bottom: 1px solid var(--lp-linha);
  background: var(--lp-fundo);
  position: sticky;
  top: 0;
  z-index: 10;
}
.lp-tabs::-webkit-scrollbar { display: none; }
.lp-tabs a {
  display: inline-block;
  white-space: nowrap;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  color: var(--lp-suave);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.lp-tabs a.ativa { color: var(--lp-tinta); border-bottom-color: var(--lp-tinta); }

/* ── Responsivo ──────────────────────────────────────────────────────── */
/* Até 1320px: some a faixa da direita; o calendário vem logo depois do texto */
@media (max-width: 1320px) {
  .lp-pagina { grid-template-columns: 250px 88px minmax(0, 560px) 300px minmax(0, 1fr); }
  .lp-faixa-dir { display: none; }
  .lp-direita { grid-column: 4; padding: 3.25rem 1.5rem 3rem 1rem; }
  .lp-main { --lp-main-lado: clamp(1.75rem, 3.5vw, 2.75rem); }
  .lp-titulo, .lp-intro { font-size: 62px; }
}

/* Até 1080px: sem espaço para três colunas de conteúdo; o calendário volta para baixo do título */
@media (max-width: 1080px) {
  .lp-pagina { grid-template-columns: 290px 72px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  /* Tablet: título, calendário e "sobre" numa coluna só, fixa, que rola sozinha (o calendário é
     movido para dentro da lateral por liturgiadiaria.js › organizarColunas) */
  .lp-lateral { overscroll-behavior: contain; scrollbar-width: thin; }
  .lp-direita { grid-column: 1; grid-row: 2; position: static; max-height: none; overflow: visible; padding: 0 2rem 3rem 1.95rem; }
  .lp-lateral > .lp-direita { padding: 0; }
  .lp-faixa-esq, .lp-main { grid-row: 1 / span 2; }
  .cal-wrap { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--lp-linha); min-height: 184px; }
}

@media (max-width: 760px) {
  .lp-pagina { display: flex; flex-direction: column; }
  .lp-lateral { order: 1; }
  .lp-direita { order: 2; padding: 0 3.125rem 0.5rem; }
  .lp-lateral, .lp-direita { align-self: stretch; }
  .lp-main { order: 3; }
  /* Faixas nas bordas da tela, metade para fora: enfeitam sem espremer o texto */
  .lp-faixa { display: block; position: fixed; top: 0; height: 100vh; width: 56px; z-index: 20; }
  .lp-faixa-esq { left: -30px; }
  .lp-faixa-dir { right: -30px; }
  .lp-lateral { position: static; max-height: none; overflow: visible; padding: 1.75rem 3.125rem 0.5rem; }
  .lp-titulo, .lp-intro { font-size: 52px; }
  .lp-titulo-data { font-size: 68px; }
  /* Calendário centralizado e fluido: ocupa a coluna até 460px e as fontes crescem com a largura */
  .cal-wrap { margin-inline: auto; width: 100%; max-width: 460px; container-type: inline-size; }
  .cal-mes { font-size: clamp(0.72rem, 4.2cqi, 1.05rem); min-width: 0; }
  .cal-btn { font-size: clamp(1rem, 5.5cqi, 1.4rem); }
  .cal-header { gap: clamp(0.35rem, 3cqi, 1rem); margin-bottom: clamp(0.6rem, 3cqi, 1rem); }
  .cal-dow { font-size: clamp(0.56rem, 3.2cqi, 0.82rem); }
  .cal-dia { font-size: clamp(0.66rem, 4cqi, 1rem); padding: clamp(0.26rem, 1.6cqi, 0.5rem) 0 clamp(0.5rem, 2.6cqi, 0.8rem); border-radius: 6px; }
  .cal-dia.tem-destaque::after { width: 4px; height: 4px; margin-left: -2px; bottom: clamp(2px, 1cqi, 5px); }
  .lp-titulo { margin-bottom: 0.15rem; }
  .lp-tabs { margin-bottom: 2rem; }
  .leitura-card + .leitura-card { scroll-margin-top: -1.5rem; } /* ornamento menor no celular */
  .lp-main { --lp-main-topo: 0.5rem; --lp-main-lado: 3.125rem; padding-bottom: 7rem; max-width: none; }
  .leitura-label { font-size: 48px; line-height: 1.3; }
  .secao-menor .leitura-label, .missa-extra > summary { font-size: 32px; }
  .leitura-card + .leitura-card::before, .missa-extra::before { margin: 3rem auto; height: 60px; }
}

/* ── Fita da cor litúrgica ───────────────────────────────────────────── */
/* Marcador de livro pequeno, pendurado no alto da coluna do título */
.lp-pagina { position: relative; }
.lp-fita {
  --fita: #1f6e3d;
  --fita-costura: rgba(255, 255, 255, 0.35);
  --fita-borda: transparent;
  position: absolute;
  /* Linha final explícita: em item absoluto, "auto" iria até a borda do grid */
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  top: 0;
  right: 1.25rem;
  width: 16px;
  height: 38px;
  z-index: 5;
  animation: lp-fita-desce 1s cubic-bezier(0.2, 0.7, 0.25, 1) 0.1s both;
}
.lp-fita svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lp-fita-fundo { fill: var(--fita); stroke: var(--fita-borda); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lp-fita-costura { fill: none; stroke: var(--fita-costura); stroke-width: 1; stroke-dasharray: 3 2.5; vector-effect: non-scaling-stroke; }
.lp-fita[data-cor="roxo"]     { --fita: #5b2d86; }
.lp-fita[data-cor="verde"]    { --fita: #1f6e3d; }
.lp-fita[data-cor="vermelho"] { --fita: #b8282a; }
.lp-fita[data-cor="rosa"]     { --fita: #d67d9e; }
.lp-fita[data-cor="preto"]    { --fita: #262422; }
.lp-fita[data-cor="branco"]   { --fita: #f5eedc; --fita-costura: #b8972e; --fita-borda: rgba(184, 151, 46, 0.6); }
@keyframes lp-fita-desce {
  from { transform: translateY(-100%); }
  to   { transform: none; }
}

/* Desktop: a fita fica pendurada na tela, não na página — some do alto quando o
   texto rola e ela continua lá. Em item do grid dá para usar sticky (em vez de
   absolute), e o lugar continua vindo da própria célula. */
@media (min-width: 1081px) {
  .lp-fita {
    position: sticky;
    top: 0;
    right: auto;
    justify-self: end;
    align-self: start;
    margin-right: 1.25rem;
  }
}

/* ── Avisos do calendário (faltam N dias…) ───────────────────────────── */
/* Uma linha miúda sob o nome do dia; troca sozinha, ou no clique */
.lp-avisos { display: flex; align-items: flex-start; gap: 0.45rem; margin-top: 0.4rem; max-width: 22rem; }
/* Ícone do lembrete: uma fitinha, no tom pastel da cor do dia */
.lp-avisos::before {
  content: '';
  flex: none;
  width: 7px;
  height: 11px;
  margin-top: 0.22em;
  background: var(--lp-cor-titulo, var(--lp-suave));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cpath d='M0 0H7V11L3.5 8.2L0 11Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cpath d='M0 0H7V11L3.5 8.2L0 11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Desktop: o lembrete desce para o pé da coluna do título */
@media (min-width: 1081px) {
  .lp-lateral { display: flex; flex-direction: column; box-sizing: border-box; min-height: 100vh; }
  /* Fica no pé da tela, bem onde passa a camada de desfoque: precisa ser pintado
     por cima dela (backdrop-filter só embaça o que está atrás), como o "voltar ao topo" */
  .lp-avisos { margin-top: auto; padding-top: 1.5rem; position: relative; z-index: 30; }
}
.lp-aviso-texto { min-height: 1.45em; }
.lp-aviso-texto {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--lp-suave);
  cursor: pointer;
  transition: opacity 0.25s;
}
.lp-aviso-texto strong { font-weight: 400; color: var(--lp-texto); }
.lp-aviso-texto.saindo { opacity: 0; }
.lp-aviso-rotulo {
  font-family: var(--font-sans);
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-vermelho);
  margin-right: 0.4rem;
  vertical-align: 0.1em;
}

/* Só para leitores de tela e buscadores: a data completa no título da página */
.lp-so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Resumo das leituras (antes da 1ª leitura) ─────────────────────────── */
/* Abre e fecha por grid-template-rows (0fr → 1fr): dá para animar, ao contrário
   de height:auto, e não precisa de altura fixa. */
.lp-resumo {
  position: relative;
  cursor: pointer;
  display: grid;
  grid-template-rows: auto 1fr;
  margin: 0 0 1.6rem;
  padding: 1.1rem 1.25rem 1.2rem;
  background: color-mix(in srgb, var(--lp-cor-titulo, #000) 6%, transparent);
  border-radius: 6px;
  transition: grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1),
              padding-block 0.42s cubic-bezier(0.22, 1, 0.36, 1),
              margin-bottom 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
/* O cartão entra um pouco depois do resto, e uma claridade passa por ele uma vez */
.lp-resumo { animation: lp-resumo-entra 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; }
@keyframes lp-resumo-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.lp-resumo::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 30%,
    color-mix(in srgb, #fff 55%, transparent) 50%,
    transparent 70%);
  background-size: 260% 100%;
  animation: lp-resumo-luz 2.4s cubic-bezier(0.33, 0, 0.2, 1) 1s 1 both;
}
@keyframes lp-resumo-luz {
  0%   { background-position: -30% 0; opacity: 0; }
  18%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { background-position: 130% 0; opacity: 0; }
}

.lp-resumo-rotulo {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-suave);
  margin: 0 0 0.45rem;
}
.lp-resumo-texto {
  font-size: 15px; line-height: 1.65; color: var(--lp-texto); margin: 0;
  min-height: 0; overflow: hidden;      /* deixa a linha do grid encolher até 0 */
  opacity: 1; transition: opacity 0.3s ease 0.1s;
}
.lp-resumo:not(.lp-resumo-aberto) { grid-template-rows: auto 0fr; padding-block: 0.7rem; margin-bottom: 1.2rem; }
.lp-resumo:not(.lp-resumo-aberto) .lp-resumo-texto { opacity: 0; transition-delay: 0s; }
.lp-resumo-rotulo { margin-bottom: 0.45rem; }
.lp-resumo:not(.lp-resumo-aberto) .lp-resumo-rotulo { margin-bottom: 0; }
.lp-resumo-aberto .lp-resumo-texto { cursor: text; }
.lp-resumo-rotulo { display: flex; align-items: center; justify-content: space-between; }
.lp-resumo-botao {
  background: none; border: none; padding: 0.2rem 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--lp-tinta);
}
@media (max-width: 760px) {
  .lp-main > .lp-resumo,
  .lp-main > .lp-resumo:not(.lp-resumo-aberto) { margin: 0 0 0.25rem; padding-inline: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-resumo, .lp-resumo-texto { transition: none; }
  .lp-resumo { animation: none; }
  .lp-resumo::after { animation: none; opacity: 0; }
}

/* ── Outros dias (anterior · hoje · seguinte) ───────────────────────────── */
.lp-dias {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: 5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--lp-linha);
  font-size: 0.9rem;
}
.lp-dias a { color: var(--lp-suave); text-decoration: none; transition: color 0.15s; }
.lp-dias a:hover, .lp-dias a:focus-visible { color: var(--lp-tinta); }
.lp-dia-hoje {
  font-family: var(--font-sans); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.lp-dia-prox { text-align: right; }
.lp-dias + .lp-topo { margin-top: 2.5rem; }

/* ── Preloader ───────────────────────────────────────────────────────────
   Tela vermelha inteira e só o L do ícone — a forma é o contorno do próprio
   favicon, e uma "caneta" (máscara que corre o miolo da letra) vai descobrindo
   o traço, como se estivesse sendo escrito, enquanto os dados não chegam. */
.lp-preloader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: #b3161b;
  transition: opacity 0.55s ease, visibility 0.55s;
}
.lp-carregado .lp-preloader { opacity: 0; visibility: hidden; pointer-events: none; }
.lp-preloader-l { width: min(42vmin, 210px); height: auto; }
.lp-preloader-letra { fill: #fff; }
.lp-preloader-pena {
  stroke-dasharray: 1;
  animation: lp-preloader-escreve 2.4s ease-in-out infinite;
}
/* 1 → 0: a caneta escreve; 0 → -1: a ponta de trás alcança e apaga no mesmo sentido */
@keyframes lp-preloader-escreve {
  0%   { stroke-dashoffset: 1; }
  48%  { stroke-dashoffset: 0; }
  62%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-preloader { transition-duration: 0.2s; }
  .lp-preloader-pena { animation: none; stroke-dasharray: none; }
}

/* Até a animação de entrada assumir, o texto pronto do HTML fica escondido (sem piscar) */
.lp-anima:not(.lp-pronto) .lp-conteudo { opacity: 0; }
.lp-anima:not(.lp-cabeca-pronta) :is(.lp-titulo, .lp-data, .tempo-wrap, .nome-dia, .lp-avisos) { opacity: 0; }

/* ── Voltar ao topo ──────────────────────────────────────────────────── */
.lp-topo {
  position: relative; z-index: 30; /* fica nítido, por cima da camada de desfoque */
  display: block;
  width: max-content;
  margin: 5rem auto 0;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-suave);
  text-decoration: none;
  transition: color 0.15s;
}
.lp-topo:hover, .lp-topo:focus-visible { color: var(--lp-tinta); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── Sobre a celebração (resumo da Wikipédia) ────────────────────────── */
/* Telas largas: aberto embaixo do calendário */
.lp-sobre {
  max-width: 257px;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lp-linha);
  animation: lp-sobre-entra 0.6s ease both;
}
@keyframes lp-sobre-entra { from { opacity: 0; } to { opacity: 1; } }
.lp-sobre-rotulo {
  font-family: var(--font-sans); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--lp-suave); margin: 0 0 0.3rem;
}
.lp-sobre-titulo {
  font-family: var(--font-titulo); font-style: italic; font-weight: 400;
  font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; color: var(--lp-tinta);
  margin: 0 0 1rem;
}
.lp-sobre-img {
  display: block; width: 100%; height: auto; max-height: 190px;
  object-fit: cover; object-position: center 20%;
  border-radius: 3px; margin: 0 0 0.8rem; background: rgba(0, 0, 0, 0.05);
}
.lp-sobre-artigo h3 { font-size: 0.88rem; font-weight: 700; color: var(--lp-tinta); margin: 0 0 0.3rem; }
.lp-sobre-artigo p { font-size: 0.8rem; line-height: 1.6; color: var(--lp-texto); margin: 0 0 0.6rem; }
.lp-sobre-artigo + .lp-sobre-artigo { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dotted rgba(0, 0, 0, 0.28); }
.lp-sobre-link { font-size: 0.76rem; color: var(--lp-vermelho); text-decoration: none; }
.lp-sobre-link:hover { text-decoration: underline; }
.lp-sobre-credito { font-size: 0.64rem; line-height: 1.5; color: var(--lp-suave); margin: 1.1rem 0 0; }
.lp-sobre-credito a { color: inherit; }

/* Celular: "Saiba mais" miúdo ao lado do nome, abre o modal */
.nome-dia-mais {
  display: none;
  font-family: var(--font-sans);
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-vermelho);
  background: none;
  border: 0;
  padding: 0.3rem 0.2rem;
  margin-left: 0.4rem;
  vertical-align: 0.2em;
  cursor: pointer;
  white-space: nowrap;
}

.lp-modal {
  width: min(560px, calc(100% - 2rem));
  max-height: min(86vh, 760px);
  margin: auto; /* main.css zera margens; sem isto o <dialog> não centraliza */
  inset: 0;
  padding: 0;
  border: 1px solid var(--lp-linha);
  border-radius: 6px;
  background: var(--lp-fundo);
  color: var(--lp-texto);
  box-shadow: 0 24px 60px rgba(20, 16, 10, 0.28);
  overflow: hidden;
}
.lp-modal[open] { display: flex; flex-direction: column; animation: lp-modal-abre 0.35s cubic-bezier(0.2, 0.7, 0.25, 1); }
.lp-modal::backdrop { background: rgba(24, 20, 14, 0.5); backdrop-filter: blur(2px); }
@keyframes lp-modal-abre {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
html:has(.lp-modal[open]) { overflow: hidden; }
.lp-modal-caixa { position: relative; overflow-y: auto; padding: 2rem 2.25rem 1.75rem; font-family: var(--font-leitura); }
.lp-modal-fechar {
  position: absolute; top: 0.75rem; right: 0.75rem;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: transparent; color: var(--lp-suave); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lp-modal-fechar:hover { background: rgba(0, 0, 0, 0.06); color: var(--lp-tinta); }
.lp-modal-sobre {
  font-family: var(--font-sans); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--lp-suave); margin: 0 0 0.35rem;
}
.lp-modal-titulo {
  font-family: var(--font-titulo); font-style: italic; font-weight: 400;
  font-size: 38px; line-height: 1.1; letter-spacing: -0.02em; color: var(--lp-tinta);
  margin: 0 2rem 1.25rem 0;
}
.lp-modal-artigo { font-size: 15.5px; line-height: 1.65; }
.lp-modal-artigo::after { content: ''; display: block; clear: both; }
.lp-modal-artigo + .lp-modal-artigo { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dotted rgba(0, 0, 0, 0.28); }
.lp-modal-artigo h3 { font-size: 1.05rem; font-weight: 700; color: var(--lp-tinta); margin: 0 0 0.4rem; }
.lp-modal-artigo p { margin: 0 0 0.8rem; }
.lp-modal-img {
  float: right; width: 38%; max-width: 180px; height: auto;
  margin: 0.25rem 0 0.75rem 1.25rem; border-radius: 3px; background: rgba(0, 0, 0, 0.05);
}
.lp-modal-link { font-size: 0.88rem; color: var(--lp-vermelho); text-decoration: none; }
.lp-modal-link:hover { text-decoration: underline; }
.lp-modal-credito {
  font-size: 0.72rem; color: var(--lp-suave); margin: 1.5rem 0 0; padding-top: 0.75rem;
  border-top: 1px solid var(--lp-linha);
}
.lp-modal-credito a { color: inherit; }
.lp-modal-carregando { font-style: italic; color: var(--lp-suave); }

@media (max-width: 760px) {
  .lp-fita { right: 3.125rem; width: 18px; height: 42px; }
  /* O aviso sobe para cima do título (a folga à direita é da fita) */
  .lp-lateral { display: flex; flex-direction: column; }
  .lp-avisos { max-width: none; margin: 0.6rem 0 0.5rem; } /* colado embaixo do calendário */
  .lp-aviso-texto { font-size: 0.72rem; }
  .lp-data { font-size: 0.8rem; }
  .lp-sobre { display: none; }
  .nome-dia-mais { display: inline; }
  .lp-modal-caixa { padding: 1.75rem 1.4rem 1.5rem; }
  .lp-modal-titulo { font-size: 32px; }
  .lp-modal-img { float: none; display: block; width: 100%; max-width: none; max-height: 260px; object-fit: cover; object-position: center 20%; margin: 0 0 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-fita, .lp-modal[open], .lp-sobre { animation: none; }
  .lp-aviso-texto { transition: none; }
}