/* Terço dos Homens da Catedral — protótipo
   Paleta tirada do brasão da Paróquia. Zilla Slab é a "voz da oração" (orações e títulos);
   Atkinson Hyperlegible Next é a voz da informação, escolhida pela legibilidade. */

:root {
  --manto: #223E8E;
  --manto-fundo: #1B3274;
  --tinta: #16244F;
  --tinta-suave: #4B5677;
  --cal: #F6F7FB;
  --nevoa: #E3E8F3;
  --ouro: #E9C046;
  --ouro-fosco: #C8A637;
  --rubrica: #B51F24;
  --branco: #FFFFFF;

  --serif: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", Roboto, system-ui, sans-serif;

  --nav-w: 17rem;
  --raio: 4px;
  --ease: cubic-bezier(.2, .75, .2, 1);
  color-scheme: light;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--manto);
  color: var(--tinta);
  font: 400 1.125rem/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, video, iframe, svg { display: block; max-width: 100%; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.08;
  color: var(--manto);
  text-wrap: balance;
}
h1:focus, h2:focus, h3:focus { outline: none; }
p, ul, ol, dl, dd, figure, blockquote, address { margin: 0; }
p { text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--rubrica); outline-offset: 3px; }
.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.defs { position: absolute; width: 0; height: 0; }

/* ---------- Estrutura: menu-terço | palco | rodapé ---------- */

.app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "nav palco"
    "nav rodape";
}
.topo, .terco-fechar { display: none; }

.terco {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(1.25rem, 3.5vh, 2rem) 1.5rem clamp(1rem, 2.5vh, 1.5rem) 1.75rem;
  background: var(--manto);
  color: var(--cal);
}
.marca {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .85rem;
  align-items: center;
  margin-bottom: clamp(1rem, 4.5vh, 2.5rem);
  text-decoration: none;
}
.marca img { grid-row: 1 / span 2; width: 3.4rem; height: auto; }
.marca-nome { align-self: end; font: 700 1.4rem/1.02 var(--serif); color: var(--branco); }
.marca-local {
  align-self: start;
  margin-top: .3rem;
  font-size: .875rem;
  line-height: 1.3;
  color: color-mix(in srgb, var(--cal) 76%, transparent);
}

/* O menu é um terço: cada seção é uma conta grande presa num fio de contas pequenas. */
.contas {
  --x: .5625rem;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}
.contas::before {
  content: "";
  position: absolute;
  top: 1.375rem;
  bottom: -.9rem;
  left: calc(var(--x) - 3px);
  width: 6px;
  background:
    radial-gradient(circle at 3px 3px, color-mix(in srgb, var(--ouro) 58%, transparent) 2.1px, transparent 2.6px)
    0 0 / 6px 13px repeat-y;
}
.contas a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 2.75rem;
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  color: color-mix(in srgb, var(--cal) 80%, transparent);
  transition: color .2s;
}
.contas a:hover { color: var(--branco); }
.contas a[aria-current="page"] { color: var(--branco); font-weight: 700; }
.contas a:focus-visible { outline-color: var(--ouro); }
.conta {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--ouro);
  border-radius: 50%;
  background: var(--manto);
  box-shadow: 0 0 0 .3rem var(--manto);
  transition: background-color .2s;
}
.contas a:hover .conta { background: color-mix(in srgb, var(--ouro) 30%, var(--manto)); }
.conta.acesa {
  background: var(--ouro);
  box-shadow: 0 0 0 .3rem var(--manto), 0 0 1.2rem .3rem color-mix(in srgb, var(--ouro) 55%, transparent);
  view-transition-name: luz;
}
.cruz { flex: none; width: 1.125rem; height: 1.9rem; margin-top: .9rem; color: var(--ouro); }

