/* Relicário · relicariocatolico.com.br
   Uma capela à noite: a parede escura, o ouro da letra das capas, o linho do texto. Ouro sobre o escuro (identidade/DESIGN.md),
   levado a uma página de leitura. Um tema escuro de nascença e um "pergaminho" claro para quem lê melhor assim. */

:root {
  color-scheme: dark;
  --breu: #0B0A08;
  --nave: #0F0C09;
  --pedra: #17130F;
  --pedra-2: #1F1914;
  --veio: #2F271E;
  --veio-2: #43372A;
  --linho: #EFE6D2;
  --cera: #B5A890;
  --cera-2: #91866F;
  --ouro: #D8B25A;
  --ouro-vivo: #F0D68E;
  --ouro-fundo: rgba(216, 178, 90, .10);
  --ouro-linha: rgba(216, 178, 90, .38);
  --ancora: #E8C86A;
  --serifa: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --inscricao: Cinzel, "Trajan Pro", Georgia, serif;
  --texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --trilho: min(1240px, 100% - 40px);
  --leitura: 64ch;
  --raio: 10px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --topo: 68px;
  --veu: rgba(11, 10, 8, .88);
}
:root[data-tema="pergaminho"] {
  color-scheme: light;
  --breu: #EADFC6;
  --nave: #F4ECDB;
  --pedra: #EBE1CA;
  --pedra-2: #E2D6BB;
  --veio: #CDBF9F;
  --veio-2: #B9A983;
  --linho: #2A2118;
  --cera: #5C503C;
  --cera-2: #74664D;
  --ouro: #8B6511;
  --ouro-vivo: #6E4C05;
  --ouro-fundo: rgba(139, 101, 17, .10);
  --ouro-linha: rgba(139, 101, 17, .45);
  --ancora: #7A5608;
  --veu: rgba(244, 236, 219, .9);
}
html[data-tam="1"] { font-size: 112.5%; }
html[data-tam="2"] { font-size: 125%; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@view-transition { navigation: auto; }
body {
  margin: 0; background: var(--nave); color: var(--linho);
  font-family: var(--texto); font-size: 1rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--ancora); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--ouro-vivo); }
:focus-visible { outline: 2px solid var(--ouro-vivo); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--ouro); color: var(--breu); }
h1, h2, h3, h4 { font-family: var(--serifa); font-weight: 500; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
.trilho { width: var(--trilho); margin-inline: auto; }
.some { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: 16px; top: -64px; z-index: 100; background: var(--ouro); color: var(--breu); padding: 10px 16px; font-weight: 600; text-decoration: none; border-radius: 4px; }
.pular:focus { top: 12px; color: var(--breu); }

/* ---------- peças pequenas ---------- */
.rotulo {
  font-family: var(--inscricao); font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ouro); margin: 0;
}
.chip {
  display: inline-block; font-family: var(--inscricao); font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 10px 4px; border-radius: 999px; border: 1px solid var(--ouro-linha); color: var(--ouro); background: transparent; white-space: nowrap;
}
.chip--sol { background: var(--ouro); color: var(--breu); border-color: var(--ouro); }
.chip--fes { background: var(--ouro-fundo); color: var(--ouro-vivo); }
.chip--mar, .chip--fac { color: var(--cera); border-color: var(--veio-2); }
.botao {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: .95rem; letter-spacing: .01em; border: 1px solid var(--ouro); color: var(--breu); background: var(--ouro);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.botao:hover { background: var(--ouro-vivo); color: var(--breu); transform: translateY(-1px); }
.botao--vazado { background: transparent; color: var(--ouro-vivo); }
.botao--vazado:hover { background: var(--ouro-fundo); color: var(--ouro-vivo); }
.botao svg { width: 18px; height: 18px; flex: none; }
.ornamento { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--ouro); margin: 0 auto; }
.ornamento::before, .ornamento::after { content: ""; height: 1px; width: min(120px, 22vw); background: linear-gradient(90deg, transparent, var(--ouro-linha)); }
.ornamento::after { transform: scaleX(-1); }
.ornamento svg { width: 22px; height: 22px; }

