/* ===========================================================
TEMA PRÓPRIO — Paróquia N. Sra. Rainha dos Apóstolos
===========================================================
Carregado no lugar do design system da plataforma quando
o Site está em style_mode "custom" (ver Site#custom_style?).
Fonte: "Design System Paróquia Rainha dos Apóstolos" v1.
Este arquivo é a fonte de verdade do visual deste tenant e
deve ser editado como código — não pelo /admin/editor.
=========================================================== */
/* ============================================================
PARÓQUIA RAINHA DOS APÓSTOLOS — SISTEMA DE DESIGN v1
Fonte única de verdade. Toda página do site importa este arquivo:
------------------------------------------------------------
INTENÇÃO: cal e luz (fachada branca), calor humano (reboco
pêssego), solenidade (madeira maciça envernizada), leveza
contemporânea (vidro líquido nos elementos clicáveis).
============================================================ */
/* Fontes carregadas por no — ver Components::Layout::TenantFonts. */
:root {
/* ---------- 1. CORES BASE (das fotos da paróquia) ---------- */
/* Cal — a fachada, as paredes internas */
--branco: #FFFFFF;
--nata: #FAFAFA; /* cartões: quase-branco NEUTRO (nunca creme) */
--cal: #FBF8F4; /* faixas de respiro */
--cal-sombra: #F3EDE5; /* superfícies rebaixadas, zebra de tabelas */
/* Reboco — o "rosado" da fachada */
--pessego-100: #FBEEE9; /* faixas de seção, fundos de destaque */
--pessego-200: #F6DED6; /* bordas suaves, hover de superfícies claras */
--pessego-300: #EFC8BD; /* o tom da parede ao sol; selos, fundos pequenos */
--pessego-400: #DEA795; /* filetes, ícones decorativos sobre claro */
/* Terracota — o reboco queimado; a ÚNICA cor de ação */
--terracota: #A75531; /* links, botões, foco, indicadores ativos; contraste AA */
--terracota-escuro: #944E2B; /* hover/pressionado de ação */
/* Madeira — bancos, forro e balaústres envernizados */
--madeira-950: #1C0F08; /* fundo mais profundo (rodapé, blocos solenes) */
--madeira-900: #2A1810; /* títulos, texto de máximo contraste */
--madeira-800: #3E2517; /* blocos escuros, texto forte */
--madeira-700: #4A2E1C; /* tom médio dos bancos */
--madeira-600: #5C3B26; /* texto secundário sobre claro */
--verniz: #8A5E42; /* brilho do verniz: bordas e detalhes sobre escuro */
/* Dourado litúrgico — raríssimo, só em solenidades */
--dourado: #A98147;
/* ---------- 2. ALIASES SEMÂNTICOS (use estes no dia a dia) ---------- */
--fundo: var(--branco);
--fundo-elevado: var(--nata);
--fundo-faixa: var(--pessego-100);
--fundo-solene: #110B08; /* preto-marrom das superfícies escuras */
--tinta: #151211; /* quase-preto: títulos e texto forte */
--tinta-2: #2E2B28; /* corpo de texto */
--tinta-3: #6E6862; /* legendas, metadados */
--tinta-clara: #FFFFFF; /* texto sobre madeira */
--tinta-clara-2: rgba(255,255,255,.68); /* secundário sobre madeira */
--acao: var(--terracota);
--acao-forte: var(--terracota-escuro);
--linha: rgba(21, 18, 17, .12); /* hairlines sobre claro */
--linha-escura: rgba(255, 244, 230, .16); /* hairlines sobre madeira */
/* ---------- 3. TIPOGRAFIA ---------- */
/* Romana (inscrições, pré-títulos, momentos cerimoniais) */
--fonte-romana: 'Cinzel', 'Trajan Pro', serif;
/* Serifa editorial (títulos e leitura longa) */
--fonte-serifa: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
/* San Francisco ORIGINAL nos aparelhos Apple; cai para a sans do sistema
nos demais (a Apple não licencia o SF para embutir na web) */
--fonte-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
'Segoe UI', system-ui, 'Helvetica Neue', sans-serif;
--fonte-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
--ornamento-flor-de-lis: "\269C\FE0E";
/* ---------- 4. GEOMETRIA ---------- */
--raio-vidro: 999px; /* pílulas clicáveis */
--raio-cartao: 18px;
--raio-campo: 12px;
--raio-botao: 999px;
--largura-site: 1180px;
--largura-prosa: 65ch;
/* As superfícies continuam flat. Só botões claros recebem relevo funcional. */
--sombra-1: none;
--sombra-2: none;
--botao-altura: 2.75rem;
--botao-padding-y: .5rem;
--botao-padding-x: .9rem;
--botao-borda-clara: rgba(21, 18, 17, .16);
--sombra-botao-claro: 2px 3px 5px -3px rgba(21, 18, 17, .09);
--sombra-botao-claro-hover: 2px 4px 7px -4px rgba(21, 18, 17, .11);
--sombra-botao-claro-active: 1px 2px 3px -2px rgba(21, 18, 17, .08);
/* ---------- 5. VIDRO LÍQUIDO (ajustável) ---------- */
--vidro-blur: 20px;
--vidro-sat: 1.7;
--vidro-alpha: .42; /* opacidade do leite do vidro claro */
--transicao: 180ms cubic-bezier(.2,.8,.2,1);
}
/* ============================================================
RESET E BASE
============================================================ */
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--fundo);
color: var(--tinta-2);
font-family: var(--fonte-sans);
font-size: 1rem;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: var(--acao); text-decoration: none; }
a:hover { color: var(--acao-forte); }
::selection { background: var(--pessego-300); color: var(--madeira-900); }
img { max-width: 100%; display: block; }
html {
scroll-behavior: smooth;
scroll-padding-top: 2rem;
}
#horarios,
#confissoes,
#contato,
#a-paroquia,
#clero-paroquial,
#rainha-dos-apostolos,
#palotinos,
#publicacoes,
#pastorais {
scroll-margin-top: 2rem;
}
/* ============================================================
TIPOGRAFIA — os estilos canônicos
============================================================ */
/* PRÉ-TÍTULO — contraponto sans-serif para os títulos editoriais.
A Cinzel fica reservada aos poucos usos realmente cerimoniais. */
.pretitulo {
display: flex;
width: fit-content;
align-items: center;
gap: .6rem;
margin: 0 0 .7rem;
color: var(--acao);
font-family: var(--fonte-sans);
font-size: clamp(.72rem, .69rem + .12vw, .78rem);
font-weight: 750;
letter-spacing: .12em;
line-height: 1.35;
text-indent: 0;
text-wrap: balance;
text-transform: uppercase;
}
.pretitulo::before {
content: var(--ornamento-flor-de-lis) / "";
display: grid;
width: 1.25rem;
height: 1.375rem;
flex: none;
place-items: center;
font-family: var(--fonte-serifa);
font-size: 1.375rem;
font-weight: 600;
letter-spacing: 0;
line-height: 1;
opacity: .82;
transform: translateY(-1px);
}
.pretitulo--cerimonial {
font-family: var(--fonte-romana);
font-size: .75rem;
font-weight: 600;
letter-spacing: .22em;
}
.pretitulo--cerimonial::before { content: none; }
.pretitulo--claro { color: var(--pessego-300); } /* sobre madeira/fotos */
.pretitulo--discreto { color: var(--tinta-3); }
/* Variante com filetes laterais (aberturas de seção centradas) */
.pretitulo--linhas { width: 100%; justify-content: center; gap: clamp(.65rem, 2vw, 1.25rem); }
.pretitulo--linhas::before, .pretitulo--linhas::after { content: ''; height: 1px; width: clamp(1.25rem, 5vw, 2.5rem); background: currentColor; opacity: .45; }
/* TÍTULO DISPLAY — capa/heróis.
EB Garamond 500 · clamp 44→76px · entrelinha 1.04 · tracking −0.015em */
.titulo-display {
font-family: var(--fonte-serifa);
font-weight: 500;
font-size: clamp(2.75rem, 6vw, 4.75rem);
line-height: 1.04;
letter-spacing: -0.015em;
color: var(--tinta);
margin: 0;
text-wrap: balance;
}
/* TÍTULO DE SEÇÃO (h2) — EB Garamond 500 · 34→42px · 1.12 · −0.01em */
.titulo-secao {
font-family: var(--fonte-serifa);
font-weight: 500;
font-size: clamp(2.125rem, 3.4vw, 2.625rem);
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--tinta);
margin: 0;
text-wrap: balance;
}
/* TÍTULO DE BLOCO (h3) — EB Garamond 600 · 22px · 1.25 */
.titulo-bloco {
font-family: var(--fonte-serifa);
font-weight: 600;
font-size: 1.375rem;
line-height: 1.25;
letter-spacing: -0.005em;
color: var(--tinta);
margin: 0;
}
/* CERIMONIAL — Cinzel para solenidades e numerais de capítulo.
Cinzel 500 · 26→34px · 1.2 · tracking 0.08em */
.titulo-cerimonial {
font-family: var(--fonte-romana);
font-weight: 500;
font-size: clamp(1.625rem, 2.6vw, 2.125rem);
line-height: 1.2;
letter-spacing: 0.08em;
color: var(--tinta);
margin: 0;
}
/* TEXTOS */
.texto-destaque { font-size: clamp(1.125rem, 1rem + 0.7vw, 1.375rem); font-weight: 500; line-height: 1.5; letter-spacing: -0.012em; color: var(--tinta-2); margin: 0; }
.texto { font-size: clamp(1rem, .96rem + .2vw, 1.125rem); font-weight: 500; line-height: 1.65; letter-spacing: -0.008em; color: var(--tinta-2); margin: 0; }
/* Prosa — leitura longa (artigos, história, avisos maiores): sans fluida 17→20 px.
A serifa fica para títulos, citações e momentos solenes. */
.prosa { font-family: var(--fonte-sans); font-weight: 500; font-size: clamp(1.0625rem, 1.02rem + .2vw, 1.1875rem); line-height: 1.72; letter-spacing: -0.008em; color: var(--tinta-2); max-width: var(--largura-prosa); margin: 0; }
.legenda { font-size: 0.8125rem; font-weight: 500; line-height: 1.45; letter-spacing: 0.01em; color: var(--tinta-3); margin: 0; }
.citacao {
font-family: var(--fonte-serifa); font-style: italic; font-weight: 500;
font-size: clamp(1.375rem, 2.4vw, 1.75rem); line-height: 1.45; letter-spacing: -0.005em;
color: var(--tinta); text-align: center; max-width: 40ch; margin: 0 auto; text-wrap: balance;
}
.citacao-fonte { display: block; margin-top: 1rem; font-family: var(--fonte-romana); font-style: normal; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--tinta-3); }
/* ============================================================
VIDRO LÍQUIDO — só para o que é CLICÁVEL ou FLUTUA sobre a página.
Nunca para texto longo, nunca vidro sobre vidro.
============================================================ */
.vidro, .botao-vidro, .selo-vidro, .icone-vidro, .nav-vidro {
position: relative;
isolation: isolate;
--vidro-fundo: rgba(255, 253, 250, var(--vidro-alpha));
/* sem borda: o aro de 1px É o reflexo — acende no topo e some nas laterais */
--vidro-aro: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.16) 42%, rgba(255,255,255,.05) 62%, rgba(255,255,255,.35) 100%);
background: var(--vidro-fundo);
-webkit-backdrop-filter: blur(var(--vidro-blur)) saturate(var(--vidro-sat));
backdrop-filter: blur(var(--vidro-blur)) saturate(var(--vidro-sat));
border: none;
border-radius: var(--raio-vidro);
}
/* o aro-reflexo: anel de 1px recortado por máscara — nunca pinta o interior */
.vidro::before, .botao-vidro::before, .selo-vidro::before, .icone-vidro::before, .nav-vidro::before {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--vidro-aro);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
/* variante sobre fundos escuros/fotos */
.vidro--escuro {
--vidro-fundo: rgba(28, 15, 8, .38);
--vidro-aro: linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.09) 42%, rgba(255,255,255,.03) 62%, rgba(255,255,255,.26) 100%);
}
/* fallback sem backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
.vidro, .botao-vidro, .selo-vidro, .icone-vidro, .nav-vidro { --vidro-fundo: rgba(255, 252, 248, .92); }
.vidro--escuro { --vidro-fundo: rgba(30, 17, 10, .88); }
}
/* BOTÃO DE VIDRO */
.botao-vidro {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .78rem 1.6rem;
font-family: var(--fonte-sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.006em;
color: var(--tinta);
cursor: pointer; user-select: none;
transition: transform var(--transicao), background-color var(--transicao);
}
.botao-vidro:hover { --vidro-fundo: rgba(255, 253, 250, calc(var(--vidro-alpha) + .22)); color: var(--tinta); }
.botao-vidro:active { transform: scale(.97); }
.vidro--escuro.botao-vidro { color: #FFFFFF; }
.vidro--escuro.botao-vidro:hover { --vidro-fundo: rgba(28, 15, 8, .52); }
/* SELO (chip/tag de vidro) */
.selo-vidro {
display: inline-flex; align-items: center; gap: .45rem;
padding: .38rem 1rem;
font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em;
color: var(--tinta);
}
.vidro--escuro.selo-vidro { color: #FFFFFF; }
/* BOTÃO DE ÍCONE redondo */
.icone-vidro {
display: inline-flex; align-items: center; justify-content: center;
width: 2.75rem; height: 2.75rem;
color: var(--tinta); cursor: pointer;
transition: transform var(--transicao), background-color var(--transicao);
}
.icone-vidro:hover { --vidro-fundo: rgba(255,253,250, calc(var(--vidro-alpha) + .22)); }
.icone-vidro:active { transform: scale(.94); }
/* NAV FLUTUANTE — a barra do site inteiro (quebra em 2 linhas no celular) */
.nav-vidro { display: inline-flex; flex-wrap: wrap; justify-content: center; max-width: 100%; align-items: center; gap: .25rem; padding: .4rem; }
.nav-vidro a {
position: relative; z-index: 1; flex: none; white-space: nowrap;
padding: .5rem 1.05rem; border-radius: 999px;
font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.006em;
color: var(--tinta-2);
transition: background-color var(--transicao), color var(--transicao);
}
.nav-vidro a:hover { background: rgba(255,255,255,.55); color: var(--tinta); }
.nav-vidro a[aria-current] { background: var(--tinta); color: #FFFFFF; }
.vidro--escuro.nav-vidro a { color: rgba(255,255,255,.85); }
.vidro--escuro.nav-vidro a:hover { background: rgba(255,255,255,.14); color: #FFFFFF; }
.vidro--escuro.nav-vidro a[aria-current] { background: rgba(255,255,255,.94); color: var(--tinta); }
/* foco acessível em tudo que é clicável */
.site-button:focus-visible, .botao-vidro:focus-visible, .icone-vidro:focus-visible, .nav-vidro a:focus-visible,
.botao-madeira:focus-visible, .botao-cal:focus-visible, .botao-contorno:focus-visible, .campo:focus-visible {
outline: 2px solid var(--acao); outline-offset: 2px;
}
/* ============================================================
BOTÕES SÓLIDOS (ação primária fora de contexto de vidro)
============================================================ */
.botao-madeira {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .82rem 1.7rem; border: none; border-radius: var(--raio-vidro);
background: var(--madeira-900);
color: #FFFFFF;
font-family: var(--fonte-sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.006em;
cursor: pointer;
transition: transform var(--transicao), filter var(--transicao);
}
.botao-madeira:hover { filter: brightness(1.18); color: #FFFFFF; }
.botao-madeira:active { transform: scale(.97); }
.botao-contorno {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .78rem 1.6rem; border-radius: var(--raio-vidro);
border: 1px solid rgba(21,18,17,.28); background: transparent;
color: var(--tinta); font-family: var(--fonte-sans); font-size: 0.9375rem; font-weight: 600;
cursor: pointer; transition: border-color var(--transicao), background-color var(--transicao);
}
.botao-contorno:hover { border-color: var(--tinta); background: transparent; color: var(--tinta); }
.link-seta { font-weight: 600; font-size: 0.9375rem; }
.link-seta::after { content: ' →'; }
/* ============================================================
SUPERFÍCIES
============================================================ */
.cartao {
background: var(--cal-sombra);
border: 0;
border-radius: var(--raio-cartao);
padding: 1.75rem;
}
/* Bloco solene — madeira escura com verniz (rodapé, Santíssimo, avisos maiores) */
.cartao-madeira {
background: var(--madeira-900);
border: 0;
border-radius: var(--raio-cartao);
padding: 2rem;
color: var(--tinta-clara);
}
.cartao-madeira .titulo-bloco, .cartao-madeira .titulo-secao, .cartao-madeira .citacao { color: var(--tinta-clara); }
.cartao-madeira .texto, .cartao-madeira .prosa { color: var(--tinta-clara-2); }
/* Faixa pêssego — respiros de seção com o tom da fachada */
.faixa-pessego { background: var(--pessego-100); }
/* Divisor com flor-de-lis discreta */
.divisor { display: flex; align-items: center; gap: 1.25rem; border: none; margin: 0; color: var(--pessego-400); }
.divisor::before, .divisor::after { content: ''; flex: 1; height: 1px; background: var(--linha); }
.divisor__fleur-de-lis { display: grid; width: 1.375rem; height: 1.375rem; place-items: center; font-family: var(--fonte-serifa); font-size: 1.375rem; line-height: 1; transform: translateY(-1px); }
.divisor__fleur-de-lis::before { content: var(--ornamento-flor-de-lis) / ""; }
/* ============================================================
FORMULÁRIO
============================================================ */
.rotulo { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: .5rem; }
.campo {
width: 100%; padding: .75rem 1rem;
border: 1px solid rgba(21,18,17,.20); border-radius: var(--raio-campo);
background: var(--branco); color: var(--tinta);
font-family: var(--fonte-sans); font-size: 1rem;
transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo:focus { outline: none; border-color: var(--terracota); }
.campo::placeholder { color: var(--tinta-3); }
/* ============================================================
ESTRUTURA
============================================================ */
.container { max-width: var(--largura-site); margin-inline: auto; padding-inline: 1.5rem; }
.secao { padding-block: clamp(4rem, 9vw, 7.5rem); }
/* ============================================================
ESTRUTURA DO SITE — utilitários responsivos (mobile-first)
============================================================ */
/* O site ocupa 100% da tela, com respiro lateral fluido */
.container-fluido { width: 100%; max-width: 1720px; margin-inline: auto; padding-inline: clamp(1.25rem, 3.5vw, 4rem); }
/* Grades: 1 coluna no celular; ganham colunas por breakpoint */
.grade { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
.grade--2, .grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade--principal { grid-template-columns: minmax(0, 1.8fr) minmax(320px, 1fr); align-items: stretch; }
}
/* FOTO PLACEHOLDER — o /admin alimenta depois; troque pelo ![]()
/background mantendo a classe */
.ph-foto {
position: relative; display: block; min-height: 220px;
border-radius: var(--raio-cartao); overflow: hidden;
border: 0;
background:
radial-gradient(120% 90% at 18% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
linear-gradient(160deg, var(--pessego-100) 0%, var(--pessego-200) 55%, var(--pessego-300) 100%);
}
.ph-foto::before { content: var(--ornamento-flor-de-lis) / ""; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--fonte-serifa); font-size: 1.9rem; color: rgba(180,99,58,.30); }
/* com foto dentro: a imagem preenche o quadro e a flor-de-lis de espera sai de cena */
.ph-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-foto:has(img)::before { content: none; }
.ph-foto::after {
content: attr(data-rotulo);
position: absolute; left: .9rem; bottom: .9rem; max-width: calc(100% - 1.8rem);
padding: .32rem .85rem; border-radius: 999px;
background: rgba(255,253,250,.78);
font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: var(--madeira-600);
}
/* QUADRO DE HORÁRIOS — o dia de hoje acende em terracota */
.quadro-horarios { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); }
.quadro-dia {
display: flex; flex-direction: column; gap: .55rem;
padding: 1.1rem 1.15rem 1.25rem;
background: var(--cal); border: 0; border-radius: var(--raio-cartao);
}
.quadro-dia-nome { font-family: var(--fonte-sans); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.quadro-dia--hoje { background: var(--pessego-100); }
.quadro-dia--hoje .quadro-dia-nome { color: var(--terracota); }
/* ============================================================
DESENHO DA FACHADA — traço que se desenha no carregamento
Cada elemento leva pathLength="1"; o atraso vai inline.
============================================================ */
.tracar { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pq-tracar 1.5s cubic-bezier(.45,0,.2,1) forwards; }
.pintar { opacity: 0; animation: pq-pintar 1s ease forwards; }
.subir { opacity: 0; transform: translateY(22px); animation: pq-subir 1.3s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes pq-tracar { to { stroke-dashoffset: 0; } }
@keyframes pq-pintar { to { opacity: 1; } }
@keyframes pq-subir { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.tracar, .pintar, .subir { animation: none; stroke-dashoffset: 0; opacity: 1; transform: none; }
}
/* ============================================================
CABEÇALHO DO SITE — transparente: quem aparece é a nav de vidro
============================================================ */
.cabecalho { position: relative; z-index: 40; background: transparent; }
.cabecalho-marca { display: inline-flex; align-items: center; gap: .7rem; color: var(--tinta); }
.cabecalho-marca:hover { color: var(--tinta); }
.cabecalho-marca-nome { font-family: var(--fonte-romana); font-weight: 600; font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; line-height: 1.2; }
.cabecalho-marca-linha { font-family: var(--fonte-romana); font-weight: 600; font-size: .55rem; letter-spacing: .28em; text-transform: uppercase; color: var(--tinta-3); }
.cabecalho .icone-vidro { color: var(--terracota); }
/* variante escura — sobre fotos e fundos madeira */
.cabecalho--escuro .cabecalho-marca, .cabecalho--escuro .cabecalho-marca:hover { color: #FFFFFF; }
.cabecalho--escuro .cabecalho-marca-linha { color: rgba(255,244,230,.66); }
.cabecalho--escuro .icone-vidro { color: #FFF3E4; }
/* MOLDURA EM ARCO — o gesto da fachada aplicado a imagens */
.moldura-arco { border-radius: var(--raio-cartao); }
/* CARTÃO PÊSSEGO — superfície de destaque sem virar madeira */
.cartao-pessego { background: var(--pessego-100); border: 0; border-radius: var(--raio-cartao); padding: 1.75rem; }
/* MARCA — etiqueta estática (não clicável) */
.marca { display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .8rem; border-radius: 999px; background: var(--pessego-200); color: var(--madeira-700); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.marca--escura { background: rgba(255,255,255,.12); color: var(--pessego-300); }
/* NÚMERO DE PASSO — sequências didáticas e leitura de imagem */
.numero { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none; border-radius: 999px; background: var(--terracota); color: #FFFFFF; font-size: .78rem; font-weight: 700; }
@media (min-width: 700px) { .grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* GRADE JORNAL — primeira página de jornal: manchete, coluna de teasers, serviços.
1 coluna no celular; 2 no tablet; 3 no desktop, separadas por fios. */
.grade--jornal { display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 1fr); }
.grade--jornal > * { min-width: 0; }
@media (min-width: 700px) { .grade--jornal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px) and (max-width: 1149.98px) {
/* no tablet a 3ª coluna (serviços) deita: ocupa a linha inteira, blocos lado a lado */
.grade--jornal > :last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; border-top: 1px solid var(--linha); padding-top: 1.5rem; }
}
@media (min-width: 1150px) {
.grade--jornal { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.15fr) minmax(0, .9fr); gap: 0 1.75rem; }
.grade--jornal > * + * { border-left: 1px solid var(--linha); padding-left: 1.75rem; }
}
.kicker { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--terracota); margin: 0; }
.lista-artigos { display: flex; flex-direction: column; }
.lista-artigos > article { padding-block: 1.05rem; border-top: 1px solid var(--linha); }
.lista-artigos > article:first-child { border-top: none; padding-top: 0; }
/* PAINEL PADROEIRA + HORÁRIOS — tríptico do desktop: texto · pintura · quadro.
Tablet: texto e pintura lado a lado, quadro embaixo. Celular: tudo empilhado. */
.grade--painel { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.grade--painel > * { min-width: 0; }
.grade--painel > figure { align-self: center; }
@media (min-width: 700px) {
.grade--painel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; }
.grade--painel > .painel-horarios { grid-column: 1 / -1; }
}
@media (min-width: 1150px) {
.grade--painel { grid-template-columns: minmax(0, 1.2fr) minmax(260px, .85fr) minmax(320px, .95fr); gap: clamp(2rem, 3vw, 3.5rem); }
.grade--painel > .painel-horarios { grid-column: auto; }
}
.linha-dia { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .6rem .35rem; border-top: 1px solid var(--linha); }
.linha-dia--hoje { background: var(--pessego-100); border-radius: 10px; border-top-color: transparent; padding-inline: .6rem; }
.linha-dia--hoje + .linha-dia { border-top-color: transparent; }
/* BOTÃO CAL — primário sobre fotos e madeira (branco sólido) */
.botao-cal {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .82rem 1.7rem; border: none; border-radius: var(--raio-vidro);
background: var(--branco); color: var(--madeira-900);
font-family: var(--fonte-sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.006em;
cursor: pointer;
transition: transform var(--transicao), background-color var(--transicao);
}
.botao-cal:hover { background: var(--cal); color: var(--madeira-900); }
.botao-cal:active { transform: scale(.97); }
/* ============================================================
MVP EDITORIAL — HOME, PÁGINAS ESSENCIAIS E ESTADOS DE OBRA
============================================================ */
/* Estrutura e acessibilidade */
.site-container {
width: 100%;
max-width: calc(var(--largura-site) + 3rem);
margin-inline: auto;
padding-inline: clamp(1.25rem, 3.5vw, 3rem);
}
.container-fluido {
max-width: calc(var(--largura-site) + 3rem);
padding-inline: clamp(1.25rem, 3.5vw, 3rem);
}
.skip-link {
position: fixed;
z-index: 1000;
top: .75rem;
left: .75rem;
padding: .7rem 1rem;
border-radius: var(--raio-campo);
background: var(--branco);
color: var(--madeira-950);
font-size: .875rem;
font-weight: 700;
transform: translateY(calc(-100% - 1rem));
transition: transform var(--transicao);
}
.skip-link:focus {
color: var(--madeira-950);
transform: translateY(0);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
border: 0;
clip: rect(0 0 0 0);
white-space: nowrap;
}
#conteudo-principal:focus { outline: none; }
a:focus-visible,
button:focus-visible,
iframe:focus-visible {
outline: 3px solid var(--terracota);
outline-offset: 3px;
}
.site-section,
.section {
padding-block: clamp(4.5rem, 8vw, 7rem);
}
.section-heading {
max-width: var(--largura-prosa);
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-heading .texto,
.section-heading .texto-destaque,
.section-heading__intro { margin: 1rem 0 0; }
.section-heading__intro {
max-width: 54ch;
color: var(--tinta-3);
font-size: 1.0625rem;
font-weight: 500;
line-height: 1.65;
}
.section-heading--split { max-width: none; }
.button-row,
.home-hero__actions,
.home-contact__actions,
.construction-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .75rem;
}
/* Sistema canônico de CTAs do tenant. A navegação mantém contrato próprio. */
.site-button,
.botao-madeira,
.botao-cal,
.botao-contorno,
.botao-vidro {
display: inline-flex;
min-height: var(--botao-altura);
align-items: center;
justify-content: center;
gap: .45rem;
padding: var(--botao-padding-y) var(--botao-padding-x);
border-radius: var(--raio-botao);
font-family: var(--fonte-sans);
font-size: .875rem;
font-weight: 650;
letter-spacing: -.006em;
line-height: 1.15;
cursor: pointer;
user-select: none;
transition:
color var(--transicao),
background-color var(--transicao),
border-color var(--transicao),
box-shadow var(--transicao),
transform var(--transicao);
}
.site-button__icon {
display: inline-grid;
width: .875rem;
height: .875rem;
flex: 0 0 .875rem;
place-items: center;
color: currentColor;
}
.site-button__icon svg {
display: block;
width: 100%;
height: 100%;
}
.site-button__icon--trailing { margin-left: .05rem; }
.site-button--wide { width: 100%; }
.site-button--attached {
width: 100%;
border-inline: 0;
border-bottom: 0;
border-radius: 0;
box-shadow: none;
}
.site-button--light,
.botao-cal,
.botao-contorno {
border: 1px solid var(--botao-borda-clara);
background: var(--branco);
box-shadow: var(--sombra-botao-claro);
color: var(--tinta);
}
.site-button--light:hover,
.botao-cal:hover,
.botao-contorno:hover {
border-color: rgba(21, 18, 17, .24);
background: var(--branco);
box-shadow: var(--sombra-botao-claro-hover);
color: var(--tinta);
transform: translateY(-1px);
}
.site-button--light:active,
.botao-cal:active,
.botao-contorno:active {
box-shadow: var(--sombra-botao-claro-active);
transform: translateY(1px);
}
.site-button--dark,
.botao-madeira {
border: 1px solid rgba(255, 255, 255, .12);
background: var(--madeira-900);
box-shadow: none;
color: var(--branco);
}
.site-button--dark:hover,
.botao-madeira:hover {
background: var(--madeira-800);
color: var(--branco);
filter: none;
transform: translateY(-1px);
}
.site-button--dark:active,
.botao-madeira:active { transform: translateY(0); }
.site-button--glass { box-shadow: none; }
.site-button--glass:hover { transform: translateY(-1px); }
.site-button--glass:active { transform: translateY(0); }
/* Templates históricos recebem o mesmo ritmo e um ícone mínimo sem markup extra. */
.botao-madeira:not(.site-button)::after,
.botao-cal:not(.site-button)::after,
.botao-contorno:not(.site-button)::after,
.botao-vidro:not(.site-button)::after {
content: "→";
display: inline-block;
color: currentColor;
font-size: .75rem;
font-weight: 650;
line-height: 1;
opacity: .72;
transition: transform var(--transicao);
}
.botao-madeira:not(.site-button):hover::after,
.botao-cal:not(.site-button):hover::after,
.botao-contorno:not(.site-button):hover::after,
.botao-vidro:not(.site-button):hover::after { transform: translateX(2px); }
.botao-madeira:not(.site-button)[href^="#"]::after,
.botao-cal:not(.site-button)[href^="#"]::after,
.botao-contorno:not(.site-button)[href^="#"]::after,
.botao-vidro:not(.site-button)[href^="#"]::after { content: "↓"; }
.botao-madeira:not(.site-button)[target="_blank"]::after,
.botao-cal:not(.site-button)[target="_blank"]::after,
.botao-contorno:not(.site-button)[target="_blank"]::after,
.botao-vidro:not(.site-button)[target="_blank"]::after { content: "↗"; }
/* Cabeçalho */
.site-header {
position: relative;
z-index: 50;
width: 100%;
border-bottom: 0;
background: rgba(255, 255, 255, .96);
}
.site-header--overlay {
position: absolute;
inset: 0 0 auto;
border-bottom: 0;
background: linear-gradient(180deg, rgba(19, 10, 5, .42), rgba(19, 10, 5, 0));
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: center;
min-height: 4.75rem;
padding-block: .75rem;
}
.site-nav {
display: flex;
align-items: center;
gap: .125rem;
padding: .25rem;
border: 1px solid rgba(21, 18, 17, .1);
border-radius: var(--raio-vidro);
background: rgba(255, 255, 255, .88);
box-shadow: 0 10px 30px -22px rgba(21, 18, 17, .36);
-webkit-backdrop-filter: blur(14px) saturate(125%);
backdrop-filter: blur(14px) saturate(125%);
}
.site-nav a {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
justify-content: center;
padding-inline: .95rem;
border-radius: var(--raio-vidro);
color: var(--tinta-2);
font-size: .875rem;
font-weight: 650;
line-height: 1;
white-space: nowrap;
transition: color var(--transicao), background-color var(--transicao);
}
.link-seta {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
}
.site-nav a:hover { background: var(--pessego-100); color: var(--tinta); }
.site-nav a[aria-current="page"] { background: var(--madeira-900); color: var(--branco); }
.site-header--dark .site-nav {
border-color: rgba(255, 255, 255, .13);
background: rgba(17, 11, 8, .5);
box-shadow: 0 12px 32px -20px rgba(0, 0, 0, .52);
}
.site-header--dark .site-nav a { color: rgba(255, 255, 255, .86); }
.site-header--dark .site-nav a:hover { background: rgba(255, 255, 255, .12); color: var(--branco); }
.site-header--dark .site-nav a[aria-current="page"] { background: var(--branco); color: var(--madeira-950); }
.site-header--dark .site-nav a[aria-current="location"] { background: var(--branco); color: var(--madeira-950); }
/* Capa */
.home-hero {
position: relative;
isolation: isolate;
display: grid;
min-height: clamp(42rem, 92svh, 56rem);
overflow: hidden;
background:
radial-gradient(100% 65% at 78% 18%, rgba(169, 129, 71, .18), transparent 58%),
repeating-linear-gradient(96deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 12px),
linear-gradient(145deg, var(--madeira-800), var(--madeira-950) 68%);
}
.home-hero::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background:
radial-gradient(ellipse 88% 76% at 50% 42%, transparent 48%, rgba(16, 9, 5, .44) 100%),
linear-gradient(180deg, rgba(16, 9, 5, .30) 0%, rgba(16, 9, 5, .40) 55%, rgba(16, 9, 5, .58) 100%);
}
.home-hero__image {
position: absolute;
z-index: -2;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 48%;
filter: none;
transform: scale(1.5);
transform-origin: 52.5% 34%;
}
.home-hero__content {
display: flex;
align-items: center;
align-self: center;
flex-direction: column;
padding-top: clamp(8rem, 16vh, 11rem);
padding-bottom: clamp(4.5rem, 9vh, 7rem);
text-align: center;
}
.home-hero .pretitulo {
max-width: 100%;
justify-content: center;
flex-wrap: wrap;
gap: .05rem .65rem;
margin-bottom: 1.1rem;
color: var(--branco);
font-size: clamp(1rem, 2.5vw, 1.125rem);
font-weight: 700;
letter-spacing: clamp(.08em, .06em + .18vw, .16em);
}
.home-hero__pretitle-segment { white-space: nowrap; }
.home-hero .titulo-display {
max-width: 20ch;
color: var(--branco);
font-size: clamp(2.85rem, 6.2vw, 4.85rem);
text-shadow: none;
}
.home-hero .titulo-display__line { display: block; white-space: nowrap; }
.home-hero .texto-destaque {
max-width: 47ch;
margin-top: 1.25rem;
color: rgba(255, 255, 255, .82);
font-size: clamp(1.0625rem, .98rem + .45vw, 1.25rem);
}
.home-hero .pretitulo,
.home-hero .texto-destaque { text-shadow: 0 2px 22px rgba(12, 6, 4, .36); }
.home-hero__actions {
justify-content: center;
margin-top: 1.75rem;
}
/* Horários e atendimento */
.home-schedule {
--schedule-surface: #F7F8F8;
--schedule-today: #ECEEEE;
--schedule-card-gap: clamp(1.25rem, 3vw, 2rem);
padding-bottom: clamp(3.5rem, 6vw, 5rem);
background: var(--branco);
color: var(--tinta-2);
font-family: var(--fonte-sans);
}
.home-schedule .section-heading .titulo-secao {
color: var(--tinta);
}
.home-schedule .titulo-bloco {
font-family: var(--fonte-sans);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -.02em;
}
.home-schedule .section-heading__intro,
.home-schedule .schedule-utility .texto { color: var(--tinta-2); }
.home-schedule .section-heading .pretitulo { color: var(--acao); }
.home-schedule__layout {
display: grid;
gap: var(--schedule-card-gap);
align-items: stretch;
}
.schedule-column {
display: grid;
min-width: 0;
align-content: start;
gap: clamp(.9rem, 1.6vw, 1.25rem);
}
.schedule-column > .schedule-panel { height: auto; }
.schedule-panel,
.info-card {
border: 0;
border-radius: var(--raio-cartao);
}
.schedule-panel {
min-width: 0;
height: 100%;
padding: clamp(1.25rem, 3vw, 2rem);
background: var(--schedule-surface);
}
.schedule-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
padding-bottom: 1rem;
}
.schedule-panel__frequency {
display: inline-flex;
min-height: 1.75rem;
align-items: center;
padding-inline: .65rem;
border-radius: var(--raio-vidro);
background: var(--schedule-today);
color: var(--tinta-3);
font-size: .6875rem;
font-weight: 750;
letter-spacing: .065em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}
.schedule-list,
.schedule-panel__times,
.contact-list {
padding: 0;
margin: 0;
list-style: none;
}
.schedule-row {
display: grid;
grid-template-columns: minmax(7.5rem, .8fr) minmax(0, 1fr);
align-items: baseline;
gap: 1rem;
padding: .86rem .75rem;
border-top: 1px solid var(--linha);
}
.schedule-row--today {
border-top-color: transparent;
border-radius: .75rem;
background: var(--schedule-today);
}
.schedule-row--today + .schedule-row { border-top-color: transparent; }
.schedule-row__day {
display: inline-flex;
align-items: center;
gap: .55rem;
color: var(--tinta-3);
font-size: .75rem;
font-weight: 750;
letter-spacing: .065em;
text-transform: uppercase;
}
.schedule-row__times {
color: var(--tinta);
font-family: var(--fonte-sans);
font-size: 1.0625rem;
font-weight: 650;
letter-spacing: -.015em;
line-height: 1.35;
text-align: right;
}
.schedule-panel--masses .schedule-row__times { white-space: nowrap; }
.status-chip,
.schedule-panel__today {
display: inline-flex;
align-items: center;
min-height: 1.5rem;
padding-inline: .55rem;
border-radius: var(--raio-vidro);
background: var(--terracota);
color: var(--branco);
font-size: .625rem;
font-weight: 750;
letter-spacing: .08em;
text-transform: uppercase;
}
.schedule-panel__note {
display: block;
margin: .9rem 0 0;
color: var(--tinta-3);
font-size: .8125rem;
font-weight: 550;
line-height: 1.5;
}
.schedule-panel--services {
display: flex;
height: auto;
align-self: start;
flex-direction: column;
}
.schedule-list--services {
display: grid;
flex: none;
grid-template-rows: repeat(2, auto);
}
.schedule-list--services .schedule-row {
align-items: center;
}
.schedule-utility {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem 1.5rem;
padding: .25rem;
}
.schedule-utility .texto {
max-width: 38ch;
margin: 0;
color: var(--tinta-3);
}
.schedule-utility .site-button { flex: none; }
.schedule-contact-cta { justify-self: stretch; }
.service-cards {
display: grid;
gap: var(--schedule-card-gap);
}
.contact-cards { display: grid; gap: 1rem; }
.info-card {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: clamp(1.45rem, 2.5vw, 1.8rem);
background: #FAFAF9;
}
.info-card__label {
margin: 0 0 .75rem;
color: var(--terracota);
font-family: var(--fonte-sans);
font-size: .6875rem;
font-weight: 700;
letter-spacing: .105em;
line-height: 1.2;
text-transform: uppercase;
}
.info-card .titulo-bloco {
max-width: 18ch;
font-size: clamp(1.4rem, 2vw, 1.55rem);
line-height: 1.18;
letter-spacing: -.012em;
}
.info-card .texto,
.info-card > address {
margin-top: .85rem;
color: var(--tinta-2);
font-size: 1rem;
font-weight: 500;
line-height: 1.58;
text-wrap: pretty;
}
.info-card > .button-row { margin-top: 1rem; }
.info-card__action {
display: flex;
width: 100%;
min-height: var(--botao-altura);
align-items: center;
gap: .45rem;
margin-top: 1.15rem;
padding: var(--botao-padding-y) var(--botao-padding-x);
border: 1px solid var(--botao-borda-clara);
border-radius: var(--raio-botao);
background: var(--branco);
box-shadow: var(--sombra-botao-claro);
color: var(--tinta);
font-family: var(--fonte-sans);
font-size: .875rem;
font-weight: 650;
letter-spacing: -.006em;
line-height: 1.15;
transition:
color var(--transicao),
background-color var(--transicao),
border-color var(--transicao),
box-shadow var(--transicao),
transform var(--transicao);
}
.info-card__action:hover {
background: var(--branco);
border-color: rgba(21, 18, 17, .24);
box-shadow: var(--sombra-botao-claro-hover);
color: var(--tinta);
transform: translateY(-1px);
}
.info-card__action:active {
box-shadow: var(--sombra-botao-claro-active);
transform: translateY(1px);
}
.info-card__action .site-button__icon { color: var(--acao); }
.info-card__action-arrow { margin-left: auto; color: var(--acao); }
/* Apresentação e citação */
.home-about {
padding-top: clamp(3.5rem, 6vw, 5rem);
background: var(--branco);
color: var(--tinta-2);
}
.home-about .pretitulo { color: var(--acao); }
.home-about .titulo-secao { color: var(--tinta); }
.home-about .prosa { color: var(--tinta-2); }
.home-about__grid {
display: grid;
gap: clamp(2.5rem, 6vw, 5rem);
align-items: center;
}
.home-about__copy .prosa { margin-top: 1.25rem; }
.home-about__copy .prosa + .prosa { margin-top: 1rem; }
.home-about__figure { width: 100%; max-width: 34rem; margin: 0; justify-self: center; }
.home-about__media {
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--raio-cartao);
background: var(--cal-sombra);
}
.home-about__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 28%;
}
.home-about__figure figcaption {
margin-top: .75rem;
color: var(--tinta-3);
font-size: .8125rem;
font-weight: 500;
}
.home-quote {
position: relative;
overflow: hidden;
padding-block: clamp(4.5rem, 8vw, 7rem);
background: var(--fundo-solene);
background-image:
radial-gradient(ellipse 72% 20% at 8% 14%, rgba(167, 85, 49, .05), transparent 72%),
radial-gradient(ellipse 58% 18% at 94% 48%, rgba(239, 200, 189, .025), transparent 70%),
radial-gradient(ellipse 82% 20% at 32% 86%, rgba(138, 94, 66, .045), transparent 74%),
radial-gradient(ellipse 50% 14% at 72% 68%, rgba(107, 53, 37, .05), transparent 76%);
color: var(--tinta-clara-2);
}
.home-quote blockquote {
max-width: 42rem;
margin: 0 auto clamp(3.5rem, 6vw, 5rem);
text-align: center;
}
.home-quote blockquote p {
margin: 0;
color: var(--branco);
font-family: var(--fonte-serifa);
font-size: clamp(1.6rem, 3vw, 2.25rem);
font-style: italic;
font-weight: 500;
line-height: 1.35;
text-wrap: balance;
}
.home-quote cite {
display: block;
margin-top: 1.25rem;
color: var(--pessego-300);
font-family: var(--fonte-romana);
font-size: .6875rem;
font-style: normal;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
}
/* Sequência editorial de conteúdos em preparação */
.home-notices,
.home-preparation {
position: relative;
overflow: hidden;
}
.home-construction-sequence {
--preparation-block-height: clamp(31rem, 42vw, 35rem);
--preparation-block-padding: clamp(2rem, 5vw, 4.5rem);
display: grid;
gap: clamp(1.25rem, 3vw, 2.25rem);
}
.home-construction-sequence .construction-preview {
display: block;
align-self: stretch;
min-width: 0;
margin: 0;
padding: 0;
overflow: hidden;
opacity: 1;
filter: none;
transform: none;
pointer-events: none;
user-select: none;
}
.home-construction-sequence .construction-preview img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: none;
}
.preparation-block {
position: relative;
isolation: isolate;
display: grid;
min-height: 0;
overflow: hidden;
border: 0;
border-radius: clamp(1.25rem, 3vw, 2rem);
background: var(--branco);
}
.preparation-media {
position: relative;
z-index: 1;
min-width: 0;
min-height: 22rem;
margin: 0 0 -1px;
overflow: hidden;
}
.preparation-media > .construction-preview {
position: absolute;
inset: -1px;
width: auto;
height: auto;
}
.preparation-copy {
display: flex;
min-width: 0;
flex-direction: column;
justify-content: center;
padding: var(--preparation-block-padding);
background: var(--branco);
color: var(--tinta-2);
}
.preparation-copy .pretitulo { color: var(--acao); }
.preparation-copy .titulo-secao { max-width: 17ch; color: var(--tinta); }
.preparation-copy .prosa { margin-top: 1.25rem; color: var(--tinta-2); }
.preparation-status {
position: absolute;
z-index: 2;
right: 1.25rem;
bottom: 1.25rem;
display: inline-flex;
min-height: 2rem;
align-items: center;
margin: 0;
padding: .45rem .8rem;
border: 0;
border-radius: var(--raio-vidro);
background: rgba(255, 255, 255, .9);
color: var(--madeira-800);
font-size: .6875rem;
font-weight: 750;
letter-spacing: .105em;
line-height: 1;
text-transform: uppercase;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.preparation-status--dark {
border: 0;
background: rgba(28, 15, 8, .76);
color: var(--branco);
}
.preparation-feature--clergy .preparation-feature__visual {
background:
radial-gradient(85% 65% at 50% 14%, rgba(255, 255, 255, .62), transparent 72%),
linear-gradient(145deg, var(--cal-sombra), var(--pessego-200));
}
.preparation-feature--clergy .preparation-feature__preview::before,
.preparation-feature--clergy .preparation-feature__preview::after {
content: "";
position: absolute;
left: 50%;
background: rgba(255, 255, 255, .62);
transform: translateX(-50%);
}
.preparation-feature--clergy .preparation-feature__preview::before {
top: 18%;
width: clamp(6rem, 22%, 8.5rem);
aspect-ratio: 1;
border-radius: 50%;
}
.preparation-feature--clergy .preparation-feature__preview::after {
bottom: -12%;
width: clamp(18rem, 68%, 27rem);
height: 64%;
border-radius: 50% 50% 0 0;
}
.preparation-feature--clergy .preparation-feature__preview.construction-preview--image::before,
.preparation-feature--clergy .preparation-feature__preview.construction-preview--image::after {
content: none;
}
.preparation-feature--patroness .preparation-feature__preview img { object-position: center 30%; }
.preparation-feature--pallottines .preparation-feature__preview img {
object-position: center 18%;
}
.preparation-publications__visual {
background:
radial-gradient(90% 60% at 50% 18%, rgba(255, 255, 255, .55), transparent 70%),
var(--pessego-200);
}
.publication-preview {
width: 100%;
height: 100%;
}
.publication-preview.construction-preview--image .publication-sheet {
display: none;
}
.publication-sheet {
position: absolute;
display: flex;
width: min(48%, 15rem);
aspect-ratio: 3 / 4;
flex-direction: column;
gap: .7rem;
padding: 1.25rem;
border: 0;
border-radius: .45rem;
background: var(--branco);
}
.publication-sheet span {
display: block;
width: 100%;
height: .55rem;
border-radius: var(--raio-vidro);
background: var(--pessego-200);
}
.publication-sheet span:first-child {
height: auto;
aspect-ratio: 5 / 3;
border-radius: .3rem;
background: linear-gradient(145deg, var(--madeira-800), var(--terracota));
}
.publication-sheet span:nth-child(2) { width: 78%; }
.publication-sheet span:nth-child(3) { width: 56%; }
.publication-sheet span:nth-child(4) { width: 88%; margin-top: auto; }
.publication-sheet--back { top: 24%; left: 7%; transform: rotate(-8deg); background: var(--cal); }
.publication-sheet--middle { top: 9%; right: 5%; transform: rotate(7deg); background: var(--pessego-100); }
.publication-sheet--front { z-index: 1; top: 16%; left: 30%; }
.preparation-pastoral {
background: var(--branco);
}
.preparation-pastoral__visual {
isolation: isolate;
background: var(--madeira-950);
}
.preparation-pastoral__preview {
z-index: 0;
}
.preparation-pastoral__preview img {
object-position: center 38%;
}
.preparation-pastoral__visual .preparation-status { z-index: 2; }
.preparation-pastoral__content {
z-index: 2;
}
.preparation-pastoral__content .titulo-secao { color: var(--tinta); }
.preparation-pastoral__content .prosa { color: var(--tinta-2); }
.construction-page {
display: grid;
min-height: calc(100svh - 5.5rem);
align-items: center;
padding-block: clamp(2rem, 5vw, 4rem);
background: linear-gradient(180deg, var(--cal), var(--pessego-100));
}
.construction-stage {
position: relative;
display: grid;
min-height: clamp(30rem, 68svh, 45rem);
overflow: hidden;
border: 0;
border-radius: clamp(1.25rem, 3vw, 2rem);
background: rgba(255, 255, 255, .74);
}
.construction-preview,
.construction-message { grid-area: 1 / 1; }
.construction-preview {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(.75rem, 2vw, 1.5rem);
align-self: stretch;
padding: clamp(1rem, 3vw, 2.5rem);
opacity: .34;
filter: blur(3px);
transform: scale(1.015);
user-select: none;
}
.construction-card {
display: flex;
min-width: 0;
flex-direction: column;
gap: .8rem;
align-self: center;
padding: .85rem;
border: 0;
border-radius: var(--raio-cartao);
background: var(--branco);
}
.construction-card span {
display: block;
height: .75rem;
border-radius: var(--raio-vidro);
background: var(--pessego-200);
}
.construction-card span:first-child {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
border-radius: calc(var(--raio-cartao) - .4rem);
background: linear-gradient(150deg, var(--cal-sombra), var(--pessego-300));
}
.construction-card span:nth-child(2) { width: 78%; }
.construction-card span:nth-child(3) { width: 52%; }
.construction-message {
z-index: 2;
align-self: center;
justify-self: center;
width: min(calc(100% - 2rem), 40rem);
padding: clamp(1.75rem, 5vw, 3.25rem);
border: 0;
border-radius: var(--raio-cartao);
background: rgba(255, 255, 255, .91);
text-align: center;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.construction-message .texto-destaque { margin-top: .75rem; color: var(--terracota); }
.construction-message .prosa { margin: 1rem auto 0; }
.construction-actions { justify-content: center; margin-top: 1.75rem; }
/* Mapa e contato da home */
.home-contact {
--contact-surface: #F7F8F8;
--contact-hover: #ECEEEE;
padding-top: clamp(4.5rem, 7vw, 6rem);
background: var(--branco);
color: var(--tinta-2);
}
.home-contact > .site-container > .section-heading .pretitulo { color: var(--acao); }
.home-contact > .site-container > .section-heading .titulo-secao { color: var(--tinta); }
.section-boundary {
--section-boundary-color: var(--acao);
--section-boundary-line: rgba(167, 85, 49, .42);
position: relative;
z-index: 3;
height: 0;
color: var(--section-boundary-color);
pointer-events: none;
}
.section-boundary__ornament {
position: absolute;
top: 0;
left: 50%;
display: flex;
width: min(calc(100% - 3rem), 22rem);
align-items: center;
gap: .85rem;
transform: translate(-50%, -50%);
}
.section-boundary__line {
height: 1px;
flex: 1;
}
.section-boundary__line:first-child {
background: linear-gradient(90deg, transparent, var(--section-boundary-line));
}
.section-boundary__line:last-child {
background: linear-gradient(90deg, var(--section-boundary-line), transparent);
}
.section-boundary__fleur-de-lis {
display: grid;
width: 1.25rem;
height: 1.375rem;
flex: none;
place-items: center;
font-family: var(--fonte-serifa);
font-size: 1.375rem;
font-weight: 600;
line-height: 1;
opacity: .82;
transform: translateY(-1px);
}
.section-boundary__fleur-de-lis::before { content: var(--ornamento-flor-de-lis) / ""; }
.home-contact__grid,
.contact-grid {
display: grid;
gap: clamp(1.25rem, 3vw, 2rem);
align-items: stretch;
}
.home-contact__map-wrap,
.map-panel,
.home-contact__card {
overflow: hidden;
border: 0;
border-radius: var(--raio-cartao);
background: var(--branco);
}
.home-contact__map-wrap,
.map-panel { display: flex; flex-direction: column; }
.home-contact__map,
.map-frame {
display: block;
width: 100%;
min-height: 24rem;
flex: 1;
border: 0;
}
.home-contact__map-link {
display: inline-flex;
min-height: var(--botao-altura);
align-items: center;
justify-content: center;
gap: .4rem;
padding: var(--botao-padding-y) var(--botao-padding-x);
border: 0;
border-top: 1px solid var(--linha);
border-radius: 0;
background: var(--branco);
box-shadow: none;
color: var(--madeira-800);
font-size: .8125rem;
font-weight: 650;
}
.home-contact__map-link:hover { background: var(--contact-hover); color: var(--madeira-950); }
.map-panel { gap: 1rem; padding: 1rem; }
.map-panel .map-frame { border-radius: calc(var(--raio-cartao) - .4rem); }
.map-panel > .botao-contorno { align-self: flex-start; }
.home-contact__card {
display: flex;
flex-direction: column;
padding: clamp(1.5rem, 3vw, 2rem);
background: var(--contact-surface);
color: var(--tinta-2);
}
.home-contact__card > .pretitulo { color: var(--acao); }
.home-contact__title {
margin: 0;
color: var(--tinta);
font-family: var(--fonte-sans);
font-size: clamp(1.55rem, 2.5vw, 1.9rem);
font-weight: 720;
letter-spacing: -.03em;
line-height: 1.12;
}
.home-contact__intro {
max-width: 34ch;
margin: .65rem 0 0;
color: var(--tinta-3);
font-size: .9375rem;
font-weight: 500;
line-height: 1.5;
}
.contact-methods {
display: grid;
gap: .75rem;
margin: 1.6rem 0 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
font-style: normal;
}
.contact-method,
.contact-whatsapp {
border: 1px solid var(--botao-borda-clara);
border-radius: var(--raio-botao);
background: var(--branco);
box-shadow: var(--sombra-botao-claro);
color: var(--madeira-950);
font-size: .875rem;
font-weight: 650;
transition:
color var(--transicao),
background-color var(--transicao),
border-color var(--transicao),
box-shadow var(--transicao),
transform var(--transicao);
}
.contact-method {
display: grid;
min-width: 0;
min-height: var(--botao-altura);
grid-template-columns: .875rem minmax(0, 1fr) auto;
align-items: center;
gap: .6rem;
padding: var(--botao-padding-y) var(--botao-padding-x);
}
.contact-method::after {
content: "→";
color: var(--tinta-3);
font-size: .9rem;
transform: translateX(0);
transition: color var(--transicao), transform var(--transicao);
}
.contact-method[target="_blank"]::after { content: "↗"; }
.contact-method:focus-visible,
.contact-whatsapp:focus-visible,
.social-links a:focus-visible {
outline: 2px solid var(--acao);
outline-offset: 4px;
}
.contact-method__icon {
display: grid;
width: .875rem;
height: .875rem;
place-items: center;
border-radius: 0;
background: transparent;
color: var(--acao);
transition: color var(--transicao);
}
.contact-method__icon svg {
display: block;
width: .875rem;
height: .875rem;
}
.contact-method__copy {
display: grid;
min-width: 0;
gap: .1rem;
}
.contact-method__primary {
min-width: 0;
color: var(--tinta);
font-size: .875rem;
font-weight: 650;
line-height: 1.35;
overflow-wrap: anywhere;
}
.contact-method[href^="mailto:"] .contact-method__primary {
font-size: clamp(.8rem, 3.35vw, .875rem);
letter-spacing: -.015em;
}
.contact-method__secondary {
color: var(--tinta-3);
font-size: .7rem;
font-weight: 520;
line-height: 1.35;
}
.contact-whatsapp {
display: grid;
min-height: var(--botao-altura);
grid-template-columns: .875rem minmax(0, 1fr) auto;
align-items: center;
gap: .45rem;
margin-top: .75rem;
padding: var(--botao-padding-y) var(--botao-padding-x);
}
.contact-whatsapp::after {
content: "→";
color: var(--terracota);
transition: color var(--transicao), transform var(--transicao);
}
.contact-method:hover,
.contact-whatsapp:hover {
border-color: rgba(21, 18, 17, .24);
background: var(--branco);
box-shadow: var(--sombra-botao-claro-hover);
color: var(--madeira-950);
transform: translateY(-1px);
}
.contact-method:hover::after { color: var(--acao); transform: translateX(2px); }
.contact-method:hover .contact-method__icon { color: var(--acao-forte); }
.contact-whatsapp:hover::after { color: var(--madeira-950); transform: translateX(2px); }
.contact-method:active,
.contact-whatsapp:active {
box-shadow: var(--sombra-botao-claro-active);
transform: translateY(1px);
}
.contact-whatsapp__icon {
display: grid;
width: .875rem;
height: .875rem;
flex: none;
place-items: center;
border-radius: 0;
background: transparent;
color: var(--terracota);
}
.contact-whatsapp svg {
display: block;
width: .875rem;
height: .875rem;
}
.social-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
margin-top: 1.1rem;
padding-top: .9rem;
border-top: 1px solid var(--linha);
}
.social-links a {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
justify-content: flex-start;
gap: .5rem;
padding: .35rem 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--tinta-3);
font-size: .8125rem;
font-weight: 650;
transition: color var(--transicao);
}
.social-links a:hover {
background: transparent;
color: var(--tinta);
}
.social-links svg { display: block; width: .95rem; height: .95rem; flex: none; color: var(--acao); }
/* Páginas essenciais */
.page-hero {
padding-block: clamp(4rem, 8vw, 6.5rem);
background:
radial-gradient(75% 120% at 100% 0%, rgba(222, 167, 149, .26), transparent 66%),
linear-gradient(180deg, var(--branco), var(--pessego-100));
}
.page-hero .titulo-display { max-width: 18ch; }
.page-hero .texto-destaque { max-width: 56ch; margin-top: 1.25rem; }
.schedule-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
gap: 1rem;
}
.schedule-grid .schedule-panel {
display: flex;
min-height: 13rem;
flex-direction: column;
}
.schedule-panel--today { background: var(--pessego-100); }
.schedule-panel__times { display: flex; flex-direction: column; gap: .75rem; margin-top: auto; }
.schedule-panel__times li { display: flex; flex-direction: column; gap: .1rem; }
.schedule-panel__time { color: var(--tinta); font-family: var(--fonte-serifa); font-size: 1.35rem; font-weight: 600; line-height: 1.15; }
.schedule-panel__times .schedule-panel__note { margin-top: 0; color: var(--terracota); font-size: .7rem; }
.service-grid { display: grid; gap: 1rem; }
.service-grid .info-card { min-height: 100%; }
.contact-cards { align-content: start; }
.contact-cards address { font-style: normal; }
.contact-list { width: 100%; margin-top: 1rem; }
.contact-list li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: .35rem 1rem;
padding-block: .7rem;
border-top: 1px solid var(--linha);
}
.contact-list span { color: var(--tinta-3); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.contact-list a { font-weight: 650; overflow-wrap: anywhere; }
/* Rodapé editorial */
.site-footer {
background:
radial-gradient(circle at 12% 0%, rgba(138, 94, 66, .13), transparent 36rem),
var(--fundo-solene);
color: var(--tinta-clara-2);
}
.site-footer__inner { padding-top: clamp(3.25rem, 6vw, 5rem); }
.site-footer__main {
display: grid;
gap: clamp(3rem, 7vw, 7rem);
padding-bottom: clamp(3.5rem, 6vw, 5rem);
}
.site-footer__brand { max-width: 28rem; }
.site-footer__directory { display: grid; }
.site-footer__eyebrow,
.site-footer__title,
.site-footer__text,
.site-footer__heading,
.site-footer__lead,
.site-footer__detail,
.site-footer__legal p { margin: 0; }
.site-footer__eyebrow,
.site-footer__heading {
color: var(--pessego-300);
font-family: var(--fonte-sans);
font-size: .7rem;
font-weight: 750;
letter-spacing: .14em;
line-height: 1.35;
text-transform: uppercase;
}
.site-footer__title {
margin-top: .65rem;
color: var(--branco);
font-family: var(--fonte-serifa);
font-size: clamp(2rem, 1.75rem + 1vw, 2.75rem);
font-weight: 600;
letter-spacing: -.025em;
line-height: 1.05;
text-wrap: balance;
}
.site-footer__text {
max-width: 38ch;
margin-top: 1.15rem;
color: rgba(255, 255, 255, .66);
font-size: .95rem;
line-height: 1.7;
}
.site-footer__social {
display: flex;
flex-wrap: wrap;
gap: .25rem 1.5rem;
margin-top: 1.8rem;
padding-top: 1.15rem;
border-top: 1px solid var(--linha-escura);
}
.site-footer__social a,
.site-footer__link,
.site-footer__lead--link,
.site-footer__legal a {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
justify-content: space-between;
gap: .7rem;
color: rgba(255, 255, 255, .78);
font-size: .8125rem;
font-weight: 650;
line-height: 1.4;
overflow-wrap: anywhere;
transition: color var(--transicao);
}
.site-footer__icon {
display: inline-grid;
width: .875rem;
height: .875rem;
flex: none;
place-items: center;
color: var(--pessego-300);
transition: color var(--transicao);
}
.site-footer__icon--end { margin-left: auto; }
.site-footer__icon svg {
display: block;
width: 100%;
height: 100%;
}
.site-footer__social a:hover,
.site-footer__link:hover,
.site-footer__lead--link:hover,
.site-footer__legal a:hover { color: var(--branco); }
.site-footer a:hover .site-footer__icon { color: var(--branco); }
.site-footer__section {
display: flex;
min-width: 0;
flex-direction: column;
align-items: flex-start;
padding-block: 1.75rem;
border-top: 1px solid var(--linha-escura);
font-style: normal;
}
.site-footer__disclosure { width: 100%; }
.site-footer__summary {
display: block;
list-style: none;
}
.site-footer__summary::-webkit-details-marker { display: none; }
.site-footer__summary::marker { content: ""; }
.site-footer__summary .site-footer__heading { margin: 0; }
.site-footer__panel {
width: 100%;
flex-direction: column;
align-items: flex-start;
padding-top: 1.1rem;
}
.site-footer__disclosure[open] > .site-footer__panel { display: flex; }
.site-footer__disclosure:not([open]) > .site-footer__panel { display: none; }
.site-footer__lead {
color: var(--branco);
font-family: var(--fonte-serifa);
font-size: 1.2rem;
font-weight: 600;
line-height: 1.25;
}
.site-footer__lead--link {
min-height: 2.75rem;
color: var(--branco);
transition: color var(--transicao);
}
.site-footer__detail {
margin-top: .45rem;
color: rgba(255, 255, 255, .58);
font-size: .8125rem;
line-height: 1.65;
}
.site-footer__panel > .site-footer__link { margin-top: .55rem; }
.site-footer__link--email { margin-top: 0 !important; }
.site-footer__links { width: 100%; margin: -.35rem 0 0; padding: 0; list-style: none; }
.site-footer__links li { margin: 0; }
.site-footer__links .site-footer__link { width: 100%; }
.site-footer__legal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem 2rem;
padding-block: 1.5rem 1.75rem;
border-top: 1px solid var(--linha-escura);
color: rgba(255, 255, 255, .52);
font-size: .75rem;
}
.site-footer__legal a { min-height: 2.75rem; flex: none; font-size: .75rem; }
@media (min-width: 700px) {
.section-heading--split {
display: flex;
align-items: end;
justify-content: space-between;
gap: 2rem;
}
.section-heading--split .section-heading__intro { max-width: 38ch; margin-top: 0; }
.home-about__grid { grid-template-columns: minmax(0, 1fr) minmax(20rem, .82fr); }
.service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__directory { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-footer__section {
min-height: 100%;
padding: 0 clamp(1.25rem, 3vw, 2.25rem);
border-top: 0;
border-left: 1px solid var(--linha-escura);
}
.site-footer__section:last-child { padding-right: 0; }
.site-footer__directory--enhanced .site-footer__summary {
cursor: default;
pointer-events: none;
}
}
@media (min-width: 920px) {
.home-contact__grid,
.contact-grid { grid-template-columns: minmax(0, 1.45fr) minmax(19rem, .8fr); }
.preparation-block {
grid-template-columns: repeat(2, minmax(0, 1fr));
min-height: var(--preparation-block-height);
}
.preparation-block > .preparation-media,
.preparation-block > .preparation-copy {
min-height: var(--preparation-block-height);
}
.home-construction-sequence > .preparation-block:nth-child(odd) > .preparation-media,
.home-construction-sequence > .preparation-block:nth-child(even) > .preparation-copy {
grid-column: 1;
grid-row: 1;
}
.home-construction-sequence > .preparation-block:nth-child(odd) > .preparation-copy,
.home-construction-sequence > .preparation-block:nth-child(even) > .preparation-media {
grid-column: 2;
grid-row: 1;
}
.home-construction-sequence > .preparation-block:nth-child(odd) > .preparation-media {
margin: 0 -1px 0 0;
}
.home-construction-sequence > .preparation-block:nth-child(even) > .preparation-media {
margin: 0 0 0 -1px;
}
}
@media (min-width: 1040px) {
.home-schedule__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-hero__image {
object-position: center 5%;
transform: scale(1.5);
transform-origin: 52.5% 34%;
}
.site-footer__main { grid-template-columns: minmax(18rem, .8fr) minmax(0, 1.4fr); }
}
@media (min-width: 920px) and (max-width: 1100px) {
.contact-method[href^="mailto:"] .contact-method__primary { font-size: .8rem; }
}
@media (min-width: 920px) and (max-width: 999.98px) {
.home-contact__grid { grid-template-columns: 1fr; }
}
@media (min-width: 700px) and (max-width: 1039.98px) {
.site-footer__section:first-child {
padding-left: 0;
border-left: 0;
}
}
@media (min-width: 700px) {
.schedule-panel--masses .schedule-row {
grid-template-columns: minmax(5rem, 1fr) max-content;
}
.schedule-list--services .schedule-row {
grid-template-columns: 7rem minmax(0, 1fr);
}
.schedule-list--services .schedule-row__times { white-space: nowrap; }
}
@media (max-width: 699.98px) {
.site-header__inner {
min-height: 4.25rem;
justify-content: center;
padding: .625rem 1rem;
}
.site-nav { width: fit-content; max-width: 100%; justify-content: center; overflow: visible; }
.site-nav a {
min-width: 0;
min-height: 2.75rem;
flex: 0 1 auto;
padding-inline: clamp(.5rem, 2.5vw, .75rem);
font-size: clamp(.75rem, 3.75vw, .8125rem);
}
.home-hero__content { padding-top: 7.75rem; }
.home-hero::before {
background: linear-gradient(180deg, rgba(16, 9, 5, .30), rgba(16, 9, 5, .41) 58%, rgba(16, 9, 5, .58));
}
.home-hero__image {
object-position: 50.5% 48%;
transform: scale(1.07);
transform-origin: center 48%;
}
.home-hero .titulo-display {
width: 100%;
max-width: 100%;
font-size: clamp(1.5rem, 9vw, 2.85rem);
}
.home-hero .titulo-display__line { display: block; white-space: nowrap; }
.home-hero .texto-destaque { text-wrap: pretty; }
.home-about__copy,
.home-schedule > .site-container > .section-heading,
.home-contact > .site-container > .section-heading,
.home-contact__card,
.site-footer__brand {
text-align: center;
}
.home-about__copy > .pretitulo,
.home-schedule > .site-container > .section-heading > div > .pretitulo,
.home-contact > .site-container > .section-heading > .pretitulo,
.home-contact__card > .pretitulo {
max-width: 100%;
justify-content: center;
margin-inline: auto;
text-align: center;
}
.home-schedule > .site-container > .section-heading > div > .pretitulo {
flex-direction: column;
gap: .2rem;
}
.home-about__copy > .titulo-secao,
.home-schedule > .site-container > .section-heading > div > .titulo-secao,
.home-contact > .site-container > .section-heading > .titulo-secao,
.home-contact__card > .home-contact__title {
margin-inline: auto;
text-wrap: balance;
}
.home-about__copy > .prosa,
.home-schedule > .site-container > .section-heading > .section-heading__intro,
.home-contact__card > .home-contact__intro,
.site-footer__text {
max-width: 42ch;
margin-inline: auto;
text-wrap: pretty;
}
.home-about__figure figcaption {
text-align: center;
text-wrap: pretty;
}
.contact-method,
.contact-whatsapp,
.contact-method__copy { text-align: left; }
.home-preparation .preparation-copy,
.home-preparation .preparation-copy > .pretitulo,
.home-preparation .preparation-copy > .titulo-secao,
.home-preparation .preparation-copy > .prosa {
margin-inline: 0;
text-align: left;
}
.home-preparation .preparation-copy > .pretitulo { justify-content: flex-start; }
.schedule-row { grid-template-columns: 1fr; gap: .35rem; }
.schedule-row__times { text-align: left; }
.home-schedule .schedule-row__times { font-size: clamp(.875rem, 4.7vw, 1.0625rem); }
.schedule-utility { align-items: stretch; flex-direction: column; }
.schedule-utility .site-button { width: 100%; }
.home-schedule .schedule-location-cta { display: none; }
.preparation-block { min-height: 0; }
.preparation-media { min-height: 22rem; }
.preparation-copy {
min-height: 0;
padding: clamp(2rem, 8vw, 2.75rem);
}
.construction-preview { grid-template-columns: repeat(3, minmax(10rem, 1fr)); margin-inline: -8rem; }
.construction-message { width: calc(100% - 1.5rem); padding: 1.5rem; }
.home-contact__map,
.map-frame { min-height: 20rem; }
.site-footer__inner { padding-top: 2.5rem; }
.site-footer__main { gap: 1.75rem; padding-bottom: 2rem; }
.site-footer__brand { max-width: none; }
.site-footer__text { margin-top: .9rem; line-height: 1.6; }
.site-footer__social { justify-content: center; margin-top: 1.4rem; padding-top: .9rem; }
.site-footer__directory { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
.site-footer__section { padding-block: 0; }
.site-footer__section:nth-child(2) {
padding-left: 0;
border-left: 0;
}
.site-footer__summary {
display: flex;
width: 100%;
min-height: 3.5rem;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.site-footer__summary::after {
content: "";
width: .55rem;
height: .55rem;
flex: none;
margin-right: .2rem;
border-right: 1.5px solid var(--pessego-300);
border-bottom: 1.5px solid var(--pessego-300);
transform: translateY(-.12rem) rotate(45deg);
transition: transform var(--transicao);
}
.site-footer__disclosure[open] > .site-footer__summary::after {
transform: translateY(.12rem) rotate(225deg);
}
.site-footer__summary:focus-visible {
outline: 2px solid var(--pessego-300);
outline-offset: 3px;
}
.site-footer__panel { padding: .5rem 0 1.2rem; }
.site-footer__section:last-child { grid-column: auto; padding-bottom: 0; }
.site-footer__section:last-child .site-footer__links {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.site-footer__section:last-child .site-footer__links li + li {
border-top: 1px solid var(--linha-escura);
}
.site-footer__section:last-child .site-footer__link { min-height: 2.75rem; }
.site-footer__legal {
align-items: flex-start;
flex-direction: column;
gap: .5rem;
padding-block: 1.25rem 1.5rem;
line-height: 1.5;
}
.site-footer__legal a { min-height: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.skip-link { transition: none; }
.site-button,
.botao-madeira,
.botao-cal,
.botao-contorno,
.botao-vidro,
.info-card__action,
.contact-whatsapp,
.site-footer__summary::after,
.site-button::after,
.botao-madeira::after,
.botao-cal::after,
.botao-contorno::after,
.botao-vidro::after {
transition: none;
}
.site-button:hover,
.site-button:active,
.botao-madeira:hover,
.botao-madeira:active,
.botao-cal:hover,
.botao-cal:active,
.botao-contorno:hover,
.botao-contorno:active,
.botao-vidro:hover,
.botao-vidro:active,
.info-card__action:hover,
.info-card__action:active,
.contact-whatsapp:hover,
.contact-whatsapp:active {
transform: none;
}
}