/*
 * Santuário Bom Jesus da Pedra Fria
 * As cores, fontes e espaçamentos vêm do theme.json como custom properties
 * (--wp--preset--*). Aqui elas ganham apelidos curtos e viram layout.
 */

:root {
	--vinho:         var(--wp--preset--color--vinho, #790000);
	--vinho-escuro:  var(--wp--preset--color--vinho-escuro, #4a0000);
	--vinho-claro:   var(--wp--preset--color--vinho-claro, #9c1f1f);
	--dourado:       var(--wp--preset--color--dourado, #e0c206);
	--dourado-fosco: var(--wp--preset--color--dourado-fosco, #a68e04);
	--branco:        var(--wp--preset--color--branco, #fff);
	--creme:         var(--wp--preset--color--creme, #faf7f0);
	--pedra:         var(--wp--preset--color--pedra, #e8e2d8);
	--grafite:       var(--wp--preset--color--grafite, #1a1a1a);
	--cinza:         var(--wp--preset--color--cinza, #5c5751);

	--fonte-titulo: var(--wp--preset--font-family--titulo, Georgia, serif);
	--fonte-texto:  var(--wp--preset--font-family--texto, system-ui, sans-serif);

	--e-20: var(--wp--preset--spacing--20, 1rem);
	--e-30: var(--wp--preset--spacing--30, 1.5rem);
	--e-40: var(--wp--preset--spacing--40, 2.5rem);
	--e-50: var(--wp--preset--spacing--50, 4rem);
	--e-60: var(--wp--preset--spacing--60, 6rem);

	--largura: 72rem;
	--prosa:   45rem;
	--sombra:  0 1px 2px rgb(0 0 0 / 6%), 0 8px 24px -12px rgb(0 0 0 / 18%);
	--borda:   1px solid rgb(0 0 0 / 10%);

	/* Assinatura visual herdada do site antigo: o papel de parede vinho, a
	   borda dourada das faixas e o vinho de fundo por trás da textura. */
	--papel-de-parede: url("../img/papel-de-parede.webp");
	--papel-fundo:     #8f0000;
	--dourado-borda:   #e2b400;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--branco);
	color: var(--grafite);
	font-family: var(--fonte-texto);
	font-size: var(--wp--preset--font-size--base, 1.0625rem);
	line-height: 1.65;
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	color: var(--vinho);
	font-family: var(--fonte-titulo);
	font-weight: 700;
	/* O kit antigo tinha font-size 28px com line-height 25px, o que cortava
	   acentos e cedilhas em títulos de duas linhas. */
	line-height: 1.15;
	text-wrap: balance;
}

p, ul, ol, dl, figure, blockquote { margin: 0 0 var(--e-30); }
p:last-child { margin-bottom: 0; }

a { color: var(--vinho); text-underline-offset: 0.18em; }
a:hover, a:focus-visible { color: var(--vinho-escuro); }

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

:focus-visible {
	outline: 3px solid var(--dourado-fosco);
	outline-offset: 2px;
	border-radius: 2px;
}

.pular {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: var(--e-20);
	background: var(--vinho);
	color: var(--branco);
}
.pular:focus { left: var(--e-20); top: var(--e-20); }

.envelope {
	width: min(100% - 2 * var(--e-30), var(--largura));
	margin-inline: auto;
}

.prosa { max-width: var(--prosa); margin-inline: auto; padding-block: var(--e-50); }
.prosa > * + * { margin-top: var(--e-30); }

/*
 * Os títulos do corpo ganham um filete dourado à esquerda. Sem ele, e com o
 * conteúdo ainda por escrever, a página vira uma sequência de frases soltas no
 * branco; o filete diz "aqui começa uma seção" mesmo quando a seção está curta.
 */
.prosa h2 {
	margin-top: var(--e-50);
	padding-left: 0.85rem;
	border-left: 4px solid var(--dourado);
	line-height: 1.15;
}
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { margin-top: var(--e-40); }

.prosa img, .prosa figure { border-radius: 3px; }

/*
 * Imagens em pé (a do padroeiro tem 720x900) tomavam a largura toda e viravam
 * um bloco de quase mil pixels de altura. Aqui a altura manda: a imagem cresce
 * até onde couber confortavelmente e centraliza.
 */
.prosa figure {
	margin-inline: 0;
	text-align: center;
}
.prosa figure img,
.prosa > img {
	width: auto;
	max-width: 100%;
	max-height: 26rem;
	margin-inline: auto;
}
.prosa figcaption {
	margin-top: 0.6rem;
	color: var(--cinza);
	font-size: 0.875rem;
	font-style: italic;
}

.prosa__destaque { margin: 0 0 var(--e-40); }
.prosa__destaque img { max-height: 30rem; }

/* ---------- botões ---------- */

.botao {
	display: inline-block;
	padding: 0.8rem 1.6rem;
	border: 2px solid var(--vinho);
	border-radius: 2px;
	background: var(--vinho);
	color: var(--branco);
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s, border-color .15s, color .15s;
}
.botao:hover, .botao:focus-visible {
	background: var(--vinho-escuro);
	border-color: var(--vinho-escuro);
	color: var(--branco);
}
.botao--vazado { background: transparent; color: var(--vinho); }
.botao--vazado:hover, .botao--vazado:focus-visible { background: var(--vinho); color: var(--branco); }

/* ---------- cabeçalho ---------- */

/*
 * O papel de parede vinho é a assinatura visual do santuário: cor #8F0000 com
 * a textura repetida por cima, presa na viewport (background-attachment: fixed),
 * e um véu da cor vinho a 45% para o contraste do texto não depender do desenho
 * da textura. Vem do header do site antigo, reproduzido aqui sem o Elementor.
 */
.cabecalho__papel {
	position: relative;
	background-color: var(--papel-fundo);
	background-image: var(--papel-de-parede);
	background-repeat: repeat;
	background-attachment: fixed;
}
.cabecalho__papel::before {
	position: absolute;
	inset: 0;
	background: var(--vinho);
	opacity: 0.45;
	content: "";
	pointer-events: none;
}
/* Tudo que é conteúdo fica acima do véu. */
.cabecalho__papel > * { position: relative; z-index: 1; }

.barra-contato {
	border-bottom: 4px solid var(--dourado-borda);
	background: var(--branco);
	color: var(--vinho);
	font-size: 0.8125rem;
}
.barra-contato__conteudo {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-20);
	justify-content: center;
	padding-block: 0.5rem;
}
.barra-contato__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: inherit;
	text-decoration: none;
}
.barra-contato a.barra-contato__item:hover { color: var(--dourado-fosco); }

.cabecalho__principal {
	position: sticky;
	top: 0;
	z-index: 20;
	border-bottom: 4px solid var(--dourado-borda);
	background: linear-gradient(180deg, #fff 0%, #fff7f7 100%);
}
.cabecalho__conteudo {
	display: flex;
	/*
	 * Sem o wrap, o menu do celular não tem para onde descer: ele pede
	 * flex-basis 100% mas fica espremido no vão que sobra à direita, com uns
	 * 146px de largura. O wrap é o que faz o painel ocupar a linha inteira.
	 */
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-20);
	min-height: 67px;
	padding-block: 0.5rem;
}

/*
 * O brasão é o elemento interativo do cabeçalho: grande, transbordando a faixa,
 * e encolhendo conforme a página rola. A escala vem de --brasao-escala, que o
 * santuario.js atualiza; sem JS ele fica no tamanho cheio, que é o certo.
 */
.cabecalho__marca {
	flex: none;
	align-self: end;
	line-height: 0;
}
.cabecalho .marca img,
.cabecalho .custom-logo {
	width: var(--brasao-tamanho, 118px);
	height: auto;
	transform: scale(var(--brasao-escala, 1));
	transform-origin: bottom left;
	transition: transform 120ms linear;
	filter: drop-shadow(0 2px 6px rgb(0 0 0 / 25%));
}

.cabecalho__nome {
	flex: 1;
	margin: 0;
	font-family: var(--fonte-titulo);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
}
.cabecalho__nome a { color: var(--vinho); text-decoration: none; }

/* ---------- navegação ---------- */

.navegacao__lista,
.navegacao ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.navegacao a {
	display: block;
	padding: 0.55rem 0.85rem;
	border-block: 3px solid transparent;
	color: var(--vinho);
	font-family: var(--fonte-titulo);
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 200ms ease, border-color 200ms ease;
}
/* "grow" no hover, como o mega-menu do site antigo. */
.navegacao a:hover,
.navegacao a:focus-visible {
	border-block-color: var(--dourado);
	color: var(--vinho);
	transform: scale(1.08);
}
.navegacao .current-menu-item > a,
.navegacao .current_page_item > a {
	border-bottom-color: var(--dourado);
	color: var(--vinho);
}

.menu-alternar { display: none; }

/*
 * Faixa intermediária: já é desktop (o menu ainda é horizontal), mas com seis
 * itens o cabeçalho não cabe em telas de ~1100px e a navegação quebrava numa
 * segunda linha. Aqui tudo encolhe um pouco em vez de quebrar.
 */
@media (min-width: 56.0625rem) and (max-width: 80rem) {
	.cabecalho .marca img,
	.cabecalho .custom-logo { --brasao-tamanho: 94px; }

	.cabecalho__nome { font-size: 0.95rem; }

	.navegacao a { padding: 0.5rem 0.5rem; font-size: 0.95rem; }
	.navegacao__lista, .navegacao ul { gap: 0.1rem; }
}

@media (max-width: 56rem) {
	/*
	 * O cabeçalho do celular estava gastando ~190px antes de qualquer
	 * conteúdo: a barra de contato em duas linhas folgadas e o nome do
	 * santuário quebrando em três. Aqui tudo encolhe junto — brasão menor,
	 * menos vão entre os elementos e menos respiro vertical — para o nome
	 * caber em duas linhas e a faixa inteira ficar por volta de 110px.
	 */
	.barra-contato { font-size: 0.75rem; }
	.barra-contato__conteudo {
		gap: 0.25rem 0.9rem;
		padding-block: 0.3rem;
	}
	.barra-contato__item { padding-block: 0.25rem; }

	.cabecalho__conteudo {
		gap: 0.65rem;
		min-height: 0;
		padding-block: 0.4rem;
	}
	.cabecalho .marca img,
	.cabecalho .custom-logo { --brasao-tamanho: 54px; }

	.cabecalho__nome { font-size: 0.9rem; line-height: 1.18; }

	.navegacao a { font-size: 1rem; }
	.navegacao a:hover,
	.navegacao a:focus-visible { transform: none; }

	/* background-attachment: fixed engasga no iOS e no Android; ali a textura
	   rola junto com a página, que é indistinguível na prática. */
	.cabecalho__papel,
	.heroi,
	.pagina-topo { background-attachment: scroll; }

	.menu-alternar {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		/* 44px é o mínimo confortável para o dedo. */
		min-height: 44px;
		padding: 0.45rem 0.7rem;
		border: 1px solid rgb(121 0 0 / 35%);
		border-radius: 2px;
		background: var(--branco);
		color: var(--vinho);
		font: inherit;
		font-weight: 600;
		cursor: pointer;
	}
	.menu-alternar__barras,
	.menu-alternar__barras::before,
	.menu-alternar__barras::after {
		display: block;
		width: 18px;
		height: 2px;
		background: currentColor;
		content: "";
		transition: transform 180ms ease, background-color 180ms ease, top 180ms ease;
	}
	.menu-alternar__barras { position: relative; }
	.menu-alternar__barras::before { position: absolute; top: -6px; }
	.menu-alternar__barras::after  { position: absolute; top: 6px; }

	/* Aberto, o hambúrguer vira X — o botão diz em que estado está. */
	.menu-alternar[aria-expanded="true"] .menu-alternar__barras { background: transparent; }
	.menu-alternar[aria-expanded="true"] .menu-alternar__barras::before { top: 0; transform: rotate(45deg); }
	.menu-alternar[aria-expanded="true"] .menu-alternar__barras::after  { top: 0; transform: rotate(-45deg); }

	/* O menu aberto é um painel de largura inteira, abaixo da faixa. */
	.navegacao {
		display: none;
		flex-basis: 100%;
		order: 10;
		margin-top: 0.4rem;
		border-top: 1px solid rgb(121 0 0 / 20%);
		padding-bottom: 0.5rem;
	}
	.navegacao.aberto { display: block; }
	.navegacao__lista,
	.navegacao ul { flex-direction: column; gap: 0; }
	.navegacao a {
		padding: 0.95rem 0.25rem;
		border-block: 0;
		border-bottom: 1px solid rgb(0 0 0 / 10%);
		white-space: normal;
	}
	.navegacao li:last-child a { border-bottom: 0; }
	.navegacao .current-menu-item > a,
	.navegacao .current_page_item > a {
		padding-left: 0.7rem;
		border-left: 4px solid var(--dourado);
		border-bottom-color: rgb(0 0 0 / 10%);
	}

	/* Alvo de toque na barra de contato. */
	.barra-contato__item { padding-block: 0.4rem; }

	/* O herói não pode ocupar a tela toda antes de o visitante ver conteúdo. */
	.heroi { padding-block: var(--e-40); }
	.heroi__jesus { max-height: 46vh; }

	/* Botão largo: alvo grande, sem exigir mira. */
	.formulario .botao { display: block; width: 100%; }
}

/*
 * No telefone o endereço completo não cabe ao lado do número e ocupa uma linha
 * inteira do alto da página. Ele sai daqui — continua no rodapé, na página de
 * Missas e Horários, e no botão "Como chegar" do herói. O telefone fica, porque
 * é o que alguém quer tocar.
 */
@media (max-width: 40rem) {
	.barra-contato__item--endereco { display: none; }
}

/* ---------- herói ---------- */

/*
 * O herói repete o papel de parede do cabeçalho e por cima dele o gradiente
 * radial dourado-para-vinho do site antigo. O texto fica claro, então tudo
 * aqui dentro precisa inverter as cores padrão.
 */
.heroi {
	position: relative;
	padding-block: var(--e-50);
	background-color: var(--papel-fundo);
	background-image: var(--papel-de-parede);
	background-repeat: repeat;
	background-attachment: fixed;
	color: var(--branco);
}
.heroi::before {
	position: absolute;
	inset: 0;
	background: radial-gradient(at center center, rgb(121 90 0 / 63%) 0%, var(--vinho) 100%);
	content: "";
}
.heroi > * { position: relative; z-index: 1; }

/* O theme.json pinta os títulos de vinho — aqui o fundo é vinho, então os
   títulos do herói precisam voltar para o claro. */
.heroi :is(h1, h2, h3) { color: var(--branco); }

.heroi__frase {
	margin: var(--e-20) 0 0;
	color: var(--dourado);
	font-family: var(--fonte-titulo);
	font-size: 1.35rem;
	font-style: italic;
	line-height: 1.35;
}

/* Botões sobre fundo escuro. */
.heroi .botao {
	border-color: var(--dourado);
	background: var(--dourado);
	color: var(--vinho-escuro);
}
.heroi .botao:hover,
.heroi .botao:focus-visible {
	border-color: var(--branco);
	background: var(--branco);
	color: var(--vinho);
}
.heroi .botao--vazado {
	border-color: var(--branco);
	background: transparent;
	color: var(--branco);
}
.heroi .botao--vazado:hover,
.heroi .botao--vazado:focus-visible {
	background: var(--branco);
	color: var(--vinho);
}
.heroi__grade {
	display: grid;
	gap: var(--e-40);
	align-items: center;
	grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
	.heroi__grade { grid-template-columns: 1.1fr 0.9fr; }
}
.heroi__sobre {
	margin-bottom: 0.5rem;
	color: var(--dourado);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.heroi__titulo {
	font-size: var(--wp--preset--font-size--destaque, 3rem);
	line-height: 1.08;
}
.heroi__resumo { color: rgb(255 255 255 / 88%); font-size: 1.15rem; }
.heroi__acoes { display: flex; flex-wrap: wrap; gap: var(--e-20); margin-top: var(--e-30); }
.heroi__imagem img { width: 100%; border-radius: 3px; box-shadow: var(--sombra); }

/*
 * A imagem do Senhor Bom Jesus é um recorte com fundo transparente, então não
 * leva moldura nem cantos arredondados — a sombra tem que seguir o contorno da
 * figura, e isso é filter: drop-shadow, não box-shadow.
 *
 * Ela acompanha o ponteiro do mouse: o santuario.js escreve --jesus-x,
 * --jesus-y e --jesus-giro, e a transição faz o movimento chegar com um leve
 * atraso, para dar sensação de peso em vez de teletransporte.
 */
.heroi__jesus {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 68vh;
	margin-inline: auto;
	border-radius: 0;
	box-shadow: none;
	transform:
		translate3d( var(--jesus-x, 0px), var(--jesus-y, 0px), 0 )
		rotate( var(--jesus-giro, 0deg) );
	transition: transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
	filter: drop-shadow(0 10px 26px rgb(0 0 0 / 45%));
	will-change: transform;
}

/* ---------- horários ---------- */

/*
 * A faixa dos horários é a única informação que o visitante quase sempre vem
 * buscar. Ela fica no vinho cheio, com a lista dentro de um painel debruado de
 * dourado, para ler como um quadro de avisos e não como texto solto.
 */
.faixa-horarios {
	padding-block: var(--e-50);
	border-block: 4px solid var(--dourado-borda);
	background: var(--vinho);
	color: var(--branco);
}
.faixa-horarios .secao__titulo { color: var(--branco); }
.faixa-horarios .secao__titulo::after { background: var(--dourado); }
.faixa-horarios .horarios {
	padding: var(--e-30) var(--e-40);
	border: 1px solid rgb(224 194 6 / 45%);
	border-radius: 3px;
	background: rgb(0 0 0 / 12%);
}

.horarios { display: grid; gap: 0.75rem; margin: 0; }
.horarios__linha {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: baseline;
	justify-content: space-between;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid rgb(255 255 255 / 22%);
}
.horarios dt { font-family: var(--fonte-titulo); font-size: 1.35rem; font-weight: 600; }
.horarios dd {
	margin: 0;
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}
@media (min-width: 40rem) {
	.horarios { max-width: 34rem; margin-inline: auto; }
}

.horarios--destaque {
	margin-block: var(--e-40);
	padding: var(--e-40);
	border: 2px solid var(--vinho);
	border-radius: 3px;
	background: var(--creme);
}
.horarios--destaque .horarios__linha { border-bottom-color: rgb(121 0 0 / 18%); }
.horarios--destaque dt { color: var(--vinho); }

.horarios--compacto { gap: 0.35rem; }
.horarios--compacto dt { font-size: 1rem; }
.horarios--compacto dd { font-size: 1rem; opacity: 0.85; }

/* ---------- seções e cartões ---------- */

.secao__titulo {
	margin-bottom: var(--e-40);
	font-size: var(--wp--preset--font-size--titulo, 2.25rem);
	text-align: center;
}
.secao__titulo::after {
	display: block;
	width: 3.5rem;
	height: 3px;
	margin: 0.6rem auto 0;
	background: var(--dourado);
	content: "";
}
/* O creme separa as notícias do corpo branco da página, sem mais uma faixa
   vinho — três blocos vinho seguidos cansariam. */
.secao-noticias { padding-block: var(--e-50); background: var(--creme); }

/* A listagem de notícias e a busca não têm faixa colorida de fundo, então o
   respiro antes do rodapé precisa vir daqui — o rodapé encosta em quem vier
   antes dele. */
.listagem { padding-block: var(--e-50); }
.secao__mais { margin-top: var(--e-40); text-align: center; }

.cartoes {
	display: grid;
	gap: var(--e-30);
	align-items: stretch;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.cartao {
	position: relative;
	display: flex;
	border: var(--borda);
	border-radius: 3px;
	background: var(--branco);
	overflow: hidden;
	transition: transform .15s, box-shadow .15s, border-color .15s;
}
/* Filete dourado no topo, que se acende no hover. */
.cartao::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1;
	height: 3px;
	background: var(--dourado);
	opacity: 0;
	transition: opacity .15s;
	content: "";
}
.cartao:hover {
	transform: translateY(-3px);
	border-color: rgb(121 0 0 / 25%);
	box-shadow: var(--sombra);
}
.cartao:hover::before,
.cartao:focus-within::before { opacity: 1; }

/* Os cartões têm textos de tamanhos diferentes; sem a coluna flexível o
   "Ler mais" flutuava em alturas diferentes em cada um. */
.cartao__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none;
}
/*
 * A moldura da imagem é posicionada, e a foto preenche por dentro. Assim o
 * recorte 16:10 vale sempre — como item de um flex column, o aspect-ratio
 * sozinho não dá altura definida, e a foto em pé estourava o cartão.
 */
.cartao__imagem {
	position: relative;
	flex: none;
	aspect-ratio: 16 / 10;
	background: var(--pedra);
	overflow: hidden;
}
.cartao__imagem img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.cartao:hover .cartao__imagem img { transform: scale(1.04); }
.cartao__corpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--e-30);
}
.cartao__titulo { font-size: 1.2rem; line-height: 1.25; }
.cartao__resumo {
	flex: 1;
	margin-bottom: var(--e-20);
	color: var(--cinza);
	font-size: 0.95rem;
}
.cartao__mais {
	align-self: start;
	margin-top: auto;
	color: var(--vinho);
	font-size: 0.9rem;
	font-weight: 600;
}
.cartao:hover .cartao__mais { text-decoration: underline; }

.data {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--cinza);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---------- topo de página ---------- */

/*
 * Sem imagem destacada, a faixa de título repete o papel de parede do
 * cabeçalho — assim a página interna tem a mesma assinatura da home em vez de
 * uma tarja creme neutra.
 */
.pagina-topo {
	position: relative;
	padding-block: var(--e-40);
	border-bottom: 4px solid var(--dourado-borda);
	background-color: var(--papel-fundo);
	background-image: var(--papel-de-parede);
	background-repeat: repeat;
	background-attachment: fixed;
	color: var(--branco);
}
.pagina-topo::before {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(121 0 0 / 72%), rgb(74 0 0 / 88%));
	content: "";
}
.pagina-topo > * { position: relative; z-index: 1; }
.pagina-topo__titulo {
	margin: 0;
	color: var(--branco);
	font-size: var(--wp--preset--font-size--titulo, 2.25rem);
}
.pagina-topo__resumo { margin-top: var(--e-20); color: rgb(255 255 255 / 85%); }
.migalhas { margin: 0 0 0.5rem; font-size: 0.85rem; }
.pagina-topo .migalhas a { color: var(--dourado); }

.pagina-topo--com-imagem { position: relative; padding-block: var(--e-60); border-bottom: 0; }
.pagina-topo--com-imagem .pagina-topo__fundo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pagina-topo--com-imagem .envelope { position: relative; z-index: 1; }
.pagina-topo--com-imagem::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(74 0 0 / 35%), rgb(74 0 0 / 78%));
	content: "";
}
.pagina-topo--com-imagem .pagina-topo__titulo { color: var(--branco); }

/* ---------- aviso de contato ---------- */

.aviso-contato {
	margin-block: var(--e-50);
	padding: var(--e-40);
	border-left: 4px solid var(--dourado);
	background: var(--creme);
	border-radius: 0 3px 3px 0;
}
.aviso-contato h2 { margin-top: 0; font-size: 1.4rem; }
.aviso-contato__acoes { display: flex; flex-wrap: wrap; gap: var(--e-20); margin-top: var(--e-30); }

/* ---------- mapa ---------- */

.mapa {
	margin-block: var(--e-40);
	border: 1px solid rgb(121 0 0 / 18%);
	border-top: 4px solid var(--dourado-borda);
	border-radius: 3px;
	background: var(--creme);
	overflow: hidden;
}
.mapa__fachada {
	padding: var(--e-40);
	text-align: center;
}
.mapa__titulo {
	margin: 0 0 0.25rem;
	color: var(--vinho);
	font-family: var(--fonte-titulo);
	font-size: 1.2rem;
	font-weight: 700;
}
.mapa__endereco { margin: 0 0 var(--e-30); color: var(--cinza); }
.mapa__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-20);
	justify-content: center;
	margin: 0;
}
.mapa__aviso {
	margin: var(--e-20) 0 0;
	color: var(--cinza);
	font-size: 0.8125rem;
}

/* Carregado, o mapa ocupa a caixa inteira. */
.mapa__quadro {
	display: block;
	width: 100%;
	height: 24rem;
	border: 0;
}
@media (max-width: 40rem) {
	.mapa__fachada { padding: var(--e-30); }
	.mapa__acoes .botao { display: block; width: 100%; }
	.mapa__quadro { height: 18rem; }
}

/* ---------- formulário ---------- */

.formulario {
	margin-block: var(--e-40);
	padding: var(--e-40);
	border: 1px solid rgb(121 0 0 / 18%);
	border-top: 4px solid var(--dourado-borda);
	border-radius: 3px;
	background: var(--creme);
}
.formulario__campo { display: block; margin: 0 0 var(--e-30); }
.formulario__campo label {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--vinho);
	font-family: var(--fonte-titulo);
	font-weight: 600;
}
.formulario__obrigatorio { color: var(--vinho-claro); }
.formulario__opcional {
	color: var(--cinza);
	font-family: var(--fonte-texto);
	font-size: 0.8125rem;
	font-weight: 400;
}
.formulario__ajuda {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--cinza);
	font-size: 0.875rem;
}
.formulario input,
.formulario textarea {
	display: block;
	width: 100%;
	padding: 0.7rem 0.8rem;
	border: 1px solid rgb(0 0 0 / 25%);
	border-radius: 2px;
	background: var(--branco);
	font: inherit;
	color: var(--grafite);
}
.formulario input:focus,
.formulario textarea:focus {
	border-color: var(--vinho);
	outline: 3px solid var(--dourado-fosco);
	outline-offset: 1px;
}
.formulario textarea { resize: vertical; }