/* ---------- barra de cima ---------- */
.topo {
  position: sticky; top: 0; z-index: 40; background: var(--veu); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--veio);
}
.topo__in { display: flex; align-items: center; gap: 20px; min-height: var(--topo); }
.marca { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ouro); margin-right: auto; }
.marca span { font-family: var(--inscricao); font-weight: 700; font-size: 1rem; letter-spacing: .3em; text-transform: uppercase; }
/* o selo do canal (a foto de perfil): medalhão de ouro e esmalte, com um fio de ouro por fora */
.selo { border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(216, 178, 90, .55), 0 6px 18px rgba(0, 0, 0, .45); transition: transform .6s var(--ease); background: #0B0A08; }
.marca:hover .selo { transform: scale(1.07); }
.selo--grande { width: min(280px, 100%); height: auto; aspect-ratio: 1; box-shadow: 0 0 0 1px rgba(216, 178, 90, .5), 0 0 0 10px rgba(216, 178, 90, .06), 0 40px 90px rgba(0, 0, 0, .65); }
.ornamento--selo .selo { width: 52px; height: 52px; }
.pagina-topo--selo .trilho { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .pagina-topo--selo .trilho { grid-template-columns: minmax(0, 1fr) auto; gap: 80px; } }
.pagina-topo--selo .selo--grande { justify-self: center; }
@media (max-width: 899px) { .pagina-topo--selo .selo--grande { order: -1; width: 124px; height: 124px; justify-self: start; } }
.menu { display: flex; gap: 6px; }
.menu a { color: var(--cera); text-decoration: none; font-size: .92rem; padding: 10px 12px; border-radius: 6px; position: relative; }
.menu a:hover, .menu a[aria-current] { color: var(--linho); }
.menu a[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px; background: var(--ouro); }
.ferramentas { display: flex; align-items: center; gap: 4px; }
.icone {
  width: 44px; height: 44px; display: inline-grid; place-items: center; background: transparent; border: 0; color: var(--cera); cursor: pointer; border-radius: 50%;
}
.icone:hover { color: var(--ouro-vivo); background: var(--ouro-fundo); }
.icone svg { width: 20px; height: 20px; }
.menu-botao { display: none; }
.topo .botao { min-height: 40px; padding: 0 16px; font-size: .85rem; }
@media (max-width: 920px) {
  .menu { position: fixed; inset: var(--topo) 0 auto 0; flex-direction: column; background: var(--nave); padding: 12px 20px 24px; border-bottom: 1px solid var(--veio);
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: .25s var(--ease); }
  .menu[data-aberto] { transform: none; opacity: 1; pointer-events: auto; }
  .menu a { font-size: 1.15rem; padding: 14px 4px; border-bottom: 1px solid var(--veio); border-radius: 0; }
  .menu a[aria-current]::after { display: none; }
  .menu-botao { display: inline-grid; }
  .topo .botao { display: none; }
}

/* ---------- aparência (tema e tamanho) ---------- */
.aparencia { position: relative; }
.aparencia__caixa {
  position: absolute; right: 0; top: calc(100% + 8px); width: 260px; background: var(--pedra); border: 1px solid var(--veio-2); border-radius: var(--raio);
  padding: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); display: none;
}
.aparencia__caixa[data-aberto] { display: block; }
.aparencia__caixa h2 { font: 700 .7rem/1 var(--inscricao); letter-spacing: .2em; text-transform: uppercase; color: var(--ouro); margin: 0 0 10px; }
.aparencia__caixa + .x, .aparencia__grupo { display: flex; gap: 8px; margin-bottom: 16px; }
.aparencia__grupo:last-child { margin-bottom: 0; }
.aparencia__grupo button {
  flex: 1; min-height: 44px; background: var(--nave); border: 1px solid var(--veio-2); color: var(--linho); border-radius: 8px; cursor: pointer; font: inherit; font-size: .9rem;
}
.aparencia__grupo button[aria-pressed="true"] { border-color: var(--ouro); color: var(--ouro-vivo); background: var(--ouro-fundo); }