.palco {
  grid-area: palco;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--cal);
  container: palco / size;
  view-transition-name: palco;
}
.frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(.9rem, 3cqh, 1.75rem);
  padding: clamp(1.25rem, 5.5cqh, 3.25rem) clamp(1.25rem, 5cqw, 4.25rem) clamp(1.25rem, 5cqh, 3rem);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.rodape {
  grid-area: rodape;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .2rem 1.5rem;
  padding: .55rem clamp(1.25rem, 3.5vw, 4.25rem);
  border-top: 1px solid var(--nevoa);
  background: var(--cal);
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--tinta-suave);
}
.rodape a { color: var(--tinta); text-decoration: none; }
.rodape a:hover { color: var(--manto); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Transição entre frames: a conta acesa corre pelo fio e a luz se abre a partir dela ---------- */

::view-transition-old(palco) { animation: .42s var(--ease) both apagar; }
::view-transition-new(palco) { animation: .74s var(--ease) both acender; }
::view-transition-group(luz) { animation-duration: .74s; animation-timing-function: var(--ease); }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .3s; }
@keyframes apagar { to { opacity: .2; filter: saturate(.4); } }
@keyframes acender {
  from { clip-path: circle(0 at var(--vx, 0px) var(--vy, 50%)); }
  to { clip-path: circle(var(--vr, 150%) at var(--vx, 0px) var(--vy, 50%)); }
}

/* ---------- Peças comuns ---------- */

.rubrica { font: italic 500 1rem/1.4 var(--serif); color: var(--rubrica); }
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .65rem 1.35rem;
  border: 2px solid var(--manto);
  border-radius: var(--raio);
  background: var(--manto);
  color: var(--branco);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.botao:hover { background: var(--manto-fundo); border-color: var(--manto-fundo); }
.botao-linha { background: transparent; color: var(--manto); }
.botao-linha:hover { background: var(--nevoa); border-color: var(--manto); }
.botao:disabled { opacity: .45; cursor: default; }

.cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem 2.5rem;
}
.cabecalho h2 { font-size: clamp(2rem, 5.6cqh, 3rem); }
.abas { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
.abas [role="tab"] {
  padding: .35rem 0 .3rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--tinta-suave);
  cursor: pointer;
}
.abas [role="tab"]:hover { color: var(--manto); }
.abas [role="tab"][aria-selected="true"] { color: var(--manto); font-weight: 700; border-bottom-color: var(--ouro); }
.painel { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); }
.painel:not([hidden]) { animation: surgir .22s var(--ease); }
@keyframes surgir { from { opacity: 0; } }

.seta {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--nevoa);
  border-radius: 50%;
  background: var(--branco);
  color: var(--manto);
  cursor: pointer;
}
.seta:hover { border-color: var(--manto); }
.seta:disabled { opacity: .35; cursor: default; border-color: var(--nevoa); }
.seta svg { width: 1.1rem; height: 1.1rem; }

/* Arco ogival das janelas da Catedral: usado só na foto de abertura e no nicho da Padroeira. */
.arco { position: relative; }
.arco-img { clip-path: url(#ogiva); }
.moldura {
  position: absolute;
  top: -.6rem;
  left: -.6rem;
  width: calc(100% + 1.2rem);
  height: calc(100% + .6rem);
  max-width: none;
  overflow: visible;
  pointer-events: none;
}
.moldura path { fill: none; stroke: var(--ouro-fosco); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* ---------- Início ---------- */

.f-inicio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: clamp(2rem, 6cqw, 5.5rem);
}
.inicio-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(.9rem, 3.2cqh, 1.8rem);
  max-width: 35rem;
  min-height: 0;
}
.f-inicio h1 { font-size: clamp(2.5rem, 9.2cqh, 4.75rem); line-height: .98; letter-spacing: -.012em; }
.lead { font-size: clamp(1.0625rem, 2.7cqh, 1.3125rem); line-height: 1.5; max-width: 30em; }
.proximo { display: grid; gap: .2rem; padding: .15rem 0 .15rem 1.2rem; border-left: 3px solid var(--ouro); }
.proximo-data { font: 700 clamp(1.35rem, 3.8cqh, 1.9rem)/1.15 var(--serif); color: var(--manto); }
.proximo-info { font-size: 1rem; color: var(--tinta-suave); }
.acoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.citacao {
  max-width: 31rem;
  font: italic 500 clamp(.95rem, 2.2cqh, 1.0625rem)/1.5 var(--serif);
  color: var(--tinta-suave);
}
.citacao cite { display: block; margin-top: .3rem; font: 400 .875rem/1.3 var(--sans); font-style: normal; }
.inicio-foto { min-height: 0; margin: .6rem .6rem 0; }
.inicio-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }

/* ---------- Quem somos ---------- */