/* Erros: a borda sozinha não serve a quem não distingue vermelho, então o
   campo também ganha texto próprio, ligado por aria-describedby. */
.formulario__campo--erro input,
.formulario__campo--erro textarea { border-color: var(--vinho); border-width: 2px; }
.formulario__erro {
	display: block;
	margin-top: 0.35rem;
	color: var(--vinho);
	font-size: 0.875rem;
	font-weight: 600;
}
.formulario__erros {
	margin-bottom: var(--e-30);
	padding: var(--e-20) var(--e-30);
	border-left: 4px solid var(--vinho);
	background: var(--branco);
}
.formulario__erros p { margin: 0 0 0.4rem; color: var(--vinho); }
.formulario__erros ul { margin: 0; padding-left: 1.1rem; }
.formulario__erros a { color: var(--vinho); }

.formulario__acoes { margin: 0; }
.formulario__aviso {
	margin: var(--e-20) 0 0;
	color: var(--cinza);
	font-size: 0.8125rem;
}

/* A isca fica longe da tela sem usar display:none — campo escondido assim
   ainda é preenchido por robô, que é o ponto. */
.formulario__isca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.formulario__recibo {
	margin-block: var(--e-40);
	padding: var(--e-40);
	border-left: 4px solid var(--dourado);
	border-radius: 0 3px 3px 0;
	background: var(--creme);
}
.formulario__recibo h3 { margin: 0 0 0.5rem; color: var(--vinho); }
.formulario__recibo p { margin: 0; }