/* ---------- abertura: o santo de hoje ---------- */
/* a abertura é sempre escura, nos dois temas: a pintura emerge do breu */
.hero {
  --breu: #0B0A08; --nave: #0F0C09; --pedra: #17130F; --veio: #2F271E; --linho: #EFE6D2; --cera: #B5A890; --cera-2: #91866F;
  --ouro: #D8B25A; --ouro-vivo: #F0D68E; --ouro-fundo: rgba(216, 178, 90, .10); --ouro-linha: rgba(216, 178, 90, .38); --ancora: #E8C86A;
  position: relative; isolation: isolate; min-height: min(calc(100svh - var(--topo)), 860px); display: grid; align-items: end; overflow: clip; background: var(--breu);
}
.hero__arte { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__arte img { width: 100%; height: 100%; object-fit: cover; object-position: 50% calc(var(--foco, .25) * 100%); transform-origin: 60% 30%; animation: respira 48s ease-in-out infinite alternate; }
/* o verniz da casa (DESIGN.md): vinheta radial quente em toda obra, que também esconde canto claro de papel e moldura */
.hero__arte::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 78% 86% at 58% 44%, rgba(11, 10, 8, 0) 52%, rgba(14, 10, 6, .72) 100%); }
@keyframes respira { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, var(--nave) 1%, rgba(11, 10, 8, .55) 28%, rgba(11, 10, 8, 0) 62%),
    linear-gradient(90deg, rgba(11, 10, 8, .9) 0%, rgba(11, 10, 8, .55) 38%, rgba(11, 10, 8, 0) 72%);
}
.hero--retrato .hero__arte { left: 36%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%); mask-image: linear-gradient(90deg, transparent 0, #000 38%); }
.hero--retrato::before { background:
    linear-gradient(0deg, var(--nave) 1%, rgba(11, 10, 8, 0) 40%),
    linear-gradient(90deg, rgba(11, 10, 8, 1) 0%, rgba(11, 10, 8, .8) 34%, rgba(11, 10, 8, 0) 66%); }
/* imagem pequena (retrato antigo de 400 a 900 px): não estica por cima da tela, flutua na escuridão com máscara radial */
.hero--baixa .hero__arte { left: auto; right: 5%; width: min(46%, 660px); display: flex; align-items: center; justify-content: center; }
.hero--baixa .hero__arte img {
  width: min(100%, calc(var(--nat, 600) * 1.6px)); height: auto; max-height: 90%; animation: none;
  -webkit-mask-image: radial-gradient(ellipse 66% 68% at 50% 48%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 66% 68% at 50% 48%, #000 40%, transparent 100%);
}
.hero--baixa::before { background: linear-gradient(0deg, var(--nave) 1%, rgba(11, 10, 8, 0) 40%); }
.grao::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.hero__texto { padding-block: 120px 56px; max-width: 760px; color: #EFE6D2; }
.hero .rotulo { color: var(--ouro); }
.hero--sem-arte { background: radial-gradient(120% 90% at 78% 8%, #241A10 0%, var(--breu) 62%); }
.hero--sem-arte .hero__arte { display: none; }
.hero--sem-arte::before { display: none; }
.hero__numeral {
  position: absolute; right: -2vw; top: 50%; transform: translateY(-54%); z-index: -1; font-family: var(--inscricao); font-weight: 700;
  font-size: min(48vw, 640px); line-height: .8; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--ouro-linha); opacity: .8; user-select: none;
}
.hero__aro { position: absolute; z-index: -1; right: 8%; top: 12%; width: min(40vw, 520px); color: var(--ouro); opacity: .16; }
.titulo-santo { margin-top: 18px; line-height: .98; letter-spacing: -.012em; color: #F4EBD6; }
.titulo-santo small {
  display: block; font-family: var(--inscricao); font-weight: 600; font-size: clamp(.8rem, .62rem + .55vw, 1.1rem); letter-spacing: .34em; text-transform: uppercase;
  color: var(--ouro); margin-bottom: .55em;
}
.titulo-santo strong { display: block; font-weight: 500; font-size: clamp(2.7rem, 1.15rem + 6.3vw, 6.6rem); text-wrap: balance; }
.gancho { font-family: var(--serifa); font-style: italic; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.9rem); line-height: 1.3; margin: 22px 0 0; max-width: 34ch; color: #E4D9C0; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero .botao--vazado { color: #F0D68E; }
@media (max-width: 760px) { .hero .titulo-santo, .hero .gancho { text-shadow: 0 2px 24px rgba(11, 10, 8, .8); } }
.hero__vizinhos { display: flex; justify-content: space-between; gap: 16px; padding-block: 0 28px; border-top: 1px solid rgba(239, 230, 210, .14); padding-top: 18px; font-size: .88rem; }
.hero__vizinhos a { color: #CFC3A8; text-decoration: none; display: inline-flex; gap: 10px; align-items: center; min-width: 0; max-width: 48%; }
.hero__vizinhos a > span:not([aria-hidden]) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hero__vizinhos a:hover { color: var(--ouro-vivo); }
.hero__vizinhos b { font-family: var(--inscricao); font-weight: 600; letter-spacing: .14em; font-size: .7rem; text-transform: uppercase; color: var(--ouro); }
@keyframes entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.entra { animation: entra .8s var(--ease) both; }
.entra-2 { animation-delay: .1s; } .entra-3 { animation-delay: .2s; } .entra-4 { animation-delay: .3s; }
@media (max-width: 760px) {
  .hero { min-height: 0; display: block; }
  .hero__arte, .hero--retrato .hero__arte { inset: 0 0 auto 0; left: 0; height: 96vw; -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%); mask-image: linear-gradient(180deg, #000 52%, transparent 100%); }
  .hero--baixa .hero__arte { left: 0; right: 0; width: auto; display: block; }
  .hero--baixa .hero__arte img { width: 100%; height: 100%; max-height: none; object-fit: cover; -webkit-mask-image: none; mask-image: none; }
  .hero::before, .hero--retrato::before, .hero--baixa::before { background: linear-gradient(0deg, var(--nave) 0, rgba(11, 10, 8, 0) 22%); }
  .hero__texto { padding-top: 66vw; padding-bottom: 30px; }
  .hero__numeral { font-size: 70vw; top: 34%; }
}
.credito-obra { position: absolute; right: 20px; bottom: 76px; max-width: 360px; text-align: right; font-family: var(--serifa); font-style: italic; font-size: .92rem; color: rgba(239, 230, 210, .62); line-height: 1.3; }
.credito-obra a { color: inherit; }
@media (max-width: 760px) { .credito-obra { position: static; max-width: none; text-align: left; margin: 0 20px; padding: 0 0 22px; color: var(--cera-2); } }

/* ---------- seções ---------- */
.secao { padding-block: clamp(64px, 9vw, 120px); }
.secao--funda { background: var(--pedra); border-block: 1px solid var(--veio); }
.cabeca { max-width: 760px; margin-bottom: clamp(28px, 4vw, 52px); }
.cabeca h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1.02; margin-top: 14px; }
.cabeca h2 em { color: var(--ouro-vivo); font-weight: 600; }
.cabeca p { color: var(--cera); font-size: 1.08rem; max-width: 56ch; margin-top: 16px; }
.cabeca--lado { display: flex; justify-content: space-between; align-items: end; gap: 24px; max-width: none; flex-wrap: wrap; }
.mais { font-size: .92rem; white-space: nowrap; }

/* ---------- a história do dia ---------- */
.leitura-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
@media (min-width: 980px) { .leitura-grade { grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr); gap: 72px; } }
.historia { font-family: var(--serifa); font-weight: 500; font-size: clamp(1.32rem, 1.15rem + .6vw, 1.62rem); line-height: 1.52; color: var(--linho); max-width: var(--leitura); }
.historia p:first-of-type::first-letter {
  float: left; font-family: var(--serifa); font-weight: 600; font-size: 4.9em; line-height: .78; padding: .07em .1em 0 0; color: var(--ouro-vivo);
}
.lateral { display: grid; gap: 28px; align-content: start; }
.lateral h3 { font: 700 .72rem/1 var(--inscricao); letter-spacing: .22em; text-transform: uppercase; color: var(--ouro); margin: 0 0 14px; }
.lateral > div > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lateral > div > ul > li { color: var(--linho); font-family: var(--serifa); font-size: 1.28rem; line-height: 1.25; padding-bottom: 10px; border-bottom: 1px solid var(--veio); }
.lateral > div > ul > li:last-child { border-bottom: 0; }
.lateral .prosa p, .lateral .prosa li { font-size: .98rem; }
.lateral .prosa ol { padding-left: 1.3em; }
.lateral .fontes a { font-family: var(--texto); font-size: .95rem; text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lateral .fontes a:hover span { text-decoration: underline; }
.lateral .fontes svg { width: 15px; height: 15px; opacity: .7; flex: none; }
.nobrasil { background: var(--ouro-fundo); border: 1px solid var(--ouro-linha); border-radius: var(--raio); padding: 22px 24px; }
.nobrasil h3 { margin-bottom: 10px; }
.nobrasil p { font-family: var(--serifa); font-size: 1.28rem; line-height: 1.38; margin: 0; }
.nota-grau { font-size: .9rem; color: var(--cera); margin: 0; }

/* ---------- cartões dos dias ---------- */
.fita { display: grid; grid-auto-flow: column; grid-auto-columns: min(260px, 68vw); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--veio-2) transparent; margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }
@supports (width: 1cqw) { .fita { margin-inline: 0; padding-inline: 0; } }
.fita > * { scroll-snap-align: start; }
.grade-dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 18px; }
.cartao-dia {
  position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--raio); overflow: hidden; background: var(--pedra-2); text-decoration: none; color: #F0E8D4;
  border: 1px solid var(--veio); isolation: isolate; transition: transform .5s var(--ease), border-color .3s;
}
.cartao-dia:hover { transform: translateY(-4px); border-color: var(--ouro-linha); color: #F0E8D4; }
.cartao-dia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% calc(var(--foco, .25) * 100%); z-index: -2; transition: transform 1.2s var(--ease); }
.cartao-dia:hover img { transform: scale(1.06); }
.cartao-dia::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11, 10, 8, .94) 0%, rgba(11, 10, 8, .5) 40%, rgba(11, 10, 8, .05) 72%); }
.cartao-dia--vazio { background: radial-gradient(120% 80% at 80% 0%, #2A1F13 0%, var(--pedra) 70%); }
.cartao-dia--vazio::before { content: attr(data-numeral); position: absolute; right: -10px; top: 6px; z-index: -1; font-family: var(--inscricao); font-weight: 700; font-size: 9rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--ouro-linha); opacity: .55; }
.cartao-dia__data { position: absolute; top: 14px; left: 16px; font-family: var(--inscricao); font-weight: 700; line-height: 1; color: var(--ouro-vivo); }
.cartao-dia__data b { display: block; font-size: 2rem; }
.cartao-dia__data span { display: block; font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; margin-top: 6px; color: var(--ouro); }
.cartao-dia__corpo { position: absolute; left: 16px; right: 16px; bottom: 16px; }
.cartao-dia h3 { font-size: 1.5rem; line-height: 1.08; color: #F4EBD6; margin-bottom: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.cartao-dia .chip { font-size: .58rem; padding: 4px 8px 3px; color: var(--ouro-vivo); border-color: rgba(240, 214, 142, .4); }
.cartao-dia.hoje { border-color: var(--ouro); }
.cartao-dia.hoje .cartao-dia__data::after { content: "hoje"; display: inline-block; margin-left: 10px; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; background: var(--ouro); color: var(--breu); padding: 3px 7px 2px; border-radius: 3px; vertical-align: 6px; }

/* ---------- a roda do ano ---------- */
.roda-grade { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .roda-grade { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 72px; } }
.roda { width: min(100%, 640px); margin-inline: auto; aspect-ratio: 1; position: relative; }
.roda svg { width: 100%; height: 100%; overflow: visible; }
.roda .t { stroke: var(--veio-2); stroke-width: 1; transition: stroke .2s; }
.roda .t-fac { stroke: var(--veio-2); } .roda .t-mem { stroke: #7C6C4C; } .roda .t-fes { stroke: var(--ouro); stroke-width: 1.4; } .roda .t-sol { stroke: var(--ouro-vivo); stroke-width: 2; }
.roda a:hover .t, .roda a:focus .t, .roda .t.ativo { stroke: #fff; stroke-width: 2.4; }
.roda .mes { font: 700 11px var(--inscricao); letter-spacing: .22em; fill: var(--cera); text-transform: uppercase; }
.roda .aro { fill: none; stroke: var(--ouro-linha); stroke-width: 1.5; }
.roda .h { stroke: transparent; stroke-width: 8; }
.roda .ponto { fill: var(--ouro-vivo); }
.roda .ponto-aro { fill: none; stroke: var(--ouro); stroke-width: 1.2; opacity: .7; animation: pulsa 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulsa { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.5); opacity: .2; } }
.sub-santo { margin-top: 14px; color: #CFC3A8; letter-spacing: .14em; font-weight: 600; }
.roda__centro { position: absolute; inset: 21%; display: grid; place-content: center; text-align: center; gap: 10px; pointer-events: none; }
.roda__centro b { font: 700 .7rem/1 var(--inscricao); letter-spacing: .26em; color: var(--ouro); text-transform: uppercase; }
.roda__centro strong { font-family: var(--serifa); font-weight: 500; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.3rem); line-height: 1.05; color: var(--linho); }
.roda__centro em { font-family: var(--serifa); font-size: 1.1rem; color: var(--cera); }
.meses { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.meses a { display: block; text-align: center; padding: 12px 6px; border: 1px solid var(--veio); border-radius: 8px; color: var(--linho); text-decoration: none; font-family: var(--inscricao); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; }
.meses a:hover, .meses a[aria-current] { border-color: var(--ouro); color: var(--ouro-vivo); background: var(--ouro-fundo); }
.legenda { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0; padding: 0; list-style: none; font-size: .86rem; color: var(--cera); }
.legenda i { display: inline-block; width: 22px; height: 0; border-top: 2px solid; margin-right: 8px; vertical-align: middle; }

/* ---------- índice de A a Z ---------- */
.letras { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 40px; position: sticky; top: var(--topo); background: var(--veu); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 10px 0; z-index: 5; }
.letras a { min-width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid var(--veio-2); border-radius: 8px; font: 700 .9rem var(--inscricao); color: var(--linho); text-decoration: none; }
.letras a:hover { border-color: var(--ouro); color: var(--ouro-vivo); background: var(--ouro-fundo); }
.letra-bloco { margin-bottom: 48px; }
.letra-bloco h2 { font: 700 2.4rem/1 var(--inscricao); color: var(--ouro-vivo); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--ouro-linha); }
.lista-az { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 0 40px; }
.lista-az a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--veio); text-decoration: none; color: var(--linho); }
.lista-az a:hover span { color: var(--ouro-vivo); }
.lista-az span { font-family: var(--serifa); font-size: 1.28rem; line-height: 1.2; }
.lista-az small { color: var(--cera); font-size: .82rem; white-space: nowrap; }

/* ---------- os dias altos de cada mês ---------- */
.meses-altos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 36px 40px; }
.mes-card h3 { font: 700 .78rem/1 var(--inscricao); letter-spacing: .22em; text-transform: uppercase; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--ouro-linha); }
.mes-card h3 a { color: var(--ouro); text-decoration: none; }
.mes-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mes-card li a { display: grid; grid-template-columns: 34px 1fr; gap: 0 10px; align-items: baseline; padding: 9px 0; text-decoration: none; color: var(--linho); border-bottom: 1px solid var(--veio); }
.mes-card li a:hover { color: var(--ouro-vivo); }
.mes-card li b { font-family: var(--inscricao); font-weight: 700; color: var(--ouro-vivo); font-size: 1.1rem; text-align: right; }
.mes-card li span { font-family: var(--serifa); font-size: 1.28rem; line-height: 1.15; }
.mes-card li small { grid-column: 2; justify-self: start; margin-top: 4px; font-size: .56rem; padding: 3px 8px 2px; }