.historia { display: grid; grid-template-rows: minmax(0, 1fr) auto; row-gap: clamp(1rem, 3.5cqh, 2rem); min-height: 0; }
.marcos { display: grid; min-height: 0; }
.marco {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  column-gap: clamp(1.5rem, 4.5cqw, 4rem);
  align-items: center;
  min-height: 0;
}
.marco:not([hidden]) { animation: surgir .3s var(--ease); }
.marco-midia {
  align-self: stretch;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--nevoa);
}
.marco-midia img { width: 100%; height: 100%; object-fit: cover; }
.marco-ano { font: 700 clamp(4.5rem, 21cqh, 10rem)/1 var(--serif); color: var(--manto); letter-spacing: -.03em; }
.marco-texto { display: grid; gap: .6rem; max-width: 38rem; }
.marco-texto h3 { font-size: clamp(1.6rem, 4.6cqh, 2.4rem); }
.marco-texto p:not(.rubrica) { font-size: clamp(1rem, 2.5cqh, 1.1875rem); }
.linha { display: flex; align-items: center; gap: 1rem; }
.linha ol {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}
.linha ol::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  top: calc(.45rem + .5625rem - 3px);
  height: 6px;
  background:
    radial-gradient(circle at 3px 3px, color-mix(in srgb, var(--ouro-fosco) 75%, transparent) 2px, transparent 2.5px)
    0 0 / 13px 6px repeat-x;
}
.linha li button {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding: .45rem .35rem;
  border: 0;
  background: none;
  font: 700 1rem/1 var(--serif);
  color: var(--tinta-suave);
  cursor: pointer;
}
.linha .conta { border-color: var(--manto); background: var(--cal); box-shadow: 0 0 0 .3rem var(--cal); }
.linha li button:hover .conta { background: color-mix(in srgb, var(--ouro) 35%, var(--cal)); }
.linha li button[aria-current="step"] { color: var(--manto); }
.linha li button[aria-current="step"] .conta { background: var(--ouro); }

.missao {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: clamp(1.5rem, 4.5cqw, 3.5rem);
  row-gap: clamp(2rem, 8cqh, 4.5rem);
  min-height: 0;
}
.missao h3 { font-size: clamp(1.5rem, 4cqh, 2rem); margin-bottom: .7rem; }
.missao p { font: 500 clamp(1.0625rem, 2.9cqh, 1.3125rem)/1.5 var(--serif); max-width: 24em; }
.brasoes {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 3.5rem;
  padding-top: clamp(1rem, 3cqh, 1.75rem);
  border-top: 1px solid var(--nevoa);
}
.brasoes figure { display: flex; align-items: center; gap: 1.1rem; }
.brasoes img { width: auto; height: clamp(4.5rem, 17cqh, 8.5rem); }
.brasoes figcaption { max-width: 14em; font-size: .9375rem; line-height: 1.35; color: var(--tinta-suave); }

.conduz {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4.5cqw, 4rem);
  min-height: 0;
}
.conduz-foto { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .5rem; }
.conduz-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--raio); }
.conduz-foto figcaption { font-size: .875rem; color: var(--tinta-suave); }
.conduz-grupos { display: grid; align-content: center; gap: clamp(1rem, 3.5cqh, 2rem); min-height: 0; }
.conduz-grupos dl { display: grid; gap: .55rem; margin-top: .35rem; }
.conduz-grupos dt { font-size: .9375rem; color: var(--tinta-suave); }
.conduz-grupos dd { font: 600 clamp(1.15rem, 3cqh, 1.45rem)/1.2 var(--serif); color: var(--manto); }
.conduz-grupos dd + dt { margin-top: .35rem; }
.apelido { font: 400 .9375rem var(--sans); color: var(--tinta-suave); }
.conduz-nota { font-size: 1rem; max-width: 34em; }

/* ---------- Reze o terço ---------- */

.misterios { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; }
.misterios-hoje { font-size: 1rem; color: var(--tinta-suave); }
.misterios-botoes { display: flex; flex-wrap: wrap; gap: .4rem; }
.misterios-botoes button {
  min-height: 2.5rem;
  padding: .3rem 1rem;
  border: 2px solid var(--nevoa);
  border-radius: 999px;
  background: var(--branco);
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
}
.misterios-botoes button:hover { border-color: var(--manto); }
.misterios-botoes button[aria-pressed="true"] { border-color: var(--manto); background: var(--manto); color: var(--branco); font-weight: 700; }