/* ---------- vizinhos ---------- */

.vizinhos {
	display: grid;
	gap: var(--e-20);
	margin-block: var(--e-50);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.vizinhos__item {
	padding: var(--e-30);
	border: var(--borda);
	border-radius: 3px;
	color: inherit;
	text-decoration: none;
}
.vizinhos__item span { display: block; margin-bottom: 0.25rem; color: var(--cinza); font-size: 0.8125rem; }
.vizinhos__item strong { color: var(--vinho); font-family: var(--fonte-titulo); font-weight: 600; }
.vizinhos__item--fim { text-align: right; }
.vizinhos__item:hover { background: var(--creme); }

/* ---------- rodapé ---------- */

.rodape {
	margin-top: 0;
	border-top: 4px solid var(--dourado-borda);
	background: var(--vinho-escuro);
	color: rgb(255 255 255 / 82%);
}
.rodape__grade {
	display: grid;
	gap: var(--e-40);
	padding-block: var(--e-50);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.rodape .marca img, .rodape .custom-logo { width: 64px; }
.rodape__nome {
	margin: var(--e-20) 0 0.5rem;
	color: var(--branco);
	font-family: var(--fonte-titulo);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.25;
}
.rodape__dado { margin: 0 0 0.25rem; font-size: 0.875rem; }
.rodape__titulo {
	margin-bottom: var(--e-20);
	color: var(--dourado);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.rodape__lista { margin: 0; padding: 0; list-style: none; }
.rodape__lista li { margin-bottom: 0.5rem; font-size: 0.9375rem; }
.rodape a { color: inherit; text-decoration: none; }
.rodape a:hover, .rodape a:focus-visible { color: var(--dourado); text-decoration: underline; }
.rodape .horarios__linha { border-bottom-color: rgb(255 255 255 / 15%); }
.rodape .horarios dt { color: var(--branco); }

.rodape__base {
	border-top: 1px solid rgb(255 255 255 / 14%);
	padding-block: var(--e-30);
	font-size: 0.8125rem;
}
.rodape__base p { margin: 0 0 0.25rem; }
.rodape__credito { opacity: 0.7; }

/* ---------- WhatsApp ---------- */

.whatsapp {
	position: fixed;
	right: var(--e-20);
	bottom: var(--e-20);
	z-index: 30;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.1rem;
	border-radius: 999px;
	background: #128c7e;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 6px 20px -6px rgb(0 0 0 / 45%);
}
.whatsapp:hover, .whatsapp:focus-visible { background: #0e6f63; color: #fff; }
@media (max-width: 30rem) {
	.whatsapp span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
	.whatsapp { padding: 0.85rem; }
}

/* ---------- busca e paginação ---------- */

.busca__rotulo { display: block; margin-bottom: 0.4rem; font-weight: 600; }
.busca__campo { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.busca__campo input {
	flex: 1 1 12rem;
	padding: 0.7rem 0.9rem;
	border: var(--borda);
	border-radius: 2px;
	font: inherit;
}
.busca__campo button {
	padding: 0.7rem 1.2rem;
	border: 0;
	border-radius: 2px;
	background: var(--vinho);
	color: var(--branco);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.navigation.pagination { margin-block: var(--e-50); text-align: center; }
.page-numbers {
	display: inline-block;
	padding: 0.45rem 0.8rem;
	border: var(--borda);
	border-radius: 2px;
	margin: 0 0.15rem;
	text-decoration: none;
}
.page-numbers.current { background: var(--vinho); border-color: var(--vinho); color: var(--branco); }

.vazio { padding-block: var(--e-40); color: var(--cinza); }

/* ---------- movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	/* O JS nem chega a rodar o efeito do brasão, mas o "fixed" do papel de
	   parede também é movimento — para quem pediu menos, ele fica parado. */
	.cabecalho .marca img,
	.cabecalho .custom-logo,
	.heroi__jesus { transform: none; }

	.cabecalho__papel,
	.heroi,
	.pagina-topo { background-attachment: scroll; }
}

/* ---------- impressão ---------- */

@media print {
	.barra-contato, .navegacao, .menu-alternar, .whatsapp, .rodape__base, .vizinhos { display: none; }
	body { color: #000; font-size: 11pt; }
	.faixa-horarios { background: none; color: #000; }
	.faixa-horarios .secao__titulo, .horarios dt { color: #000; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}