/* Banner "pedacinho do céu" da Santinhoz (plugin 1.1.1): janelinhas numa roleta lenta,
   céu e frase acompanham a janelinha do centro. */
@property --c1 { syntax: '<color>'; inherits: true; initial-value: #8FD0FF; }
@property --c2 { syntax: '<color>'; inherits: true; initial-value: #E8F6FF; }
.szb { --azul: #1786E8; --azul-esc: #123E7C; --amarelo: #FFC72C; --rosa: #FF7EA8; --menta: #4FCFAA; --c1: #8FD0FF; --c2: #E8F6FF;
	position: relative; isolation: isolate; overflow: hidden; text-align: center; font-family: Poppins, system-ui, sans-serif; color: var(--azul-esc);
	width: calc(100vw - var(--szb-sbw, 0px)); margin-left: calc(50% - 50vw + var(--szb-sbw, 0px) / 2); box-sizing: border-box; padding: clamp(26px, 3vw, 38px) 0 clamp(64px, 6vw, 84px);
	background: radial-gradient(70% 60% at 50% 72%, rgba(255, 236, 160, .4) 0%, rgba(255, 236, 160, 0) 70%), linear-gradient(180deg, var(--c1) 0%, color-mix(in srgb, var(--c1) 45%, var(--c2)) 55%, var(--c2) 100%);
	transition: --c1 1.4s ease, --c2 1.4s ease; }
.szb-in { max-width: 1240px; margin: 0 auto; }
.szb::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -1px; height: clamp(56px, 6vw, 86px); z-index: 1; pointer-events: none;
	background: radial-gradient(60px 46px at 4% 100%, #fff 98%, transparent 100%), radial-gradient(90px 64px at 14% 100%, #fff 98%, transparent 100%), radial-gradient(70px 52px at 25% 100%, #fff 98%, transparent 100%),
		radial-gradient(110px 70px at 38% 100%, #fff 98%, transparent 100%), radial-gradient(80px 56px at 51% 100%, #fff 98%, transparent 100%), radial-gradient(120px 74px at 64% 100%, #fff 98%, transparent 100%),
		radial-gradient(76px 54px at 77% 100%, #fff 98%, transparent 100%), radial-gradient(100px 66px at 89% 100%, #fff 98%, transparent 100%), radial-gradient(64px 48px at 99% 100%, #fff 98%, transparent 100%);
	background-repeat: no-repeat; }
/* textura bem suave: estrelinhas, cruzinhas, corações e nuvenzinhas */
.szb-estrelas { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .26;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E %3Cg fill='%23fff'%3E %3Cpath d='M22 12l2.6 5.6 6.1.7-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6-4.5-4.2 6.1-.7z' opacity='.85'/%3E %3Cpath d='M104 74l1.8 3.9 4.3.5-3.2 2.9.9 4.2-3.8-2.1-3.8 2.1.9-4.2-3.2-2.9 4.3-.5z' opacity='.7'/%3E %3Crect x='81' y='14' width='3.2' height='15' rx='1.2' opacity='.6'/%3E%3Crect x='76.6' y='18.6' width='12' height='3.2' rx='1.2' opacity='.6'/%3E %3Crect x='30' y='96' width='2.6' height='12' rx='1' opacity='.5'/%3E%3Crect x='26.4' y='99.6' width='9.8' height='2.6' rx='1' opacity='.5'/%3E %3Cpath d='M58 60c-3.4-3.8-9-1.4-9 3 0 4 5.2 7 9 10 3.8-3 9-6 9-10 0-4.4-5.6-6.8-9-3z' opacity='.45'/%3E %3Cpath d='M98 118a5 5 0 0 1 4.6-3.2 6.4 6.4 0 0 1 12 1.6 4.2 4.2 0 0 1 .4 8.4H99a3.6 3.6 0 0 1-1-6.8z' opacity='.55'/%3E %3Ccircle cx='118' cy='30' r='1.8' opacity='.8'/%3E%3Ccircle cx='8' cy='70' r='1.4' opacity='.7'/%3E%3Ccircle cx='70' cy='122' r='1.6' opacity='.6'/%3E%3Ccircle cx='46' cy='38' r='1.1' opacity='.8'/%3E%3Ccircle cx='122' cy='100' r='1.1' opacity='.7'/%3E %3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .24 0 0 0 0 .49 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url%28%23n%29'/%3E%3C/svg%3E"); background-size: 190px 190px, 180px 180px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%); transition: opacity 1.4s ease; }
.szb-head { padding: 0 20px; }
.szb .szb-titulo { font-family: Poppins, system-ui, sans-serif; font-weight: 800; font-size: clamp(24px, 3.1vw, 40px); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 8px; color: var(--azul-esc); transition: color .9s ease; }
.szb-sub { font-size: 15px; line-height: 1.55; color: #2C5A93; font-weight: 500; max-width: 60ch; margin: 0 auto; text-wrap: balance; transition: color .9s ease; }

.szb-altar { position: relative; container-type: inline-size; max-width: 1240px; margin: 4px auto 0; }
.szb-arco { position: absolute; left: 1cqw; right: 1cqw; top: 4.2cqw; height: 10.5cqw; pointer-events: none; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	border-top: .5cqw solid #FF8FB1; box-shadow: inset 0 .5cqw 0 0 #FFC72C, inset 0 1cqw 0 0 #7EE0B8, inset 0 1.5cqw 0 0 #7CC4FF, inset 0 2cqw 0 0 #B9A2FF;
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); opacity: .72; }
/* o sol do arco-íris é o Jesus da marca (arte de 2026, já com o círculo dourado) com um brilho em volta */
.szb-sol { position: absolute; left: 50%; top: 0; width: 8.4cqw; height: 8.4cqw; max-width: 104px; max-height: 104px; transform: translateX(-50%); z-index: 2;
	background: radial-gradient(circle at 50% 50%, rgba(255, 236, 160, .7) 0 38%, rgba(255, 217, 102, 0) 70%); filter: drop-shadow(0 0 1cqw rgba(255, 199, 44, .6)); display: grid; place-items: center; }
.szb-sol img { width: 100%; height: 100%; object-fit: contain; }

/* a roleta: as janelinhas ficam soltas e o script põe cada uma no lugar */
.szb-track { --lab: 50px; --w0: min(17.5cqw, 222px); --gap: min(1.4cqw, 18px); position: relative; margin-top: 7.6cqw; height: calc(var(--w0) * 1.22 + var(--lab) + 12px); touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: grab; }
.szb-track.is-drag { cursor: grabbing; }
.szb-nicho { --cor: var(--azul); position: absolute; left: 50%; bottom: 0; width: var(--w0, 200px); display: flex; flex-direction: column; align-items: center;
	transform-origin: 50% calc(100% - var(--lab, 50px)); will-change: transform, opacity; text-decoration: none !important; color: inherit !important; -webkit-tap-highlight-color: transparent; -webkit-user-drag: none; }
.szb-nicho img { -webkit-user-drag: none; pointer-events: none; }
.szb-janela { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.22; border-radius: 999px 999px 18px 18px; background: #fff;
	box-shadow: 0 0 0 4px #fff, 0 0 0 10px var(--cor), 0 0 0 13px rgba(255, 255, 255, .7), 0 20px 34px rgba(18, 62, 124, .25); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .45s ease; }
.szb-vao { position: absolute; inset: 3px; border-radius: 999px 999px 15px 15px; overflow: hidden; background: #F3F9FF; }
.szb-item { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.szb-item.is-on { opacity: 1; z-index: 1; }
.szb-item img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; display: block; background: #fff; transform: scale(1.05); transition: transform 2.4s cubic-bezier(.2, .7, .2, 1); }
.szb-item.is-on img { transform: none; }
.szb-selo { position: absolute; top: 9%; right: -4%; z-index: 3; font-size: 12px; font-weight: 800; line-height: 1; padding: .55em .8em; border-radius: 999px; color: #fff; background: var(--rosa);
	border: 2px solid #fff; box-shadow: 0 3px 6px rgba(18, 62, 124, .2); transform: rotate(8deg); white-space: nowrap; }
.szb-selo.est { background: #8E7BFF; }
.szb-selo.natal { background: #D63B3B; }
.szb-nome { display: grid; place-items: start center; height: var(--lab); padding-top: 16px; box-sizing: border-box; opacity: var(--lab-op, 1); }
.szb-nome span { display: inline-block; white-space: nowrap; font-weight: 700; font-size: 14px; line-height: 1.2; color: #fff; background: var(--cor); padding: .45em .95em; border-radius: 999px;
	border: 2px solid #fff; box-shadow: 0 3px 8px rgba(18, 62, 124, .2); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.szb-nicho.is-ativa .szb-janela { transform: translateY(-8px); box-shadow: 0 0 0 4px #fff, 0 0 0 10px var(--cor), 0 0 0 18px rgba(255, 255, 255, .55), 0 26px 40px rgba(18, 62, 124, .3); }
.szb-nicho.is-ativa .szb-nome span { transform: scale(1.06); }
.szb-nicho:not(.is-ativa) .szb-janela { filter: saturate(.85); }
.szb-nicho:focus { outline: none; }
.szb-nicho:focus-visible .szb-janela { box-shadow: 0 0 0 4px #fff, 0 0 0 10px var(--cor), 0 0 0 14px var(--azul-esc); }

/* naninha que reza: notinhas e balão só quando ela está no centro */
.szb-notas { position: absolute; right: 6%; top: 18%; width: 30%; height: 60%; pointer-events: none; z-index: 4; transition: opacity .6s ease; }
.szb-notas i { position: absolute; bottom: 0; font-style: normal; font-weight: 700; font-size: 24px; line-height: 1; opacity: 0; color: var(--azul);
	text-shadow: 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff; animation: szb-nota 3.6s ease-out infinite; }
.szb-notas i:nth-child(1) { left: 10%; }
.szb-notas i:nth-child(2) { left: 55%; animation-delay: .7s; color: #F2A900; }
.szb-notas i:nth-child(3) { left: 30%; animation-delay: 1.4s; color: var(--rosa); }
.szb-notas i:nth-child(4) { left: 75%; animation-delay: 2.1s; color: #8E7BFF; }
.szb-notas i:nth-child(5) { left: 45%; animation-delay: 2.8s; color: var(--menta); }
@keyframes szb-nota { 0% { opacity: 0; transform: translate(0, 0) rotate(-8deg) scale(.7); } 15% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 0; transform: translate(26px, -120px) rotate(14deg) scale(1.1); } }
.szb-balao { position: absolute; left: 80%; top: -4%; z-index: 5; display: grid; background: #fff; border-radius: 999px; padding: .5em 1em; box-shadow: 0 6px 14px rgba(18, 62, 124, .18);
	font-size: 14px; font-weight: 800; color: var(--azul-esc); white-space: nowrap; transition: opacity .6s ease; }
.szb-balao::after { content: ""; position: absolute; left: 14px; bottom: -7px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
.szb-balao b { grid-area: 1 / 1; opacity: 0; animation: szb-reza 7.5s infinite; }
.szb-balao b::before { content: "\266A  "; color: var(--azul); }
.szb-balao b:nth-child(2) { animation-delay: 2.5s; }
.szb-balao b:nth-child(3) { animation-delay: 5s; }
@keyframes szb-reza { 0%, 3% { opacity: 0; transform: translateY(4px); } 7%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-4px); } }
.szb-nicho:not(.is-ativa) .szb-notas, .szb-nicho:not(.is-ativa) .szb-balao { opacity: 0; }

/* a frase guarda sempre o espaço da mais longa (o script mede), para o banner não mudar de altura */
.szb-reza { position: relative; z-index: 2; margin: 6px auto 0; padding: 0 20px; max-width: 64ch; min-height: 3.2em; font-size: 14px; line-height: 1.6; font-weight: 600; color: #2C5A93; transition: color .9s ease; }
.szb-reza.is-in { animation: szb-msg .6s ease both; }
@keyframes szb-msg { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.szb-pausa { position: absolute; top: 0; right: 16px; z-index: 6; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: rgba(23, 134, 232, .85); color: #fff; cursor: pointer; display: grid; place-items: center; }
.szb-pausa span { width: 10px; height: 12px; box-sizing: border-box; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.szb-pausa[aria-pressed="true"] span { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.szb-pausa:focus-visible { outline: 3px solid var(--azul-esc); outline-offset: 2px; }

.szb-foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 10px; padding: 0 18px; }
.szb-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 13px 24px; font-weight: 700; font-size: 14.5px; text-decoration: none !important; transition: transform .2s; }
.szb-btn:hover { transform: translateY(-2px); }
/* um botão só: o da janelinha do centro (nome, link e cor mudam junto com ela) */
.szb .szb-cta { --btn: #1170C8; min-width: 260px; white-space: nowrap; background: var(--btn) !important; color: #fff !important;
	box-shadow: 0 4px 0 color-mix(in srgb, var(--btn) 68%, #000); transition: transform .2s, background-color .6s ease, box-shadow .6s ease; }
.szb-cta span { display: inline-block; }
.szb-cta.is-in span { animation: szb-msg .5s ease both; }
.szb.is-noite .szb-cta { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55), 0 4px 0 2px color-mix(in srgb, var(--btn) 60%, #000); }
.szb-cta:focus-visible { outline: 3px solid var(--azul-esc); outline-offset: 3px; }
.szb.is-noite .szb-cta:focus-visible { outline-color: #fff; }

/* noite (Estrela no Céu) */
.szb.is-noite .szb-titulo { color: #fff; }
.szb.is-noite .szb-sub, .szb.is-noite .szb-reza { color: #E3E9FF; }
.szb.is-noite .szb-estrelas { opacity: .5; }

/* Natal: neve bem leve (o arco-íris continua) */
.szb-neve { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.szb-neve i { position: absolute; left: 0; right: 0; top: -220px; height: calc(100% + 220px); background-repeat: repeat;
	background-image: radial-gradient(3px 3px at 20px 30px, #fff 60%, transparent 62%), radial-gradient(2px 2px at 90px 120px, #fff 60%, transparent 62%), radial-gradient(3.5px 3.5px at 160px 60px, rgba(255, 255, 255, .9) 60%, transparent 62%), radial-gradient(2.5px 2.5px at 130px 190px, #fff 60%, transparent 62%);
	background-size: 220px 220px; animation: szb-neve 16s linear infinite; will-change: transform; opacity: .7; }
.szb-neve i:nth-child(2) { background-size: 300px 300px; animation-duration: 24s; opacity: .5; background-position: 70px 40px; }
@keyframes szb-neve { from { transform: translateY(0); } to { transform: translateY(220px); } }

/* entrada: o arco-íris se desenha, o sol aparece e a roleta surge */
.szb-arco { animation: szb-arco 1.2s cubic-bezier(.4, 0, .2, 1) .1s both; }
.szb-sol { animation: szb-sol 1s cubic-bezier(.34, 1.56, .64, 1) .5s both; }
@keyframes szb-arco { from { opacity: 0; clip-path: inset(0 50% 0 50%); } to { opacity: .72; clip-path: inset(0 0 0 0); } }
@keyframes szb-sol { from { opacity: 0; transform: translateX(-50%) scale(.4) rotate(-40deg); } to { opacity: 1; transform: translateX(-50%) scale(1) rotate(0); } }

@media (max-width: 900px) {
	.szb { padding: 24px 0 70px; }
	.szb .szb-titulo { font-size: clamp(22px, 6.2vw, 28px); }
	.szb-sub { font-size: 14px; }
	.szb-arco { display: none; }
	.szb-sol { top: 0; width: 15cqw; height: 15cqw; }
	.szb-track { --lab: 46px; margin-top: 16cqw; }
	.szb-janela { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--cor), 0 12px 22px rgba(18, 62, 124, .22); }
	.szb-nicho.is-ativa .szb-janela { transform: none; box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--cor), 0 14px 26px rgba(18, 62, 124, .28); }
	.szb-balao { left: auto; right: 62%; top: 4%; font-size: 12px; }
	.szb-balao::after { left: auto; right: 14px; }
	.szb-notas i { font-size: 20px; }
	.szb-reza { font-size: 12.5px; min-height: 4.8em; }
	.szb-pausa { top: auto; bottom: calc(var(--lab, 46px) + 8px); right: 12px; width: 32px; height: 32px; }
	.szb .szb-cta { min-width: min(280px, 100%); font-size: 14px; padding: 13px 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.szb { transition: none; }
	.szb-arco, .szb-sol, .szb-reza.is-in, .szb-cta.is-in span { animation: none; }
	.szb .szb-cta { transition: none; }
	.szb-notas, .szb-neve { display: none; }
	.szb-balao b { animation: none; } .szb-balao b:first-child { opacity: 1; }
	.szb-item, .szb-item img, .szb-janela { transition: none; }
}

/* Lugar de cada janelinha antes do script rodar (o script depois assume com a mesma conta). */
.szb-nicho[data-p] { --x: 0px; --s: 1; transform: translateX(calc(var(--x) - 50%)) scale(var(--s)); }
.szb-nicho[data-p="1"], .szb-nicho[data-p="-1"] { --x: calc(var(--w0) * .91 + var(--gap)); --s: .82; --lab-op: .7; opacity: .9; z-index: 90; }
.szb-nicho[data-p="2"], .szb-nicho[data-p="-2"] { --x: calc(var(--w0) * 1.67 + var(--gap) * 2); --s: .7; --lab-op: 0; opacity: .9; z-index: 80; }
.szb-nicho[data-p="3"], .szb-nicho[data-p="-3"] { --x: calc(var(--w0) * 2.31 + var(--gap) * 3); --s: .58; --lab-op: 0; opacity: .9; z-index: 70; }
.szb-nicho[data-p="0"] { z-index: 100; }
.szb-nicho[data-p^="-"] { transform: translateX(calc(-1 * var(--x) - 50%)) scale(var(--s)); }
.szb-nicho[data-p="4"], .szb-nicho[data-p="-4"], .szb-nicho[data-p="5"], .szb-nicho[data-p="-5"] { visibility: hidden; opacity: 0; }
@media (max-width: 900px) {
	.szb-track { --w0: 56cqw; --gap: 3cqw; }
	.szb-nicho[data-p="1"], .szb-nicho[data-p="-1"] { --x: calc(var(--w0) * .9 + var(--gap)); --s: .8; --lab-op: 0; opacity: .55; }
	.szb-nicho[data-p="2"], .szb-nicho[data-p="-2"], .szb-nicho[data-p="3"], .szb-nicho[data-p="-3"] { visibility: hidden; opacity: 0; }
}