.rezar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: clamp(1.5rem, 5cqw, 4.5rem);
  align-items: center;
  min-height: 0;
}
.terco-svg { height: 100%; max-height: 40rem; width: auto; aspect-ratio: 300 / 548; }
.passo { display: grid; gap: clamp(.55rem, 1.9cqh, 1rem); max-width: 40rem; }
.passo-cabeca { display: grid; gap: .4rem; }
.passo-titulo { font-size: clamp(1.7rem, 5cqh, 2.6rem); }
.passo-contas { display: block; margin-top: .35rem; font: 400 1rem/1.2 var(--sans); color: var(--tinta-suave); }
.passo-oracao {
  display: grid;
  gap: .55em;
  font: 500 clamp(1.0625rem, 2.9cqh, 1.375rem)/1.55 var(--serif);
  color: var(--tinta);
}
.passo-oracao .resp { font-weight: 700; }
.passo-oracao .rubrica { font-size: .8em; }
.passo-controles { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: clamp(.2rem, 1.4cqh, .7rem); }
.passo-contagem { margin-left: auto; font-size: .9375rem; color: var(--tinta-suave); }
.progresso { height: 4px; border-radius: 2px; background: var(--nevoa); overflow: hidden; }
.progresso span { display: block; width: 0; height: 100%; background: var(--ouro-fosco); transition: width .35s var(--ease); }

.terco-svg .fio { fill: none; stroke: var(--ouro-fosco); stroke-width: 1.3; }
.terco-svg .no { cursor: pointer; }
.terco-svg .alvo { fill: transparent; }
.terco-svg .ave { fill: var(--branco); stroke: var(--manto); stroke-width: 1.3; }
.terco-svg .pai { fill: var(--manto); stroke: var(--manto); stroke-width: 1.3; }
.terco-svg .glo { fill: var(--cal); stroke: var(--ouro-fosco); stroke-width: 1.3; }
.terco-svg .med { fill: var(--ouro-fosco); stroke: var(--manto); stroke-width: 1.3; }
.terco-svg .med-miolo { fill: none; stroke: var(--manto); stroke-width: 1; }
.terco-svg .cru { fill: var(--manto); }
.terco-svg .feita .ave { fill: color-mix(in srgb, var(--manto) 28%, white); }
.terco-svg .feita .glo { fill: var(--ouro-fosco); }
.terco-svg .no:hover .ave, .terco-svg .no:hover .glo { fill: color-mix(in srgb, var(--ouro) 45%, white); }
.terco-svg .atual .ave, .terco-svg .atual .pai, .terco-svg .atual .glo, .terco-svg .atual .med, .terco-svg .atual .cru {
  fill: var(--ouro);
  stroke: var(--manto);
  stroke-width: 2;
}
.terco-svg .atual { filter: drop-shadow(0 0 4px rgba(233, 192, 70, .95)); }

.video-dia {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4.5cqw, 3.5rem);
  align-items: center;
  min-height: 0;
}
.video-caixa {
  width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--tinta);
  color: var(--cal);
}
.video-caixa iframe { width: 100%; height: 100%; border: 0; }
.video-vazio { display: grid; gap: .6rem; max-width: 26rem; padding: 1.5rem; text-align: center; }
.video-vazio a { color: var(--ouro); font-weight: 700; }
.video-texto { display: grid; gap: .8rem; align-content: center; }
.video-texto h3 { font-size: clamp(1.5rem, 4cqh, 2rem); }
.video-texto ol { display: grid; gap: .35rem; padding-left: 1.4rem; font: 500 1.0625rem/1.35 var(--serif); }
.video-texto ol li::marker { color: var(--rubrica); font-weight: 700; }
.video-credito { font-size: .9375rem; color: var(--tinta-suave); }
.video-credito a { color: var(--manto); font-weight: 700; }

.perguntas {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4.5cqw, 4rem);
  min-height: 0;
}
.perguntas-lista { display: grid; align-content: start; gap: .1rem; min-height: 0; overflow: auto; padding: 3px; }
.perguntas-lista button {
  padding: .5rem .9rem;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0 var(--raio) var(--raio) 0;
  background: none;
  text-align: left;
  font-size: clamp(.95rem, 2.4cqh, 1.0625rem);
  line-height: 1.3;
  cursor: pointer;
}
.perguntas-lista button:hover { background: var(--nevoa); }
.perguntas-lista button[aria-pressed="true"] { border-left-color: var(--ouro); background: var(--branco); font-weight: 700; color: var(--manto); }
.respostas { min-height: 0; overflow: auto; }
.respostas article { display: grid; gap: .8rem; align-content: start; }
.respostas h3 { font-size: clamp(1.5rem, 4.2cqh, 2.1rem); }
.respostas p { font-size: clamp(1.0625rem, 2.6cqh, 1.1875rem); max-width: 36em; }
.respostas dl { display: grid; gap: .7rem; max-width: 36em; }
.respostas dt { font: 700 1.125rem var(--serif); color: var(--manto); }

