/* 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.6);   /* era 0.45: claro demais no celular (feedback de 24/09/2026) */
  --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));
}
/* aspas/parêntese que abrem a leitura: pequenos, pendurados na margem, à esquerda da letra */
.capitular-antes {
  position: absolute; right: 100%; top: 0.08em;
  font-size: 0.32em; line-height: 1; margin-right: 0.04em;
}

.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) ── */
/* inline-block só enquanto entra (transform precisa); depois volta a ser texto corrido: com milhares
   de blocos, segurar o dedo (seleção/lupa do iPhone) fazia o texto tremer */
.lp-palavra.lp-oculto, .lp-palavra.lp-entra { 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 2.75rem; padding-inline: 1rem; }   /* as abas desceram para o rodapé: o respiro fica aqui */
}
@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 {
  /* absoluto, não fixo: o Safari do iOS tinge a área do relógio e a barra de baixo com a cor de
     elementos FIXOS encostados na borda — ficava vermelho ao abrir. Na abertura a página está no
     topo, então cobre a tela do mesmo jeito. */
  position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; 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: 16px;
  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.6rem; right: 0.6rem;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; color: var(--lp-suave); cursor: pointer; transition: background 0.2s, color 0.2s;
}
/* o X é desenhado (dois traços), não um caractere da fonte: fica no centro exato do círculo */
.lp-modal-fechar svg, .lp-card-fechar svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round;
}
.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: 10px; 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; }
}