/* ---------- novenas ---------- */
.novena-destaque { display: grid; gap: 0; border: 1px solid var(--veio-2); border-radius: 14px; overflow: hidden; background: var(--pedra); }
@media (min-width: 900px) { .novena-destaque { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
.novena-destaque__arte { position: relative; min-height: 220px; background: var(--breu); }
.novena-destaque__arte img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.novena-destaque__corpo { padding: clamp(22px, 2.6vw, 40px); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.novena-destaque h3 { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.8rem); line-height: 1.04; }
.novena-destaque p { color: var(--cera); margin: 0; }
.contagem { display: flex; gap: 22px; margin: 4px 0; }
.contagem div { text-align: left; }
.contagem b { display: block; font-family: var(--inscricao); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--ouro-vivo); font-variant-numeric: tabular-nums; }
.contagem span { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cera); }
.nove { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nove li { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--ouro); }
.nove li.feito { background: var(--ouro); }
.grade-novenas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 24px; }
.cartao-novena { display: grid; border: 1px solid var(--veio); border-radius: var(--raio); overflow: hidden; background: var(--pedra); text-decoration: none; color: var(--linho); transition: transform .5s var(--ease), border-color .3s; }
.cartao-novena:hover { transform: translateY(-4px); border-color: var(--ouro-linha); color: var(--linho); }
.cartao-novena__arte { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--breu); }
.cartao-novena__arte img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cartao-novena:hover img { transform: scale(1.05); }
.cartao-novena__hora { position: absolute; top: 12px; right: 12px; font: 700 .72rem/1 var(--inscricao); letter-spacing: .14em; background: var(--ouro); color: var(--breu); padding: 7px 10px 6px; border-radius: 4px; }
.cartao-novena__selo { position: absolute; top: 12px; left: 12px; }
.cartao-novena__corpo { padding: 18px 20px 22px; display: grid; gap: 6px; }
.cartao-novena h3 { font-size: 1.6rem; line-height: 1.1; }
.cartao-novena p { margin: 0; color: var(--cera); font-size: .93rem; font-variant-numeric: tabular-nums; }
.chip--breve { background: var(--breu); color: var(--ouro-vivo); border-color: var(--ouro-linha); }
.chip--andamento { background: var(--ouro); color: var(--breu); }
.chip--concluida { color: var(--cera); border-color: var(--veio-2); background: var(--breu); }