/* ---------- Palavra do dia ---------- */

.evangelho { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .8rem; min-height: 0; }
.evangelho-texto {
  columns: 2;
  column-gap: clamp(2rem, 4.5cqw, 3.75rem);
  font: 500 clamp(1rem, 2.55cqh, 1.1875rem)/1.62 var(--serif);
  min-height: 0;
  overflow: auto;
}
.evangelho-texto p + p { margin-top: .5em; }
.evangelho-texto .rubrica { font-size: .9em; }
.v { margin-right: .1em; font: 700 .6em/1 var(--sans); color: var(--rubrica); vertical-align: .5em; }
.resp { font-weight: 700; }
.cruz-liturgica { color: var(--rubrica); }
@container palco (max-height: 46rem) and (min-width: 52rem) {
  .evangelho-texto { columns: 3; }
}

.reflexao {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: clamp(1.5rem, 5cqw, 4.5rem);
  align-items: center;
  min-height: 0;
}
.reflexao-texto { display: grid; gap: .9rem; max-width: 38rem; }
.reflexao-texto h3 { font-size: clamp(1.6rem, 4.6cqh, 2.4rem); }
.reflexao-citacao { font: italic 600 clamp(1.25rem, 3.4cqh, 1.6rem)/1.3 var(--serif); color: var(--manto); }
.reflexao-texto p:not(.reflexao-citacao) { font-size: clamp(1rem, 2.55cqh, 1.1875rem); }
.reflexao-foto { height: 100%; min-height: 0; }
.reflexao-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; border-radius: var(--raio); }

/* ---------- Agenda ---------- */

.agenda {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.6fr);
  column-gap: clamp(1.5rem, 5cqw, 4.5rem);
}
.agenda h3 { font-size: clamp(1.35rem, 3.7cqh, 1.8rem); margin-bottom: .75rem; }
.semana { display: grid; align-content: start; gap: clamp(1rem, 4cqh, 2.25rem); }
.encontros { display: grid; gap: .9rem; }
.encontro { display: grid; gap: .1rem; padding-left: 1rem; border-left: 3px solid var(--ouro); }
.encontro-dia { font: 700 clamp(1.15rem, 3cqh, 1.4rem)/1.2 var(--serif); color: var(--manto); }
.encontro-o-que { font-weight: 500; }
.encontro-quando { font-size: .9375rem; color: var(--tinta-suave); }
.local { font-size: .9375rem; color: var(--tinta-suave); }
.datas { display: grid; gap: .65rem; }
.datas div { display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); column-gap: .9rem; }
.datas dt { font: 700 1rem/1.35 var(--serif); color: var(--manto); }
.datas dd { font-size: 1rem; line-height: 1.35; }
.datas .destaque { display: block; margin-top: .15rem; font: italic 500 .9375rem var(--serif); color: var(--rubrica); }

