/* ===== Altares-mosaico de Sant'Ana e de São Paulo + Pia batismal (/mosaico-de-santana/, /mosaico-de-sao-paulo/, /pia-batismal/) ===== */

/* ---- abertura: o mosaico enche a tela, a câmera recua devagar e o ouro das tesselas cintila ---- */
.mz-hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;display:flex;align-items:flex-end;background:#05070b;isolation:isolate}
.mz-cam{position:absolute;inset:-4%;z-index:-3;background-size:cover;background-position:var(--fx,50%) var(--fy,30%);transform:scale(1.22);filter:brightness(.82) saturate(1.06);animation:mzCamera 26s cubic-bezier(.25,.1,.25,1) .2s forwards}
@keyframes mzCamera{to{transform:scale(1.02)}}
.mz-brilho{position:absolute;inset:0;z-index:-2;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:radial-gradient(1.5px 1.5px at 12% 22%,#fff6d0,transparent 60%),radial-gradient(2px 2px at 31% 64%,#ffe9a8,transparent 60%),radial-gradient(1.5px 1.5px at 47% 18%,#fff,transparent 60%),
             radial-gradient(2px 2px at 63% 41%,#ffe39a,transparent 60%),radial-gradient(1.5px 1.5px at 78% 72%,#fff3c4,transparent 60%),radial-gradient(2px 2px at 88% 28%,#ffe9a8,transparent 60%),
             radial-gradient(1.5px 1.5px at 22% 84%,#fff,transparent 60%),radial-gradient(2px 2px at 55% 88%,#ffe39a,transparent 60%);
  background-size:220px 220px;animation:mzCintila 7s steps(14) infinite}
@keyframes mzCintila{0%{background-position:0 0;opacity:.25}50%{opacity:.6}100%{background-position:220px 140px;opacity:.25}}
.mz-luz{position:absolute;inset:-20%;z-index:-2;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,226,150,.16) 47%,rgba(255,240,200,.28) 50%,rgba(255,226,150,.16) 53%,transparent 62%);transform:translateX(-60%);animation:mzLuz 9s ease-in-out 1.4s infinite;mix-blend-mode:screen}
@keyframes mzLuz{0%{transform:translateX(-60%)}55%,100%{transform:translateX(60%)}}
.mz-veu{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,7,11,.55) 0%,rgba(5,7,11,.12) 28%,rgba(5,7,11,.35) 55%,rgba(5,7,11,.9) 84%,#05070b 100%),radial-gradient(ellipse 70% 60% at 22% 82%,rgba(5,7,11,.65),transparent 70%)}
.mz-lb{position:absolute;left:0;right:0;height:9vh;background:#000;z-index:1;transition:transform 2s cubic-bezier(.7,0,.2,1)}
.mz-lb.t{top:0}.mz-lb.b{bottom:0}
.mz-hero.open .mz-lb.t{transform:translateY(-100%)}.mz-hero.open .mz-lb.b{transform:translateY(100%)}
.mz-in{position:relative;z-index:2;width:100%;padding-bottom:clamp(64px,10vh,120px);text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 22px rgba(0,0,0,.6)}
.mz-in .btn{text-shadow:none}
.mz-in .crumbs{color:rgba(255,255,255,.84)}
.mz-in .eyebrow{color:var(--ouro-claro)}
.mz-hero h1{font-family:var(--ff-display);font-weight:400;font-size:clamp(54px,9.5vw,156px);line-height:.9;color:#f7f1e3;margin:16px 0 22px;letter-spacing:-.015em}
.mz-hero h1 em{font-style:italic;color:var(--ouro-claro)}
.mz-hero .lead{max-width:56ch;color:rgba(239,233,219,.92)}
.mz-acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

/* ---- números ---- */
.mz-num{padding:clamp(46px,6vw,78px) 0;background:#06080d;border-bottom:1px solid rgba(255,255,255,.06)}
.mz-nums{display:grid;grid-template-columns:repeat(4,1fr)}
.mz-nums div{padding:6px 24px;border-left:1px solid rgba(232,199,122,.18)}
.mz-nums div:first-child{border-left:0;padding-left:0}
.mz-nums b{display:block;font-family:var(--ff-display);font-weight:400;font-size:clamp(34px,4.2vw,62px);line-height:1;color:var(--ouro-claro)}
.mz-nums span{display:block;margin-top:10px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--texto-dim)}

/* ---- o retábulo: foto com pontos nos nichos + lista das figuras ---- */
.mz-ret{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:44px}
.mz-foto{position:sticky;top:92px;margin:0;border:1px solid rgba(232,199,122,.22);box-shadow:0 40px 90px -30px rgba(0,0,0,.85)}
.mz-foto img{display:block;width:100%;height:auto}
.mz-pt{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:0;padding:0;cursor:pointer;background:rgba(10,12,18,.35);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;font:700 12px/1 var(--ff-body);color:#14100a;z-index:2}
.mz-pt::before{content:"";position:absolute;inset:5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2c2,#e8c77a 45%,#a8822f);box-shadow:0 0 14px rgba(232,199,122,.8)}
.mz-pt::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(240,213,144,.9);animation:mzPonto 2.4s ease-out infinite}
.mz-pt span{position:relative}
@keyframes mzPonto{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.9);opacity:0}}
.mz-pt.on::before{background:radial-gradient(circle at 35% 30%,#fff,#f0d590 50%,#c9a24f)}
.mz-pt.on{transform:scale(1.18)}
.mz-dica{position:absolute;z-index:3;left:50%;bottom:16px;transform:translateX(-50%);width:min(88%,380px);padding:14px 18px;background:rgba(8,10,16,.88);backdrop-filter:blur(10px);border:1px solid rgba(232,199,122,.45);opacity:0;pointer-events:none;transition:opacity .35s,transform .35s}
.mz-dica.on{opacity:1}
.mz-dica b{display:block;font-family:var(--ff-display);font-weight:400;font-size:21px;color:#f7f1e3}
.mz-dica small{display:block;margin-top:2px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro)}
.mz-dica p{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--texto-dim)}
.mz-grupo{margin-top:6px}
.mz-grupo h3{font-size:12px;font-family:var(--ff-body);font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ouro);margin:26px 0 12px}
.mz-grupo h3:first-child{margin-top:0}
.mz-fig{display:grid;grid-template-columns:34px 1fr;gap:14px;width:100%;text-align:left;padding:14px 16px;margin-bottom:8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);color:inherit;font:inherit;cursor:pointer;transition:border-color .35s,background .35s,transform .35s}
.mz-fig:hover,.mz-fig.on{border-color:rgba(232,199,122,.55);background:rgba(232,199,122,.06)}
.mz-fig.on{transform:translateX(6px)}
.mz-fig i{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;font:700 12px/1 var(--ff-body);font-style:normal;color:#14100a;background:radial-gradient(circle at 35% 30%,#fff2c2,#e8c77a 45%,#a8822f)}
.mz-fig b{display:block;font-family:var(--ff-display);font-weight:400;font-size:20px;color:#f3eddf;line-height:1.15}
.mz-fig small{display:block;margin-top:3px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ouro)}
.mz-fig span{display:block;margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--texto-dim)}

/* ---- no alto do retábulo: seis nichos em arco ---- */
.mz-alto{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:40px}
.mz-ni{position:relative;padding:58px 16px 22px;text-align:center;border:1px solid rgba(232,199,122,.28);border-radius:999px 999px 6px 6px;background:linear-gradient(180deg,rgba(232,199,122,.09),rgba(255,255,255,.01) 55%);overflow:hidden}
.mz-ni::before{content:"";position:absolute;left:50%;top:18px;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2c2,#e8c77a 45%,#a8822f);box-shadow:0 0 18px rgba(232,199,122,.5)}
.mz-ni small{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro)}
.mz-ni b{display:block;margin-top:6px;font-family:var(--ff-display);font-weight:400;font-size:20px;line-height:1.12;color:#f3eddf}
.mz-ni p{margin-top:10px;font-size:13px;line-height:1.55;color:var(--texto-dim)}

/* ---- o altar inteiro, da rosácea do vitral ao mosaico (a câmera desce com a rolagem) ---- */
.mz-desce{position:relative;height:260vh}
.mz-desce .pal{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#05070b}
.mz-desce .pal img{position:absolute;left:50%;top:0;width:min(1100px,96vw);height:auto;transform:translate(-50%,calc(var(--p,0) * (100svh - 100%)));will-change:transform}
.mz-desce .pal::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#05070b 0%,rgba(5,7,11,0) 18%,rgba(5,7,11,0) 82%,#05070b 100%)}
.mz-desce .leg{position:absolute;left:clamp(16px,4vw,60px);bottom:clamp(20px,6vh,60px);z-index:2;max-width:34ch;padding:16px 20px;background:rgba(5,7,11,.72);backdrop-filter:blur(8px);border-left:2px solid var(--ouro)}
.mz-desce .leg small{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ouro)}
.mz-desce .leg b{display:block;margin-top:4px;font-family:var(--ff-display);font-weight:400;font-size:22px;color:#f3eddf}

/* ---- quem fez / materiais ---- */
.mz-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:40px}
.mz-card{padding:26px 24px;border:1px solid rgba(232,199,122,.2);background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.008))}
.mz-card small{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ouro)}
.mz-card b{display:block;margin-top:8px;font-family:var(--ff-display);font-weight:400;font-size:23px;color:#f3eddf;line-height:1.15}
.mz-card p{margin-top:10px;font-size:14px;line-height:1.6;color:var(--texto-dim)}
.mz-src{padding:0 0 40px;background:#06080d}
.mz-src .wrap{display:block;font-size:12px;line-height:1.6;color:var(--texto-mute)}
.mz-src a{color:var(--texto-dim)}
.mz-par{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}

@media (max-width:900px){
  .mz-ret{grid-template-columns:1fr}
  .mz-foto{position:relative;top:0}
  .mz-alto{grid-template-columns:repeat(2,1fr)}
  .mz-nums{grid-template-columns:1fr 1fr;row-gap:24px}
  .mz-nums div:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:560px){
  .mz-cam{filter:brightness(.66) saturate(1.04)}
  .mz-pt{width:28px;height:28px;margin:-14px 0 0 -14px;font-size:11px}
  .mz-desce{height:200vh}
}
@media (prefers-reduced-motion:reduce){.mz-cam{animation:none;transform:none}.mz-brilho,.mz-luz,.mz-pt::after{animation:none}.mz-lb{display:none}.mz-desce{height:auto}.mz-desce .pal{position:relative;height:auto}.mz-desce .pal img{position:relative;transform:none;left:auto;margin:0 auto;display:block}}

/* lista: dica de toque, cabeçalho da fila de cima, nota da fonte */
.mz-toque{margin-top:14px;font-size:12px;letter-spacing:.06em;color:var(--texto-mute)}
.mz-altohd{margin-top:56px;max-width:70ch}
.mz-altohd h3{font-family:var(--ff-display);font-weight:400;font-size:clamp(26px,2.6vw,36px);color:#f3eddf}
.mz-altohd p{margin-top:10px;font-size:15px;line-height:1.7;color:var(--texto-dim)}
.mz-nota{margin-top:22px;font-size:11.5px;color:var(--texto-mute)}
/* assinaturas nas tesselas */
.mz-ass{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.mz-ass figure{margin:0;border:1px solid rgba(232,199,122,.25);background:#0b0e15;overflow:hidden}
.mz-ass img{display:block;width:100%;height:auto;transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.mz-ass figure:hover img{transform:scale(1.06)}
.mz-ass figcaption{padding:14px 18px}
.mz-ass figcaption b{display:block;font-family:var(--ff-display);font-weight:400;font-size:19px;color:var(--ouro-claro);letter-spacing:.04em}
.mz-ass figcaption small{display:block;margin-top:4px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--texto-mute)}
@media (max-width:760px){
  .mz-ass{grid-template-columns:1fr}
  .mz-desce{height:auto}
  .mz-desce .pal{position:relative;height:auto}
  .mz-desce .pal img{position:relative;left:auto;width:100%;transform:none}
  .mz-desce .leg{position:relative;left:auto;bottom:auto;margin:-40px 16px 0;max-width:none}
}
@media (max-width:760px){.mz-cam[style*="--mob"]{background-image:var(--mob)!important;--fy:62%}}

/* ===== do vitral ao mosaico: a câmera desce; as figuras aparecem só quando a pessoa escolhe uma ===== */
.mz-desce{height:230vh}
.mz-desce .cam{position:absolute;left:50%;top:0;width:min(1100px,96vw);transform:translate(-50%,calc(var(--p,0) * (100svh - 100%)));will-change:transform}
.mz-desce .pal .cam img{position:static;display:block;width:100%;height:auto;transform:none;left:auto}
.mz-desce .pal::after{background:linear-gradient(90deg,#05070b 0%,rgba(5,7,11,0) 6%,rgba(5,7,11,0) 94%,#05070b 100%)}
.mz-guia{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mz-gl{cursor:pointer;outline:none}
.mz-gl .nicho{fill:rgba(240,213,144,0);stroke:rgba(240,213,144,0);stroke-width:4;transition:fill .45s,stroke .45s}
.mz-gl.ativo .nicho,.mz-gl:focus-visible .nicho{fill:rgba(240,213,144,.07);stroke:rgba(240,213,144,.9)}
.mz-guia.apresenta .nicho{animation:mzMostra 1.9s ease-in-out var(--d,0ms) 1}
@keyframes mzMostra{0%,100%{stroke:rgba(240,213,144,0);fill:rgba(240,213,144,0)}40%{stroke:rgba(240,213,144,.75);fill:rgba(240,213,144,.06)}}
.mz-gl .gw,.mz-gl .ln{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .8s cubic-bezier(.3,.1,.25,1)}
.mz-gl .gw{stroke:rgba(232,199,122,.3);stroke-width:13}
.mz-gl .ln{stroke:#f0d590;stroke-width:3.6}
.mz-gl.ativo .gw,.mz-gl.ativo .ln{stroke-dashoffset:0}
.mz-gl .sp{fill:none;stroke:#fffaf0;stroke-width:9;stroke-linecap:round;stroke-dasharray:.03 2;stroke-dashoffset:.03;opacity:0}
.mz-gl.ativo .sp{animation:mzFaisca 1.1s cubic-bezier(.3,.1,.25,1) forwards}
@keyframes mzFaisca{0%{stroke-dashoffset:.03;opacity:1}88%{opacity:1}100%{stroke-dashoffset:-1;opacity:0}}
.mz-gl .pt{fill:#f6dc98;stroke:rgba(10,12,18,.6);stroke-width:3;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.mz-gl.ativo .pt{transform:scale(1)}
.mz-gl .hl{fill:none;stroke:#f0d590;stroke-width:3;transform-box:fill-box;transform-origin:center;opacity:0}
.mz-gl.ativo .hl{animation:mzHalo 2.4s ease-out infinite}
@keyframes mzHalo{0%{transform:scale(.7);opacity:.95}100%{transform:scale(3);opacity:0}}
.mz-gl text{font-family:var(--ff-display);font-size:46px;letter-spacing:.12em;fill:#f0d590;opacity:0;paint-order:stroke;stroke:rgba(5,7,11,.85);stroke-width:7px;transition:opacity .45s .3s}
.mz-gl.ativo text{opacity:1}
.mz-desce .leg p{margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--texto-dim);max-width:46ch}
@media (max-width:760px){
  .mz-desce{height:auto}
  .mz-desce .cam{position:relative;left:auto;width:100%;transform:none}
  .mz-guia text{display:none}
  .mz-gl .ln{stroke-width:7}.mz-gl .gw{stroke-width:20}
  .mz-gl.ativo .pt{transform:scale(1.8)}
}
@media (prefers-reduced-motion:reduce){
  .mz-desce .cam{position:relative;left:auto;transform:none;margin:0 auto}
  .mz-gl .gw,.mz-gl .ln{transition:none}.mz-guia.apresenta .nicho{animation:none}
  .mz-gl.ativo .hl,.mz-gl.ativo .sp{animation:none}
}
/* legenda como faixa de cinema, centralizada; a câmera para com o altar acima dela */
.mz-desce .cam{transform:translate(-50%,calc(var(--p,0) * (80svh - 100%)))}
.mz-desce .leg{left:50%;right:auto;bottom:16px;transform:translateX(-50%);width:min(820px,92vw);max-width:none;text-align:center;border-left:0;border-top:1px solid rgba(232,199,122,.45);border-bottom:1px solid rgba(232,199,122,.45);background:rgba(5,7,11,.84);padding:12px 22px 14px}
.mz-desce .leg p{max-width:none;margin:6px auto 0}
@media (max-width:760px){.mz-desce .cam{transform:none}.mz-desce .leg{position:relative;left:auto;bottom:auto;transform:none;width:auto;margin:12px 16px 0;text-align:left}}
@media (prefers-reduced-motion:reduce){.mz-desce .cam{transform:none}}
@media (max-width:760px){.mz-desce .pal{overflow:hidden}.mz-desce .cam{width:250%;margin-left:-75%}}

/* ===== 09/11/2026: ficha ao lado da estátua (o NOME e, em seguida, a descrição) e a mãozinha que ensina ===== */
.mz-desce .pal{overflow:clip}                       /* o hidden deixava o foco do teclado rolar o .pal por dentro */
@media (min-width:761px) and (prefers-reduced-motion:no-preference){
  .mz-desce .cam{transform:translate(-50%,calc(var(--p,0) * var(--fim,(80svh - 100%))))}   /* --fim: o JS mede onde parar */
}
.mz-desce .cam{z-index:1}
.mz-desce .leg{transition:opacity .5s}
.mz-desce.com-ficha:not(.rodape) .leg{opacity:0;pointer-events:none}
.mz-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mz-ficha{position:absolute;z-index:4;left:0;top:0;width:max-content;max-width:min(300px,27vw);padding:15px 18px 16px;background:linear-gradient(160deg,rgba(14,17,26,.95),rgba(5,7,11,.95));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(232,199,122,.38);box-shadow:0 24px 60px rgba(0,0,0,.6);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.mz-ficha.e{transform:translate(calc(-100% - 18px),calc(-50% + var(--dy,0px)));border-right:2px solid #f0d590}
.mz-ficha.d{transform:translate(18px,calc(-50% + var(--dy,0px)));border-left:2px solid #f0d590}
.mz-ficha.on{opacity:1;visibility:visible;transition:opacity .5s .4s,visibility 0s .4s}
.mz-ficha.on.rapida{transition:opacity .2s,visibility 0s}
.mz-ficha b{display:block;font-family:var(--ff-display);font-weight:400;font-size:clamp(19px,1.75vw,25px);line-height:1.12;color:#f7f1e3}
.mz-ficha small{display:block;margin-top:6px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ouro)}
.mz-ficha p{margin-top:9px;padding-top:9px;border-top:1px solid rgba(232,199,122,.18);font-size:13.5px;line-height:1.6;color:rgba(239,233,219,.84)}
/* a sequência: primeiro o nome, depois o que ele é, depois a descrição (ao trocar de estátua, mais depressa) */
.mz-ficha b,.mz-ficha small,.mz-ficha p,.mz-folha b,.mz-folha small,.mz-folha p{opacity:0;transform:translateY(7px)}
.mz-ficha.on b{animation:mzFi .6s cubic-bezier(.16,1,.3,1) .5s forwards}
.mz-ficha.on small{animation:mzFi .6s cubic-bezier(.16,1,.3,1) .85s forwards}
.mz-ficha.on p{animation:mzFi .8s cubic-bezier(.16,1,.3,1) 1.15s forwards}
.mz-ficha.on.rapida b{animation-delay:.05s}.mz-ficha.on.rapida small{animation-delay:.2s}.mz-ficha.on.rapida p{animation-delay:.32s}
@keyframes mzFi{to{opacity:1;transform:none}}

/* mãozinha sobre a estátua (no tronco, nunca no rosto) e o convite AO LADO do altar, fora da pedra */
.mz-mao{position:absolute;z-index:5;left:0;top:0;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .7s}
.mz-mao[hidden],.mz-convite[hidden]{display:none}
.mz-mao.entra,.mz-convite.entra{opacity:1}
.mz-mao.some,.mz-convite.some{opacity:0;transition:opacity .5s}
.mz-mao .ic{position:absolute;left:-27px;top:-12px;width:56px;height:56px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.75)) drop-shadow(0 0 12px rgba(240,213,144,.55));animation:mzMao 2.4s cubic-bezier(.45,0,.25,1) infinite;transform-origin:27px 12px}
.mz-mao .ic svg{display:block;width:100%;height:100%;fill:#fff7e2}
.mz-mao::before{content:"";position:absolute;left:-19px;top:-19px;width:38px;height:38px;border-radius:50%;border:2px solid rgba(240,213,144,.95);box-shadow:0 0 14px rgba(240,213,144,.6);opacity:0;animation:mzToque 2.4s ease-out infinite}
@keyframes mzMao{0%,100%{transform:translate(16px,22px)}40%{transform:translate(0,0)}50%{transform:translate(0,2px) scale(.9)}62%{transform:translate(0,0)}}
@keyframes mzToque{0%,48%{transform:scale(.35);opacity:0}52%{opacity:1}100%{transform:scale(1.9);opacity:0}}
.mz-mao.toca .ic{animation:none;transform:scale(.9)}
.mz-mao.toca::before{animation:mzToque 1.2s ease-out 1}
.mz-convite{position:absolute;z-index:5;left:0;top:0;transform:translateY(-50%);white-space:nowrap;padding:9px 15px 9px 12px;font:600 11px/1 var(--ff-body);letter-spacing:.14em;text-transform:uppercase;color:#14100a;background:linear-gradient(90deg,#b8913f,#e8c77a);border:1px solid #f0d590;border-radius:999px;box-shadow:0 12px 30px rgba(0,0,0,.55);pointer-events:none;opacity:0;transition:opacity .7s .3s}
.mz-convite i{display:inline-block;margin-right:6px;font-style:normal;animation:mzSeta 1.6s ease-in-out infinite}
@keyframes mzSeta{50%{transform:translateX(-4px)}}

/* toque ou tela estreita: a ficha sobe do rodapé da tela; a linha lateral (que apontaria para fora da tela) some */
.mz-desce.rodape .mz-ficha,.mz-desce.rodape .mz-convite{display:none}
.mz-desce.rodape .mz-gl .gw,.mz-desce.rodape .mz-gl .ln,.mz-desce.rodape .mz-gl .sp{display:none}
.mz-folha{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;max-height:46vh;overflow:auto;padding:16px 18px 18px;background:linear-gradient(160deg,rgba(14,17,26,.97),rgba(5,7,11,.97));border:1px solid rgba(232,199,122,.4);border-top:2px solid #f0d590;box-shadow:0 24px 70px rgba(0,0,0,.7);opacity:0;visibility:hidden;transform:translateY(24px);pointer-events:none;transition:opacity .3s,transform .4s cubic-bezier(.16,1,.3,1),visibility 0s .4s}
.mz-folha.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .35s,transform .5s cubic-bezier(.16,1,.3,1)}
.mz-folha b{display:block;font-family:var(--ff-display);font-weight:400;font-size:22px;line-height:1.15;color:#f7f1e3}
.mz-folha small{display:block;margin-top:5px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ouro)}
.mz-folha p{margin-top:8px;padding-top:8px;border-top:1px solid rgba(232,199,122,.18);font-size:14px;line-height:1.6;color:rgba(239,233,219,.86)}
.mz-folha.on b{animation:mzFi .5s cubic-bezier(.16,1,.3,1) .12s forwards}
.mz-folha.on small{animation:mzFi .5s cubic-bezier(.16,1,.3,1) .35s forwards}
.mz-folha.on p{animation:mzFi .6s cubic-bezier(.16,1,.3,1) .55s forwards}
@media (max-width:760px){.mz-mao .ic{width:46px;height:46px;left:-22px;top:-10px;transform-origin:22px 10px}}
@media (prefers-reduced-motion:reduce){
  .mz-mao .ic,.mz-mao::before,.mz-convite i{animation:none}
  .mz-ficha b,.mz-ficha small,.mz-ficha p,.mz-folha b,.mz-folha small,.mz-folha p{animation:none!important;opacity:1;transform:none}
  .mz-folha{transition:none}
  .mz-desce .leg{position:relative;left:auto;bottom:auto;transform:none;margin:12px auto 0}
}