/* ── Compartilhar trecho (compartilhar.mjs) ───────────────────────────────── */
.lp-compartilhar {
  display: inline-grid; place-items: center; width: 40px; height: 40px; margin-top: 1.25rem; padding: 0;
  color: var(--lp-vermelho); background: transparent; border: 1px solid rgba(203, 46, 46, 0.35); border-radius: 50%;
  cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.lp-compartilhar:hover { background: rgba(203, 46, 46, 0.06); border-color: var(--lp-vermelho); }
.lp-compartilhar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Janela em tela cheia, escura: o card é o protagonista, os vizinhos aparecem nas bordas */
.lp-card {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; inset: 0; padding: 0; border: 0;
  background: #17140f; color: #f2ead8;
}
.lp-card[open] { display: block; animation: lp-card-abre 0.3s ease-out; }
.lp-card::backdrop { background: #17140f; }
@keyframes lp-card-abre { from { opacity: 0; } to { opacity: 1; } }
html:has(.lp-card[open]) { overflow: hidden; }

.lp-card-caixa {
  height: 100%; display: flex; flex-direction: column;
  padding: max(0.75rem, env(safe-area-inset-top)) 0 max(1rem, env(safe-area-inset-bottom));
  font-family: var(--font-leitura);
}
.lp-card-topo { display: flex; align-items: center; justify-content: space-between; padding: 0 0.75rem 0 1.25rem; }
.lp-card-titulo {
  margin: 0; font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(242, 234, 216, 0.6);
}
.lp-card-fechar {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.08); color: #f2ead8; cursor: pointer; transition: background 0.2s;
}
.lp-card-fechar:hover { background: rgba(255, 255, 255, 0.16); }

.lp-card-abas { display: flex; justify-content: center; gap: 0.35rem; margin: 0.6rem 0 0.25rem; }
.lp-card-abas button {
  border: 0; background: transparent; color: rgba(242, 234, 216, 0.5); cursor: pointer;
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em;
  padding: 0.45rem 0.95rem; border-radius: 999px; transition: background 0.2s, color 0.2s;
}
.lp-card-abas button:hover { color: #f2ead8; }
.lp-card-abas button[aria-current="true"] { background: rgba(242, 234, 216, 0.14); color: #fff; }

.lp-card-palco { position: relative; flex: 1; min-height: 0; }
.lp-card-trilho {
  height: 100%; display: flex; gap: 0.9rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 1rem 11vw; scroll-padding: 0 11vw; scrollbar-width: none; overscroll-behavior-x: contain;
}
.lp-card-trilho::-webkit-scrollbar { display: none; }
.lp-card-slide {
  flex: 0 0 78vw; margin: 0; min-height: 0; scroll-snap-align: center;
  display: flex; justify-content: center; align-items: center;
  opacity: 0.35; transform: scale(0.94); transition: opacity 0.2s, transform 0.2s; cursor: pointer;
}
.lp-card-slide.atual { opacity: 1; transform: none; cursor: default; }
.lp-card-slide img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 16px; background: #26211a;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);   /* sombra curta: barata de redesenhar no arrasto */
}
.lp-card-seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid rgba(242, 234, 216, 0.22);
  display: grid; place-items: center;
  background: rgba(23, 20, 15, 0.55); color: #f2ead8; cursor: pointer;
  backdrop-filter: blur(6px); transition: background 0.2s, border-color 0.2s;
}
.lp-card-seta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lp-card-seta:hover { background: rgba(23, 20, 15, 0.8); border-color: rgba(242, 234, 216, 0.5); }
.lp-card-ant { left: 1.25rem; }
.lp-card-prox { right: 1.25rem; }

.lp-card-fotos {
  display: flex; gap: 0.55rem; padding: 0.25rem 1rem 0.9rem;
  overflow-x: auto; scrollbar-width: none; transition: opacity 0.2s;
}
.lp-card-fotos::-webkit-scrollbar { display: none; }
.lp-card-fotos.inativa { opacity: 0.25; pointer-events: none; }
/* centraliza quando cabe; quando não cabe, rola a partir da primeira (center "puro" esconderia as da esquerda) */
.lp-card-fotos > :first-child { margin-left: auto; }
.lp-card-fotos > :last-child { margin-right: auto; }
.lp-card-fotos button {
  flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border-radius: 50%; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(242, 234, 216, 0.2); background: none; opacity: 0.6;
  transition: opacity 0.2s, box-shadow 0.2s;
}
.lp-card-fotos button:hover { opacity: 0.9; }
.lp-card-fotos button[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px #17140f, 0 0 0 3px #f2ead8; }
.lp-card-fotos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-card-acoes { display: flex; gap: 2.25rem; justify-content: center; padding: 0.5rem 1rem 0; }
.lp-card-acoes button {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  border: 0; background: transparent; color: rgba(242, 234, 216, 0.6); cursor: pointer;
  font-family: var(--font-leitura); font-style: italic; font-size: 0.85rem;
  transition: color 0.2s;
}
.lp-card-acoes button:hover { color: #f2ead8; }
.lp-card-icone {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(242, 234, 216, 0.28); color: #f2ead8;
  transition: border-color 0.2s, background 0.2s;
}
.lp-card-icone svg { width: 22px; height: 22px; }
.lp-card-acoes button:hover .lp-card-icone { border-color: rgba(242, 234, 216, 0.7); background: rgba(242, 234, 216, 0.06); }
.lp-card-acoes button:active .lp-card-icone { background: rgba(242, 234, 216, 0.12); }
.lp-card-aviso {
  margin: 0.6rem 0 0; min-height: 1.2em; text-align: center; font-family: var(--font-sans); font-size: 0.78rem;
  color: rgba(242, 234, 216, 0.75); opacity: 0; transition: opacity 0.25s;
}
.lp-card-aviso.visivel { opacity: 1; }

/* Desktop: vizinhos mais estreitos e setas; no toque, troca-se arrastando */
@media (min-width: 761px) {
  /* no computador os slides têm a largura da própria imagem (a altura manda), lado a lado */
  .lp-card-trilho { padding: 1.25rem 30vw; scroll-padding: 0 30vw; gap: 1.5rem; }
  .lp-card-slide { flex-basis: auto; width: auto; }
  .lp-card-slide img { height: 100%; width: auto; max-width: 40vw; }
}
@media (hover: none), (pointer: coarse) {
  .lp-card-seta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-card[open], .lp-card-slide { animation: none; transition: none; }
}

/* ── Arrastar para trocar de mês (liturgiadiaria.js) ─────────────────────── */
/* O vertical fica com o navegador (rolagem); o horizontal é nosso. */
.cal-grid { touch-action: pan-y pinch-zoom; }
.cal-btn:disabled { opacity: 0.25; cursor: default; background: none; }



/* ── Barra de leituras em vidro líquido (celular) ─────────────────────────── */
/* No desktop as abas seguem no alto da coluna; a moldura nova não existe lá. */
.lp-tabs-leituras { display: contents; }
.lp-aba-icone { display: none; }
.lp-tabs .lp-tabs-dia, .lp-tabs .lp-tabs-luz { display: none; }

@media (max-width: 760px) {
  /* tamanho da barra proporcional à largura da tela (46px num celular de 375px), com limites */
  .lp-main { --lp-barra: clamp(52px, 15vw, 72px); padding-bottom: calc(var(--lp-barra) + 4.5rem + env(safe-area-inset-bottom)); }
  /* três peças de vidro separadas: ( ‹ )  ( leituras do dia )  ( › ) — trocar de dia é outra ação */
  .lp-main .lp-tabs {
    /* dentro das faixas floridas das laterais: o vidro fica só sobre o papel (não puxa o rosa) */
    position: fixed; top: auto; left: 30px; right: 30px; bottom: calc(clamp(30px, 9vw, 44px) + env(safe-area-inset-bottom));
    z-index: 40;
    display: flex; align-items: center; justify-content: center; gap: calc(var(--lp-barra) * 0.12);
    min-height: 0; margin: 0; padding: 0;
    overflow: visible; border: 0; background: none;
    /* nasce abaixo da tela; sobe quando a 1ª leitura chega à metade (html.lp-barra-on) e fica */
    transform: translateY(calc(100% + 60px + env(safe-area-inset-bottom)));
    transition: transform 0.7s cubic-bezier(0.22, 1.25, 0.36, 1);
  }
  html.lp-barra-on .lp-main .lp-tabs { transform: none; }
  .lp-main .lp-tabs.lp-tabs-muitas { --lp-barra: clamp(44px, 13vw, 62px); }   /* domingos e festas: 4 ícones */
  .lp-main .lp-tabs .lp-tabs-leituras, .lp-main .lp-tabs .lp-tabs-dia {
    position: relative;
    border-radius: 999px;
    /* o vidro: desfoca e satura o que passa por trás; claro o bastante para ler sobre qualquer texto */
    background: rgba(253, 252, 250, 0.74);
    -webkit-backdrop-filter: blur(20px) saturate(1.15);
    backdrop-filter: blur(20px) saturate(1.15);
    box-shadow:
      inset 0 1px 0.5px rgba(255, 255, 255, 0.95),     /* brilho especular na borda de cima */
      inset 0 -1px 0.5px rgba(40, 30, 15, 0.06),       /* a borda de baixo, mais escura */
      inset 0 0 0 0.5px rgba(40, 30, 15, 0.09),
      0 6px 20px -6px rgba(40, 30, 15, 0.2),
      0 1px 3px rgba(40, 30, 15, 0.07);
  }
  /* reflexo curvo do vidro, só na metade de cima de cada peça */
  .lp-main .lp-tabs .lp-tabs-leituras::before {
    content: ''; position: absolute; inset: 1px 1px 50% 1px; border-radius: 999px 999px 40% 40% / 999px 999px 100% 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
    pointer-events: none;
  }
  .lp-tabs-leituras { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; height: var(--lp-barra); gap: 2px; padding: 0 calc(var(--lp-barra) * 0.087); }
  /* as abas são ícones; a ativa mostra também o nome, e a pílula de vidro se alarga para ela */
  .lp-main .lp-tabs .lp-tabs-leituras a {
    position: relative; z-index: 1; flex: 0 0 auto; min-width: 0;
    display: flex; align-items: center; gap: calc(var(--lp-barra) * 0.1);
    height: calc(var(--lp-barra) * 0.826); min-width: calc(var(--lp-barra) * 0.826); justify-content: center;
    padding: 0 calc(var(--lp-barra) * 0.14); margin: 0; border: 0; border-radius: 999px;
    font-family: var(--font-sans); font-size: calc(var(--lp-barra) * 0.25); font-weight: 600; letter-spacing: -0.01em;
    color: #8c867e;   /* sólido: com cor translúcida, os trechos do traço que se cruzam escureciam */
    transition: color 0.25s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .lp-main .lp-tabs .lp-tabs-leituras a.ativa { color: var(--lp-vermelho); border: 0; }
  .lp-tabs .lp-aba-icone {
    display: block; width: calc(var(--lp-barra) * 0.457); height: calc(var(--lp-barra) * 0.457); flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
  }
  /* o número romano dentro do pergaminho: letra cheia, sem o traço do desenho */
  /* engrossado com um contorno da mesma cor: no tamanho da barra, o serifado puro ficava fino */
  .lp-tabs .lp-aba-numeral { fill: currentColor; stroke: currentColor; stroke-width: 0.75; stroke-linejoin: round; paint-order: stroke; font-family: var(--font-titulo); font-weight: 700; letter-spacing: 0.02em; }
  .lp-aba-nome { display: none; }   /* no celular a barra é só de ícones; o nome fica no aria-label */

  /* a luz da aba ativa: uma pílula discreta que desliza até ela */
  .lp-tabs .lp-tabs-luz {
    display: block; position: absolute; top: calc(var(--lp-barra) * 0.087); bottom: calc(var(--lp-barra) * 0.087); left: 0; width: 0; z-index: 0;
    border-radius: 999px; transform-origin: 50% 50%;
    background: rgba(40, 30, 15, 0.07);
    box-shadow: inset 0 0 0 0.5px rgba(40, 30, 15, 0.04);
    transition: transform 0.5s cubic-bezier(0.3, 1.35, 0.45, 1), width 0.38s cubic-bezier(0.3, 1.2, 0.45, 1),
      background 0.25s ease, box-shadow 0.25s ease;
  }

  .lp-tabs .lp-tabs-dia {
    display: grid; place-items: center; flex: 0 0 auto;
    width: var(--lp-barra); height: var(--lp-barra); border-radius: 50%;
    border: 0; margin: 0; padding: 0;   /* herdavam a borda de baixo das abas do desktop: fazia uma "lua" sob a bolinha */
    color: var(--lp-tinta); text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .lp-main .lp-tabs a.lp-tabs-dia:active { background: rgba(255, 255, 255, 0.8); transform: scale(0.92); }
  .lp-main .lp-tabs span.lp-tabs-dia { color: #cfc9c0; }
  .lp-tabs-dia svg { width: calc(var(--lp-barra) * 0.41); height: calc(var(--lp-barra) * 0.41); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

  /* a barra compacta de cima (data por extenso) ganha fundo próprio, já que as abas desceram */
  .lp-compacto { --lp-compacto-h: 2rem; align-items: center; background: transparent; transition: background 0.25s ease; }
  .lp-compacto::after {
    content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
    background: linear-gradient(var(--lp-fundo), rgba(252, 250, 247, 0)); opacity: 0; transition: opacity 0.25s ease;
  }
  .lp-compacto-on .lp-compacto { background: var(--lp-fundo); }
  .lp-compacto-on .lp-compacto::after { opacity: 1; }
  .lp-main .lp-tabs { padding-top: 5px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .lp-tabs-luz { transition: none; }
}

/* complemento do rótulo ("mais longa", "mais breve"): pequeno, embaixo do título grande */
.leitura-variante {
  display: block; margin: 0.35rem 0 0.15rem;
  font-family: var(--font-sans); font-style: normal; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2; color: var(--lp-suave);
}

/* Toque nas setas de dia: a bolinha afunda e volta com mola, e a seta dá um passo na direção */
@media (max-width: 760px) {
  .lp-main .lp-tabs a.lp-tabs-dia.lp-dia-toque { animation: lp-dia-toque 0.42s cubic-bezier(0.3, 1.5, 0.5, 1); }
  .lp-tabs a.lp-tabs-dia.lp-dia-toque[rel="next"] svg { animation: lp-seta-prox 0.42s ease-out; }
  .lp-tabs a.lp-tabs-dia.lp-dia-toque[rel="prev"] svg { animation: lp-seta-ant 0.42s ease-out; }
}
@keyframes lp-dia-toque {
  0% { transform: scale(1); }
  30% { transform: scale(0.86); background: rgba(203, 46, 46, 0.12); }
  100% { transform: scale(1); }
}
@keyframes lp-seta-prox { 35% { transform: translateX(4px); color: var(--lp-vermelho); } }
@keyframes lp-seta-ant { 35% { transform: translateX(-4px); color: var(--lp-vermelho); } }
@media (prefers-reduced-motion: reduce) {
  .lp-tabs a.lp-tabs-dia.lp-dia-toque, .lp-tabs a.lp-tabs-dia.lp-dia-toque svg { animation: none; }
}

/* Santo do dia: botão de compartilhar ao lado do nome da celebração, e o selo na janela */
.nome-dia-compartilhar {
  display: inline-grid; place-items: center; vertical-align: 0.05em;
  width: 30px; height: 30px; margin-left: 0.35rem; padding: 0; border-radius: 50%;
  border: 1px solid rgba(203, 46, 46, 0.35); background: transparent; color: var(--lp-vermelho); cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.nome-dia-compartilhar:hover { background: rgba(203, 46, 46, 0.06); border-color: var(--lp-vermelho); }
.nome-dia-compartilhar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-card-titulo.lp-card-selo {
  padding: 0.35rem 0.8rem; border-radius: 999px; background: #cb2e2e; color: #fff;
}

/* ── Ouvir a leitura (leitor-audio.mjs) ─────────────────────────────────── */
.lp-ouvir-botao {
  display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.2rem 0 0.9rem;
  padding: 0.42rem 0.95rem 0.42rem 0.7rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(203, 46, 46, 0.35); background: transparent; color: var(--lp-vermelho);
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s;
}
.lp-ouvir-botao:hover { background: rgba(203, 46, 46, 0.06); border-color: var(--lp-vermelho); }
.lp-ouvir-botao svg { width: 14px; height: 14px; fill: currentColor; }

.lp-ouvir {
  --lp-ouvir-cor: #3a2a1a;
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; inset: 0; padding: 0; border: 0;
  color: #fff;
  background:
    radial-gradient(120% 80% at 20% 0%, color-mix(in srgb, var(--lp-ouvir-cor) 70%, #000) 0%, transparent 70%),
    linear-gradient(170deg, color-mix(in srgb, var(--lp-ouvir-cor) 45%, #120e0a), #0d0a07 75%);
}
.lp-ouvir[open] { display: flex; flex-direction: column; animation: lp-ouvir-abre 0.45s ease-out; }
.lp-ouvir::backdrop { background: #0d0a07; }
@keyframes lp-ouvir-abre { from { opacity: 0; } to { opacity: 1; } }
html:has(.lp-ouvir[open]) { overflow: hidden; }

.lp-ouvir-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: max(1rem, env(safe-area-inset-top)) 1rem 0.5rem 1.4rem; transition: opacity 0.5s;
}
.lp-ouvir-titulo { margin: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.lp-ouvir-rotulo { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.lp-ouvir-ref { font-family: var(--font-leitura); font-style: italic; font-size: 1rem; color: rgba(255, 255, 255, 0.85); }
.lp-ouvir-fechar, .lp-ouvir-botoes button {
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.1); color: #fff;
}
.lp-ouvir-fechar { width: 44px; height: 44px; }
.lp-ouvir svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* o texto: letra grande, só a linha atual acesa */
.lp-ouvir-texto {
  flex: 1; overflow-y: auto; scrollbar-width: none;
  padding: 30vh 1.5rem 45vh;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 72%, transparent);
  mask-image: linear-gradient(transparent, #000 18%, #000 72%, transparent);
}
.lp-ouvir-texto::-webkit-scrollbar { display: none; }
.lp-ouvir-texto p {
  margin: 0 0 0.55em; max-width: 34rem;
  font-family: var(--font-leitura); font-weight: 700; font-size: clamp(1.55rem, 7vw, 2.4rem); line-height: 1.22;
  color: rgba(255, 255, 255, 0.28); cursor: pointer;
  transform-origin: left center; transform: scale(0.96);
  transition: color 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.45s ease;
  filter: blur(0.6px);
}
.lp-ouvir-texto p.lida { color: rgba(255, 255, 255, 0.4); }
.lp-ouvir-texto p.atual { color: #fff; transform: none; filter: none; }
@media (min-width: 761px) { .lp-ouvir-texto { padding-inline: max(1.5rem, calc(50vw - 17rem)); } }

/* controles: somem enquanto toca, voltam a um toque */
.lp-ouvir-controles { padding: 0.5rem 1.4rem max(1.4rem, env(safe-area-inset-bottom)); transition: opacity 0.5s; }
.lp-ouvir-quieto .lp-ouvir-controles, .lp-ouvir-quieto .lp-ouvir-topo { opacity: 0; }
.lp-ouvir-progresso { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); overflow: hidden; cursor: pointer; margin-bottom: 1.1rem; }
.lp-ouvir-progresso span { display: block; height: 100%; background: rgba(255, 255, 255, 0.85); transform-origin: left; transform: scaleX(0); }
.lp-ouvir-botoes { display: flex; align-items: center; justify-content: center; gap: 1.6rem; }
.lp-ouvir-botoes button { width: 52px; height: 52px; background: transparent; }
.lp-ouvir-botoes .lp-ouvir-tocar { width: 68px; height: 68px; background: #fff; color: #0d0a07; }
.lp-ouvir-botoes .lp-ouvir-tocar svg { width: 28px; height: 28px; }
.lp-ouvir-botoes .lp-ouvir-musica.desligada { opacity: 0.35; }
.lp-ouvir-vao { width: 52px; }
@media (prefers-reduced-motion: reduce) {
  .lp-ouvir-texto p { transition: color 0.2s; transform: none; filter: none; }
}

/* aviso no fim de cada leitura: contagem para a próxima, ou as escolhas */
.lp-ouvir-aviso {
  position: absolute; left: 50%; bottom: calc(10.5rem + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(92vw, 26rem); padding: 1.1rem 1.1rem 1rem; border-radius: 22px; text-align: center;
  background: rgba(20, 16, 12, 0.72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 36px rgba(0, 0, 0, 0.4);
  animation: lp-ouvir-aviso 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.lp-ouvir-aviso[hidden] { display: none; }
@keyframes lp-ouvir-aviso { from { opacity: 0; transform: translate(-50%, 12px) scale(0.97); } }
.lp-ouvir-aviso-texto { margin: 0 0 0.85rem; font-family: var(--font-leitura); font-style: italic; font-size: 1.1rem; color: #fff; }
.lp-ouvir-aviso-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.lp-ouvir-aviso-botoes button {
  padding: 0.65rem 1.1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28); cursor: pointer;
  background: transparent; color: #fff; font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600;
}
.lp-ouvir-aviso-botoes button.principal { background: #fff; color: #0d0a07; border-color: #fff; }

/* botão de tocar sempre redondo; foco discreto só no teclado */
.lp-ouvir-botoes button { flex: 0 0 auto; aspect-ratio: 1; outline: none; }
.lp-ouvir-botoes button:focus-visible, .lp-ouvir-fechar:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }
.lp-ouvir-botoes .lp-ouvir-tocar svg { margin-left: 3px; }   /* o triângulo parece centrado com um leve deslocamento */

/* hierarquia do texto que está sendo lido */
.lp-ouvir-texto p.rubrica {
  font-family: var(--font-sans); font-weight: 600; font-size: clamp(0.78rem, 3.4vw, 0.95rem);
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; margin: 0.4em 0 1.4em;
  filter: none;
}
.lp-ouvir-texto p.rubrica:last-child { margin-top: 1.6em; }
.lp-ouvir-texto p.rubrica.atual { color: rgba(255, 255, 255, 0.92); }
.lp-ouvir-texto p.refrao { font-style: italic; font-weight: 400; margin-block: 0.3em 1em; }
.lp-ouvir-texto p.refrao.atual { color: #f1d38b; }

/* atalho para a próxima leitura, quando a pessoa rola o texto até o fim */
.lp-ouvir-pular {
  position: absolute; left: 50%; bottom: calc(10.5rem + env(safe-area-inset-bottom)); transform: translateX(-50%);
  padding: 0.75rem 1.3rem; border-radius: 999px; border: 0; cursor: pointer;
  background: #fff; color: #0d0a07; font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); animation: lp-ouvir-aviso 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.lp-ouvir-pular[hidden] { display: none; }

/* sem o indicador de rolagem na tela de ouvir (no iPhone aparecia como uma linha magenta) */
.lp-ouvir-texto { scrollbar-color: transparent transparent; }
.lp-ouvir-texto::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* cinco colunas iguais (música · −15 · play · +15 · vão): o play fica exatamente no centro da tela */
.lp-ouvir-botoes { display: grid; grid-template-columns: repeat(5, 1fr); justify-items: center; gap: 0; max-width: 420px; margin: 0 auto; }
/* santo lembrado num dia comum: o nome dele na linha de baixo, com o botão de compartilhar ao lado */
.nome-dia-santo { color: var(--lp-tinta-suave, inherit); opacity: 0.85; }
.nome-dia-santo::before { content: "\A"; white-space: pre; }
/* Card sendo desenhado: o lugar da imagem pulsa com um brilho que corre (lp-card-carregando, em compartilhar.mjs) */
.lp-card-carregando .lp-card-slide img {
  background: linear-gradient(100deg, #26211a 30%, #3a3228 50%, #26211a 70%) 0 0 / 250% 100%;
  animation: lp-card-brilho 1.2s linear infinite, lp-card-pulso 0.9s ease-in-out infinite alternate;
}
@keyframes lp-card-brilho { to { background-position: -150% 0; } }
@keyframes lp-card-pulso { to { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .lp-card-carregando .lp-card-slide img { animation: none; opacity: 0.6; } }
/* botão de compartilhar esperando o card: o ícone dá lugar a um anel girando */
.lp-ocupado { position: relative; pointer-events: none; }
.lp-ocupado svg { opacity: 0; }
.lp-ocupado::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px;
  border: 1.8px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: lp-gira 0.7s linear infinite;
}
@keyframes lp-gira { to { transform: rotate(360deg); } }
/* Linha colorida no iPhone: é o anel de foco do sistema (na cor de destaque do aparelho) que o
   Safari desenha no diálogo e na área do texto quando a tela abre. Aqui o foco não precisa
   aparecer, exceto no teclado (os botões já têm o próprio :focus-visible). */
.lp-ouvir, .lp-ouvir *, .lp-ouvir:focus, .lp-ouvir *:focus { outline: none; -webkit-tap-highlight-color: transparent; }
.lp-ouvir { border: 0; }
/* As linhas magenta no iPhone são o cursor de texto e a alça de seleção do iOS (na cor de destaque
   do sistema), que aparecem quando um toque no texto vira seleção. A tela de ouvir não é para
   selecionar: sem seleção, sem cursor. */
.lp-ouvir, .lp-ouvir * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; caret-color: transparent; }
.lp-ouvir-texto { scrollbar-width: none; }
/* Transição leitura ⇄ tela de ouvir: a tela sobe de baixo, como uma folha, e o texto chega logo
   depois; ao fechar, desce de volta. */
.lp-ouvir[open] { animation: lp-ouvir-revela 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.lp-ouvir::backdrop { background: transparent; }
.lp-ouvir[open] .lp-ouvir-texto, .lp-ouvir[open] .lp-ouvir-topo, .lp-ouvir[open] .lp-ouvir-controles {
  animation: lp-ouvir-sobe 0.5s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.lp-ouvir[open] .lp-ouvir-controles { animation-delay: 0.38s; }
.lp-ouvir.lp-ouvir-saindo { animation: lp-ouvir-recolhe 0.4s cubic-bezier(0.55, 0, 0.9, 0.4) both; }
@keyframes lp-ouvir-revela { from { transform: translateY(100%); } }
@keyframes lp-ouvir-recolhe { to { transform: translateY(100%); } }
@keyframes lp-ouvir-sobe { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) {
  .lp-ouvir[open], .lp-ouvir[open] .lp-ouvir-texto, .lp-ouvir[open] .lp-ouvir-topo, .lp-ouvir[open] .lp-ouvir-controles { animation: none; }
}
/* tela de ouvir: enquanto a voz carrega, um anel gira em volta do botão de tocar */
.lp-ouvir-botoes .lp-ouvir-tocar { position: relative; }
.lp-ouvir-esperando .lp-ouvir-tocar::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85); border-right-color: transparent; border-bottom-color: transparent;
  animation: lp-gira 0.8s linear infinite;
}
.lp-ouvir-esperando .lp-ouvir-texto { opacity: 0.6; transition: opacity 0.3s; }

/* a dica do dia especial é clicável (abre o dia) */
.lp-dica.visivel { pointer-events: auto; cursor: pointer; }
.lp-dica.visivel:hover .lp-dica-nome { text-decoration: underline; text-underline-offset: 2px; }

/* ── Boas-vindas (tour.mjs) ─────────────────────────────────────────────── */
.lp-tour { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; }
.lp-tour[open] { display: flex; align-items: flex-end; justify-content: center; }
.lp-tour::backdrop { background: rgba(20, 14, 8, 0.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.lp-tour[open]::backdrop { animation: lp-tour-fundo 0.3s ease-out; }
.lp-tour-caixa {
  position: relative; width: 100%; max-width: 26rem; box-sizing: border-box;
  margin: 0 0.75rem max(0.75rem, env(safe-area-inset-bottom)); padding: 1.1rem 1.4rem 1.2rem;
  background: var(--lp-fundo); border-radius: 22px; box-shadow: 0 20px 50px rgba(20, 14, 8, 0.3);
  animation: lp-tour-sobe 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 761px) { .lp-tour[open] { align-items: center; } }
.lp-tour.saindo .lp-tour-caixa { animation: lp-tour-desce 0.28s ease-in both; }
.lp-tour.saindo::backdrop { opacity: 0; transition: opacity 0.28s; }
.lp-tour-pular {
  position: absolute; top: 0.8rem; right: 0.9rem; border: 0; background: none; padding: 0.3rem 0.4rem;
  font: 500 0.78rem var(--font-sans); color: var(--lp-suave, #777); cursor: pointer;
}
.lp-tour-cena { height: 9.5rem; display: grid; place-items: center; margin: 0.6rem 0 0.4rem; }
.lp-tour-cena svg { width: 100%; max-width: 17rem; height: 100%; overflow: visible; }
.lp-tour-titulo { margin: 0 0 0.35rem; font: italic 400 1.45rem/1.2 var(--font-leitura); color: var(--lp-tinta); }
.lp-tour-texto { margin: 0; font: 400 0.93rem/1.5 var(--font-sans); color: #3d3a36; min-height: 4.2em; }
.lp-tour-rodape { display: flex; align-items: center; justify-content: space-between; margin-top: 1.1rem; }
.lp-tour-pontos { display: flex; gap: 6px; }
.lp-tour-pontos span { width: 6px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.15); transition: width 0.3s, background 0.3s; }
.lp-tour-pontos span.atual { width: 18px; background: var(--lp-vermelho); }
.lp-tour-prox {
  border: 0; border-radius: 999px; padding: 0.65rem 1.4rem; cursor: pointer;
  font: 600 0.9rem var(--font-sans); color: #fff; background: var(--lp-vermelho);
}
.lp-tour-prox:active { transform: scale(0.97); }
.lp-tour-caixa.entra .lp-tour-cena, .lp-tour-caixa.entra .lp-tour-titulo, .lp-tour-caixa.entra .lp-tour-texto { animation: lp-tour-conteudo 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.lp-tour-caixa.entra .lp-tour-titulo { animation-delay: 0.05s; }
.lp-tour-caixa.entra .lp-tour-texto { animation-delay: 0.1s; }
@keyframes lp-tour-fundo { from { opacity: 0; } }
@keyframes lp-tour-sobe { from { transform: translateY(40px); opacity: 0; } }
@keyframes lp-tour-desce { to { transform: translateY(40px); opacity: 0; } }
@keyframes lp-tour-conteudo { from { transform: translateX(14px); opacity: 0; } }

/* ── cenas do tour: laços de 6 s; o "dedo" toca onde a pessoa tocaria ── */
.lp-tour-cena { height: 11rem; overflow: hidden; }
.lp-tour-cena > div { position: relative; width: 17.5rem; height: 10.5rem; font-family: var(--font-sans); --t: 6s; --ease: cubic-bezier(0.45, 0, 0.2, 1); }
.lp-tour-cena > div * { box-sizing: border-box; }
.lp-tour-caixa.volta .lp-tour-cena, .lp-tour-caixa.volta .lp-tour-titulo, .lp-tour-caixa.volta .lp-tour-texto { animation-name: lp-tour-conteudo-volta; }
@keyframes lp-tour-conteudo-volta { from { transform: translateX(-14px); opacity: 0; } }
.t-dedo {
  position: absolute; left: 0; top: 0; z-index: 5; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: rgba(40, 30, 20, 0.22); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 4px 10px rgba(0, 0, 0, 0.18);
  pointer-events: none; opacity: 0;
}

/* 1 · calendário */
.t-cal { padding-top: 0.2rem; }
.t-cal-mes { display: flex; justify-content: space-between; align-items: center; height: 22px; padding: 0 10px; font-size: 0.78rem; font-weight: 600; color: #222; }
.t-cal-mes b { color: #999; font-weight: 400; font-size: 1rem; }
.t-cal-sem, .t-cal-grade { display: grid; grid-template-columns: repeat(7, 40px); }
.t-cal-sem span { height: 16px; text-align: center; font-size: 0.55rem; color: #aaa; font-weight: 600; }
.t-cal-grade { position: relative; margin-top: 4px; }
.t-cal-grade span { position: relative; height: 20px; line-height: 18px; text-align: center; font-size: 0.66rem; color: #555; z-index: 1; }
.t-cal-grade span.d-santo::after, .t-cal-grade span.d-maria::after {
  content: ''; position: absolute; left: 50%; bottom: 1px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: #c9ab6b;
}
.t-cal-grade span.d-maria::after { background: #8fa6c4; }
.t-cal-sel {
  position: absolute; left: 0; top: 0; width: 32px; height: 19px; border-radius: 6px; background: color-mix(in srgb, var(--lp-cor-dia, #2f6b46) 20%, transparent);
  animation: t-cal-sel var(--t) var(--ease) infinite;
}
/* dia 4 = coluna 0, linha 1; dia 15 = col. 4, lin. 2; dia 22 = col. 4, lin. 3 (colunas de 40 px, linhas de 20 px) */
@keyframes t-cal-sel {
  0%, 30% { transform: translate(4px, 20px); } 36%, 62% { transform: translate(164px, 40px); }
  68%, 90% { transform: translate(164px, 60px); } 96%, 100% { transform: translate(4px, 20px); }
}
.t-cal-dedo { animation: t-cal-dedo var(--t) var(--ease) infinite; }
@keyframes t-cal-dedo {
  0% { transform: translate(250px, 170px); opacity: 0; }
  12% { transform: translate(200px, 130px); opacity: 1; }
  26% { transform: translate(180px, 95px) scale(1); }
  30% { transform: translate(180px, 95px) scale(0.78); } 34% { transform: translate(180px, 95px) scale(1); }
  56% { transform: translate(180px, 115px) scale(1); }
  60% { transform: translate(180px, 115px) scale(0.78); } 64% { transform: translate(180px, 115px) scale(1); opacity: 1; }
  80%, 100% { transform: translate(250px, 170px); opacity: 0; }
}

/* 2 · resumo */
.t-res { display: flex; align-items: flex-start; justify-content: center; padding-top: 14px; }
.t-res-caixa {
  width: 100%; border-radius: 6px; background: color-mix(in srgb, var(--lp-cor-titulo, #000) 6%, transparent);   /* como .lp-resumo */
  overflow: hidden; animation: t-res-caixa var(--t) var(--ease) infinite;
}
.t-res-topo { display: flex; justify-content: space-between; align-items: center; height: 34px; padding: 0 12px; }
.t-res-topo span { font-size: 0.56rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-suave, #888); }
.t-res-topo b { display: grid; font-size: 0.56rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-tinta); }
.t-res-topo em { grid-area: 1 / 1; font-style: normal; text-align: right; }
.t-res-topo em:first-child { animation: t-res-mostrar var(--t) linear infinite; }
.t-res-topo em:last-child { animation: t-res-ocultar var(--t) linear infinite; }
.t-res p { margin: 0; padding: 0 12px 12px; font: 0.76rem/1.55 var(--font-leitura); color: var(--lp-texto, #222); animation: t-res-texto var(--t) var(--ease) infinite; }
@keyframes t-res-caixa { 0%, 26% { height: 34px; } 36%, 74% { height: 140px; } 84%, 100% { height: 34px; } }
@keyframes t-res-texto { 0%, 30% { opacity: 0; transform: translateY(6px); } 40%, 72% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; } }
@keyframes t-res-mostrar { 0%, 27% { opacity: 1; } 28%, 76% { opacity: 0; } 77%, 100% { opacity: 1; } }
@keyframes t-res-ocultar { 0%, 27% { opacity: 0; } 28%, 76% { opacity: 1; } 77%, 100% { opacity: 0; } }
.t-res-dedo { animation: t-res-dedo var(--t) var(--ease) infinite; }
/* a caixa fica centrada na cena: o "Mostrar" está a ~17 px do topo dela */
@keyframes t-res-dedo {
  0% { transform: translate(250px, 150px); opacity: 0; }
  14% { transform: translate(248px, 100px); opacity: 1; }
  24% { transform: translate(240px, 31px) scale(1); }
  28% { transform: translate(240px, 31px) scale(0.78); } 32% { transform: translate(240px, 31px) scale(1); }
  50% { transform: translate(262px, 168px) scale(1); }
  70% { transform: translate(240px, 31px) scale(1); }
  74% { transform: translate(240px, 31px) scale(0.78); } 78% { transform: translate(240px, 31px) scale(1); opacity: 1; }
  92%, 100% { transform: translate(260px, 170px); opacity: 0; }
}

/* 3 · barra de baixo (celular) */
.t-nav-pagina { position: absolute; inset: 0 0 44px; overflow: hidden; }
.t-nav-data { position: relative; display: block; height: 16px; font-size: 0.6rem; color: #888; }
.t-nav-data span { position: absolute; left: 4px; top: 0; }
.t-nav-data span:first-child { animation: t-nav-data1 var(--t) var(--ease) infinite; }
.t-nav-data span:last-child { animation: t-nav-data2 var(--t) var(--ease) infinite; }
.t-nav-rolo { animation: t-nav-rolo var(--t) var(--ease) infinite; }
.t-nav-rolo div { height: 108px; padding: 2px 4px; }
.t-nav-rolo b { display: block; font: italic 1.25rem/1.2 var(--font-leitura); color: #111; margin-bottom: 8px; }
.t-nav-rolo i { display: block; height: 6px; margin-bottom: 8px; border-radius: 3px; background: rgba(0, 0, 0, 0.1); }
.t-nav-rolo i:nth-of-type(2) { width: 85%; } .t-nav-rolo i:nth-of-type(3) { width: 70%; }
@keyframes t-nav-rolo {
  0%, 10% { transform: translateY(0); opacity: 1; } 18%, 26% { transform: translateY(-108px); } 34%, 42% { transform: translateY(-216px); }
  50%, 64% { transform: translateY(-324px); opacity: 1; } 68% { opacity: 0; } 72% { transform: translateY(0); opacity: 0; } 78%, 100% { transform: translateY(0); opacity: 1; }
}
@keyframes t-nav-data1 { 0%, 66% { opacity: 1; transform: none; } 70%, 96% { opacity: 0; transform: translateX(-10px); } 100% { opacity: 1; transform: none; } }
@keyframes t-nav-data2 { 0%, 68% { opacity: 0; transform: translateX(10px); } 74%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.t-nav-barra { position: absolute; left: 50%; bottom: 2px; display: flex; gap: 6px; transform: translateX(-50%); }
.t-nav-seta, .t-nav-abas {
  display: grid; place-items: center; height: 36px; border-radius: 18px; background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 6px 16px rgba(30, 24, 16, 0.14); color: #222;
}
.t-nav-seta { width: 36px; font-size: 1.1rem; line-height: 1; }
.t-nav-prox { animation: t-nav-prox var(--t) var(--ease) infinite; }
@keyframes t-nav-prox { 0%, 64% { transform: none; } 66% { transform: scale(0.88); } 70%, 100% { transform: none; } }
.t-nav-abas { position: relative; display: flex; gap: 0; padding: 0 4px; }
.t-nav-abas svg { display: block; flex: 0 0 34px; position: relative; z-index: 1; width: 34px; height: 20px; fill: none; stroke: #9a948c; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.t-nav-abas svg text { fill: currentColor; stroke: none; font-family: var(--font-leitura); font-weight: 700; color: #9a948c; }
.t-nav-luz { position: absolute; left: 4px; top: 4px; width: 34px; height: 28px; border-radius: 14px; background: rgba(0, 0, 0, 0.07); animation: t-nav-luz var(--t) var(--ease) infinite; }
@keyframes t-nav-luz {
  0%, 10% { transform: translateX(0); } 18%, 26% { transform: translateX(34px); } 34%, 42% { transform: translateX(68px); }
  50%, 70% { transform: translateX(102px); } 76%, 100% { transform: translateX(0); }
}
.t-nav-dedo { animation: t-nav-dedo var(--t) var(--ease) infinite; }
/* arrasta a página para cima (rolar) e depois toca na seta › */
@keyframes t-nav-dedo {
  0% { transform: translate(150px, 110px); opacity: 0; }
  6% { transform: translate(150px, 100px); opacity: 1; }
  46% { transform: translate(150px, 30px); opacity: 1; }
  50% { transform: translate(150px, 30px); opacity: 0; }
  54% { transform: translate(250px, 120px); opacity: 0; }
  60% { transform: translate(236px, 148px) scale(1); opacity: 1; }
  66% { transform: translate(236px, 148px) scale(0.78); } 70% { transform: translate(236px, 148px) scale(1); opacity: 1; }
  82%, 100% { transform: translate(270px, 180px); opacity: 0; }
}
.t-nav-dedo { left: 0; top: 0; }

/* 4 · ouvir */
.t-ouv { overflow: hidden; border-radius: 12px; }
.t-ouv-leitura { padding: 8px 10px; }
.t-ouv-leitura b, .t-com-leitura b { display: block; font: italic 1.3rem/1.2 var(--font-leitura); color: #111; }
/* a linha do título com os dois ícones, como na página: o ativo pisca ao toque */
.t-leitura-cabeca { display: flex; align-items: center; justify-content: space-between; }
.t-acoes { display: flex; gap: 6px; }
.t-acao { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #8c867e; }
.t-acao svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.t-acao-ativa { animation: t-acao var(--t) var(--ease) infinite; }
@keyframes t-acao { 0%, 16% { transform: none; color: #8c867e; } 18% { transform: scale(0.85); color: var(--lp-vermelho); background: rgba(203, 46, 46, 0.1); } 22%, 40% { transform: none; color: var(--lp-vermelho); } 46%, 100% { color: #8c867e; } }
.t-ouv-leitura i, .t-com-leitura i { display: block; height: 6px; margin-top: 9px; border-radius: 3px; background: rgba(0, 0, 0, 0.1); }
.t-ouv-leitura i:nth-of-type(2), .t-com-leitura i:nth-of-type(2) { width: 85%; }
.t-ouv-leitura i:nth-of-type(3), .t-com-leitura i:nth-of-type(3) { width: 65%; }
.t-ouv-tela {
  position: absolute; inset: 0; padding: 10px 14px; border-radius: 12px; color: rgba(255, 255, 255, 0.35);
  background: linear-gradient(170deg, #4a3a14, #0d0a07 80%); animation: t-ouv-tela var(--t) var(--ease) infinite;
}
.t-ouv-tela small { display: block; margin-bottom: 6px; font-size: 0.5rem; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.5); }
.t-ouv-tela p { margin: 0 0 3px; font: 0.82rem/1.3 var(--font-leitura); }
.t-ouv-tela p:nth-of-type(1) { animation: t-ouv-l1 var(--t) linear infinite; }
.t-ouv-tela p:nth-of-type(2) { animation: t-ouv-l2 var(--t) linear infinite; }
.t-ouv-tela p:nth-of-type(3) { animation: t-ouv-l3 var(--t) linear infinite; }
.t-ouv-tela p:nth-of-type(4) { animation: t-ouv-l4 var(--t) linear infinite; }
@keyframes t-ouv-l1 { 0%, 32% { color: rgba(255, 255, 255, 0.35); } 34%, 46% { color: #fff; } 48%, 100% { color: rgba(255, 255, 255, 0.35); } }
@keyframes t-ouv-l2 { 0%, 46% { color: rgba(255, 255, 255, 0.35); } 48%, 60% { color: #fff; } 62%, 100% { color: rgba(255, 255, 255, 0.35); } }
@keyframes t-ouv-l3 { 0%, 60% { color: rgba(255, 255, 255, 0.35); } 62%, 74% { color: #fff; } 76%, 100% { color: rgba(255, 255, 255, 0.35); } }
@keyframes t-ouv-l4 { 0%, 74% { color: rgba(255, 255, 255, 0.35); } 76%, 86% { color: #fff; } 88%, 100% { color: rgba(255, 255, 255, 0.35); } }
.t-ouv-barra { position: absolute; left: 14px; right: 14px; bottom: 12px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.t-ouv-barra i { display: block; height: 100%; background: rgba(255, 255, 255, 0.85); transform-origin: left; animation: t-ouv-progresso var(--t) linear infinite; }
@keyframes t-ouv-tela { 0%, 20% { transform: translateY(105%); } 28%, 88% { transform: none; } 96%, 100% { transform: translateY(105%); } }
@keyframes t-ouv-progresso { 0%, 30% { transform: scaleX(0); } 88%, 100% { transform: scaleX(1); } }
.t-ouv-dedo { animation: t-ouv-dedo var(--t) var(--ease) infinite; }
@keyframes t-ouv-dedo {
  0% { transform: translate(140px, 150px); opacity: 0; }
  10% { transform: translate(200px, 70px) scale(1); opacity: 1; }
  16% { transform: translate(236px, 24px) scale(1); }
  18% { transform: translate(236px, 24px) scale(0.78); } 22% { transform: translate(236px, 24px) scale(1); opacity: 1; }
  28%, 100% { transform: translate(200px, 120px); opacity: 0; }
}

/* 5 · compartilhar */
.t-com-leitura { padding: 8px 10px; }
.t-san-botao svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.t-com-card, .t-san-card {
  position: absolute; left: 50%; top: 6px; width: 7.2rem; margin-left: -3.6rem; border-radius: 8px; overflow: hidden;
  background: #f3ede3; box-shadow: 0 10px 26px rgba(20, 14, 8, 0.28);
}
.t-com-card img, .t-san-card img { display: block; width: 100%; height: 4.3rem; object-fit: cover; }
.t-com-card p, .t-san-card p { margin: 0; padding: 6px 8px 4px; font: italic 0.66rem/1.3 var(--font-leitura); color: #222; }
.t-com-card small { display: block; padding: 0 8px 6px; font: italic 0.55rem var(--font-leitura); color: var(--lp-vermelho); }
.t-com-card { animation: t-com-card var(--t) var(--ease) infinite; }
@keyframes t-com-card {
  0%, 22% { opacity: 0; transform: translateY(16px) scale(0.9); } 30%, 62% { opacity: 1; transform: none; }
  74%, 100% { opacity: 0; transform: translate(70px, 60px) scale(0.3); }
}
.t-com-zap {
  position: absolute; left: 50%; bottom: 4px; padding: 5px 12px; border-radius: 999px; transform: translateX(-50%);
  background: #25d366; color: #fff; font-size: 0.62rem; font-weight: 700; animation: t-com-zap var(--t) var(--ease) infinite;
}
@keyframes t-com-zap {
  0%, 30% { opacity: 0; transform: translate(-50%, 8px); } 36%, 58% { opacity: 1; transform: translate(-50%, 0); }
  60% { transform: translate(-50%, 0) scale(0.9); } 64%, 72% { opacity: 1; transform: translate(-50%, 0); } 78%, 100% { opacity: 0; }
}
.t-com-dedo { animation: t-com-dedo var(--t) var(--ease) infinite; }
@keyframes t-com-dedo {
  0% { transform: translate(200px, 140px); opacity: 0; }
  10% { transform: translate(250px, 60px) scale(1); opacity: 1; }
  16% { transform: translate(267px, 24px) scale(1); }
  18% { transform: translate(267px, 24px) scale(0.78); } 22% { transform: translate(267px, 24px) scale(1); }
  40% { transform: translate(200px, 120px) scale(1); }
  56% { transform: translate(140px, 153px) scale(1); }
  60% { transform: translate(140px, 153px) scale(0.78); } 64% { transform: translate(140px, 153px) scale(1); opacity: 1; }
  76%, 100% { transform: translate(180px, 190px); opacity: 0; }
}

/* 6 · santo do dia: o card completo sobe do botão, passa da borda de cima da folha e se
   dissolve no texto de baixo */
.lp-tour-cena:has(.t-san) { overflow: visible; }
.t-san-dia { padding: 8px 6px; }
.t-san-dia b { display: block; font: italic 2.3rem/1 var(--font-leitura); color: #111; }
.t-san-nome { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.t-san-nome span { font: italic 0.82rem/1 var(--font-leitura); color: #333; }
.t-san-botao {
  display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(203, 46, 46, 0.35); color: var(--lp-vermelho); animation: t-com-botao var(--t) var(--ease) infinite;
}
.t-san-card {
  position: absolute; left: 50%; top: -3.2rem; z-index: 2; width: 10.5rem; margin-left: -5.25rem; border-radius: 10px; overflow: hidden;
  background: #f3ede3; box-shadow: 0 16px 36px rgba(20, 14, 8, 0.3);
  -webkit-mask-image: linear-gradient(#000 62%, transparent 100%); mask-image: linear-gradient(#000 62%, transparent 100%);
  transform-origin: 80% 60%; animation: t-san-card var(--t) var(--ease) infinite;
}
.t-san-card img { display: block; width: 100%; height: 7.2rem; object-fit: cover; object-position: 50% 28%; }
.t-san-corpo { padding: 8px 10px 10px; }
.t-san-corpo small { display: block; white-space: nowrap; font-size: 0.4rem; font-weight: 700; letter-spacing: 0.08em; color: #8a8378; }
.t-san-corpo p { margin: 5px 0 8px; font: italic 0.72rem/1.3 var(--font-leitura); color: #222; }
.t-san-corpo footer { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.42rem; color: #8a8378; }
.t-san-corpo em { font: italic 0.6rem var(--font-leitura); color: var(--lp-vermelho); }
@keyframes t-san-card {
  0%, 22% { opacity: 0; transform: translate(40px, 40px) scale(0.3); }
  32%, 84% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(-10px); }
}
.t-san-dedo { animation: t-san-dedo var(--t) var(--ease) infinite; }
@keyframes t-san-dedo {
  0% { transform: translate(250px, 160px); opacity: 0; }
  10% { transform: translate(236px, 110px) scale(1); opacity: 1; }
  16% { transform: translate(226px, 65px) scale(1); }
  18% { transform: translate(226px, 65px) scale(0.78); } 22% { transform: translate(226px, 65px) scale(1); opacity: 1; }
  30%, 100% { transform: translate(250px, 170px); opacity: 0; }
}

/* no compartilhar e no santo, a leitura escurece atrás do card (como a janela real) */
.t-com::before {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 12px; background: rgba(13, 10, 7, 0.55); opacity: 0;
  animation: t-escurece var(--t) var(--ease) infinite;
}
.t-com-card, .t-com-zap { z-index: 1; }
@keyframes t-escurece { 0%, 22% { opacity: 0; } 30%, 70% { opacity: 1; } 80%, 100% { opacity: 0; } }
/* santo: quando o card sobe, a data e o nome somem; embaixo aparecem WhatsApp e Instagram */
.t-san-dia { animation: t-san-some var(--t) var(--ease) infinite; }
@keyframes t-san-some { 0%, 22% { opacity: 1; } 30%, 86% { opacity: 0; } 94%, 100% { opacity: 1; } }
.t-san-apps { position: absolute; left: 50%; bottom: -2px; z-index: 3; display: flex; gap: 14px; transform: translateX(-50%); }
.t-san-apps span {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff;
  box-shadow: 0 6px 14px rgba(20, 14, 8, 0.22); opacity: 0; animation: t-san-app var(--t) var(--ease) infinite;
}
.t-san-apps svg { width: 19px; height: 19px; }
.t-app-zap svg { width: 22px; height: 22px; }
.t-app-zap { background: #25d366; }
.t-app-insta { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); animation-delay: 0.08s !important; }
@keyframes t-san-app { 0%, 34% { opacity: 0; transform: translateY(8px) scale(0.8); } 42%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(4px); } }

/* ── Legibilidade (feedback de 24/09/2026): calendário e cabeçalho maiores e mais escuros; o dia
   marcado no calendário em tom neutro — a cor litúrgica mudando a cada dia parecia aleatória
   (ela continua na fitinha e no ponto ao lado do tempo litúrgico) ── */
.lp-data { font-size: 0.95rem; }
.tempo-badge { font-size: 0.7rem; }
.cal-mes { font-size: 0.8rem; }
.cal-dow { font-size: 0.62rem; }
.cal-dia { font-size: 0.76rem; color: #3a3632; }
.lp-aviso-texto { font-size: 0.84rem; }
.lp-aviso-rotulo { font-size: 0.6rem; }
.cal-dia.hoje { background: #26211b; color: #fff; }
.cal-dia.selecionado { background: rgba(0, 0, 0, 0.08); color: var(--lp-tinta); }
.cal-dia:hover { background: rgba(0, 0, 0, 0.06); }
.cal-hoje { color: var(--lp-tinta); background: rgba(0, 0, 0, 0.06); }
.cal-hoje:hover { background: rgba(0, 0, 0, 0.1); }
.t-cal-sel { background: rgba(0, 0, 0, 0.08); }
@media (max-width: 760px) {
  /* numa linha só: "Quinta-feira da 25ª Semana do Tempo Comum" encolhe com a largura da tela */
  .lp-data { font-size: min(0.92rem, 3.25vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cal-mes { font-size: clamp(0.84rem, 4.6cqi, 1.1rem); }
  .cal-dow { font-size: clamp(0.64rem, 3.4cqi, 0.86rem); }
  .cal-dia { font-size: clamp(0.82rem, 4.6cqi, 1.08rem); }
  .lp-aviso-texto { font-size: 0.84rem; }
}
/* Arrastar o calendário para o lado troca o mês: o gesto horizontal fica com a página (JS), a
   rolagem vertical continua com o navegador; os dias (links) não viram "arrastar link" no iPhone */
.cal-grid { touch-action: pan-y; }
.cal-grid a { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
/* Janela de compartilhar: o que mandar (Esta leitura · Todas as leituras · Trecho), num seletor
   segmentado; embaixo, só no Trecho, os layouts (Feed · Stories · Só texto) e as pinturas */
.lp-card-modos {
  display: flex; align-self: center; margin: 0.4rem auto 0; padding: 3px; gap: 2px;
  border-radius: 999px; background: rgba(242, 234, 216, 0.1);
}
.lp-card-modos button {
  border: 0; background: transparent; color: rgba(242, 234, 216, 0.62); cursor: pointer;
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; padding: 0.5rem 0.9rem; border-radius: 999px;
  transition: background 0.2s, color 0.2s; white-space: nowrap;
}
.lp-card-modos button[aria-current="true"] { background: #f2ead8; color: #1c1812; }
.lp-card-modos[hidden], .lp-card-modos button[hidden], .lp-card-abas[hidden], .lp-card-fotos[hidden] { display: none; }
.lp-card-modos + .lp-card-abas { margin-top: 0.35rem; }
.lp-card-modos + .lp-card-abas button { font-size: 0.72rem; padding: 0.35rem 0.8rem; }
@media (max-width: 380px) { .lp-card-modos button { font-size: 0.72rem; padding: 0.45rem 0.65rem; } }
.lp-card-uma .lp-card-seta { display: none; }
/* Escolher o trecho: a leitura em versículos, numa gaveta embaixo do card (que encolhe e segue
   visível, refazendo-se a cada toque) */
.lp-card-escolher {
  align-self: center; margin: 0.6rem auto 0; padding: 0.5rem 1.05rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(242, 234, 216, 0.28); background: transparent; color: #f2ead8;
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; transition: background 0.2s;
}
.lp-card-escolher:hover { background: rgba(242, 234, 216, 0.08); }
.lp-card-escolher[hidden], .lp-card-versos[hidden] { display: none; }
.lp-card-escolhendo .lp-card-fotos, .lp-card-escolhendo .lp-card-acoes, .lp-card-escolhendo .lp-card-aviso { display: none; }
.lp-card-versos {
  flex: 0 0 48dvh; min-height: 0; display: flex; flex-direction: column;
  margin: 0.5rem 0.75rem 0; border-radius: 18px; overflow: hidden; background: #221e18;
  animation: lp-versos-sobe 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes lp-versos-sobe { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
.lp-card-versos header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem 0.55rem 1.1rem; }
.lp-card-versos-titulo { margin: 0; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; color: #f2ead8; }
.lp-card-versos-dica { margin: 0.15rem 0 0; font-family: var(--font-sans); font-size: 0.74rem; color: rgba(242, 234, 216, 0.6); }
.lp-card-pronto {
  flex: none; border: 0; border-radius: 999px; padding: 0.5rem 1.1rem; cursor: pointer;
  background: #f2ead8; color: #1c1812; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600;
}
.lp-card-versos-lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0.2rem 1.1rem 0.5rem; }
.lp-card-versos-lista p {
  margin: 0; font-family: var(--font-leitura); font-size: 1.02rem; line-height: 1.75; color: rgba(242, 234, 216, 0.5);
}
.lp-card-versos-lista .lp-versos-refrao { margin-bottom: 0.7rem; font-style: italic; }
/* o trecho escolhido acende como marca-texto, contínuo de um versículo ao outro */
.lp-verso {
  cursor: pointer; border-radius: 3px; padding: 0.12em 0; transition: background 0.15s, color 0.15s;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; -webkit-tap-highlight-color: transparent;
}
.lp-verso sup { font-family: var(--font-sans); font-size: 0.62rem; font-weight: 600; color: #cb2e2e; margin-right: 0.2em; font-style: normal; }
.lp-verso.sel { color: #fff; background: rgba(203, 46, 46, 0.3); }
.lp-verso.sel sup { color: #f5b3a8; }
.lp-verso:focus-visible { outline: 1px solid rgba(242, 234, 216, 0.6); outline-offset: 2px; }
@media (hover: hover) { .lp-verso:not(.sel):hover { color: rgba(242, 234, 216, 0.85); } }
.lp-card-versos-conta { margin: 0; padding: 0.45rem 1.1rem 0.75rem; font-family: var(--font-sans); font-size: 0.72rem; color: rgba(242, 234, 216, 0.5); }
.lp-card-versos-conta.longo { color: #f09595; }
@media (min-width: 761px) { .lp-card-versos { width: min(640px, calc(100% - 2rem)); margin-inline: auto; align-self: center; } }
.lp-card-versos-lista { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.lp-arrastando .lp-verso { transition: none; }
/* o versículo pego ao segurar pisca mais forte e assenta no marca-texto */
.lp-verso.lp-verso-pego { animation: lp-verso-pego 0.45s ease-out; }
@keyframes lp-verso-pego { 0% { background: rgba(203, 46, 46, 0.75); } 100% { background: rgba(203, 46, 46, 0.3); } }
.lp-arrastando .lp-verso.sel { background: rgba(203, 46, 46, 0.42); }
/* Título da leitura e, no fim da linha, os ícones de ouvir e compartilhar — no mesmo desenho
   dos ícones da barra de baixo (traço 2.1 arredondado, cinza #8c867e), vermelhos no toque */
.lp-leitura-cabeca { display: flex; align-items: center; gap: 0.9rem; }
.lp-leitura-cabeca .leitura-label { min-width: 0; white-space: nowrap; }
.lp-leitura-acoes { display: flex; flex: none; gap: 0.75rem; margin-left: auto; }
.lp-leitura-acoes .lp-ouvir-botao, .lp-leitura-acoes .lp-compartilhar {
  display: grid; place-items: center; width: 38px; height: 38px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: #8c867e;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.lp-leitura-acoes .lp-ouvir-botao:hover, .lp-leitura-acoes .lp-compartilhar:hover { color: var(--lp-vermelho); background: rgba(203, 46, 46, 0.07); }
.lp-leitura-acoes button:active { transform: scale(0.9); color: var(--lp-vermelho); }
.lp-leitura-acoes svg { width: 24px; height: 24px; margin: 0; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  /* o título encolhe um pouco para caber com os dois ícones na mesma linha */
  .lp-leitura-cabeca { gap: 0.6rem; }
  .lp-leitura-cabeca .leitura-label { font-size: min(48px, 11vw); }
  .lp-leitura-acoes { gap: 0.5rem; }
  .lp-leitura-acoes .lp-ouvir-botao, .lp-leitura-acoes .lp-compartilhar { width: 36px; height: 36px; }
}

/* ── Evangelho comentado, no formato da leitura patrística do Ofício das Leituras: rubrica em
   vermelho, fonte e tema em itálico, corpo menor que o do Evangelho, nome do Padre em versalete
   no início do parágrafo; as palavras do Evangelho comentadas, em itálico (como na glosa) ── */
.lp-comentario { margin-top: 3rem; }
.lp-comentario::before {
  content: ''; display: block; width: min(240px, 100%); height: 48px; margin: 0 auto 2.4rem;
  background: url('/assets/img/liturgia-divisor.svg') center / contain no-repeat; opacity: 0.85;
}
.lp-coment-rotulo {
  margin: 0 0 0.5rem; font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-vermelho);
}
.lp-coment-fonte { margin: 0 0 0.2rem; font-style: italic; font-size: 0.92rem; color: var(--lp-suave); }
.lp-coment-tema { margin: 0 0 1rem; font-family: var(--font-titulo); font-style: italic; font-size: 1.35rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--lp-tinta); }
.lp-padres-texto { font-size: 14.5px; line-height: 1.58; color: var(--lp-texto); }
.lp-padres-texto p { margin: 0 0 0.75rem; text-indent: 0; }
.lp-padre-nome { font-variant: small-caps; letter-spacing: 0.05em; font-weight: 700; color: var(--lp-vermelho); }
.lp-lema { font-style: italic; }
.lp-coment-mais { margin: 0.3rem 0 0; }
.lp-coment-inteiro {
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--lp-vermelho);
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid rgba(203, 46, 46, 0.35); padding-bottom: 1px;
}
.lp-coment-inteiro:hover { border-bottom-color: var(--lp-vermelho); }
.lp-cic { margin-top: 2rem; }
.lp-cic-item { margin: 0 0 0.6rem; font-size: 14.5px; line-height: 1.58; }
.lp-cic-item a { color: var(--lp-texto); text-decoration: none; }
.lp-cic-item a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(203, 46, 46, 0.5); }
.lp-cic-num { font-family: var(--font-sans); font-weight: 600; font-size: 0.78rem; color: var(--lp-vermelho); margin-right: 0.25rem; }
/* modal com a perícope inteira */
.lp-lectio-item { margin: 0 0 1.3rem; font-size: 15px; line-height: 1.62; }
.lp-lectio-item .lp-padre { display: block; margin-bottom: 0.2rem; font-family: var(--font-sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lp-vermelho); font-style: normal; }
.lp-padre-obra { text-transform: none; letter-spacing: 0; font-weight: 400; font-style: italic; }
.lp-lectio-item p { margin: 0 0 0.35rem; }
.lp-latim summary { font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-suave); cursor: pointer; }
.lp-latim p { margin: 0.4rem 0 0; font-size: 13.5px; font-style: italic; color: var(--lp-suave); }

/* 6 · os Padres e o Catecismo: a folha sobe devagar mostrando o bloco embaixo do Evangelho */
.t-pad { overflow: hidden; border-radius: 12px; background: #fbf8f2; }
.t-pad-folha { padding: 10px 14px; animation: t-pad-sobe var(--t) var(--ease) infinite; }
.t-pad-folha p { margin: 0; }
.t-pad-evangelho { font: 0.78rem/1.45 var(--font-leitura); color: #222; }
.t-pad-fim { margin-top: 4px !important; font: italic 0.66rem var(--font-leitura); color: #8a8378; }
.t-pad-cruz { margin: 10px 0 8px; text-align: center; font-size: 0.7rem; color: var(--lp-vermelho); }
.t-pad-rotulo { margin-top: 8px !important; font-size: 0.52rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-vermelho); }
.t-pad-tema { margin: 2px 0 4px !important; font: italic 0.92rem/1.2 var(--font-titulo); color: #111; }
.t-pad-texto { font: 0.7rem/1.45 var(--font-leitura); color: #333; }
.t-pad-texto span { font-variant: small-caps; font-weight: 700; color: var(--lp-vermelho); letter-spacing: 0.04em; }
@keyframes t-pad-sobe { 0%, 18% { transform: none; } 45%, 100% { transform: translateY(-86px); } }