.festa { display: flex; flex-direction: column; gap: clamp(.45rem, 1.6cqh, .9rem); min-height: 0; }
.festa h3 { margin: 0; }
.festa-topo { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.festa-topo .botao { flex: none; }
.festa-intro { font-size: 1rem; color: var(--tinta-suave); max-width: 46em; }
.novena { columns: 2; column-gap: 2rem; margin: 0; padding: 0; list-style: none; }
.novena li {
  position: relative;
  break-inside: avoid;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  column-gap: .9rem;
  padding: clamp(.3rem, 1.15cqh, .6rem) 0;
  border-top: 1px solid var(--nevoa);
}
.novena time { font: 700 1.0625rem/1.3 var(--serif); color: var(--manto); }
.novena .dia, .solene .dia { display: block; font: 400 .8125rem/1.3 var(--sans); color: var(--tinta-suave); }
.novena .tema { font-weight: 500; font-size: clamp(.95rem, 2.3cqh, 1.0625rem); line-height: 1.3; }
.novena .quem { font-size: .875rem; color: var(--tinta-suave); }
.novena li.passou { opacity: .5; }
.novena li.hoje::before { content: ""; position: absolute; left: -.9rem; top: .55rem; bottom: .55rem; width: 3px; background: var(--ouro); }
.hoje-marca { display: block; font: italic 600 .875rem/1.3 var(--serif); color: var(--rubrica); }
.solene {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  column-gap: .9rem;
  padding-top: clamp(.5rem, 1.6cqh, .85rem);
  border-top: 2px solid var(--ouro);
}
.solene time { font: 700 1.0625rem/1.3 var(--serif); color: var(--manto); }
@container palco (max-height: 46rem) {
  .novena li { padding-block: .2rem; }
  .solene { padding-top: .4rem; }
}
.solene strong { font: 700 clamp(1.1rem, 2.9cqh, 1.35rem)/1.25 var(--serif); color: var(--manto); }
.solene p { font-size: .9375rem; }

/* ---------- Galeria ---------- */

.galeria { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(.6rem, 2cqh, 1rem); }
.galeria-legenda { font-size: 1rem; color: var(--tinta-suave); max-width: 62em; }
.grade {
  --cols: 4;
  --rows: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  gap: clamp(.5rem, 1.4cqh, .9rem);
  min-height: 0;
}
.grade button {
  position: relative;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--nevoa);
  cursor: zoom-in;
}
.grade img { width: 100%; height: 100%; object-fit: cover; }
.grade .eh-video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.25rem;
  height: 3.25rem;
  margin: -1.625rem 0 0 -1.625rem;
  border-radius: 50%;
  background: rgba(22, 36, 79, .8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E9C046' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 56% 50% / 1.35rem no-repeat;
}
.duracao {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  padding: .1rem .45rem;
  border-radius: 3px;
  background: rgba(22, 36, 79, .82);
  color: var(--branco);
  font-size: .8125rem;
}
.paginas { display: flex; align-items: center; justify-content: flex-end; gap: .9rem; font-size: .9375rem; color: var(--tinta-suave); }
@container palco (max-width: 44rem) {
  .grade { --cols: 2; --rows: 3; }
}

.visor {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(14, 24, 56, .95);
  color: var(--cal);
}
.visor::backdrop { background: rgba(14, 24, 56, .6); }
.visor[open] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.visor .seta { background: transparent; color: var(--cal); border-color: rgba(246, 247, 251, .35); }
.visor .seta:hover { border-color: var(--ouro); }
.visor-fechar { grid-column: 3; grid-row: 1; margin: 1rem; }
.visor-ant { grid-column: 1; grid-row: 2; align-self: center; margin: 1rem; }
.visor-prox { grid-column: 3; grid-row: 2; align-self: center; margin: 1rem; }
.visor-midia { grid-column: 2; grid-row: 2; display: grid; place-items: center; min-height: 0; }
.visor-midia img, .visor-midia video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; }
.visor-legenda { grid-column: 2; grid-row: 3; padding: .9rem 1rem 1.3rem; text-align: center; font-size: 1rem; }

/* ---------- Nossa Padroeira ---------- */