/* ---------- vídeos ---------- */
.grade-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 26px 20px; }
.video { display: grid; gap: 12px; text-decoration: none; color: var(--linho); align-content: start; }
.video__quadro { position: relative; aspect-ratio: 16 / 9; border-radius: var(--raio); overflow: hidden; background: var(--pedra-2); border: 1px solid var(--veio); }
.video--short .video__quadro { aspect-ratio: 9 / 16; }
.video__quadro img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.video:hover img { transform: scale(1.05); }
.video__quadro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 10, 8, .6), rgba(11, 10, 8, 0) 45%); }
.video__play { position: absolute; left: 14px; bottom: 14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: var(--ouro); color: var(--breu); display: grid; place-items: center; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.video .video__play { left: 50%; top: 50%; bottom: auto; margin: -22px 0 0 -22px; opacity: 0; transform: scale(.8); }
.video:hover .video__play, .video:focus-visible .video__play { opacity: 1; transform: scale(1); }
.video__play svg { width: 16px; height: 16px; margin-left: 2px; }
.video__dur { position: absolute; right: 12px; bottom: 14px; z-index: 2; font: 600 .78rem/1 var(--texto); background: rgba(11, 10, 8, .8); color: #F0E8D4; padding: 5px 8px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.video h3 { font-size: 1.34rem; line-height: 1.16; }
.video p { margin: 0; font-size: .86rem; color: var(--cera); }
.grade-shorts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(168px, 46%), 1fr)); gap: 22px 16px; }
.grade-shorts .video h3 { font-size: 1.04rem; line-height: 1.18; }
.grade-shorts .video p { font-size: .78rem; }
.bloco-videos + .bloco-videos { margin-top: 72px; }
.bloco-videos > h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); margin-bottom: 26px; }
.video-destaque { display: grid; gap: 32px; }
@media (min-width: 900px) { .video-destaque { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: 56px; } }
.video-destaque h3 { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.9rem); line-height: 1.05; margin: 12px 0 14px; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filtros button { min-height: 44px; padding: 0 20px; border-radius: 999px; background: transparent; border: 1px solid var(--veio-2); color: var(--linho); cursor: pointer; font: inherit; font-size: .92rem; }
.filtros button[aria-pressed="true"] { border-color: var(--ouro); color: var(--ouro-vivo); background: var(--ouro-fundo); }
.player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--raio); overflow: hidden; background: var(--breu); border: 1px solid var(--veio); }
.player--short { aspect-ratio: 9 / 16; max-width: 380px; }
.player iframe, .player button { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player button { padding: 0; border: 0; background: none; cursor: pointer; }
.player button img { width: 100%; height: 100%; object-fit: cover; }
.player button .video__play { width: 72px; height: 72px; left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.player button .video__play svg { width: 26px; height: 26px; }
.player button:hover .video__play { transform: translate(-50%, -50%) scale(1.08); }

/* ---------- o contrato editorial ---------- */
.tres { display: grid; gap: 40px; counter-reset: p; }
@media (min-width: 900px) { .tres { grid-template-columns: repeat(3, 1fr); gap: 56px; } }
.tres > div { counter-increment: p; }
.tres h3 { font-size: 1.7rem; line-height: 1.1; margin-bottom: 12px; }
.tres h3::before { content: counter(p, upper-roman); display: block; font-family: var(--inscricao); font-weight: 700; font-size: 2.6rem; color: var(--ouro-vivo); margin-bottom: 14px; line-height: 1; }
.tres p { color: var(--cera); margin: 0; }

/* ---------- página interna: texto corrido ---------- */
.pagina-topo { padding-block: clamp(56px, 8vw, 104px) clamp(24px, 4vw, 48px); border-bottom: 1px solid var(--veio); background: radial-gradient(90% 100% at 85% 0%, #1B140D 0%, var(--nave) 70%); }
:root[data-tema="pergaminho"] .pagina-topo { background: var(--pedra); }
.pagina-topo h1 { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.2rem); line-height: 1; margin-top: 16px; }
.pagina-topo h1 em { color: var(--ouro-vivo); font-weight: 600; }
.pagina-topo .lede { font-family: var(--serifa); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); color: var(--cera); max-width: 46ch; margin: 22px 0 0; line-height: 1.35; }
.prosa { max-width: var(--leitura); }
.prosa h2 { font-size: 2.1rem; line-height: 1.1; margin: 2.2em 0 .6em; }
.prosa h3 { font-size: 1.5rem; margin: 1.8em 0 .5em; }
.prosa p, .prosa li { color: var(--linho); font-size: 1.06rem; }
.prosa ul, .prosa ol { padding-left: 1.2em; }
.prosa li { margin-bottom: .5em; }
.migalhas { font-size: .86rem; color: var(--cera); margin: 0 0 18px; }
.migalhas a { color: var(--cera); text-decoration: none; }
.migalhas a:hover { color: var(--ouro-vivo); }
.migalhas span { margin: 0 8px; opacity: .5; }

/* ---------- livreto da novena na tela ---------- */
.dias-nove { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dia-nove { display: grid; grid-template-columns: 64px 1fr auto; gap: 18px; align-items: center; padding: 18px 22px; border: 1px solid var(--veio); border-radius: var(--raio); background: var(--pedra); text-decoration: none; color: var(--linho); transition: border-color .25s, background .25s; }
a.dia-nove:hover { border-color: var(--ouro-linha); background: var(--pedra-2); color: var(--linho); }
.dia-nove b { font-family: var(--inscricao); font-weight: 700; font-size: 1.9rem; color: var(--ouro-vivo); text-align: center; line-height: 1; }
.dia-nove h3 { font-size: 1.35rem; line-height: 1.15; }
.dia-nove p { margin: 2px 0 0; font-size: .88rem; color: var(--cera); }
.dia-nove .chip { align-self: center; }
.oracao { font-family: var(--serifa); font-weight: 500; font-size: clamp(1.3rem, 1.12rem + .6vw, 1.55rem); line-height: 1.55; max-width: 58ch; }
.oracao p { margin: 0 0 1em; }
.oracao p em { color: var(--cera); }
.oracao .vr { margin: 0 0 .15em; }
.oracao h3 { font: 700 .74rem/1 var(--inscricao); letter-spacing: .22em; text-transform: uppercase; color: var(--ouro); margin: 2.2em 0 1em; }
.oracao .data-dia { font-family: var(--texto); font-size: .95rem; color: var(--cera); font-style: normal; }
.passo-a-passo { counter-reset: s; list-style: none; padding: 0; display: grid; gap: 14px; }
.passo-a-passo li { counter-increment: s; position: relative; padding-left: 52px; font-size: 1.04rem; }
.passo-a-passo li::before { content: counter(s, upper-roman); position: absolute; left: 0; top: 0; font: 700 1.1rem/1.6 var(--inscricao); color: var(--ouro-vivo); width: 40px; }

/* ---------- busca ---------- */
dialog.busca { border: 1px solid var(--veio-2); border-radius: 14px; padding: 0; width: min(640px, calc(100% - 32px)); max-height: min(560px, 80svh); background: var(--pedra); color: var(--linho); box-shadow: 0 40px 100px rgba(0, 0, 0, .6); margin-top: 10svh; }
dialog.busca::backdrop { background: rgba(5, 4, 3, .72); backdrop-filter: blur(4px); }
.busca__campo { display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--veio); }
.busca__campo svg { width: 20px; height: 20px; color: var(--ouro); flex: none; }
.busca__campo input { flex: 1; background: transparent; border: 0; color: var(--linho); font: 500 1.3rem var(--serifa); min-height: 64px; outline: none; }
.busca__campo input::placeholder { color: var(--cera-2); }
.busca__lista { list-style: none; margin: 0; padding: 8px; overflow-y: auto; max-height: 420px; }
.busca__lista a { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 14px; border-radius: 8px; text-decoration: none; color: var(--linho); align-items: baseline; }
.busca__lista a:hover, .busca__lista a[aria-selected="true"] { background: var(--ouro-fundo); color: var(--ouro-vivo); }
.busca__lista small { color: var(--cera); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.busca__vazio { padding: 28px 20px; text-align: center; color: var(--cera); margin: 0; }
.busca__dica { padding: 10px 20px; border-top: 1px solid var(--veio); font-size: .78rem; color: var(--cera-2); display: flex; gap: 16px; }
kbd { font: 600 .74rem var(--texto); border: 1px solid var(--veio-2); border-radius: 4px; padding: 2px 6px; }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--veio); background: var(--breu); padding-block: 72px 32px; }
.rodape__grade { display: grid; gap: 40px; }
@media (min-width: 900px) { .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.rodape .marca { margin: 0 0 18px; }
.rodape p { color: var(--cera); font-size: .95rem; max-width: 38ch; }
.rodape h2 { font: 700 .72rem/1 var(--inscricao); letter-spacing: .22em; text-transform: uppercase; color: var(--ouro); margin: 6px 0 16px; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rodape ul a { color: var(--linho); text-decoration: none; font-size: .95rem; }
.rodape ul a:hover { color: var(--ouro-vivo); }
.rodape__base { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--veio); display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; font-size: .84rem; color: var(--cera-2); }
.rodape__base p { margin: 0; max-width: none; font-size: .84rem; color: var(--cera-2); }
.rodape__base a { color: var(--cera); }

/* ---------- aparecer ao rolar ---------- */
.rev { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rev.vis { opacity: 1; transform: none; }
.sem-js .rev { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rev { opacity: 1; transform: none; transition: none; }
  .entra { animation: none; }
  .hero__arte img { animation: none; }
  * { transition-duration: .01ms !important; }
}
@media print { .topo, .rodape, .hero__vizinhos, .botao { display: none; } body { background: #fff; color: #000; } }