/* Missa Infantil com o Padre Marlon — missal gamificado. Sem filtros CSS (Safari/iOS), sem unidades cq. */
.szm, .szm * { box-sizing: border-box; }
.szm {
	--ink: #3a2412; --azul: #2e3e6b; --azul-c: #3aa0ff; --azul-d: #1d6fd1; --ouro: #ffd23f; --ouro-d: #d98a00; --creme: #fff6df; --creme2: #f3e3c3;
	--verde: #35c759; --verde-d: #1f9a3e; --rosa: #ff5d8f; --rosa-d: #d12e63; --roxo: #7a4fd1;
	position: relative; width: 100%; max-width: 820px; margin: 12px auto; overflow: hidden; display: flex; flex-direction: column;
	height: 90vh; height: 90svh; min-height: 560px; max-height: 920px;
	border-radius: 26px; border: 5px solid #fff; box-shadow: 0 10px 30px rgba(30, 90, 160, .35), 0 0 0 4px var(--azul-c);
	font-family: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif; color: var(--ink);
	background: linear-gradient(180deg, #fff0c8 0%, #ffe9b8 45%, #ffd9a0 100%);
	-webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
@media (max-width: 560px) { .szm { margin: 0 auto; border-width: 0; border-radius: 0; height: 100vh; height: 100svh; max-height: none; min-height: 520px; box-shadow: none; } }
.szm button { font-family: inherit; cursor: pointer; border: 0; color: inherit; }
.szm img { max-width: 100%; }

/* ----- barra do topo ----- */
.szm-top { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: linear-gradient(180deg, #3b4f86, #2e3e6b); color: #fff; }
.szm-top h2 { flex: 1; margin: 0; font-size: 1.12rem; line-height: 1.1; font-weight: 800; color: #fff; text-align: center; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.szm-ico { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; font-size: 1.15rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.szm-ico:active { transform: scale(.92); }
.szm-ico[hidden] { display: none; }
.szm-chip { background: var(--ouro); color: #5a3a00; border-radius: 999px; padding: 3px 10px; font-weight: 800; font-size: .92rem; white-space: nowrap; box-shadow: 0 2px 0 var(--ouro-d); }
.szm-prog { flex: 0 0 auto; height: 10px; background: rgba(46, 62, 107, .15); }
.szm-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #35c759, #9be564); border-radius: 0 10px 10px 0; transition: width .5s; }

/* ----- miolo ----- */
.szm-main { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 14px 14px 10px; -webkit-overflow-scrolling: touch; }
.szm-aviso { margin: 0 0 12px; padding: 8px 12px; border-radius: 14px; background: #fff; border: 2px dashed #c9a06a; font-size: .86rem; line-height: 1.25; color: #6b4a22; }
.szm-hero { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #2e3e6b, #4a66b3); box-shadow: 0 6px 0 rgba(46, 62, 107, .25); }
.szm-hero h3 { margin: 0; font-size: 1.5rem; line-height: 1.05; color: #fff; }
.szm-hero h3 em { font-style: normal; color: var(--ouro); }
.szm-hero p { margin: 4px 0 0; font-size: .95rem; line-height: 1.25; opacity: .92; }
.szm-trilha { list-style: none; margin: 14px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.szm-no { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; border-radius: 20px; background: #fff; border: 3px solid #fff; box-shadow: 0 5px 0 rgba(120, 80, 20, .18); }
.szm-no:nth-child(even) { margin-left: 26px; } .szm-no:nth-child(odd) { margin-right: 26px; }
.szm-no:active { transform: translateY(2px); box-shadow: 0 3px 0 rgba(120, 80, 20, .18); }
.szm-no .bola { position: relative; flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; background: radial-gradient(circle at 35% 30%, #ffe27a, #ffb703); box-shadow: 0 4px 0 var(--ouro-d), inset 0 0 0 3px #fff; }
.szm-no .bola b { position: absolute; left: -4px; top: -4px; width: 24px; height: 24px; border-radius: 50%; background: var(--azul); color: #fff; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.szm-no .txt { flex: 1; min-width: 0; }
.szm-no .txt strong { display: block; font-size: 1.05rem; line-height: 1.1; color: var(--azul); }
.szm-no .txt span { display: block; margin-top: 2px; font-size: .84rem; line-height: 1.2; color: #7a5a30; }
.szm-no .est { font-size: 1.05rem; letter-spacing: 1px; white-space: nowrap; }
.szm-no.bloq { background: #f1ead8; box-shadow: 0 5px 0 rgba(120, 100, 60, .15); }
.szm-no.bloq .bola { background: #d8cdb4; box-shadow: 0 4px 0 #b7a98a, inset 0 0 0 3px #f1ead8; filter: none; opacity: .85; }
.szm-no.bloq .txt strong { color: #8a7a5a; }
.szm-no.bloq .est { font-size: .78rem; font-weight: 700; color: #8a7a5a; letter-spacing: 0; }
.szm-turma { margin: 12px 0 4px; padding: 12px; border-radius: 20px; background: #fff; box-shadow: 0 5px 0 rgba(120, 80, 20, .15); }
.szm-turma h4 { margin: 0 0 8px; font-size: 1.05rem; color: var(--azul); }
.szm-turma ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; justify-content: space-between; }
.szm-turma li { flex: 1; text-align: center; font-size: .78rem; line-height: 1.15; color: #6b4a22; }
.szm-turma li img { display: block; height: 78px; width: auto; max-width: 100%; margin: 0 auto 4px; object-fit: contain; }
.szm-turma li b { display: block; color: var(--azul); font-size: .88rem; }

/* ----- etapas das lições ----- */
.szm-card { margin: 4px auto 8px; padding: 16px 14px; border-radius: 24px; text-align: center; background: #fff; box-shadow: 0 6px 0 rgba(120, 80, 20, .18); animation: szm-in .35s ease-out; }
.szm-card.solene { background: linear-gradient(180deg, #fff, #f3ecff); box-shadow: 0 6px 0 rgba(122, 79, 209, .22); }
.szm-card .big { font-size: 4rem; line-height: 1; margin-bottom: 6px; }
.szm-card h3 { margin: 0 0 8px; font-size: 1.45rem; line-height: 1.1; color: var(--azul); }
.szm-card p { margin: 4px 0; font-size: 1.12rem; line-height: 1.25; font-weight: 700; color: #5a3d1b; }
.szm-elenco { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin-bottom: 6px; }
.szm-elenco img { height: 150px; width: auto; object-fit: contain; }
.szm-elenco img.bern { height: 96px; animation: szm-abana 1.1s ease-in-out infinite; transform-origin: 50% 100%; }
.szm-perg { margin: 2px 0 10px; font-size: 1.3rem; line-height: 1.15; font-weight: 800; color: var(--azul); text-align: center; }
.szm-opcoes { display: flex; flex-direction: column; gap: 10px; }
.szm-op { width: 100%; padding: 13px 14px; text-align: left; font-size: 1.08rem; line-height: 1.2; font-weight: 700; color: var(--ink); background: #fff; border-radius: 18px; border: 3px solid #e7d7b4; box-shadow: 0 4px 0 #d6c394; }
.szm-op:active { transform: translateY(2px); box-shadow: 0 2px 0 #d6c394; }
.szm-op.certa { background: #e3f9e6; border-color: var(--verde); box-shadow: 0 4px 0 var(--verde-d); }
.szm-op.errada { background: #fff0e6; border-color: #ffa56b; box-shadow: 0 4px 0 #e0803a; animation: szm-treme .4s; }
.szm-op[disabled] { cursor: default; }
.szm-dica { margin: 10px 0 0; padding: 10px 12px; border-radius: 16px; background: #fff7d1; border: 2px solid var(--ouro); font-size: .98rem; line-height: 1.25; font-weight: 700; color: #6b4a22; animation: szm-in .3s ease-out; }
.szm-dica[hidden] { display: none; }

/* ----- cenário da igreja ----- */
.szm-cena { position: relative; border-radius: 22px; overflow: hidden; border: 4px solid #fff; box-shadow: 0 6px 0 rgba(120, 80, 20, .2); background: #f3e3c3; line-height: 0; }
.szm-cena svg { width: 100%; height: auto; display: block; }
.szm-cena .hot { cursor: pointer; }
.szm-cena .hot .halo { fill: rgba(255, 255, 255, .0); stroke: #fff; stroke-width: 5; opacity: 0; }
.szm-cena.brilha .hot .halo { opacity: 1; animation: szm-pulsa 1.4s ease-in-out infinite; }
.szm-cena .hot.feito .halo { opacity: 1; stroke: #35c759; animation: none; }
.szm-cena .hot.acerto .halo { opacity: 1; stroke: #35c759; stroke-width: 8; animation: szm-pulsa .5s 2; }
.szm-cena .hot.erro .halo { opacity: 1; stroke: #ff7a3a; animation: none; }
.szm-rotulo { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); padding: 4px 14px; border-radius: 999px; background: var(--azul); color: #fff; font-size: 1.05rem; font-weight: 800; line-height: 1.2; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); animation: szm-in .25s ease-out; white-space: nowrap; }
.szm-rotulo[hidden] { display: none; }
.szm-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.szm-checks li { padding: 4px 12px; border-radius: 999px; background: #fff; border: 2px solid #e7d7b4; font-size: .95rem; font-weight: 800; color: #8a7a5a; }
.szm-checks li.ok { background: #e3f9e6; border-color: var(--verde); color: var(--verde-d); }
.szm-pedido { margin: 10px 0 0; text-align: center; font-size: 1.25rem; font-weight: 800; color: var(--azul); }

/* ----- ordenar as partes ----- */
.szm-ordem { display: flex; flex-direction: column; gap: 9px; }
.szm-it { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; text-align: left; border-radius: 18px; background: #fff; border: 3px solid #e7d7b4; box-shadow: 0 4px 0 #d6c394; font-size: 1.08rem; font-weight: 800; color: var(--azul); }
.szm-it .em { font-size: 1.6rem; line-height: 1; }
.szm-it .num { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: var(--verde); color: #fff; font-weight: 800; display: none; align-items: center; justify-content: center; }
.szm-it.ok { background: #e3f9e6; border-color: var(--verde); box-shadow: 0 4px 0 var(--verde-d); }
.szm-it.ok .num { display: flex; }
.szm-it.erro { animation: szm-treme .4s; border-color: #ffa56b; }

/* ----- resultado ----- */
.szm-fim { text-align: center; padding-top: 6px; }
.szm-fim h3 { margin: 4px 0; font-size: 1.7rem; color: var(--azul); }
.szm-estrelas { font-size: 3rem; letter-spacing: 4px; line-height: 1.1; }
.szm-estrelas .on { animation: szm-pop .5s backwards; }
.szm-estrelas .off { filter: grayscale(1); opacity: .35; }
.szm-fim p { margin: 4px 0 10px; font-size: 1.1rem; font-weight: 700; color: #5a3d1b; }
.szm-fim .szm-elenco img { height: 120px; }

/* ----- botões ----- */
.szm-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 12px 0 4px; }
.szm-btn { white-space: nowrap; min-width: 150px; padding: 12px 22px; border-radius: 999px; font-size: 1.2rem; font-weight: 800; color: #fff; background: linear-gradient(180deg, #4cd36a, var(--verde)); box-shadow: 0 5px 0 var(--verde-d); }
.szm-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--verde-d); }
.szm-btn.sec { background: linear-gradient(180deg, #5fb4ff, var(--azul-c)); box-shadow: 0 5px 0 var(--azul-d); }
.szm-btn[hidden] { display: none; }

/* ----- PALCO: Padre Marlon sempre em destaque no topo ----- */
.szm-palco { flex: 0 0 auto; position: relative; display: flex; align-items: flex-end; gap: 10px; padding: 8px 12px 6px; background: radial-gradient(ellipse at 18% 60%, #fff7c9 0%, rgba(255, 232, 160, .85) 38%, rgba(255, 233, 184, 0) 72%), linear-gradient(180deg, #ffe9b8, #ffdca6); border-bottom: 3px solid rgba(46, 62, 107, .18); z-index: 2; }
.szm-padre { flex: 0 0 auto; position: relative; width: 112px; height: 156px; padding: 0; background: none; cursor: pointer; }
/* Padre Márlon em camadas: o JS mexe na respiração, cabeça, mãos, olhos e boca (sem filtros, só transform) */
.szm-rig { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; aspect-ratio: 564 / 936; transform: translateX(-50%); pointer-events: none; }
.szm-rig img { position: absolute; display: block; max-width: none; min-width: 0; margin: 0; padding: 0; border: 0; box-shadow: none; filter: none; -webkit-user-drag: none; user-select: none; }
.szm-rig .rg-corpo, .szm-rig .rg-maos, .szm-rig .rg-cab, .szm-rig .rg-cabelo { position: absolute; inset: 0; will-change: transform; }
.szm-rig .rg-corpo { transform-origin: 50% 100%; }
.szm-rig .rg-maos { transform-origin: 50% 64%; }
.szm-rig .rg-cab { transform-origin: 50% 53%; }
.szm-rig .rg-sombra { position: absolute; left: 16%; right: 16%; bottom: -1.5%; height: 4%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(90, 55, 15, .28) 0%, rgba(90, 55, 15, 0) 70%); }
.szm-bal { position: relative; flex: 1; min-width: 0; align-self: center; padding: 10px 14px; border-radius: 22px; background: #fff; border: 3px solid var(--azul); box-shadow: 0 4px 0 rgba(46, 62, 107, .25); }
.szm-bal::before { content: ''; position: absolute; left: -16px; top: 50%; margin-top: -9px; border: 9px solid transparent; border-right: 13px solid var(--azul); }
.szm-bal::after { content: ''; position: absolute; left: -10px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-right: 11px solid #fff; }
.szm-fala { margin: 0; font-size: 1.04rem; line-height: 1.25; font-weight: 700; color: var(--ink); min-height: 2.5em; display: flex; flex-direction: column; justify-content: center; }
.szm-fala small { display: block; margin-top: 4px; font-size: .74rem; font-weight: 700; color: #9a7a4a; }
.szm-rep { position: absolute; right: -6px; top: -14px; width: 34px; height: 34px; border-radius: 50%; background: var(--ouro); box-shadow: 0 3px 0 var(--ouro-d); font-size: 1rem; line-height: 1; }
.szm-rep:active { transform: scale(.92); }
.szm-rep[hidden] { display: none; }

/* ----- ajustes ----- */
.szm-ajustes { position: absolute; right: 10px; top: 56px; z-index: 5; width: 270px; max-width: calc(100% - 20px); padding: 12px; border-radius: 18px; background: #fff; border: 3px solid var(--azul); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); animation: szm-in .2s ease-out; }
.szm-ajustes[hidden] { display: none; }
.szm-ajustes label { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: .98rem; font-weight: 700; }
.szm-ajustes small { display: block; color: #8a6a3a; font-weight: 600; font-size: .78rem; line-height: 1.15; }
.szm-ajustes input[type=checkbox] { width: 22px; height: 22px; }
.szm-ajustes .reset { width: 100%; margin-top: 6px; padding: 8px; border-radius: 12px; background: #f1ead8; font-weight: 800; color: #7a5a30; }

/* ----- confete ----- */
.szm-conf { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.szm-conf i { position: absolute; top: -12px; width: 10px; height: 14px; border-radius: 2px; animation: szm-cai 1.8s ease-in forwards; }

@keyframes szm-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes szm-treme { 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
@keyframes szm-pop { from { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.25); } to { transform: none; } }
@keyframes szm-pulsa { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes szm-bale { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg) translateY(-2px); } }
@keyframes szm-abana { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes szm-cai { to { transform: translateY(110vh) rotate(540deg); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .szm *, .szm *::before { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }


/* ----- cartas (objetos, vestes, cores) e imagens nas perguntas ----- */
.szm-cartas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 4px; }
.szm-carta { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 10px 6px 8px; border-radius: 18px; background: #fff; border: 3px solid #e7d7b4; box-shadow: 0 4px 0 #d6c394; font-size: .9rem; font-weight: 800; line-height: 1.1; color: var(--azul); text-align: center; }
.szm-carta:active { transform: translateY(2px); }
.szm-carta .szm-ic { width: 100%; max-width: 78px; height: auto; }
.szm-carta .nm { min-height: 1.1em; }
.szm-carta:not(.vista) .nm { color: #c9b98f; font-size: 1.1rem; }
.szm-carta.vista { border-color: var(--verde); background: #f1fff3; box-shadow: 0 4px 0 var(--verde-d); }
.szm-carta.ativa { transform: scale(1.04); border-color: var(--azul-c); box-shadow: 0 4px 0 var(--azul-d); }
.szm-imagem { display: flex; justify-content: center; margin: 2px 0 6px; }
.szm-imagem .szm-ic { width: 128px; height: 128px; padding: 10px; border-radius: 24px; background: #fff; box-shadow: 0 5px 0 rgba(120, 80, 20, .18); }
.szm-op { display: flex; align-items: center; gap: 10px; }
.szm-op .amostra { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--ink); }
.szm-it.solene { border-color: #c9b8ee; box-shadow: 0 4px 0 #b4a1e0; }

/* ----- tela cheia: nativa (computador/Android) ou "cobre a tela" (iPhone) ----- */
.szm.szm-full { position: fixed; inset: 0; z-index: 2147483000; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.szm:fullscreen { width: 100%; height: 100%; max-width: none; max-height: none; min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.szm:-webkit-full-screen { width: 100%; height: 100%; max-width: none; max-height: none; min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
html.szm-trava, html.szm-trava body { overflow: hidden !important; }
.szm.szm-full .szm-top, .szm:fullscreen .szm-top { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
.szm.szm-full .szm-main, .szm:fullscreen .szm-main { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.szm.szm-full .szm-main > *, .szm:fullscreen .szm-main > * { max-width: 760px; margin-left: auto; margin-right: auto; }
@media (min-width: 561px) { .szm-padre { width: 140px; height: 194px; } .szm-fala { font-size: 1.12rem; } }
@media (min-width: 700px) {
	.szm.szm-full .szm-padre, .szm:fullscreen .szm-padre { width: 190px; height: 264px; }
	.szm.szm-full .szm-fala, .szm:fullscreen .szm-fala { font-size: 1.3rem; }
	.szm.szm-full .szm-palco, .szm:fullscreen .szm-palco { padding: 12px max(18px, calc(50% - 400px)) 8px; }
}

/* ----- otimizado para celular ----- */
@media (max-width: 560px) {
	.szm-top { padding: 6px 8px; gap: 6px; }
	.szm-top h2 { font-size: 1rem; }
	.szm-ico { width: 40px; height: 40px; }
	.szm-chip { font-size: .85rem; padding: 3px 8px; }
	.szm-palco { padding: 6px 10px 4px; gap: 8px; }
	.szm-padre { width: 104px; height: 144px; }
	.szm-bal { padding: 8px 10px; border-radius: 18px; }
	.szm-fala { font-size: .98rem; min-height: 0; }
	.szm-main { padding: 10px 12px 14px; }
	.szm-op, .szm-it, .szm-no { min-height: 52px; }
	.szm-cartas { gap: 8px; }
	.szm-carta { font-size: .82rem; padding: 8px 4px 6px; }
	.szm-imagem .szm-ic { width: 104px; height: 104px; }
	.szm-no:nth-child(even) { margin-left: 14px; } .szm-no:nth-child(odd) { margin-right: 14px; }
}
@media (max-width: 560px) and (max-height: 640px) { .szm-padre { width: 84px; height: 116px; } .szm-fala small { display: none; } }
@media (orientation: landscape) and (max-height: 520px) {
	.szm-palco { padding: 4px 10px; } .szm-padre { width: 74px; height: 102px; } .szm-fala { font-size: .9rem; min-height: 0; } .szm-fala small { display: none; }
	.szm-top { padding: 4px 8px; } .szm-ico { width: 34px; height: 34px; }
}

/* ----- sem barra de rolagem: a lição cabe na tela; o botão Continuar fica sempre visível ----- */
.szm-main { scrollbar-width: none; -ms-overflow-style: none; }
.szm-main::-webkit-scrollbar { display: none; width: 0; height: 0; }
.szm-main.licao { display: flex; flex-direction: column; }
.szm-main.licao > * { flex: 0 0 auto; }
.szm-main.licao .szm-acoes { position: sticky; bottom: 0; margin: auto 0 0; padding: 10px 0 4px; background: linear-gradient(180deg, rgba(255, 233, 184, 0), #ffe3b0 30%); z-index: 3; }
.szm-main.cena-passo { overflow: hidden; padding-bottom: 6px; }
.szm-main.cena-passo .szm-cena { flex: 1 1 0; min-height: 120px; display: flex; align-items: stretch; justify-content: center; background: #f6e7c8; }
.szm-main.cena-passo .szm-cena svg { width: 100%; height: 100%; }
.szm-main.cena-passo .szm-checks { margin: 8px 0 0; gap: 5px; }
.szm-main.cena-passo .szm-checks li { padding: 3px 10px; font-size: .88rem; }
.szm-main.cena-passo .szm-pedido { margin: 6px 0 0; font-size: 1.1rem; }
.szm-main.cena-passo .szm-acoes { position: static; margin: 6px 0 0; padding: 0; background: none; }
.szm-main.cena-passo .szm-btn { padding: 9px 22px; font-size: 1.1rem; }
@media (max-width: 560px) {
	.szm-main.licao .szm-it { min-height: 44px; padding: 7px 10px; font-size: .98rem; } .szm-main.licao .szm-ordem { gap: 7px; }
	.szm-main.licao .szm-op { min-height: 48px; padding: 10px 12px; font-size: 1rem; }
	.szm-main.licao .szm-opcoes { gap: 8px; }
}

/* listas longas (ordem, cartas): 2 colunas quando a tela é baixa ou larga, para caber sem rolagem */
@media (min-width: 561px) {
	.szm-cartas { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
	.szm-carta .szm-ic { max-width: 64px; }
	.szm-main.licao .szm-ordem { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.szm-main.licao .szm-it { min-height: 52px; font-size: 1rem; }
}
@media (max-height: 700px) {
	.szm-main.licao .szm-ordem { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
	.szm-main.licao .szm-it { min-height: 44px; padding: 6px 8px; font-size: .86rem; line-height: 1.1; gap: 6px; }
	.szm-main.licao .szm-it .em { font-size: 1.2rem; }
	.szm-main.licao .szm-it .num { width: 24px; height: 24px; font-size: .8rem; }
	.szm-main.licao .szm-perg { margin-bottom: 6px; font-size: 1.15rem; }
	.szm-main.licao .szm-carta .szm-ic { max-width: 54px; }
	.szm-main.licao .szm-carta { font-size: .76rem; }
	.szm-padre { width: 84px; height: 116px; }
}

/* artes em imagem (objetos, vestes, cores) */
img.szm-ic { display: block; object-fit: contain; width: 100%; height: auto; max-height: 86px; margin: 0 auto; }
.szm-carta img.szm-ic { max-width: 92px; height: 84px; }
.szm-imagem img.szm-ic { width: 132px; height: 132px; padding: 8px; max-height: none; }
@media (max-width: 560px) { .szm-carta img.szm-ic { height: 70px; } .szm-imagem img.szm-ic { width: 108px; height: 108px; } }
@media (max-height: 700px) { .szm-carta img.szm-ic { height: 56px; } }
.szm-cena .hot .halo { stroke-width: 9; }

/* cenário: a moldura fica só em volta da ilustração, que se ajusta à altura livre */
.szm-main.cena-passo .szm-cena { flex: 1 1 0; min-height: 120px; display: flex; align-items: center; justify-content: center; background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.szm-cena-in { position: relative; line-height: 0; border-radius: 22px; overflow: hidden; border: 4px solid #fff; box-shadow: 0 6px 0 rgba(120, 80, 20, .2); background: #f6e7c8; max-width: 100%; }
.szm-cena-in svg { width: 100%; height: auto; display: block; }
/* ----- abertura animada ----- */
.szm-capa { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 14px 14px 18px; overflow: hidden; background: linear-gradient(180deg, #bfe3ff 0%, #ffeec4 58%, #ffd9a0 100%); transition: opacity .45s, transform .45s; }
.szm-capa.sai { opacity: 0; transform: scale(1.04); pointer-events: none; }
.szm-capa-raios { position: absolute; left: 50%; top: 52%; width: 190%; aspect-ratio: 1; margin: -95% 0 0 -95%; background: repeating-conic-gradient(rgba(255, 244, 190, .75) 0 9deg, rgba(255, 244, 190, 0) 9deg 18deg); border-radius: 50%; animation: szm-gira 40s linear infinite, szm-surge 1.2s ease-out both; }
.szm-capa-fx { position: absolute; left: 50%; top: 46%; width: 0; height: 0; z-index: 6; pointer-events: none; }
.szm-capa-fx i { position: absolute; left: 0; top: 0; font-style: normal; font-size: 1.5rem; opacity: 0; animation: szm-explode 1.2s ease-out forwards; text-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.szm-capa-tit { position: relative; z-index: 2; text-align: center; font-family: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif; line-height: 1; margin-top: 4px; }
.szm-capa-tit .a { display: block; font-size: clamp(2.1rem, 9vw, 3.4rem); font-weight: 800; color: #fff; text-shadow: 0 3px 0 #2e3e6b, 3px 0 0 #2e3e6b, -3px 0 0 #2e3e6b, 0 -3px 0 #2e3e6b, 0 6px 0 rgba(46, 62, 107, .35); letter-spacing: .5px; animation: szm-cai-quica .9s cubic-bezier(.2, .9, .3, 1.3) both; }
.szm-capa-tit .b { display: block; margin-top: 4px; font-size: clamp(1.15rem, 5vw, 1.7rem); font-weight: 800; color: #ffd23f; text-shadow: 0 2px 0 #7a4a00, 2px 0 0 #7a4a00, -2px 0 0 #7a4a00, 0 -2px 0 #7a4a00; animation: szm-cai-quica .9s cubic-bezier(.2, .9, .3, 1.3) .25s both; }
.szm-capa-palco { position: relative; z-index: 2; flex: 1 1 0; min-height: 0; width: 100%; max-width: 440px; margin: 6px 0; }
.szm-capa-palco .grupo { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.szm-capa-palco img { display: block; width: auto; max-width: none; filter: none; flex: 0 0 auto; }
.szm-capa-palco .luz { position: absolute; left: 50%; bottom: 8%; width: 90%; aspect-ratio: 1; margin-left: -45%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 200, .95) 0%, rgba(255, 236, 160, .55) 40%, rgba(255, 236, 160, 0) 70%); animation: szm-surge 1s ease-out .1s both; }
.szm-capa-palco .pad, .szm-capa-palco .carm { height: min(80%, calc(min(94vw, 440px) * .78)); }
.szm-capa-palco .pad { position: relative; flex: 0 0 auto; aspect-ratio: 564 / 936; transform-origin: 50% 100%; z-index: 3; animation: szm-chega-pad .95s cubic-bezier(.2, .9, .3, 1.2) .2s both; margin: 0 -8%; }
.szm-capa-palco .carm { transform-origin: 50% 100%; z-index: 2; animation: szm-chega-esq .9s cubic-bezier(.2, .9, .3, 1.25) .7s both, szm-balanca 3.2s ease-in-out 1.7s infinite; margin-left: -6%; }
.szm-capa-palco .bern { height: min(34%, calc(min(94vw, 440px) * .26)); transform-origin: 50% 100%; z-index: 4; animation: szm-pula .95s cubic-bezier(.3, .8, .4, 1) 1.05s both, szm-abana .9s ease-in-out 2s infinite; margin-left: -20%; margin-right: -4%; }
.szm-capa-palco .e { position: absolute; font-style: normal; color: #ffd23f; font-size: 1.6rem; opacity: 0; z-index: 5; animation: szm-brilha 3s ease-in-out 1.6s infinite; text-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.szm-capa-palco .e1 { right: 8%; top: 8%; } .szm-capa-palco .e2 { right: 28%; top: 2%; animation-delay: 2.2s; font-size: 1.2rem; } .szm-capa-palco .e3 { right: 3%; top: 40%; color: #ff5d8f; animation-delay: 2.8s; } .szm-capa-palco .e4 { left: 4%; top: 30%; animation-delay: 3.4s; font-size: 1.3rem; }
.szm-capa-bal { position: relative; z-index: 2; max-width: 520px; padding: 9px 16px; border-radius: 20px; background: #fff; border: 3px solid var(--azul); box-shadow: 0 4px 0 rgba(46, 62, 107, .25); font-family: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif; font-weight: 700; font-size: 1.02rem; line-height: 1.25; text-align: center; color: var(--ink); animation: szm-quica-bal .6s cubic-bezier(.2, .9, .3, 1.3) 1.2s both; }
.szm-capa-bal::before { content: ''; position: absolute; left: 50%; top: -16px; margin-left: -9px; border: 9px solid transparent; border-bottom: 13px solid var(--azul); }
.szm-capa-bal::after { content: ''; position: absolute; left: 50%; top: -10px; margin-left: -7px; border: 7px solid transparent; border-bottom: 11px solid #fff; }
.szm-capa-bt { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; margin-top: 12px; width: 100%; }
.szm-capa-go { width: 100%; max-width: 420px; padding: 15px 22px; border-radius: 999px; font-family: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif; font-size: 1.35rem; font-weight: 800; color: #fff; background: linear-gradient(180deg, #4cd36a, var(--verde)); box-shadow: 0 6px 0 var(--verde-d); animation: szm-quica-bal .6s cubic-bezier(.2, .9, .3, 1.3) 1.6s both, szm-pulsa-bt 1.6s ease-in-out 2.4s infinite; }
.szm-capa-go:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--verde-d); }
@keyframes szm-gira { to { transform: rotate(360deg); } }
@keyframes szm-surge { from { opacity: 0; transform: scale(.4); } to { opacity: 1; } }
@keyframes szm-cai-quica { 0% { opacity: 0; transform: translateY(-60px) scale(.7); } 70% { opacity: 1; transform: translateY(6px) scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes szm-chega-pad { 0% { opacity: 0; transform: translateY(70%) scale(.55); } 60% { opacity: 1; transform: translateY(-5%) scale(1.07); } 80% { transform: translateY(2%) scale(.98); } 100% { opacity: 1; transform: none; } }
@keyframes szm-chega-esq { 0% { opacity: 0; transform: translateX(-120%) rotate(-10deg); } 65% { opacity: 1; transform: translateX(6%) rotate(3deg); } 100% { opacity: 1; transform: none; } }
@keyframes szm-pula { 0% { opacity: 0; transform: translate(120%, -90%) scale(.7); } 35% { opacity: 1; transform: translate(40%, -140%) scale(1); } 60% { transform: translate(10%, 0) scale(1.1, .88); } 80% { transform: translate(0, -22%) scale(.96, 1.06); } 100% { opacity: 1; transform: none; } }
@keyframes szm-desce { 0% { opacity: 0; transform: translateY(-150%) scale(.6); } 70% { opacity: 1; transform: translateY(8%) scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes szm-quica-bal { 0% { opacity: 0; transform: scale(.6) translateY(16px); } 70% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: none; } }
@keyframes szm-explode { 0% { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.3) rotate(160deg); } }
@keyframes szm-balanca { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes szm-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes szm-brilha { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15) rotate(12deg); } }
@keyframes szm-pulsa-bt { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@media (max-height: 640px) { .szm-capa-bal { font-size: .9rem; padding: 6px 12px; } .szm-capa-tit .a { font-size: 1.9rem; } .szm-capa-go { padding: 11px 18px; font-size: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { .szm-capa *, .szm-capa { animation-duration: .01s !important; animation-delay: 0s !important; } }

/* ----- nesta página: some a faixa azul repetida do site, o jogo sobe ----- */
body.szm-pagina .breadcumb-banner, body.szm-pagina #breadcumbwrap { display: none !important; }
body.szm-pagina .szm { margin-top: 8px; }

/* ----- celular: Padre com respiro, conteúdo perto do Padre (centralizado), botão Continuar logo após o conteúdo ----- */
.szm-palco { padding-top: 16px; }
.szm-main.licao:not(.cena-passo)::before, .szm-main.licao:not(.cena-passo)::after { content: ''; flex: 1 1 0; min-height: 0; }
.szm-main.licao:not(.cena-passo)::before { max-height: 28px; }
.szm-main.licao .szm-acoes { margin: 14px 0 4px; position: sticky; bottom: 0; }
.szm-main.cena-passo .szm-acoes { position: static; margin: 8px 0 0; }
.szm-main.licao .szm-acoes .szm-btn { min-width: 150px; }
/* imagem da pergunta: cartão bem encaixado e maior */
.szm-imagem { margin: 0 0 8px; }
.szm-imagem img.szm-ic { width: 168px; height: 168px; padding: 12px; border-radius: 26px; background: radial-gradient(circle at 50% 38%, #fff 0%, #fff6dc 100%); box-shadow: 0 6px 0 rgba(120, 80, 20, .18), inset 0 0 0 3px #ffe9b8; }
.szm-carta img.szm-ic { height: 92px; max-width: 108px; }
.szm-cartas { gap: 12px; }
.szm-carta { padding: 12px 6px 10px; font-size: .95rem; }
@media (max-width: 560px) { .szm-imagem img.szm-ic { width: 140px; height: 140px; } .szm-carta img.szm-ic { height: 74px; } .szm-carta { font-size: .84rem; } .szm-palco { padding-top: 18px; } }
@media (max-height: 700px) { .szm-imagem img.szm-ic { width: 108px; height: 108px; } .szm-carta img.szm-ic { height: 58px; } .szm-palco { padding-top: 10px; } }

/* ----- textos sempre centralizados ----- */
.szm-op { justify-content: center; text-align: center; }
.szm-op .amostra { margin-right: 2px; }
.szm-it { justify-content: center; text-align: center; position: relative; }
.szm-it .num { position: absolute; right: 10px; top: 50%; margin-top: -16px; }
.szm-card, .szm-card h3, .szm-card p, .szm-fim, .szm-fim p { text-align: center; }
.szm-perg, .szm-pedido { text-align: center; }
.szm-dica { text-align: center; }

/* ----- parceria: Missão Sede Santos + Casa de Saúde Nossa Senhora dos Raros ----- */
.szm-rodape, .szm-parceria, .szm-parceria-card { font-family: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif; }
.szm-rodape a, .szm-parceria a, .szm-parceria-card a { text-decoration: none; }
.szm-parceria-card, .szm-parceria { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; padding: 14px 16px; border-radius: 22px; background: linear-gradient(135deg, #2e3e6b, #4a66b3); color: #fff; text-align: center; box-shadow: 0 6px 0 rgba(46, 62, 107, .25); }
.szm-parceria-card { margin: 12px 0 4px; }
.szm-parceria { max-width: 820px; margin: 14px auto 0; }
.szm-parceria .t, .szm-parceria-card .t { flex: 1 1 100%; font-size: .98rem; line-height: 1.2; font-weight: 700; color: #fff; }
.szm-parceria .t b, .szm-parceria-card .t b { color: #ffd23f; }
.szm-parceria .t2, .szm-parceria-card .t2 { flex: 1 1 100%; font-size: .86rem; line-height: 1.2; font-weight: 600; color: #dfe7ff; }
.szm-parceria .t2 b, .szm-parceria-card .t2 b { color: #fff; }
.szm-parceria .sede img, .szm-parceria-card .sede img, .szm-rodape .sede img { display: block; height: 70px; width: auto; }
.szm-parceria .casa, .szm-parceria-card .casa, .szm-rodape .casa { display: block; padding: 6px 12px; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.szm-parceria .casa img, .szm-parceria-card .casa img, .szm-rodape .casa img { display: block; height: 44px; width: auto; }
.szm-parceria .doar, .szm-parceria-card .doar, .szm-rodape .doar { padding: 9px 18px; border-radius: 999px; background: linear-gradient(180deg, #ff7a9f, #ff5d8f); color: #fff !important; font-weight: 800; font-size: 1rem; box-shadow: 0 4px 0 #d12e63; white-space: nowrap; }
.szm-parceria .doar:active, .szm-parceria-card .doar:active, .szm-rodape .doar:active { transform: translateY(2px); box-shadow: 0 2px 0 #d12e63; }
.szm-parceria img, .szm-parceria-card img, .szm-rodape img { max-width: 100%; }

/* ----- tela cheia: topo mais grosso com o logo da Santinhoz, e rodapé ----- */
.szm-logo, .szm-rodape { display: none; }
.szm.szm-full .szm-logo, .szm:fullscreen .szm-logo, .szm:-webkit-full-screen .szm-logo { display: flex; align-items: center; flex: 0 0 auto; }
.szm-logo img { display: block; height: 46px; width: auto; padding: 4px 12px; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.szm.szm-full .szm-top, .szm:fullscreen .szm-top, .szm:-webkit-full-screen .szm-top { min-height: 76px; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; gap: 12px; background: linear-gradient(180deg, #4a66b3, #2e3e6b); box-shadow: 0 5px 0 rgba(0, 0, 0, .18); position: relative; z-index: 3; }
.szm.szm-full .szm-top h2, .szm:fullscreen .szm-top h2, .szm:-webkit-full-screen .szm-top h2 { font-size: 1.35rem; }
.szm.szm-full .szm-rodape, .szm:fullscreen .szm-rodape, .szm:-webkit-full-screen .szm-rodape { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, #2e3e6b, #243056); color: #fff; border-top: 4px solid #ffd23f; }
.szm-rodape .t { flex: 1 1 100%; text-align: center; font-size: .8rem; line-height: 1.1; font-weight: 700; color: #dfe7ff; }
.szm-rodape .t b { color: #ffd23f; }
.szm-rodape .sede img { height: 40px; }
.szm-rodape .casa img { height: 30px; }
.szm-rodape .casa { padding: 4px 9px; border-radius: 10px; }
.szm-rodape .doar { padding: 6px 14px; font-size: .9rem; }
@media (min-width: 700px) {
	.szm.szm-full .szm-rodape, .szm:fullscreen .szm-rodape { flex-wrap: nowrap; gap: 18px; }
	.szm-rodape .t { flex: 0 1 auto; text-align: left; font-size: .9rem; max-width: 240px; }
	.szm-rodape .sede img { height: 50px; } .szm-rodape .casa img { height: 38px; }
}
@media (max-width: 560px) { .szm-parceria .sede img, .szm-parceria-card .sede img { height: 58px; } .szm-parceria .casa img, .szm-parceria-card .casa img { height: 38px; } }

.szm-top h2 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
	.szm.szm-full .szm-top, .szm:fullscreen .szm-top, .szm:-webkit-full-screen .szm-top { min-height: 64px; padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px; gap: 6px; }
	.szm-logo img { height: 36px; padding: 3px 9px; border-radius: 13px; }
	.szm.szm-full .szm-top h2, .szm:fullscreen .szm-top h2 { font-size: 1rem; }
	.szm.szm-full .szm-ico, .szm:fullscreen .szm-ico { width: 36px; height: 36px; }
}

@media (min-width: 700px) {
	.szm.szm-full .szm-perg, .szm:fullscreen .szm-perg { font-size: 1.6rem; }
	.szm.szm-full .szm-op, .szm:fullscreen .szm-op { font-size: 1.2rem; padding: 15px 20px; }
	.szm.szm-full .szm-btn, .szm:fullscreen .szm-btn { font-size: 1.3rem; padding: 13px 28px; }
	.szm.szm-full .szm-carta, .szm:fullscreen .szm-carta { font-size: 1.05rem; }
	.szm.szm-full .szm-card h3, .szm:fullscreen .szm-card h3 { font-size: 1.8rem; }
	.szm.szm-full .szm-card p, .szm:fullscreen .szm-card p { font-size: 1.3rem; }
}

/* alturas proporcionais à tela: nada passa do espaço livre */
.szm-imagem img.szm-ic { width: clamp(84px, 16svh, 168px); height: clamp(84px, 16svh, 168px); }
.szm-carta img.szm-ic { height: clamp(46px, 8.5svh, 92px); }
.szm-palco { padding-top: clamp(8px, 2svh, 18px); }
.szm-main.licao .szm-op { padding-top: clamp(9px, 1.7svh, 14px); padding-bottom: clamp(9px, 1.7svh, 14px); }
@media (min-width: 700px) {
	.szm.szm-full .szm-perg, .szm:fullscreen .szm-perg { font-size: clamp(1.15rem, 3svh, 1.6rem); }
	.szm.szm-full .szm-op, .szm:fullscreen .szm-op { font-size: clamp(1rem, 2.5svh, 1.2rem); }
	.szm.szm-full .szm-carta, .szm:fullscreen .szm-carta { font-size: clamp(.85rem, 2.2svh, 1.05rem); }
}
@media (max-height: 760px) {
	.szm.szm-full .szm-top, .szm:fullscreen .szm-top { min-height: 58px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; }
	.szm-logo img { height: 36px; }
	.szm-rodape .t { display: none; }
	.szm.szm-full .szm-rodape, .szm:fullscreen .szm-rodape { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
	.szm-rodape .sede img { height: 32px; } .szm-rodape .casa img { height: 26px; } .szm-rodape .doar { padding: 5px 12px; font-size: .85rem; }
}

.szm-imagem img.szm-ic { width: clamp(72px, 13svh, 168px); height: clamp(72px, 13svh, 168px); padding: clamp(5px, 1svh, 12px); }
.szm-main.licao .szm-acoes { margin: 10px 0 2px; padding-bottom: 2px; }
.szm-main.licao .szm-perg { margin-bottom: 8px; }
@media (min-width: 561px) and (max-height: 900px) { .szm-padre { width: 112px; height: 156px; } .szm.szm-full .szm-padre, .szm:fullscreen .szm-padre { width: 124px; height: 172px; } }
@media (min-width: 561px) and (max-height: 760px) { .szm.szm-full .szm-padre, .szm:fullscreen .szm-padre { width: 100px; height: 140px; } }

@media (max-width: 560px) {
	.szm-main.licao .szm-ordem { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
	.szm-main.licao .szm-it { min-height: 46px; padding: 6px 8px; font-size: .9rem; line-height: 1.1; gap: 6px; }
	.szm-main.licao .szm-it .em { font-size: 1.25rem; }
	.szm-main.licao .szm-it .num { width: 24px; height: 24px; font-size: .8rem; right: 6px; margin-top: -12px; }
	.szm-carta img.szm-ic { height: clamp(40px, 7.5svh, 74px); }
	.szm-carta { padding: 8px 4px 6px; font-size: .78rem; gap: 2px; }
	.szm-cartas { gap: 7px; }
	.szm.szm-full .szm-padre, .szm:fullscreen .szm-padre { width: 88px; height: 122px; }
	.szm.szm-full .szm-palco, .szm:fullscreen .szm-palco { padding-top: 8px; }
	.szm.szm-full .szm-fala, .szm:fullscreen .szm-fala { font-size: .92rem; }
}
@media (max-width: 560px) and (max-height: 700px) { .szm-carta img.szm-ic { height: 38px; } .szm-carta { font-size: .72rem; } .szm-main.licao .szm-pedido { margin: 2px 0; } }

@media (max-height: 700px) { .szm-imagem img.szm-ic { width: 64px; height: 64px; padding: 4px; } .szm-imagem { margin-bottom: 4px; } }

/* botão Continuar sempre à direita; no fim da lição, Refazer à esquerda e Próximo à direita */
.szm-acoes { display: flex; width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; justify-content: flex-end; }
.szm-acoes.dupla { justify-content: space-between; }
.szm-main.licao .szm-acoes, .szm-main.cena-passo .szm-acoes { justify-content: flex-end; }
.szm-main.licao .szm-acoes.dupla { justify-content: space-between; }
/* cena: ocupa a largura toda do miolo (corrige o encolhimento na tela cheia) */
.szm-main.cena-passo { padding-left: 8px; padding-right: 8px; }
.szm-main.cena-passo .szm-cena { width: 100%; }
.szm-cena-in { border-width: 3px; }
/* Nossa Senhora dos Raros nas etapas */
.szm-elenco img.nsra { height: clamp(96px, 17svh, 150px); width: auto; filter: drop-shadow(0 0 10px rgba(255, 244, 170, .95)); animation: szm-flutua 4s ease-in-out infinite; }

/* ----- final: fogos, parabéns e vitrine ----- */
.szm-main.finale { position: relative; overflow: hidden; display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 100%, #5a3aa8 0%, #2a2160 55%, #14123c 100%); color: #fff; padding: 8px 12px 10px; }
.szm-main.finale::before, .szm-main.finale::after { display: none; }
.szm-fogos { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.szm-fin-box { position: relative; z-index: 1; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(6px, 1.6svh, 14px); font-family: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif; animation: szm-in .5s ease-out; }
.szm-fin-tit { font-size: clamp(2rem, 8vw, 3.4rem); font-weight: 800; line-height: 1; color: #ffd23f; text-shadow: 0 3px 0 #7a4a00, 0 0 24px rgba(255, 210, 63, .8); animation: szm-pulsa-bt 1.4s ease-in-out infinite; }
.szm-fin-txt { font-size: clamp(1.1rem, 4.6vw, 1.6rem); font-weight: 800; line-height: 1.15; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .4); max-width: 520px; }
.szm-fin-missa { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 20px; background: rgba(255, 255, 255, .95); color: #2e3e6b; font-size: clamp(1rem, 4vw, 1.35rem); font-weight: 800; line-height: 1.15; box-shadow: 0 5px 0 rgba(0, 0, 0, .3); max-width: 520px; }
.szm-fin-missa b { color: #d12e63; }
.szm-fin-missa .ig { font-size: 2rem; }
.szm-main.finale .szm-elenco { margin: 0; }
.szm-main.finale .szm-elenco img { height: clamp(70px, 14svh, 120px); width: auto; }
.szm-main.finale .szm-elenco img.bern { height: clamp(52px, 10svh, 86px); }
.szm-main.finale .szm-elenco img.nsra { height: clamp(78px, 15svh, 130px); }
.szm-main.finale .szm-acoes { position: relative; z-index: 2; margin: 8px 0 0; }
.szm-fogos-bt { display: block; margin: 0 auto 10px; }
.szm-main.vitrine { display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(180deg, #fff6df, #ffe3b0); }
.szm-main.vitrine::before, .szm-main.vitrine::after { display: none; }
.szm-vit { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; font-family: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif; }
.szm-vit-tit { text-align: center; font-size: clamp(1.05rem, 4.2vw, 1.5rem); font-weight: 800; line-height: 1.15; color: #2e3e6b; }
.szm-vit-cx { position: relative; display: flex; align-items: center; gap: 4px; }
/* na tela cheia os filhos da .szm-main ganham margin: auto; sem largura fixa a vitrine crescia até a largura de todos os itens, a lista não rolava e os livros ficavam cortados */
.szm-main.vitrine > * { width: 100%; min-width: 0; }
.szm-vit-cx { min-width: 0; }
.szm-vit-lista { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 10px; flex: 1; min-width: 0; -webkit-overflow-scrolling: touch; }
.szm-vit-lista::-webkit-scrollbar { display: none; }
.szm-vit .seta { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #2e3e6b; color: #fff; font-size: 1.5rem; line-height: 1; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); display: none; }
@media (min-width: 700px) { .szm-vit .seta { display: block; } }
.szm-prod { flex: 0 0 clamp(138px, 40vw, 200px); scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 8px 10px; border-radius: 18px; background: #fff; border: 3px solid #fff; box-shadow: 0 5px 0 rgba(120, 80, 20, .2); text-decoration: none; text-align: center; color: #2e3e6b; }
.szm-prod img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; max-height: clamp(96px, 20svh, 190px); }
.szm-prod .nome { font-size: .8rem; font-weight: 800; line-height: 1.1; min-height: 2.2em; display: flex; align-items: center; color: #2e3e6b; }
.szm-prod .preco { font-size: 1rem; font-weight: 800; color: #d12e63; }
.szm-prod .ver { margin-top: 2px; padding: 4px 12px; border-radius: 999px; background: linear-gradient(180deg, #4cd36a, #35c759); color: #fff; font-size: .82rem; font-weight: 800; box-shadow: 0 3px 0 #1f9a3e; }
.szm-vit-dica { text-align: center; font-size: .8rem; font-weight: 700; color: #8a6a3a; }
@media (min-width: 700px) { .szm-vit-dica { display: none; } }
a.szm-btn { display: inline-block; text-decoration: none; text-align: center; }
@media (prefers-reduced-motion: reduce) { .szm-fin-tit { animation: none; } }

.szm-main.vitrine .szm-acoes { flex-wrap: nowrap; gap: 8px; }
.szm-main.vitrine .szm-btn { min-width: 0; padding: 10px 16px; font-size: 1.02rem; white-space: nowrap; }
.szm-prod img { max-height: clamp(70px, 14svh, 190px); }
.szm-prod { padding: 6px 6px 8px; }
.szm-prod .nome { min-height: 0; font-size: .76rem; }
@media (max-height: 700px) { .szm-vit-dica { display: none; } .szm-vit-tit { font-size: 1rem; } .szm-prod img { max-height: 64px; } .szm-vit-lista { padding-bottom: 6px; } }

.szm-prod img { width: auto; max-width: 100%; height: clamp(60px, 14svh, 190px); max-height: none; aspect-ratio: 1; object-fit: contain; margin: 0 auto; }
@media (max-height: 700px) { .szm-prod img { height: 62px; max-height: none; } }

/* ----- Bernardo late ----- */
.szm-bern-cam { position: absolute; right: 8px; bottom: -34px; z-index: 6; display: none; align-items: flex-end; gap: 4px; pointer-events: none; }
.szm-bern-cam.on { display: flex; animation: szm-late-entra 1.6s ease-out both; }
.szm-bern-cam img { display: block; height: clamp(40px, 7svh, 64px); width: auto; transform-origin: 50% 100%; animation: szm-late-pula .35s ease-in-out 4; }
.szm-bern-cam .au { align-self: flex-start; margin-bottom: 18px; padding: 3px 9px; border-radius: 12px; background: #fff; border: 2px solid var(--azul); color: var(--azul); font-weight: 800; font-size: .85rem; line-height: 1; white-space: nowrap; animation: szm-quica-bal .3s ease-out both; box-shadow: 0 2px 0 rgba(46, 62, 107, .25); }
@keyframes szm-late-entra { 0% { opacity: 0; transform: translateX(40px); } 12% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(8px); } }
@keyframes szm-late-pula { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-10px) scale(.96, 1.06); } }
.szm-elenco img.bern { cursor: pointer; }

.szm-vit-abas { display: flex; justify-content: center; gap: 8px; }
.szm-vit-abas button { padding: 6px 14px; border-radius: 999px; background: #fff; border: 3px solid #e7d7b4; font-family: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif; font-weight: 800; font-size: .92rem; color: #7a5a30; box-shadow: 0 3px 0 #d6c394; }
.szm-vit-abas button.on { background: #2e3e6b; border-color: #2e3e6b; color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.szm-prod .big { font-size: 3rem; line-height: 1.1; }
.szm-prod .desc { font-size: .72rem; font-weight: 600; line-height: 1.15; color: #6b4a22; }
.szm-livro-vazio { flex-basis: min(86%, 320px); padding: 16px 12px; }
@media (max-height: 700px) { .szm-vit-abas button { padding: 4px 10px; font-size: .8rem; } }

/* barra de título e logo da Santinhoz maiores na tela cheia */
.szm-logo img { height: 56px; padding: 5px 14px; border-radius: 18px; }
.szm.szm-full .szm-top, .szm:fullscreen .szm-top, .szm:-webkit-full-screen .szm-top { min-height: 92px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-bottom: 14px; }
.szm.szm-full .szm-top h2, .szm:fullscreen .szm-top h2 { font-size: 1.5rem; }
@media (max-width: 560px) {
	.szm-logo img { height: 44px; padding: 4px 11px; border-radius: 15px; }
	.szm.szm-full .szm-top, .szm:fullscreen .szm-top { min-height: 74px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: 12px; }
	.szm.szm-full .szm-top h2, .szm:fullscreen .szm-top h2 { font-size: 1.05rem; }
}
@media (max-height: 760px) {
	.szm-logo img { height: 42px; }
	.szm.szm-full .szm-top, .szm:fullscreen .szm-top { min-height: 66px; padding-top: calc(9px + env(safe-area-inset-top, 0px)); padding-bottom: 9px; }
}

/* título da abertura maior */
.szm-capa-tit .a { font-size: clamp(2.7rem, 12.5vw, 4.8rem); }
.szm-capa-tit .b { font-size: clamp(1.3rem, 5.8vw, 2.1rem); }
@media (max-height: 640px) { .szm-capa-tit .a { font-size: 2.3rem; } .szm-capa-tit .b { font-size: 1.1rem; } }

/* ===== refinamento: acessibilidade, usabilidade e visual ===== */
/* foco visível (teclado) */
.szm button:focus-visible, .szm a:focus-visible, .szm [tabindex="0"]:focus-visible, .szm input:focus-visible { outline: 4px solid #ffb703; outline-offset: 3px; box-shadow: 0 0 0 7px rgba(46, 62, 107, .55); }
.szm-main:focus { outline: none; }
.szm-cena .hot:focus { outline: none; }
.szm-cena .hot:focus-visible .halo { opacity: 1; stroke: #2e3e6b; stroke-width: 12; }
/* alvos de toque de pelo menos 44 px */
.szm-ico { width: 44px; height: 44px; }
.szm-rep { width: 44px; height: 44px; }
@media (max-width: 560px) { .szm-ico { width: 44px; height: 44px; } .szm.szm-full .szm-ico, .szm:fullscreen .szm-ico { width: 44px; height: 44px; } .szm.szm-full .szm-top h2, .szm:fullscreen .szm-top h2 { display: none; } }
/* contraste e tamanho mínimo de letra */
.szm-fala small { color: #6b4a22; font-size: .84rem; }
.szm-vit-dica { color: #6b4a22; font-size: .86rem; }
.szm-checks li { color: #5f4e2e; font-size: .92rem; }
.szm-no .txt span { color: #6b4a22; font-size: .92rem; }
.szm-prod .nome { font-size: .84rem; }
.szm-carta { font-size: max(.82rem, 12.5px); }
.szm-aviso { font-size: .9rem; }
/* opções com letra (A, B, C) e marca de acerto/erro */
.szm-op { position: relative; padding-left: 50px; padding-right: 50px; }
.szm-op .let { position: absolute; left: 10px; top: 50%; margin-top: -14px; width: 28px; height: 28px; border-radius: 50%; background: #2e3e6b; color: #fff; font-weight: 800; font-size: .9rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.szm-op.certa .let { background: var(--verde-d); } .szm-op.errada .let { background: #c2570f; }
.szm-op.certa::after, .szm-op.errada::after { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 800; line-height: 1; }
.szm-op.certa::after { content: '✓'; color: var(--verde-d); } .szm-op.errada::after { content: '✗'; color: #c2570f; }
/* carregando */
.szm-carrega { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 40%; padding: 40px 0; font-weight: 800; color: var(--azul); }
.szm-carrega i { width: 38px; height: 38px; border-radius: 50%; border: 5px solid #e7d7b4; border-top-color: var(--azul-c); animation: szm-gira 0.9s linear infinite; }
/* trilha: próxima lição em destaque, concluídas com ✓ */
.szm-no { position: relative; }
.szm-no.feito .bola::after { content: '✓'; position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--verde-d); color: #fff; font-size: .95rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #fff; }
.szm-no.prox { border-color: #ffb703; box-shadow: 0 5px 0 rgba(217, 138, 0, .35), 0 0 0 4px rgba(255, 210, 63, .6); animation: szm-prox 1.8s ease-in-out infinite; }
.szm-no.prox::before { content: 'Próxima'; position: absolute; right: 12px; top: -11px; padding: 2px 10px; border-radius: 999px; background: #ffb703; color: #5a3a00; font-size: .78rem; font-weight: 800; box-shadow: 0 2px 0 #d98a00; }
@keyframes szm-prox { 0%, 100% { box-shadow: 0 5px 0 rgba(217, 138, 0, .35), 0 0 0 3px rgba(255, 210, 63, .45); } 50% { box-shadow: 0 5px 0 rgba(217, 138, 0, .35), 0 0 0 8px rgba(255, 210, 63, .25); } }
.szm-hero-go { display: block; margin-top: 10px; padding: 10px 18px; border-radius: 999px; background: linear-gradient(180deg, #ffe27a, #ffb703); color: #5a3a00; font-size: 1.02rem; font-weight: 800; line-height: 1.1; text-align: left; box-shadow: 0 4px 0 #d98a00; }
.szm-hero-go:active { transform: translateY(2px); box-shadow: 0 2px 0 #d98a00; }
/* transições suaves entre etapas */
.szm-main > * { animation: szm-in .32s ease-out both; }
.szm-main > .szm-fogos { animation: none; }
/* realce ao passar o mouse (computador) */
@media (hover: hover) {
	.szm-no:hover, .szm-carta:hover { transform: translateY(-2px); }
	.szm-op:hover:not(:disabled) { border-color: #9cc7ff; }
	.szm-btn:hover, .szm-capa-go:hover, .szm-hero-go:hover { filter: brightness(1.06); }
	.szm-prod:hover { transform: translateY(-3px); }
}
/* painel de ajustes */
.szm-ajustes .aj-tit { margin-bottom: 4px; font-size: 1.1rem; font-weight: 800; color: var(--azul); }
.szm-ajustes label { min-height: 44px; }
.szm-ajustes input[type=checkbox] { width: 26px; height: 26px; flex: 0 0 auto; }
.szm-ajustes .reset { min-height: 44px; }
/* modo menos movimento */
.szm.szm-quieto *, .szm.szm-quieto *::before, .szm.szm-quieto *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01s !important; }
/* modo letras maiores: o miolo pode rolar, o botão Continuar fica sempre visível */
.szm.szm-grande .szm-main, .szm.szm-grande .szm-main.cena-passo { overflow-y: auto; scrollbar-width: auto; }
.szm.szm-grande .szm-fala { font-size: 1.25rem !important; } .szm.szm-grande .szm-perg { font-size: 1.55rem !important; }
.szm.szm-grande .szm-op { font-size: 1.3rem !important; } .szm.szm-grande .szm-it { font-size: 1.2rem !important; }
.szm.szm-grande .szm-carta { font-size: 1.05rem !important; } .szm.szm-grande .szm-card p { font-size: 1.4rem !important; } .szm.szm-grande .szm-card h3 { font-size: 1.8rem !important; }
.szm.szm-grande .szm-btn { font-size: 1.35rem !important; } .szm.szm-grande .szm-no .txt strong { font-size: 1.2rem; } .szm.szm-grande .szm-no .txt span { font-size: 1rem; }
.szm.szm-grande .szm-checks li, .szm.szm-grande .szm-pedido { font-size: 1.2rem !important; } .szm.szm-grande .szm-fala small { font-size: 1rem; }
/* modo alto contraste */
.szm.szm-contraste { --ink: #000; --azul: #0a1640; background: #fff; border-color: #000; }
.szm.szm-contraste .szm-top { background: #0a1640; }
.szm.szm-contraste .szm-palco, .szm.szm-contraste .szm-main { background: #fff !important; }
.szm.szm-contraste .szm-bal, .szm.szm-contraste .szm-op, .szm.szm-contraste .szm-it, .szm.szm-contraste .szm-carta, .szm.szm-contraste .szm-no, .szm.szm-contraste .szm-card { border: 3px solid #000; box-shadow: none; }
.szm.szm-contraste .szm-btn { background: #0b6b2a; box-shadow: 0 5px 0 #063d18; color: #fff; } .szm.szm-contraste .szm-btn.sec { background: #0a3f8f; box-shadow: 0 5px 0 #06265a; }
.szm.szm-contraste .szm-fala, .szm.szm-contraste .szm-perg, .szm.szm-contraste .szm-card p, .szm.szm-contraste .szm-card h3, .szm.szm-contraste .szm-no .txt strong, .szm.szm-contraste .szm-no .txt span { color: #000; }
.szm.szm-contraste .szm-fala small { color: #222; } .szm.szm-contraste .szm-chip { background: #ffd23f; color: #000; }
.szm.szm-contraste .szm-op.certa { background: #d6f5dd; border-color: #0b6b2a; } .szm.szm-contraste .szm-op.errada { background: #ffe1d1; border-color: #8f2f00; }
.szm.szm-contraste .szm-hero { background: #0a1640; }

/* contraste dos botões (texto branco precisa de fundo mais escuro) */
.szm-btn, .szm-capa-go { background: linear-gradient(180deg, #27a64a, #1d8f38); box-shadow: 0 5px 0 #14692a; }
.szm-btn.sec { background: linear-gradient(180deg, #2a7fe0, #1d6fd1); box-shadow: 0 5px 0 #124c93; }
.szm-capa-go:active, .szm-btn:active { box-shadow: 0 2px 0 #14692a; }
.szm-parceria .doar, .szm-parceria-card .doar, .szm-rodape .doar { background: linear-gradient(180deg, #e0457a, #c42a5e); box-shadow: 0 4px 0 #8f1c43; }
.szm-prod .ver { background: linear-gradient(180deg, #1c8f3f, #17803a); box-shadow: 0 3px 0 #0f5a28; }
.szm-hero-go { min-height: 46px; padding: 12px 18px; }
.szm-op.certa .let { background: #17803a; }

.szm-main.licao .szm-op, .szm-op { padding-left: 48px; padding-right: 40px; }
.szm-op .let { left: 9px; width: 28px; height: 28px; }

/* ===== ajustes de leiaute ===== */
/* conteúdo sempre centralizado na coluna (também em tela cheia) */
.szm-main.licao, .szm-main.cena-passo { align-items: center; }
.szm-main.licao > *, .szm-main.cena-passo > * { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
.szm-perg, .szm-pedido, .szm-checks, .szm-card, .szm-dica, .szm-fim { text-align: center; }
.szm-checks { justify-content: center; }
.szm-main.licao .szm-acoes, .szm-main.cena-passo .szm-acoes { justify-content: flex-end; }
.szm-main.licao .szm-acoes.dupla { justify-content: space-between; }
/* "ouvir de novo": botão pequeno junto ao Padre, fora do texto */
.szm-palco .szm-rep { left: 4px; right: auto; top: auto; bottom: 6px; width: 40px; height: 40px; z-index: 4; font-size: .95rem; }
.szm-palco .szm-rep[hidden] { display: none; }
.szm-bal { padding-right: 14px; }
/* Bernardo ao lado do conteúdo, logo abaixo do Padre */
.szm-bern-cam { position: absolute; top: 40%; bottom: auto; right: max(12px, calc(50% - 372px)); left: auto; z-index: 7; flex-direction: row; }
.szm-bern-cam .au { order: 0; align-self: center; margin: 0 4px 0 0; }
.szm-bern-cam img { height: clamp(52px, 9svh, 78px); }
/* topo mais baixo em tela cheia */
.szm.szm-full .szm-top, .szm:fullscreen .szm-top, .szm:-webkit-full-screen .szm-top { min-height: 104px; padding-top: calc(30px + env(safe-area-inset-top, 0px)); padding-bottom: 16px; }
.szm.szm-full .szm-palco, .szm:fullscreen .szm-palco { padding-top: clamp(10px, 2.4svh, 22px); }
@media (max-width: 560px) {
	.szm.szm-full .szm-top, .szm:fullscreen .szm-top { min-height: 88px; padding-top: calc(24px + env(safe-area-inset-top, 0px)); padding-bottom: 12px; }
}
@media (max-height: 760px) {
	.szm.szm-full .szm-top, .szm:fullscreen .szm-top { min-height: 78px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; }
}

/* cena pode crescer em telas grandes; Bernardo fica fora da coluna de texto; botão de som junto do Padre */
.szm-main.cena-passo > .szm-cena { max-width: 900px; }
.szm-palco .szm-rep { left: max(4px, calc(50% - 392px)); }
.szm-bern-cam { top: auto; bottom: 82px; left: 10px; right: auto; }
.szm-bern-cam .au { order: 2; margin: 0 0 0 4px; }
@media (min-width: 900px) { .szm-bern-cam { top: 40%; bottom: auto; left: auto; right: max(12px, calc(50% - 380px - 118px)); } .szm-bern-cam .au { order: 0; margin: 0 4px 0 0; } }

.szm-bern-cam .au { align-self: center; margin-bottom: 0; }
.szm-bern-cam { bottom: 72px; }
.szm-palco .szm-rep { width: 38px; height: 38px; }
/* telas grandes em tela cheia: tudo maior e mais respirado */
@media (min-width: 1400px) and (min-height: 850px) {
	.szm.szm-full .szm-main.licao > *, .szm:fullscreen .szm-main.licao > * { max-width: 920px; }
	.szm.szm-full .szm-perg, .szm:fullscreen .szm-perg { font-size: 2.1rem; }
	.szm.szm-full .szm-op, .szm:fullscreen .szm-op { font-size: 1.55rem; padding-top: 20px; padding-bottom: 20px; }
	.szm.szm-full .szm-op .let, .szm:fullscreen .szm-op .let { width: 36px; height: 36px; margin-top: -18px; font-size: 1.1rem; }
	.szm.szm-full .szm-btn, .szm:fullscreen .szm-btn { font-size: 1.5rem; padding: 16px 34px; }
	.szm.szm-full .szm-padre, .szm:fullscreen .szm-padre { width: 230px; height: 320px; }
	.szm.szm-full .szm-fala, .szm:fullscreen .szm-fala { font-size: 1.6rem; }
	.szm.szm-full .szm-card h3, .szm:fullscreen .szm-card h3 { font-size: 2.2rem; } .szm.szm-full .szm-card p, .szm:fullscreen .szm-card p { font-size: 1.6rem; }
	.szm.szm-full .szm-carta, .szm:fullscreen .szm-carta { font-size: 1.2rem; }
	.szm.szm-full .szm-carta img.szm-ic, .szm:fullscreen .szm-carta img.szm-ic { height: 120px; max-width: 140px; }
	.szm.szm-full .szm-it, .szm:fullscreen .szm-it { font-size: 1.3rem; }
	.szm.szm-full .szm-pedido, .szm:fullscreen .szm-pedido { font-size: 1.5rem; } .szm.szm-full .szm-checks li, .szm:fullscreen .szm-checks li { font-size: 1.1rem; }
	.szm.szm-full .szm-main.cena-passo > .szm-cena, .szm:fullscreen .szm-main.cena-passo > .szm-cena { max-width: 1100px; }
	.szm-palco .szm-rep { width: 48px; height: 48px; }
}

/* tela cheia: topo e imagens proporcionais à altura para nada passar do espaço livre */
.szm.szm-full .szm-imagem img.szm-ic, .szm:fullscreen .szm-imagem img.szm-ic { width: clamp(60px, 11svh, 150px); height: clamp(60px, 11svh, 150px); }
@media (max-height: 900px) { .szm.szm-full .szm-top, .szm:fullscreen .szm-top { min-height: 84px; padding-top: calc(22px + env(safe-area-inset-top, 0px)); padding-bottom: 12px; } }
@media (max-height: 820px) { .szm.szm-full .szm-top, .szm:fullscreen .szm-top { min-height: 74px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; } .szm.szm-full .szm-imagem img.szm-ic, .szm:fullscreen .szm-imagem img.szm-ic { width: clamp(56px, 10svh, 110px); height: clamp(56px, 10svh, 110px); } }
@media (max-height: 700px) { .szm.szm-full .szm-top, .szm:fullscreen .szm-top { min-height: 66px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; } .szm.szm-full .szm-imagem img.szm-ic, .szm:fullscreen .szm-imagem img.szm-ic { width: 54px; height: 54px; padding: 3px; } }
@media (min-width: 1400px) and (min-height: 850px) { .szm.szm-full .szm-op, .szm:fullscreen .szm-op { font-size: 1.45rem; padding-top: 14px; padding-bottom: 14px; } .szm.szm-full .szm-padre, .szm:fullscreen .szm-padre { width: 190px; height: 264px; } }

@media (min-width: 900px) { .szm-bern-cam { top: 40%; bottom: auto; left: auto; right: max(12px, calc(50% - 460px - 118px)); } .szm-bern-cam .au { order: 0; margin: 0 4px 0 0; } }

.szm-palco .szm-rep { width: 44px; height: 44px; }

/* ===== imagens soltas lado a lado + botão Continuar desativado até completar ===== */
.szm-cartas.grande { grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .szm-cartas.grande { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.szm-cartas.grande .szm-carta { padding: 12px 8px 10px; font-size: 1rem; }
.szm-cartas.grande .szm-carta img.szm-ic { width: 100%; max-width: 100%; height: clamp(64px, 15svh, 190px); }
.szm-carta.acerto { border-color: var(--verde); background: #e8fbec; box-shadow: 0 4px 0 var(--verde-d); animation: szm-pop .4s; }
.szm-carta.erro { animation: szm-treme .4s; border-color: #ffa56b; }
.szm-carta.dica { border-color: var(--ouro); box-shadow: 0 0 0 5px rgba(255, 210, 63, .65), 0 4px 0 #d6c394; animation: szm-pulsa-bt 1s ease-in-out infinite; }
.szm-main.licao .szm-acoes, .szm-main.cena-passo .szm-acoes { justify-content: space-between; align-items: center; gap: 12px; }
.szm-dica-cont { flex: 1 1 auto; min-width: 0; font-size: .9rem; font-weight: 700; line-height: 1.15; color: #6b4a22; text-align: left; }
.szm-dica-cont.ok { color: var(--verde-d); }
.szm-btn.off, .szm-btn:disabled { background: #cfc6b0 !important; box-shadow: 0 5px 0 #a89f88 !important; color: #5f5640; cursor: not-allowed; filter: none !important; animation: none !important; }
.szm-btn.pronto { animation: szm-pulsa-bt 1.2s ease-in-out 3; }
.szm-main.licao .szm-acoes.dupla { justify-content: space-between; }

/* telas baixas (iPhone SE): barra de ação mais compacta */
@media (max-height: 700px) {
	.szm-dica-cont { display: none; }
	.szm-main.licao .szm-acoes { justify-content: flex-end; margin-top: 6px; padding-bottom: 0; }
	.szm-main.licao .szm-btn { padding: 8px 20px; font-size: 1.05rem; min-width: 0; }
	.szm-cartas.grande .szm-carta img.szm-ic { height: 48px; }
	.szm-cartas.grande .szm-carta { padding: 8px 6px 6px; font-size: .84rem; }
	.szm-cartas.grande { gap: 8px; }
	.szm-main.licao .szm-op { min-height: 42px; padding-top: 7px; padding-bottom: 7px; }
	.szm-main.licao .szm-perg { font-size: 1.1rem; margin-bottom: 4px; }
}

.szm-main.licao .szm-acoes, .szm-main.cena-passo .szm-acoes { flex-wrap: nowrap; }
.szm-dica-cont { flex: 1 1 0; }
.szm-main.licao .szm-acoes .szm-btn { flex: 0 0 auto; }

/* ===== brincadeira: monte o altar ===== */
.szm-mont { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.szm-mesa { position: relative; width: min(100%, 460px, calc(31svh * 1.6)); aspect-ratio: 1.6; margin: 0 auto; }
.szm-madeira { position: absolute; left: 7%; right: 7%; top: 58%; bottom: 0; border-radius: 10px 10px 6px 6px; background: linear-gradient(#8a5a2b, #6b4220); box-shadow: 0 4px 0 #4a2d14, inset 0 3px 0 rgba(255, 255, 255, .15); }
.szm-slot { position: absolute; display: flex; align-items: flex-end; justify-content: center; padding: 0; border: 3px dashed #c9b27a; border-radius: 12px; background: rgba(255, 255, 255, .35); cursor: pointer; transition: transform .15s, background .15s; }
.szm-slot svg, .szm-slot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.szm-slot .fant { display: block; width: 100%; height: 100%; opacity: .22; filter: grayscale(1); }
.szm-slot.cheio { border-color: transparent; background: none; cursor: default; animation: szm-pop .4s; }
.szm-slot.alvo, .szm-slot.dica { background: rgba(255, 210, 63, .5); border-color: var(--ouro); transform: scale(1.04); }
.szm-slot.erro { animation: szm-treme .4s; border-color: #ff7a59; }
.szm-slot.s-toalha { left: 3%; top: 54%; width: 94%; height: 34%; z-index: 1; }
.szm-slot.s-velaE { left: 9%; top: 10%; width: 13%; height: 46%; z-index: 2; }
.szm-slot.s-velaD { right: 9%; top: 10%; width: 13%; height: 46%; z-index: 2; }
.szm-slot.s-cruz { left: 34%; top: 0; width: 32%; height: 54%; z-index: 2; }
.szm-slot.s-calice { left: 42%; top: 52%; width: 16%; height: 28%; z-index: 3; }
.szm-bandeja { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; min-height: 76px; }
.szm-peca { width: clamp(56px, 11svh, 84px); height: clamp(56px, 11svh, 84px); padding: 6px; border: 3px solid #e3cf9a; border-radius: 16px; background: #fff; box-shadow: 0 4px 0 #d6c394; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.szm-peca .pa, .szm-peca svg, .szm-peca img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.szm-peca[data-t=toalha] svg { height: 70%; margin-top: 15%; }
.szm-peca.sel { border-color: #3aa0ff; box-shadow: 0 0 0 4px rgba(58, 160, 255, .4), 0 4px 0 #d6c394; transform: translateY(-3px); }
.szm-peca.pega { opacity: .3; }
.szm-peca.voando { position: fixed; z-index: 99999; pointer-events: none; transform: scale(1.15) rotate(-4deg); opacity: .95; box-shadow: 0 10px 22px rgba(0, 0, 0, .3); }
@media (max-height: 700px) { .szm-mesa { width: min(100%, 460px, calc(27svh * 1.6)); } .szm-peca { width: 52px; height: 52px; } }

.szm-bandeja { flex-wrap: nowrap; gap: 8px; min-height: 0; }
.szm-peca { width: clamp(52px, 9svh, 80px); height: clamp(52px, 9svh, 80px); flex: 0 0 auto; }
.szm-mesa { width: min(100%, 460px, calc(27svh * 1.6)); }
@media (max-width: 380px) { .szm-bandeja { gap: 5px; } .szm-peca { width: 52px; height: 52px; padding: 4px; } }
@media (max-height: 700px) { .szm-mesa { width: min(100%, 460px, calc(24svh * 1.6)); } .szm-peca { width: 48px; height: 48px; padding: 4px; } }

.szm.szm-full .szm-mesa, .szm:fullscreen .szm-mesa { width: min(100%, 460px, calc(21svh * 1.6)); }
.szm.szm-full .szm-peca, .szm:fullscreen .szm-peca { width: clamp(46px, 7svh, 70px); height: clamp(46px, 7svh, 70px); padding: 4px; }

/* ===== Padre grande ao centro (abertura e fim de cada lição) ===== */
.szm-pg { position: absolute; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1.6svh, 14px); padding: clamp(8px, 2svh, 18px) 14px; background: radial-gradient(circle at 50% 38%, #fff8dc 0, #ffe9a8 55%, #ffd77a 100%); overflow: hidden; text-align: center; }
.szm-pg.entra { animation: szm-pg-in .45s ease-out; }
@keyframes szm-pg-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.szm-pg .pg-tit { margin: 0; font-family: inherit; font-size: clamp(1.15rem, 3.4svh, 1.7rem); line-height: 1.15; color: var(--azul, #1f5fbf); max-width: 640px; }
.szm-pg .pg-cena { position: relative; display: flex; align-items: flex-end; justify-content: center; }
/* estrelinhas da tela cheia: brilhando no fundo, cadentes e em órbita em volta do personagem */
.szm-pg > :not(.pg-ceu) { position: relative; z-index: 1; }
.szm-pg .pg-ceu { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.szm-pg .pg-ceu i { position: absolute; font-style: normal; line-height: 1; color: #f5b301; text-shadow: 0 0 6px #fff, 0 0 10px #ffd23f; animation: szm-brilha var(--t) ease-in-out var(--d) infinite; }
.szm-pg .pg-ceu b { position: absolute; left: -10%; font-size: 20px; line-height: 1; color: #f5b301; text-shadow: 0 0 10px #ffd23f, -14px 0 6px rgba(255, 255, 255, .7), -28px 0 8px rgba(255, 230, 150, .45); animation: szm-cadente var(--t) linear var(--d) infinite; }
@keyframes szm-cadente { 0% { transform: translate(0, 0) rotate(12deg); opacity: 0; } 4% { opacity: 1; } 22% { transform: translate(125vw, 18svh) rotate(12deg); opacity: 0; } 100% { transform: translate(125vw, 18svh); opacity: 0; } }
.szm-pg .pg-orbita { position: absolute; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; z-index: 2; }
.szm-pg .pg-orbita i { position: absolute; left: -9px; top: -9px; width: 22px; height: 22px; font-style: normal; font-size: 22px; line-height: 22px; text-align: center; color: #f5b301; text-shadow: 0 0 6px #fff, 0 0 12px #ffd23f; animation: szm-orbita 9s linear var(--d) infinite; }
.szm-pg .pg-orbita i:nth-child(3n) { color: #ff5d8f; font-size: 18px; }
@keyframes szm-orbita { 0% { transform: rotate(var(--a)) translateX(clamp(95px, 21svh, 240px)) rotate(calc(-1 * var(--a))) scale(.8); opacity: .55; } 50% { transform: rotate(calc(var(--a) + 180deg)) translateX(clamp(95px, 21svh, 240px)) rotate(calc(-1 * var(--a) - 180deg)) scale(1.2); opacity: 1; } 100% { transform: rotate(calc(var(--a) + 360deg)) translateX(clamp(95px, 21svh, 240px)) rotate(calc(-1 * var(--a) - 360deg)) scale(.8); opacity: .55; } }
.szm.szm-quieto .szm-pg .pg-ceu b, .szm.szm-quieto .szm-pg .pg-orbita { display: none; }
.szm-pg .szm-padre.pg-padre { position: relative; width: auto; height: clamp(170px, 40svh, 460px); aspect-ratio: 564 / 936; padding: 0; background: none; border: 0; flex: 0 0 auto; cursor: pointer; }
.szm-pg .pg-bern { position: absolute; right: -78px; bottom: 0; height: clamp(54px, 9svh, 96px); width: auto; }
.szm-pg .pg-bern.au { animation: szm-pg-pula .5s ease-in-out 3; }
.szm-pg .pg-bal { position: relative; width: min(100%, 620px); flex: 0 0 auto; margin: 0; }
@keyframes szm-pg-pula { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px) rotate(-4deg); } }
.szm-pg .pg-bal::before { left: 50%; top: -16px; margin: 0 0 0 -9px; border: 9px solid transparent; border-bottom: 13px solid var(--azul); border-right-color: transparent; }
.szm-pg .pg-bal::after { left: 50%; top: -10px; margin: 0 0 0 -7px; border: 7px solid transparent; border-bottom: 11px solid #fff; border-right-color: transparent; }
.szm-pg .szm-fala { font-size: clamp(1rem, 2.6svh, 1.25rem); min-height: 2.6em; }
.szm-pg .pg-bts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; width: min(100%, 620px); }
.szm-pg .pg-bts .szm-btn { flex: 1 1 150px; }
.szm-pg .pg-est { margin: 0; }
.szm-pg .pg-est span { font-size: clamp(1.8rem, 5svh, 2.6rem); }
.szm-pg .pg-pts { margin: 0; font-weight: 800; color: #5a3d1b; font-size: clamp(.95rem, 2.4svh, 1.1rem); }
@media (max-width: 480px) { .szm-pg .pg-bern { right: -56px; } .szm-pg .pg-bal { width: 100%; } }
@media (max-height: 700px) { .szm-pg .szm-padre.pg-padre { height: clamp(130px, 33svh, 300px); } .szm-pg .szm-fala small { display: none; } }
@media (prefers-reduced-motion: reduce) { .szm-pg.entra { animation: none; } }
.szm-quieto .szm-pg.entra { animation: none; }

.szm-pg.pg-fim { gap: clamp(4px, 1.1svh, 10px); }
.szm-pg.pg-fim .szm-padre.pg-padre { height: clamp(120px, 27svh, 330px); }
.szm-pg.pg-fim .pg-est span { font-size: clamp(1.6rem, 4.2svh, 2.3rem); }
@media (max-height: 700px) { .szm-pg.pg-fim .szm-padre.pg-padre { height: clamp(100px, 24svh, 220px); } }

/* ----- vence os estilos globais do tema (body.szc h1-h6 / p / li) ----- */
body.szc .szm h2, body.szc .szm h3, body.szc .szm h4 { font-family: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif !important; letter-spacing: 0; text-transform: none; }
body.szc .szm p, body.szc .szm li, body.szc .szm button, body.szc .szm label { font-family: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif; }
body.szc .szm .szm-top h2 { color: #fff; font-size: 1.12rem; line-height: 1.1; font-weight: 800; margin: 0; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
body.szc .szm .szm-hero h3 { color: #fff; font-size: 1.5rem; line-height: 1.05; margin: 0; }
body.szc .szm .szm-hero h3 em { color: var(--ouro); font-style: normal; }
body.szc .szm .szm-hero p { color: #fff; font-size: .95rem; line-height: 1.25; margin: 4px 0 0; }
body.szc .szm .szm-card h3 { color: var(--azul); font-size: 1.45rem; line-height: 1.1; margin: 0 0 8px; }
body.szc .szm .szm-card p { color: #5a3d1b; font-size: 1.12rem; line-height: 1.25; font-weight: 700; margin: 4px 0; }
body.szc .szm .szm-turma h4 { color: var(--azul); font-size: 1.05rem; margin: 0 0 8px; }
body.szc .szm .szm-turma li { color: #6b4a22; font-size: .78rem; line-height: 1.15; }
body.szc .szm .szm-turma li b { color: var(--azul); font-size: .88rem; }
body.szc .szm .szm-fim h3 { color: var(--azul); font-size: 1.7rem; margin: 4px 0; }
body.szc .szm .szm-fim p { color: #5a3d1b; font-size: 1.1rem; font-weight: 700; margin: 4px 0 10px; }
body.szc .szm .szm-perg { color: var(--azul); font-size: 1.3rem; line-height: 1.15; font-weight: 800; margin: 2px 0 10px; }
body.szc .szm .szm-pedido { color: var(--azul); font-size: 1.25rem; font-weight: 800; margin: 10px 0 0; }
body.szc .szm .szm-fala { color: var(--ink); font-size: 1.02rem; line-height: 1.25; font-weight: 700; margin: 0; }
body.szc .szm .szm-fala small { color: #9a7a4a; font-size: .74rem; font-weight: 700; }
body.szc .szm .szm-checks li { color: #8a7a5a; font-size: .95rem; font-weight: 800; margin: 0; }
body.szc .szm .szm-checks li.ok { color: var(--verde-d); }
body.szc .szm .szm-trilha li, body.szc .szm .szm-ordem li { margin: 0; }
body.szc .szm .szm-ajustes label, body.szc .szm .szm-ajustes small { color: var(--ink); }
body.szc .szm .szm-aviso { color: #6b4a22; }
@media (max-width: 420px) { body.szc .szm .szm-fala { font-size: .96rem; } }

/* ----- conta: cadastro só com e-mail (aparece depois da 1ª lição) e bloco Conta nos Ajustes ----- */
.szm-cad { width: min(100%, 420px); display: flex; flex-direction: column; gap: 8px; margin: 0 auto; text-align: left; font-weight: 700; color: #2e3e6b; }
.szm-cad label { display: flex; flex-direction: column; gap: 3px; font-size: .92rem; }
.szm-cad label small { font-weight: 600; color: #8a6a3a; }
.szm-cad input[type=email], .szm-cad input[type=text], .szm-cad input[type=password] { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 3px solid #e7d7b4; border-radius: 14px; background: #fff; font: inherit; font-size: 1rem; color: #2e3e6b; }
.szm-cad input:focus { outline: none; border-color: #3aa0ff; }
.szm-cad label.aceite { flex-direction: row; align-items: flex-start; gap: 8px; font-size: .82rem; font-weight: 600; line-height: 1.25; }
.szm-cad label.aceite input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; }
.szm-cad label.aceite a { color: #1f5fbf; text-decoration: underline; }
.szm-cad label[hidden] { display: none; }
.szm-cad-alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin: 0; }
.szm-cad-alt button { padding: 2px 0; border: 0; background: none; color: #1f5fbf; font: inherit; font-size: .88rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.szm-cad-alt button[hidden] { display: none; }
.szm-cad .msg { margin: 0; padding: 8px 10px; border-radius: 12px; background: #fff; font-size: .88rem; line-height: 1.25; }
.szm-cad .msg.erro { background: #ffe3e3; color: #a3122f; }
.szm-cad .msg.ok { background: #dff7e5; color: #17602d; }
.szm-cad .szm-btn { width: 100%; }
.szm-cad .szm-btn[hidden] { display: none; }
@media (max-height: 700px) { .szm-cad { gap: 5px; } .szm-cad input[type=email], .szm-cad input[type=text] { padding: 7px 10px; } }
.szm-ajustes .aj-conta { margin-top: 10px; padding-top: 10px; border-top: 2px dashed #e7d7b4; }
.szm-ajustes .aj-conta[hidden] { display: none; }
.szm-ajustes .aj-tit2 { font-weight: 800; color: #2e3e6b; }
.szm-ajustes .aj-conta p { margin: 4px 0 8px; line-height: 1.25; }
.szm-ajustes .aj-conta small { display: block; color: #6b4a22; }

/* ----- capa com logo do curso: entra num pulo, depois flutua e balança de leve; brilho passando de tempos em tempos ----- */
.szm-capa-tit.tem-logo { width: min(96%, 520px); margin-top: 0; flex: 0 0 auto; }
.szm-capa-logo { display: block; width: 100%; height: auto; max-height: clamp(150px, 30svh, 290px); object-fit: contain; margin: 0 auto; filter: none; transform-origin: 50% 70%; animation: szm-logo-entra .9s cubic-bezier(.2, .9, .3, 1.35) both, szm-logo-flutua 3.4s ease-in-out .9s infinite; }
@keyframes szm-logo-entra { 0% { opacity: 0; transform: translateY(-40px) scale(.6) rotate(-6deg); } 60% { opacity: 1; transform: translateY(6px) scale(1.06) rotate(2deg); } 100% { opacity: 1; transform: none; } }
@keyframes szm-logo-flutua { 0%, 100% { transform: translateY(0) rotate(-1.2deg) scale(1); } 25% { transform: translateY(-7px) rotate(0deg) scale(1.02); } 50% { transform: translateY(-2px) rotate(1.2deg) scale(1); } 75% { transform: translateY(-8px) rotate(0deg) scale(1.02); } }
@media (max-height: 640px) { .szm-capa-logo { max-height: 110px; } }
.szm.szm-quieto .szm-capa-logo { animation: none; }

/* o tema esconde as caixas de seleção do navegador: a do aceite precisa aparecer e ser clicável */
.szc-form label.aceite input[type=checkbox], .szm-cad label.aceite input[type=checkbox] { -webkit-appearance: checkbox !important; appearance: auto !important; display: inline-block !important; position: static !important; opacity: 1 !important; visibility: visible !important; width: 20px !important; height: 20px !important; min-width: 20px; margin: 2px 0 0 !important; clip: auto !important; pointer-events: auto !important; accent-color: var(--szc-manto, #3D6FB6); cursor: pointer; }
.szc-form label.aceite input[type=checkbox]::before, .szc-form label.aceite input[type=checkbox]::after, .szm-cad label.aceite input[type=checkbox]::before, .szm-cad label.aceite input[type=checkbox]::after { content: none !important; display: none !important; }
.szc-form label.aceite a, .szm-cad label.aceite a { color: var(--szc-manto, #1f5fbf) !important; text-decoration: underline !important; font-weight: 700; }

/* ----- tema por curso (cfg.curso.cores): --t1 principal, --t2 escura, --t3 clara, --t4 fundo ----- */
.szm.szm-tema { --azul: var(--t2); --azul-c: var(--t1); box-shadow: 0 10px 30px rgba(0, 0, 0, .22), 0 0 0 4px var(--t1); background: linear-gradient(180deg, var(--t4) 0%, var(--t3) 100%); }
.szm.szm-tema .szm-top { background: linear-gradient(180deg, var(--t1), var(--t2)); }
.szm.szm-tema .szm-hero { background: linear-gradient(135deg, var(--t2), var(--t1)); box-shadow: 0 6px 0 rgba(0, 0, 0, .18); }
.szm.szm-tema .szm-palco { background: radial-gradient(ellipse at 18% 60%, #fff 0%, var(--t4) 42%, rgba(255, 255, 255, 0) 74%), linear-gradient(180deg, var(--t4), var(--t3)); border-bottom-color: rgba(0, 0, 0, .12); }
.szm.szm-tema .szm-capa { background: linear-gradient(180deg, var(--t4) 0%, var(--t3) 62%, var(--t3) 100%); }
.szm.szm-tema .szm-capa-raios { background: repeating-conic-gradient(rgba(255, 255, 255, .7) 0 9deg, rgba(255, 255, 255, 0) 9deg 18deg); }
.szm.szm-tema .szm-pg { background: radial-gradient(circle at 50% 38%, #fff 0, var(--t4) 55%, var(--t3) 100%); }
.szm.szm-tema .szm-prog { background: rgba(0, 0, 0, .1); }
.szm.szm-tema .szm-main.trilha, .szm.szm-tema .szm-main.licao { background: transparent; }
/* personagem sozinho na capa (cursos sem elenco): ocupa o palco */
.szm-capa-palco .grupo .pad:only-child { height: min(92%, calc(min(94vw, 440px) * 1.1)); margin: 0; }
/* o texto dos cartões usa "span" pequeno: o emoji precisa de prioridade */
.szm .szm-carta span.szm-emo { font-size: 3.4rem !important; line-height: 1 !important; height: 84px; width: 92px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 560px) { .szm .szm-carta span.szm-emo { font-size: 2.9rem !important; height: 70px; } }
@media (max-height: 700px) { .szm .szm-carta span.szm-emo { font-size: 2.4rem !important; height: 56px; } }

/* ===== 1.2.0: botões de som e efeitos ===== */
/* "ouvir de novo" no canto do balão (antes ficava em cima do personagem) */
.szm .szm-palco .szm-bal { padding-right: 52px; }
.szm .szm-palco .szm-bal .szm-rep { position: absolute; left: auto; top: auto; right: 6px; bottom: 50%; transform: translateY(50%); width: 38px; height: 38px; z-index: 2; border: 0; border-radius: 50%; background: var(--ouro); box-shadow: 0 3px 0 var(--ouro-d); font-size: .95rem; line-height: 1; cursor: pointer; }
.szm .szm-palco .szm-bal .szm-rep:active { transform: translateY(50%) scale(.9); }
.szm .szm-palco .szm-bal .szm-rep[hidden] { display: none; }
@media (max-width: 560px) { .szm .szm-palco .szm-bal { padding-right: 44px; } .szm .szm-palco .szm-bal .szm-rep { width: 32px; height: 32px; font-size: .8rem; right: 5px; } }
.szm-som[aria-pressed="true"] { opacity: .75; }

/* brilhos no fundo do palco */
.szm-amb { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.szm-amb i { position: absolute; bottom: -20px; font-style: normal; font-size: 14px; color: rgba(255, 255, 255, .9); text-shadow: 0 0 6px rgba(255, 210, 63, .9); opacity: 0; animation: szm-sobe 9s linear infinite; }
.szm-amb i:nth-child(2n) { font-size: 11px; color: #ffb3c8; animation-duration: 11s; }
.szm-amb i:nth-child(3n) { font-size: 17px; animation-duration: 13s; }
.szm-palco > .szm-padre, .szm-palco > .szm-bal { z-index: 1; }
.szm.szm-solene .szm-amb { display: none; }
@keyframes szm-sobe { 0% { opacity: 0; transform: translateY(0) rotate(0); } 12% { opacity: .9; } 80% { opacity: .6; } 100% { opacity: 0; transform: translateY(-220px) translateX(18px) rotate(160deg); } }

/* balão quica a cada fala nova */
.szm-bal.pop { animation: szm-bal-pop .42s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes szm-bal-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: none; } }

/* itens da etapa e da trilha entram um de cada vez */
.szm-surge { animation: szm-surge-in .48s cubic-bezier(.3, 1.5, .5, 1) backwards; }
@keyframes szm-surge-in { 0% { opacity: 0; transform: translateY(18px) scale(.9); } 100% { opacity: 1; transform: none; } }

/* toque: anel e faíscas */
.szm-toque { position: absolute; z-index: 30; width: 0; height: 0; pointer-events: none; }
.szm-toque b { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 2px rgba(255, 210, 63, .5); animation: szm-anel .5s ease-out forwards; }
.szm-toque i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; animation: szm-faisca .65s ease-out forwards; }
@keyframes szm-anel { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes szm-faisca { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }

/* estrelinhas voam até o placar */
.szm-voa { position: absolute; z-index: 31; margin: -12px 0 0 -12px; font-size: 24px; line-height: 1; pointer-events: none; animation: szm-voa 1.1s cubic-bezier(.45, 0, .3, 1) both; }
@keyframes szm-voa { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: 1; transform: translate(var(--sx), var(--sy)) scale(1.2); } 85% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(.7); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }
.szm-chip.pula { animation: szm-chip-pula .5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes szm-chip-pula { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-6deg); } 100% { transform: none; } }

/* aviso de sequência e lição perfeita */
.szm-selo { position: absolute; z-index: 32; left: 50%; top: 34%; padding: 10px 22px; border-radius: 999px; background: linear-gradient(180deg, #fff, #fff3c4); border: 4px solid #ffd23f; box-shadow: 0 6px 0 rgba(176, 124, 0, .35); font-family: 'Fredoka', 'Baloo 2', sans-serif; font-size: 1.4rem; font-weight: 700; color: #5a3d00; white-space: nowrap; pointer-events: none; animation: szm-selo 1.8s cubic-bezier(.3, 1.5, .5, 1) forwards; }
.szm-selo.fogo { border-color: #ff9f1c; color: #a3122f; }
@keyframes szm-selo { 0% { opacity: 0; transform: translate(-50%, 30px) scale(.4) rotate(-8deg); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.1) rotate(2deg); } 28% { transform: translate(-50%, 0) scale(1) rotate(0); } 80% { opacity: 1; transform: translate(-50%, -6px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -40px) scale(.9); } }

/* cartão vira ao ser tocado */
.szm-carta.vira { animation: szm-vira .5s ease; }
@keyframes szm-vira { 0% { transform: perspective(500px) rotateY(0); } 50% { transform: perspective(500px) rotateY(90deg) scale(1.05); } 100% { transform: perspective(500px) rotateY(0); } }

/* barra de progresso com brilho correndo */
.szm-prog i { position: relative; overflow: hidden; }
.szm-prog i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); transform: translateX(-100%); animation: szm-brilho-barra 2.2s ease-in-out infinite; }
@keyframes szm-brilho-barra { 60%, 100% { transform: translateX(100%); } }

/* menos movimento: nada disso */
.szm.szm-quieto .szm-amb, .szm.szm-quieto .szm-toque, .szm.szm-quieto .szm-voa, .szm.szm-quieto .szm-selo { display: none; }
.szm.szm-quieto .szm-surge, .szm.szm-quieto .szm-bal.pop, .szm.szm-quieto .szm-carta.vira, .szm.szm-quieto .szm-chip.pula, .szm.szm-quieto .szm-prog i::after { animation: none; }

/* vitrine da loja no final dos cursos (1.2.0) */
.szm-vit.loja .szm-vit-tit b { display: block; }
.szm-vit.loja .szm-vit-tit small { display: block; margin-top: 4px; font-size: .8em; font-weight: 600; color: #6b4a22; }
/* legenda acompanhando a fala: palavra ainda não dita fica clarinha (o balão já nasce do tamanho certo) */
.szm-txt { display: block; }
.szm-pl { display: inline !important; margin: 0 !important; padding: 0 !important; opacity: .22; transition: opacity .12s; }
.szm-pl.on { opacity: 1; }
.szm.szm-contraste .szm-pl:not(.on) { opacity: .4; }
/* botão que espera a fala terminar: vai enchendo junto com a fala, para quem não ouve entender que é só aguardar */
.szm-pg .pg-bts .szm-btn.off { background: linear-gradient(90deg, #9fd99a var(--szm-prog, 0%), #cfc6b0 var(--szm-prog, 0%)) !important; }
/* botões de compra: nome em cima, preço embaixo (o texto do preço vem do painel e pode ser longo) */
.szm-pg .pg-bts .szm-btn.pg-preco { white-space: normal; line-height: 1.15; padding-top: 9px; padding-bottom: 9px; }
.szm-pg .pg-bts .szm-btn.pg-preco small { display: block; margin-top: 3px; font-size: .66em; font-weight: 700; opacity: .92; }
.szm-pg .pg-bts:has(.pg-preco) { width: min(100%, 800px); align-items: center; }
.szm-pg .pg-bts .szm-btn.pg-preco { flex: 1 1 240px; }

/* ===== dinâmicas novas: certo ou errado, memória, complete a frase e velas ===== */
.szm-vf, .szm-lac { width: min(100%, 560px); margin: 6px auto 0; padding: 18px 16px 16px; border-radius: 22px; background: #fff; border: 3px solid var(--azul); box-shadow: 0 6px 0 rgba(0, 0, 0, .12); text-align: center; }
.szm-vf.troca, .szm-lac.troca { animation: szm-troca .45s cubic-bezier(.3, 1.5, .5, 1); }
.szm-vf.ok, .szm-lac.ok { border-color: #35c759; background: #f0fff4; }
.szm-vf.nao { animation: szm-treme .45s; }
@keyframes szm-troca { 0% { opacity: 0; transform: translateX(40px) rotate(3deg); } 100% { opacity: 1; transform: none; } }
.szm-vf-frase { margin: 0 0 14px; font-size: clamp(1.15rem, 3.4vw, 1.45rem); font-weight: 800; line-height: 1.25; color: var(--ink); }
.szm-vf-bts { display: flex; gap: 12px; justify-content: center; }
.szm-vf-bt { flex: 1 1 0; max-width: 220px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px 12px; border-radius: 18px; font: inherit; font-size: 1.1rem; font-weight: 800; color: #fff; cursor: pointer; transition: transform .12s; }
.szm-vf-bt b { font-size: 2rem; line-height: 1.1; }
.szm-vf-bt.certo { background: linear-gradient(180deg, #4cd36a, #2ea64c); box-shadow: 0 5px 0 #1f7a37; }
.szm-vf-bt.errado { background: linear-gradient(180deg, #ff7b7b, #e04848); box-shadow: 0 5px 0 #a3232f; }
.szm-vf-bt:active { transform: translateY(3px); box-shadow: none; }
.szm-vf-bt:disabled { opacity: .55; cursor: default; }

.szm-mem { width: min(100%, 560px); margin: 4px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.szm-mem.mais { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 420px) { .szm-mem { grid-template-columns: repeat(3, 1fr); } }
.szm-mem-c { position: relative; aspect-ratio: 3 / 4; padding: 0; border: 0; background: none; cursor: pointer; perspective: 600px; font: inherit; }
.szm-mem-c > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .4s; }
.szm-mem-c .verso { background: linear-gradient(135deg, var(--azul-c), var(--azul)); border: 3px solid #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .18); font-size: 1.6rem; }
.szm-mem-c .frente { background: #fff; border: 3px solid var(--azul); transform: rotateY(180deg); font-size: .78rem; font-weight: 800; line-height: 1.1; color: var(--ink); text-align: center; }
.szm-mem-c .frente b { font-size: 1.9rem; line-height: 1; }
.szm-mem-c.aberta .verso { transform: rotateY(-180deg); }
.szm-mem-c.aberta .frente { transform: rotateY(0); }
.szm-mem-c.par .frente { border-color: #35c759; background: #f0fff4; animation: szm-chip-pula .5s; }

.szm-lac .quem { display: inline-block; margin-bottom: 6px; padding: 2px 12px; border-radius: 999px; background: var(--azul); color: #fff; font-size: .85rem; font-weight: 800; }
.szm-lac p { margin: 0; font-size: clamp(1.1rem, 3.3vw, 1.4rem); font-weight: 800; line-height: 1.35; color: var(--ink); }
.szm-lac .vazio { display: inline-block; min-width: 4em; padding: 0 6px; border-bottom: 3px dashed var(--azul); color: var(--azul); }
.szm-lac.ok .vazio { border-bottom-style: solid; border-color: #35c759; color: #17602d; }
.szm-lac-ops { width: min(100%, 560px); margin: 12px auto 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.szm-lac-op { padding: 10px 16px; border-radius: 999px; background: #fff; border: 3px solid var(--creme2); box-shadow: 0 4px 0 rgba(0, 0, 0, .1); font: inherit; font-size: 1.02rem; font-weight: 800; color: var(--ink); cursor: pointer; }
.szm-lac-op.certa { background: #dff7e5; border-color: #35c759; }
.szm-lac-op.errada { background: #ffe3e3; border-color: #ff7b7b; opacity: .7; animation: szm-treme .45s; }

.szm-velas { width: min(100%, 640px); margin: 8px auto 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.szm-vela { flex: 0 1 120px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 18px; background: rgba(255, 255, 255, .75); border: 3px solid transparent; font: inherit; font-size: .86rem; font-weight: 800; line-height: 1.15; color: var(--ink); cursor: pointer; }
.szm-vela svg { width: 40px; height: 110px; }
.szm-vela .chama { opacity: 0; transform-origin: 20px 30px; transform: scale(.3); transition: opacity .4s, transform .4s; }
.szm-vela.acesa { border-color: #ffd23f; background: #fffbe6; box-shadow: 0 0 22px rgba(255, 196, 0, .45); }
.szm-vela.acesa .chama { opacity: 1; transform: none; animation: szm-chama 1.6s ease-in-out infinite; }
@keyframes szm-chama { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08, .94) rotate(2deg); } }
.szm.szm-quieto .szm-vela.acesa .chama, .szm.szm-quieto .szm-vf.troca, .szm.szm-quieto .szm-lac.troca { animation: none; }

/* ===== tela de upgrade: contraste garantido em qualquer cor de curso e destaque do plano anual ===== */
.szm-pg .pg-tit { color: #2e2416 !important; text-shadow: 0 2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff, 0 -2px 0 #fff, 0 3px 6px rgba(255, 255, 255, .9); }
.szm-pg .pg-bal .szm-fala { color: #2e2416 !important; }
.szm-pg .pg-bts .szm-btn.pg-preco small { opacity: 1 !important; color: inherit; }
.szm-pg .pg-bts .szm-btn.pg-anual { order: -2; flex: 1 1 100%; background: linear-gradient(180deg, #ffe27a, #f5b82a) !important; color: #3d2a00 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); border: 3px solid #fff; box-shadow: 0 5px 0 #b07c00, 0 0 0 0 rgba(255, 196, 0, .7); font-size: 1.12em; animation: szm-anual-brilho 1.6s ease-in-out infinite; }
.szm-pg .pg-bts .szm-btn.pg-anual small { color: #5a3d00; font-size: .72em; }
@keyframes szm-anual-brilho { 0%, 100% { box-shadow: 0 5px 0 #b07c00, 0 0 0 0 rgba(255, 196, 0, .7); transform: scale(1); } 50% { box-shadow: 0 5px 0 #b07c00, 0 0 22px 8px rgba(255, 196, 0, .55); transform: scale(1.025); } }
.szm-pg .pg-bts .szm-btn.pg-mensal { order: -1; flex: 1 1 100%; background: #fff !important; color: #2e2416 !important; text-shadow: none; border: 3px solid #d8cbb0; box-shadow: 0 4px 0 #c9b998; }
.szm-pg .pg-bts .szm-btn.pg-mensal small { color: #5a4a2a; }
.szm-pg .pg-bts .szm-btn.pg-volta { flex: 0 1 auto; background: none !important; box-shadow: none !important; color: #2e2416 !important; text-decoration: underline; font-size: .95em; padding: 6px 12px; }
.szm.szm-quieto .szm-pg .pg-bts .szm-btn.pg-anual { animation: none; }

/* ---------- convidado em cena: Jesus conversando com o Padre Márlon (falas com "quem" no dados.json) ---------- */
.szm-palco.dupla .szm-conv { margin-left: -6px; }
.szm-conv { animation: none; }
.szm-conv.entra { animation: szm-conv-entra .7s cubic-bezier(.2, .9, .3, 1.25) both; }
@keyframes szm-conv-entra { 0% { opacity: 0; transform: translateX(40px) scale(.8); filter: brightness(1.8); } 60% { opacity: 1; filter: brightness(1.25); } 100% { opacity: 1; transform: none; filter: none; } }
.szm-conv::before { content: ''; position: absolute; left: 8%; right: 8%; top: 4%; bottom: 10%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 246, 200, .9) 0%, rgba(255, 236, 160, .35) 45%, rgba(255, 236, 160, 0) 72%); pointer-events: none; }
.szm-quem { display: block; margin: 0 0 2px; font-weight: 800; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--azul); line-height: 1.2; }
.szm-quem[hidden] { display: none; }
.szm-bal.conv { border-color: #b8862b; }
.szm-bal.conv .szm-quem { color: #a0711c; }
.szm-palco .szm-bal.conv::before { border-right-color: #b8862b; }
.szm-palco .szm-bal.sem-rabo::before, .szm-palco .szm-bal.sem-rabo::after { display: none; }
.szm-pg .pg-cena.dupla { gap: clamp(6px, 3vw, 40px); }
.szm-pg .pg-bal.dupla::before, .szm-pg .pg-bal.dupla::after { left: 34%; }
.szm-pg .pg-bal.dupla.conv::before, .szm-pg .pg-bal.dupla.conv::after { left: 66%; }
.szm-pg .pg-bal.conv::before { border-bottom-color: #b8862b; }
@media (max-width: 560px) { .szm-palco.dupla .szm-padre { width: 76px; height: 106px; } .szm-palco.dupla .szm-conv { margin-left: -10px; } }
@media (max-width: 560px) and (max-height: 640px) { .szm-palco.dupla .szm-padre { width: 64px; height: 90px; } }
.szm.szm-quieto .szm-conv.entra { animation: none; }

/* ---------- capa: título (logo) por cima de tudo e personagens maiores ---------- */
.szm-capa-tit { z-index: 12; }
.szm-capa-tit.tem-logo::before { content: ''; position: absolute; left: -6%; right: -6%; top: -8%; bottom: -12%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 252, 235, .95) 0%, rgba(255, 248, 215, .8) 42%, rgba(255, 248, 215, 0) 72%); pointer-events: none; }
.szm-capa-logo { position: relative; filter: drop-shadow(0 4px 6px rgba(46, 62, 107, .28)); }
.szm-capa-raios { opacity: .6; }
.szm-capa-fx { z-index: 6; }
.szm-capa-palco { max-width: 560px; margin: 0 0 4px; }
.szm-capa-palco .pad, .szm-capa-palco .carm { height: min(99%, calc(min(96vw, 560px) * .86)); }
.szm-capa-palco .bern { height: min(38%, calc(min(96vw, 560px) * .29)); }
.szm-capa-palco .luz { width: 110%; margin-left: -55%; bottom: 4%; }
.szm-capa-palco .grupo .pad:only-child { height: min(99%, calc(min(98vw, 560px) * 1.25)); }

/* ---------- cartas "toque nos que brilham": as que ainda não foram vistas brilham de verdade ---------- */
.szm-cartas .szm-carta:not(.vista) { position: relative; border-color: #ffd23f; animation: szm-carta-brilha 1.6s ease-in-out infinite; }
.szm-cartas .szm-carta:not(.vista)::after { content: '✦'; position: absolute; top: 4px; right: 8px; font-size: 1.1rem; color: #ffb800; text-shadow: 0 0 6px rgba(255, 210, 63, .9); animation: szm-brilha 1.6s ease-in-out infinite; pointer-events: none; }
.szm-cartas .szm-carta:nth-child(2n):not(.vista) { animation-delay: .4s; }
.szm-cartas .szm-carta:nth-child(3n):not(.vista) { animation-delay: .8s; }
@keyframes szm-carta-brilha {
	0%, 100% { box-shadow: 0 4px 0 #e0b23a, 0 0 0 0 rgba(255, 210, 63, 0); }
	50% { box-shadow: 0 4px 0 #e0b23a, 0 0 18px 6px rgba(255, 210, 63, .85); }
}
.szm.szm-quieto .szm-cartas .szm-carta:not(.vista), .szm.szm-quieto .szm-cartas .szm-carta:not(.vista)::after { animation: none; box-shadow: 0 0 0 4px rgba(255, 210, 63, .9); }