.padroeira {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: clamp(1.5rem, 5cqw, 4.5rem);
}
.nicho { min-height: 0; margin: .6rem .6rem 0; container-type: size; }
.nicho-fundo { position: absolute; inset: 0; background: var(--branco); clip-path: url(#ogiva); }
.nicho-img {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: min(88cqw, 86cqh * .4894);
  aspect-ratio: 300 / 613;
  transform: translateX(-50%);
}
.nicho-img img { width: 100%; height: 100%; mix-blend-mode: multiply; }
.ponto {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 1.5rem;
  height: 1.5rem;
  margin: -.75rem 0 0 -.75rem;
  padding: 0;
  border: 2px solid var(--branco);
  border-radius: 50%;
  background: var(--ouro);
  box-shadow: 0 0 0 2px var(--manto);
  cursor: pointer;
  transition: box-shadow .2s, background-color .2s;
}
.ponto:hover { background: #F4D575; }
.ponto[aria-pressed="true"] {
  background: var(--rubrica);
  box-shadow: 0 0 0 2px var(--manto), 0 0 0 .45rem color-mix(in srgb, var(--ouro) 50%, transparent);
}
.padroeira-texto { display: flex; flex-direction: column; gap: clamp(.8rem, 2.8cqh, 1.5rem); min-height: 0; }
.simbolos { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 2rem; align-content: start; row-gap: 1rem; }
.simbolos-intro { grid-column: 1 / -1; font-size: 1rem; color: var(--tinta-suave); }
.simbolos-lista { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.simbolos-lista button {
  width: 100%;
  padding: .5rem .85rem;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0 var(--raio) var(--raio) 0;
  background: none;
  text-align: left;
  font-size: 1.0625rem;
  cursor: pointer;
}
.simbolos-lista button:hover { background: var(--nevoa); }
.simbolos-lista button[aria-pressed="true"] { border-left-color: var(--ouro); background: var(--branco); font-weight: 700; color: var(--manto); }
.simbolo-texto article { display: grid; gap: .6rem; }
.simbolo-texto h3 { font-size: clamp(1.4rem, 3.9cqh, 1.9rem); }
.simbolo-texto p { font-size: clamp(1.0625rem, 2.6cqh, 1.1875rem); }
.texto-corrido { display: grid; gap: .8rem; align-content: start; overflow: auto; min-height: 0; }
.texto-corrido p { font-size: clamp(1rem, 2.45cqh, 1.125rem); max-width: 40em; }
.oracao-aux { display: grid; gap: .7rem; align-content: start; overflow: auto; min-height: 0; }
.oracao-aux p { font: 500 clamp(1rem, 2.5cqh, 1.1875rem)/1.55 var(--serif); max-width: 36em; }

/* ---------- Pedidos e contato ---------- */

.contato {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 5.5cqw, 5rem);
}
.contato h3 { font-size: clamp(1.5rem, 4cqh, 2rem); }
.pedido { display: grid; align-content: start; gap: clamp(.65rem, 2.1cqh, 1.05rem); }
.pedido-intro { font-size: 1.0625rem; }
.campo { display: grid; gap: .3rem; }
.campo label { font-weight: 700; font-size: 1rem; }
.campo input, .campo textarea {
  width: 100%;
  padding: .65rem .85rem;
  border: 2px solid var(--nevoa);
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--tinta);
  font: inherit;
  font-size: 1.0625rem;
}
.campo input:focus, .campo textarea:focus {
  border-color: var(--manto);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ouro) 55%, transparent);
}
.campo textarea { height: clamp(6rem, 22cqh, 11rem); resize: vertical; }
.aviso { font-size: .9375rem; color: var(--tinta-suave); }
.onde { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: clamp(.65rem, 2.1cqh, 1.05rem); min-height: 0; }
.onde address { display: grid; gap: .3rem; font-style: normal; }
.onde address strong { font: 700 1.125rem var(--serif); color: var(--manto); }
.onde a { color: var(--manto); font-weight: 700; }
.mapa { min-height: 9rem; overflow: hidden; border-radius: var(--raio); background: var(--nevoa); }
.mapa iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Celular e tablet em pé ---------- */

