/* Cáritas Diocesana de Colatina. Tokens: DESIGN.md (vermelho da cruz como único acento, vinho, papel quente). */
@font-face { font-family: Ranade; src: url(/assets/fonts/ranade-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Ranade; src: url(/assets/fonts/ranade-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Author; src: url(/assets/fonts/author-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Author; src: url(/assets/fonts/author-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --vermelho: oklch(0.55 0.21 25);
  --vermelho-forte: oklch(0.48 0.2 25);
  --vermelho-claro: oklch(0.93 0.04 25);
  --vinho: oklch(0.24 0.06 22);
  --vinho-2: oklch(0.31 0.07 22);
  --papel: oklch(0.975 0.008 60);
  --barro: oklch(0.935 0.018 55);
  --tinta: oklch(0.22 0.025 25);
  --tinta-2: oklch(0.42 0.02 30);
  --linha: oklch(0.86 0.02 40);
  --branco: #fff;
  --f-tit: Ranade, 'Avenir Next', 'Segoe UI', sans-serif;
  --f-txt: Author, 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --gut: clamp(16px, 4.5vw, 64px);
  --max: 1240px;
  --raio: 14px;
  --e-sai: cubic-bezier(0.16, 1, 0.3, 1);
  --t1: clamp(2.5rem, 1.3rem + 4.4vw, 5.4rem);
  --t2: clamp(2rem, 1.3rem + 2.8vw, 3.6rem);
  --t3: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 1.0625rem/1.65 var(--f-txt); overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-tit); font-weight: 700; line-height: 1.04; letter-spacing: -0.015em; margin: 0 0 0.5em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 3px; border-radius: 4px; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 99; background: var(--vinho); color: #fff; padding: 10px 14px; border-radius: 8px; }
.pular:focus { top: 12px; }
.sutil { color: var(--tinta-2); font-size: 0.92em; }
.rot { font: 500 1.05rem/1.2 var(--f-tit); color: var(--vermelho-forte); margin-bottom: 0.7em; }
.simbolo { width: 100%; height: auto; color: var(--vermelho); }
.seta { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.2em; transition: transform .3s var(--e-sai); }
a:hover .seta { transform: translateX(4px); }
.btn { display: inline-flex; align-items: center; gap: 0.6em; min-height: 48px; padding: 0.8em 1.4em; border-radius: 999px; font: 600 1rem/1 var(--f-txt); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .25s var(--e-sai), background .25s, color .25s; }
.btn:active { transform: scale(0.97); }
.btn-branco { background: #fff; color: var(--vermelho-forte); }
.btn-branco:hover { background: var(--vermelho-claro); }
.btn-linha { border-color: rgba(255,255,255,.7); color: #fff; }
.btn-linha:hover { background: rgba(255,255,255,.12); }
.btn-vermelho { background: var(--vermelho); color: #fff; }
.btn-vermelho:hover { background: var(--vermelho-forte); }
.link-seta { display: inline-flex; gap: 0.5em; align-items: center; font-weight: 600; color: var(--vermelho-forte); text-decoration: none; }
.link-seta:hover { text-decoration: underline; }

/* ---------- aviso + topo: o braço horizontal da cruz ---------- */
.aviso { margin: 0; background: var(--vinho); color: #fff; text-align: center; font-size: 0.92rem; padding: 0.55em var(--gut); }
.aviso a { text-decoration: none; }
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; padding: 16px var(--gut) 0; pointer-events: none; }
.topo-braco { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 18px; max-width: var(--max); margin: 0 auto; height: 58px; padding: 0 8px 0 104px; background: var(--vermelho); color: #fff; border-radius: 34px / 50%; box-shadow: 0 10px 30px -18px oklch(0.3 0.15 25 / .8); transition: height .35s var(--e-sai), box-shadow .35s; }
.topo-marca { position: absolute; left: 14px; top: 50%; display: flex; align-items: center; gap: 12px; text-decoration: none; transform: translateY(-50%); }
.topo-cruz { width: 74px; color: #fff; background: var(--vermelho); border-radius: 50%; padding: 6px; box-shadow: 0 0 0 5px var(--papel); transition: width .35s var(--e-sai); }
.topo-nome { display: none; line-height: 1.05; }
.topo-nome b { display: block; font: 700 1.3rem/1 var(--f-tit); }
.topo-nome small { font-size: 0.8rem; opacity: .9; }
.topo-nav { display: none; gap: 4px; margin-left: auto; }
.topo-nav a { padding: 10px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .98rem; transition: background .2s; }
.topo-nav a:hover, .topo-nav a[aria-current] { background: rgba(255,255,255,.16); }
.topo-doar { margin-left: auto; background: #fff; color: var(--vermelho-forte); font-weight: 700; text-decoration: none; padding: 11px 20px; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; }
.topo-doar:hover { background: var(--vermelho-claro); }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: none; border: 0; color: #fff; font: 600 .98rem var(--f-txt); cursor: pointer; }
.menu-ico { display: grid; gap: 5px; width: 20px; }
.menu-ico i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--e-sai); }
.menu-btn[aria-expanded="true"] .menu-ico i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-ico i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.topo.solido .topo-braco { height: 50px; box-shadow: 0 14px 40px -20px oklch(0.3 0.15 25 / .9); }
.topo.solido .topo-cruz { width: 66px; }
@media (min-width: 720px) { .topo-nome { display: block; margin-left: 92px; } .topo-braco { padding-left: 270px; } .topo-marca { left: 10px; } }
@media (min-width: 1100px) { .topo-nav { display: flex; } .topo-doar { margin-left: 8px; } .menu-btn .menu-txt { display: none; } }
.painel { position: fixed; inset: 0; z-index: 35; background: var(--vinho); color: #fff; padding: 110px var(--gut) 40px; overflow-y: auto; }
.painel-cruz { position: absolute; right: -12vw; bottom: -14vw; width: 60vw; max-width: 640px; color: var(--vinho-2); pointer-events: none; }
.painel-nav { position: relative; display: grid; gap: 28px; max-width: var(--max); margin: 0 auto; }
@media (min-width: 800px) { .painel-nav { grid-template-columns: repeat(3, 1fr); } }
.painel-rot { font: 500 1.05rem var(--f-tit); color: oklch(0.8 0.08 25); }
.painel ul { list-style: none; margin: 0; padding: 0; }
.painel a { display: block; padding: 8px 0; font: 700 clamp(1.3rem, 1rem + 1.2vw, 1.9rem)/1.15 var(--f-tit); text-decoration: none; }
.painel a:hover { color: oklch(0.85 0.09 25); }
body.menu-aberto { overflow: hidden; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; margin-top: -70px; display: grid; align-items: end; color: #fff; overflow: hidden; isolation: isolate; background: var(--vinho); }
.hero-midia { position: absolute; inset: -6% 0 0; z-index: -3; }
.hero-midia img, .hero-video { width: 100%; height: 100%; object-fit: cover; }
.hero-video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.hero-video.ok { opacity: 1; }
.hero-veu { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, oklch(0.24 0.06 22 / .55) 0%, oklch(0.24 0.06 22 / .1) 30%, oklch(0.4 0.16 25 / .55) 62%, oklch(0.32 0.12 24 / .94) 100%); }
.hero-cruz { position: absolute; z-index: -1; right: -8vw; top: 16vh; width: min(62vw, 680px); opacity: .2; }
.hero-cruz .simbolo { color: #fff; }
.hero-txt { width: 100%; max-width: var(--max); margin: 0 auto; padding: 140px var(--gut) clamp(72px, 12vh, 130px); }
.hero-pre { font: 500 1.15rem/1.3 var(--f-tit); opacity: .95; }
.hero-titulo { font-size: var(--t1); max-width: 15ch; margin-bottom: .35em; }
.hero-titulo .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-titulo .ln > span { display: inline-block; }
.hero-lead { max-width: 56ch; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); opacity: .96; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em; }
.hero-rolar { position: absolute; right: var(--gut); bottom: 28px; display: none; align-items: center; gap: 10px; font-size: .9rem; opacity: .8; }
.hero-rolar span { width: 1px; height: 46px; background: linear-gradient(#fff, transparent); animation: desce 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes desce { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@media (min-width: 900px) { .hero-rolar { display: flex; } }

/* ---------- números ---------- */
.numeros { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 10vw, 130px) var(--gut); display: grid; gap: 40px; }
.numeros-cab h2 { font-size: var(--t2); max-width: 16ch; }
.numeros-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--linha); }
.num { padding: 22px 18px 22px 0; border-bottom: 1px solid var(--linha); }
.num strong { display: block; font: 700 clamp(2.2rem, 1.5rem + 3vw, 4rem)/1 var(--f-tit); color: var(--vermelho); font-variant-numeric: tabular-nums; }
.num span { display: block; margin-top: 8px; color: var(--tinta-2); max-width: 24ch; }
.num-grande { grid-column: 1 / -1; }
.num-grande strong { font-size: clamp(3.4rem, 2rem + 7vw, 8rem); }
@media (min-width: 900px) {
  .numeros { grid-template-columns: 5fr 7fr; align-items: start; }
  .numeros-cab { position: sticky; top: 120px; }
  .numeros-lista { grid-template-columns: repeat(3, 1fr); }
  .num-grande { grid-column: span 3; }
}

/* ---------- a rede (mapa) ---------- */
.rede { background: var(--vinho); color: #fff; position: relative; }
.rede-palco { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 9vw, 110px) var(--gut) 24px; display: grid; gap: 28px; }
.rede-cab h2 { font-size: var(--t2); max-width: 20ch; }
.rede-cab p { max-width: 60ch; opacity: .9; }
.rede .rot, .numeros .rot { color: oklch(0.72 0.17 25); }
.numeros .rot { color: var(--vermelho-forte); }
.mapa { position: relative; margin: 0; overflow: hidden; }
.mapa-svg { width: 100%; height: auto; overflow: visible; }
.mapa-3d { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity .8s ease; }
.mapa.tem-3d .mapa-3d { opacity: 1; pointer-events: auto; }
.mapa.tem-3d .mapa-svg { opacity: 0; }
.mapa-mar { fill: oklch(0.3 0.06 230 / .55); }
.mapa-costa { fill: none; stroke: oklch(0.7 0.06 220 / .7); stroke-width: 2; stroke-dasharray: 2 6; }
.mapa-rio { fill: none; stroke: oklch(0.78 0.09 225); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.mapa-laco { fill: none; stroke: var(--vermelho); stroke-width: 2.4; stroke-linecap: round; opacity: .85; }
.mapa-rot-rio, .mapa-rot-mar { fill: oklch(0.82 0.06 225); font: italic 600 20px var(--f-txt); letter-spacing: .06em; }
.mapa-ponto { cursor: pointer; }
.mapa-luz { fill: var(--vermelho); stroke: #fff; stroke-width: 3; transition: transform .3s var(--e-sai); transform-box: fill-box; transform-origin: center; }
.mapa-onda { fill: var(--vermelho); opacity: .35; transform-box: fill-box; transform-origin: center; animation: onda 2.6s ease-out infinite; }
.mapa-sede .mapa-luz { fill: #fff; stroke: var(--vermelho); stroke-width: 5; }
.mapa-nome { fill: #fff; font: 700 24px var(--f-tit); text-anchor: middle; paint-order: stroke; stroke: var(--vinho); stroke-width: 6px; }
.mapa-n { fill: oklch(0.85 0.06 25); font: 600 16px var(--f-txt); text-anchor: middle; paint-order: stroke; stroke: var(--vinho); stroke-width: 5px; }
.mapa-ponto:hover .mapa-luz, .mapa-ponto.ativo .mapa-luz { transform: scale(1.5); }
.mapa-ponto.ativo .mapa-nome { fill: oklch(0.85 0.12 25); }
@keyframes onda { from { transform: scale(.5); opacity: .55; } to { transform: scale(2.4); opacity: 0; } }
.rede-cidades { list-style: none; margin: 0 auto; padding: 0 var(--gut) clamp(64px, 9vw, 110px); max-width: var(--max); display: grid; gap: 14px; }
.cidade { background: var(--vinho-2); border-radius: var(--raio); padding: 20px 22px; border: 1px solid transparent; transition: border-color .3s, background .3s; }
.cidade.ativo { border-color: var(--vermelho); background: oklch(0.34 0.09 23); }
.cidade h3 { font-size: var(--t3); display: flex; align-items: center; gap: 10px; }
.selo-sede { font: 600 .8rem/1 var(--f-txt); background: var(--vermelho); padding: 6px 10px; border-radius: 999px; }
.cidade ul { list-style: none; margin: 0 0 12px; padding: 0; }
.cidade li { padding: 6px 0; border-bottom: 1px solid oklch(1 0 0 / .1); }
.cidade a { text-decoration: none; }
.cidade a:hover { text-decoration: underline; }
.cidade .link-seta { color: oklch(0.8 0.12 25); }
@media (min-width: 700px) { .rede-cidades { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .rede { display: grid; grid-template-columns: minmax(0, 1fr) 380px; max-width: none; }
  .rede-palco { position: sticky; top: 0; height: 100svh; align-content: center; padding-top: 100px; padding-right: 0; max-width: none; margin: 0; padding-left: max(var(--gut), calc((100vw - var(--max)) / 2)); }
  .rede-cab { max-width: 640px; }
  .rede-cab p { margin-bottom: 0; }
  .rede-cab h2 { font-size: clamp(2rem, 1rem + 2vw, 3rem); }
  .rede-palco .mapa { width: min(100%, calc((100svh - 380px) * 1.54)); }
  .rede-cidades { grid-template-columns: 1fr; padding: 45vh var(--gut) 40vh 24px; gap: 30vh; margin: 0; }
  .rede.js-preso .rede-cidades { padding-right: max(var(--gut), calc((100vw - var(--max)) / 2)); }
}

/* ---------- eixos ---------- */
.eixos { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 10vw, 130px) var(--gut); }
.eixos-t { font-size: var(--t2); margin-bottom: 1.2em; }
.eixo { display: grid; gap: 22px; margin-bottom: clamp(48px, 7vw, 96px); align-items: center; }
.eixo-foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--raio); background: var(--barro); }
.eixo-foto img { width: 100%; height: 118%; object-fit: cover; }
.eixo-foto .simbolo { width: 50%; margin: 18% auto; opacity: .3; }
.eixo h3 { font-size: var(--t2); }
.eixo h3 a { text-decoration: none; }
.eixo h3 a:hover { color: var(--vermelho-forte); }
.eixo-uni { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--linha); }
.eixo-uni li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.eixo-uni a { font-weight: 600; text-decoration: none; }
.eixo-uni a:hover { color: var(--vermelho-forte); }
.eixo-uni span { color: var(--tinta-2); white-space: nowrap; }
@media (min-width: 900px) {
  .eixo { grid-template-columns: 6fr 5fr; gap: 64px; }
  .eixo-1 .eixo-foto { order: 2; }
  .eixo-1 { grid-template-columns: 5fr 6fr; }
  .eixo-2 .eixo-foto { aspect-ratio: 16 / 9; }
}

/* ---------- interlúdio do rio ---------- */
.rio { position: relative; min-height: 88svh; overflow: hidden; display: grid; align-items: end; color: #fff; isolation: isolate; background: var(--vinho); }
.rio-foto { position: absolute; inset: -18% 0; z-index: -2; }
.rio-foto img { width: 100%; height: 100%; object-fit: cover; }
.rio::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, oklch(0.24 0.06 22 / .1) 30%, oklch(0.24 0.06 22 / .85) 100%); }
.rio-frase { margin: 0 auto; max-width: var(--max); width: 100%; padding: 0 var(--gut) clamp(56px, 9vw, 110px); }
.rio-frase p { font: 700 var(--t2)/1.08 var(--f-tit); max-width: 22ch; margin-bottom: .5em; }
.rio-frase footer { opacity: .9; }

/* ---------- notícias ---------- */
.noticias { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 10vw, 130px) var(--gut); }
.noticias-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; margin-bottom: 32px; }
.noticias-cab h2 { font-size: var(--t2); margin: 0; max-width: 16ch; }
.nota-destaque { display: grid; gap: 22px; margin-bottom: 40px; }
.nota-foto { display: block; overflow: hidden; border-radius: var(--raio); aspect-ratio: 16 / 10; background: var(--barro); }
.nota-foto img { width: 100%; height: 112%; object-fit: cover; }
.nota-foto .simbolo { width: 40%; margin: 15% auto; opacity: .25; }
.nota-txt time, .notas time, .lt-txt time { font-size: .85rem; color: var(--vermelho-forte); font-weight: 600; }
.nota-txt h3 { font-size: var(--t3); margin-top: .4em; }
.nota-txt h3 a { text-decoration: none; }
.nota-txt h3 a:hover { text-decoration: underline; }
.notas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 18px; }
.notas a { display: grid; gap: 8px; text-decoration: none; }
.notas-foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--barro); }
.notas-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--e-sai); }
.notas-foto .simbolo { width: 40%; margin: 22% auto; opacity: .25; }
.notas a:hover img { transform: scale(1.05); }
.notas strong { font: 700 1.08rem/1.25 var(--f-tit); }
@media (min-width: 900px) { .nota-destaque { grid-template-columns: 7fr 5fr; align-items: center; gap: 48px; } .notas { grid-template-columns: repeat(4, 1fr); } }

/* ---------- como ajudar ---------- */
.ajuda { position: relative; overflow: hidden; background: var(--vermelho); color: #fff; padding: clamp(72px, 11vw, 150px) var(--gut); isolation: isolate; }
.ajuda-cruz { position: absolute; z-index: -1; left: 50%; top: 50%; width: min(120vw, 1100px); transform: translate(-50%, -50%); opacity: .14; }
.ajuda-cruz .simbolo { color: #fff; }
.ajuda-txt { max-width: var(--max); margin: 0 auto; }
.ajuda .rot { color: #fff; opacity: .9; }
.ajuda h2 { font-size: var(--t2); max-width: 18ch; }
.ajuda-txt > p { max-width: 58ch; font-size: 1.12rem; }
.ajuda-modos { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 14px; }
.ajuda-modos a { display: grid; gap: 6px; padding: 22px 24px; border-radius: var(--raio); background: oklch(1 0 0 / .1); text-decoration: none; transition: background .3s, transform .3s var(--e-sai); height: 100%; }
.ajuda-modos a:hover { background: oklch(1 0 0 / .2); transform: translateY(-3px); }
.ajuda-modos strong { font: 700 1.35rem/1.15 var(--f-tit); }
.ajuda-modos span { opacity: .92; }
@media (min-width: 900px) { .ajuda-modos { grid-template-columns: 1.3fr 1fr 1fr; } }

/* ---------- rodapé ---------- */
.rodape { background: var(--vinho); color: oklch(0.92 0.02 30); padding: 64px var(--gut) 28px; display: grid; gap: 32px; }
.rodape > * { max-width: var(--max); }
.rodape-marca .simbolo { width: 72px; margin-bottom: 16px; }
.rodape-rot { font: 500 1.05rem var(--f-tit); color: oklch(0.75 0.15 25); }
.rodape a { text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape-redes { display: flex; gap: 16px; }
.rodape-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 22px; border-top: 1px solid oklch(1 0 0 / .12); font-size: .9rem; margin: 0; }
.rodape-base a:last-child { margin-left: auto; }
.rodape .sutil { color: oklch(0.8 0.02 30); }
@media (min-width: 900px) { .rodape { grid-template-columns: 1.4fr 1fr 1fr 1fr; padding-left: max(var(--gut), calc((100vw - var(--max)) / 2)); padding-right: max(var(--gut), calc((100vw - var(--max)) / 2)); } }

/* ---------- páginas internas ---------- */
.capa { position: relative; margin-top: -70px; padding: 150px var(--gut) clamp(48px, 7vw, 90px); background: var(--barro); overflow: hidden; isolation: isolate; }
.capa-cruz { position: absolute; z-index: -1; right: -8vw; top: 40px; width: min(52vw, 520px); opacity: .12; }
.capa-txt { max-width: var(--max); margin: 0 auto; }
.capa-titulo { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.6rem); max-width: 18ch; margin: .3em 0 .3em; }
.capa-sub { max-width: 62ch; font-size: 1.12rem; color: var(--tinta-2); }
.capa-foto { color: #fff; min-height: 62svh; display: grid; align-items: end; background: var(--vinho); }
.capa-foto .capa-sub, .capa-foto .trilha { color: #fff; }
.capa-midia { position: absolute; inset: -10% 0 0; z-index: -2; }
.capa-midia img { width: 100%; height: 100%; object-fit: cover; }
.capa-veu { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, oklch(0.24 0.06 22 / .5), oklch(0.32 0.12 24 / .92)); }
.trilha { display: flex; flex-wrap: wrap; gap: 6px; font-size: .9rem; color: var(--tinta-2); }
.trilha a { text-decoration: none; }
.trilha a::after { content: "/"; margin-left: 6px; opacity: .6; }
.miolo { max-width: 780px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--gut); }
.miolo-largo { max-width: var(--max); }
.abre { font-size: 1.25rem; max-width: 62ch; }
.prosa { font-size: 1.1rem; }
.prosa h2 { font-size: var(--t3); margin-top: 1.6em; }
.prosa h3 { font-size: 1.25rem; margin-top: 1.4em; }
.prosa img { border-radius: 10px; margin: 1.2em 0; }
.prosa ul, .prosa ol { padding-left: 1.2em; }
.prosa li { margin: .3em 0; }
.prosa a { color: var(--vermelho-forte); }
.prosa blockquote { margin: 1.5em 0; padding-left: 1em; border-left: 3px solid var(--vermelho); font-family: var(--f-tit); font-size: 1.3rem; }
.prosa table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.prosa td, .prosa th { border-bottom: 1px solid var(--linha); padding: 8px; text-align: left; }
.post-foto { margin: 0 0 28px; }
.post-foto img { border-radius: var(--raio); width: 100%; }
.galeria-grade { list-style: none; margin: 32px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.galeria-grade img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; width: 100%; }
.relacionadas { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--linha); }
.relacionadas ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.relacionadas a { display: inline-block; padding: 9px 16px; border: 1px solid var(--linha); border-radius: 999px; text-decoration: none; }
.relacionadas a:hover { border-color: var(--vermelho); color: var(--vermelho-forte); }
.vizinhos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.vizinhos a { display: grid; gap: 4px; padding: 16px; border-radius: 12px; background: var(--barro); text-decoration: none; font-weight: 600; }
.viz-prox { text-align: right; }
.portas { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 800px) { .portas { grid-template-columns: repeat(3, 1fr); } .portas .porta:first-child { grid-column: span 2; } }
.porta a { position: relative; display: grid; gap: 8px; padding: 28px; min-height: 220px; align-content: end; border-radius: var(--raio); background: var(--vinho); color: #fff; text-decoration: none; overflow: hidden; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s var(--e-sai); }
.porta-cruz { position: absolute; right: -40px; top: -40px; width: 180px; opacity: .25; transition: transform .8s var(--e-sai); }
.porta a:hover .porta-cruz { transform: rotate(45deg); }
.porta strong { font: 700 1.6rem/1.1 var(--f-tit); }
.filtro { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filtro a { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--linha); text-decoration: none; font-weight: 600; }
.filtro a[aria-current] { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }
.miolo .mapa { background: var(--vinho); border-radius: var(--raio); padding: 12px; margin: 0 0 40px; }
.unidades { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
@media (min-width: 700px) { .unidades { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .unidades { grid-template-columns: repeat(3, 1fr); } }
.uni a { display: grid; gap: 6px; text-decoration: none; }
.uni-foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--raio); background: var(--barro); margin-bottom: 6px; }
.uni-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--e-sai); }
.uni-foto .simbolo { width: 40%; margin: 22% auto; opacity: .25; }
.uni a:hover img { transform: scale(1.05); }
.uni-mun { font-size: .85rem; font-weight: 600; color: var(--vermelho-forte); }
.uni strong { font: 700 1.3rem/1.15 var(--f-tit); }
.uni-txt { color: var(--tinta-2); font-size: .98rem; }
.uni.apagada { opacity: .35; }
.miolo-uni { max-width: var(--max); display: grid; gap: 32px; }
@media (min-width: 950px) { .miolo-uni { grid-template-columns: 320px minmax(0, 1fr); align-items: start; } .miolo-uni .ficha { position: sticky; top: 100px; } .miolo-uni > .galeria, .miolo-uni > .relacionadas { grid-column: 2; } }
.ficha { display: grid; gap: 18px; padding: 24px; border-radius: var(--raio); background: var(--barro); margin: 0; }
.ficha .rot { margin-bottom: .4em; }
.ficha p { margin: 0; }
.ficha dt { font: 500 1.05rem/1.2 var(--f-tit); color: var(--vermelho-forte); margin-bottom: 4px; }
.ficha dd { margin: 0; }
.ficha-doar { padding-top: 16px; border-top: 1px solid var(--linha); display: grid; gap: 8px; }
.conta { font: 700 1.15rem/1.35 var(--f-tit); }
.copiar.feito { background: var(--vinho); }
.fichas { list-style: none; margin: 40px 0; padding: 0; display: grid; gap: 22px; }
.ficha-doacao { display: grid; gap: 18px; padding: 22px; border-radius: var(--raio); background: #fff; border: 1px solid var(--linha); scroll-margin-top: 110px; transition: border-color .4s, box-shadow .4s; }
.ficha-doacao.ativo { border-color: var(--vermelho); box-shadow: 0 0 0 3px var(--vermelho-claro); }
.ficha-doacao img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.ficha-doacao h2 { font-size: 1.45rem; }
@media (min-width: 900px) { .fichas { grid-template-columns: repeat(2, 1fr); } .ficha-doacao:has(img) { grid-template-columns: 200px 1fr; } }
.pix { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 22px; background: var(--vermelho-claro); border-radius: var(--raio); }
.prosa-extra { max-width: 780px; }
.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.lt-mes { font: 700 1.35rem var(--f-tit); color: var(--vermelho-forte); padding-top: 22px; border-top: 1px solid var(--linha); }
.lt-nota a { display: grid; grid-template-columns: 1fr; gap: 14px; text-decoration: none; padding: 6px 0; }
.lt-foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--barro); }
.lt-foto img { width: 100%; height: 100%; object-fit: cover; }
.lt-txt { display: grid; gap: 4px; align-content: center; }
.lt-txt strong { font: 700 1.2rem/1.2 var(--f-tit); }
.lt-txt > span { color: var(--tinta-2); font-size: .98rem; }
.lt-nota a:hover strong { color: var(--vermelho-forte); }
.lt-sem-foto a { border-left: 3px solid var(--vermelho-claro); padding-left: 16px; }
@media (min-width: 700px) { .lt-nota a { grid-template-columns: 220px 1fr; } .lt-sem-foto a { grid-template-columns: 1fr; margin-left: 234px; } }
.paginas { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 48px; }
.paginas a { padding: 12px 20px; border-radius: 999px; background: var(--vermelho); color: #fff; text-decoration: none; font-weight: 600; }
.contato { display: grid; gap: 40px; }
@media (min-width: 900px) { .contato { grid-template-columns: 360px 1fr; align-items: start; } }
.contato-unidades ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.contato-unidades li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.contato-unidades a { text-decoration: none; }
.contato-unidades strong { font: 700 1.15rem var(--f-tit); }
.luz { position: fixed; inset: 0; z-index: 60; background: oklch(0.15 0.03 22 / .95); display: grid; place-items: center; padding: 60px 16px; }
.luz img { max-height: 84vh; width: auto; border-radius: 8px; }
.luz button { position: absolute; background: none; border: 0; color: #fff; font: 600 1rem var(--f-txt); padding: 14px; cursor: pointer; min-width: 44px; min-height: 44px; }
.luz-fecha { top: 10px; right: 10px; } .luz-ant { left: 4px; top: 50%; font-size: 2rem !important; } .luz-prox { right: 4px; top: 50%; font-size: 2rem !important; }

/* estado inicial das entradas só com JS e movimento */
.js [data-rev] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .js [data-rev] { opacity: 1; }
  .hero-video { display: none; }
}