@media (max-width: 56.25rem) {
  body { background: var(--cal); }
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "topo" "palco" "rodape";
  }
  .topo {
    grid-area: topo;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: max(.55rem, env(safe-area-inset-top)) 1rem .55rem;
    background: var(--manto);
    color: var(--branco);
  }
  .topo img { width: 1.8rem; height: auto; }
  .topo-textos { display: grid; min-width: 0; line-height: 1.15; }
  .topo-nome { font: 700 1.125rem/1.1 var(--serif); }
  .topo-secao {
    overflow: hidden;
    font-size: .8125rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: color-mix(in srgb, var(--cal) 82%, transparent);
  }
  .topo-menu, .terco-fechar {
    display: inline-flex;
    align-items: center;
    min-height: 2.6rem;
    padding: .35rem .95rem;
    border: 2px solid color-mix(in srgb, var(--ouro) 75%, transparent);
    border-radius: var(--raio);
    background: none;
    color: var(--branco);
    font-weight: 700;
    cursor: pointer;
  }
  .topo-menu { margin-left: auto; }
  .terco-fechar { align-self: flex-end; margin-bottom: .5rem; }
  .terco {
    position: fixed;
    inset: 0;
    z-index: 40;
    overflow-y: auto;
    padding: max(1rem, env(safe-area-inset-top)) 1.5rem max(1.25rem, env(safe-area-inset-bottom));
    visibility: hidden;
    opacity: 0;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }
  .terco.aberto { visibility: visible; opacity: 1; transition: opacity .25s ease; }
  .marca { margin-bottom: 1.75rem; }
  .contas { flex: none; gap: .55rem; justify-content: flex-start; }
  .contas a { min-height: 3rem; font-size: 1.25rem; }
  .conta.acesa { view-transition-name: none; }
  .rodape { justify-content: flex-start; padding: .45rem 1rem max(.45rem, env(safe-area-inset-bottom)); font-size: .75rem; }
  .rodape-grupo { display: none; }

  /* No celular o frame pode rolar por dentro; nada pode encolher abaixo do próprio conteúdo. */
  .inicio-texto, .inicio-foto, .painel, .historia, .marcos, .marco, .marco-midia, .missao, .conduz,
  .conduz-foto, .conduz-grupos, .rezar, .video-dia, .perguntas, .perguntas-lista, .respostas, .evangelho,
  .evangelho-texto, .reflexao, .reflexao-foto, .agenda, .festa, .galeria, .grade, .padroeira, .nicho,
  .padroeira-texto, .texto-corrido, .oracao-aux, .contato, .onde, .mapa {
    min-height: auto;
    flex-shrink: 0;
  }
  .perguntas-lista, .respostas, .texto-corrido, .oracao-aux { overflow: visible; }
  .inicio-texto { justify-content: flex-start; }
  .festa-topo { flex-direction: column; align-items: flex-start; }
  .frame { gap: 1rem; padding: 1.25rem 1.1rem 1.75rem; }
  .painel, .historia, .marcos, .marco, .missao, .conduz, .rezar, .video-dia, .perguntas,
  .evangelho, .reflexao, .agenda, .padroeira, .simbolos, .contato, .onde {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .painel { flex: none; }
  .cabecalho { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .cabecalho h2 { font-size: 2rem; }
  .abas { gap: .1rem 1.25rem; }

  .f-inicio { display: flex; flex-direction: column; gap: 1.25rem; }
  .inicio-foto { order: -1; flex: none; height: 34cqh; min-height: 13rem; margin: 0; }
  .inicio-foto .arco-img { clip-path: none; border-radius: var(--raio); }
  .inicio-foto .moldura { display: none; }
  .f-inicio h1 { font-size: 2.4rem; }
  .lead { font-size: 1.0625rem; }
  .proximo-data { font-size: 1.35rem; }

  .marco-midia { height: 30cqh; min-height: 11rem; }
  .marco-ano { font-size: 5rem; }
  .linha { gap: .5rem; }
  .linha li button { font-size: .8125rem; padding: .4rem .1rem; }
  .linha .seta { width: 2.4rem; height: 2.4rem; }
  .brasoes img { height: 5rem; }
  .conduz-foto { height: 30cqh; min-height: 11rem; }

  .rezar {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "svg cab" "ora ora" "ctl ctl" "bar bar";
    column-gap: 1rem;
    row-gap: .8rem;
    align-items: start;
  }
  .rezar .terco-svg { grid-area: svg; width: 100%; height: auto; max-height: none; }
  .passo { display: contents; }
  .passo-cabeca { grid-area: cab; display: grid; gap: .4rem; align-self: center; }
  .passo-oracao { grid-area: ora; font-size: 1.125rem; }
  .passo-controles { grid-area: ctl; }
  .progresso { grid-area: bar; }
  .passo-titulo { font-size: 1.6rem; }
  .video-caixa { max-height: none; }

  .evangelho-texto { columns: 1; overflow: visible; font-size: 1.0625rem; }
  .reflexao-foto { height: 30cqh; min-height: 11rem; order: -1; }

  .novena { columns: 1; }
  .datas div { grid-template-columns: 6.5rem minmax(0, 1fr); }

  .galeria { display: grid; flex: none; grid-template-rows: auto auto auto; }
  .grade { --cols: 2; --rows: 3; grid-template-rows: repeat(var(--rows), 9.5rem); }

  .nicho { flex: none; height: 46cqh; min-height: 18rem; margin: .6rem .6rem 0; }
  .campo textarea { height: 7.5rem; }
  .mapa { height: 15rem; flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .painel:not([hidden]), .marco:not([hidden]) { animation: none; }
  .progresso span { transition: none; }
}