/* MACall — site de apresentação. Fontes servidas pelo próprio site (licença SIL OFL). */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("/site/fontes/bricolage.woff2") format("woff2"); }
@font-face { font-family: Figtree; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/site/fontes/figtree.woff2") format("woff2"); }

:root {
  --bg: #0c0821; --tx: #f6f0ff; --mu: #c3b6e6; --sol: #ffc857; --co: #ff6b8f; --ci: #35e0c2;
  --gl: rgba(34, 18, 78, .6); --bd: rgba(255, 255, 255, .14);
  --h: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif; --b: Figtree, system-ui, sans-serif;
  color-scheme: dark; box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-behavior: smooth; scroll-padding-top: calc(76px + env(safe-area-inset-top, 0px)); }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--tx); font: 17px/1.6 var(--b); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: rgba(12, 8, 33, .7); backdrop-filter: blur(14px); }
h1, h2, h3 { font-family: var(--h); margin: 0; line-height: 1.04; letter-spacing: -.025em; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--ci); outline-offset: 3px; }
button { font: inherit; }
.w { max-width: 1080px; margin: auto; padding: 0 22px; }

/* mundo em camadas */
.mundo { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, #06031a 0%, #1b0c47 36%, #5b1a75 66%, #d9406f 86%, #ff9a56 100%) 0 calc((1 - var(--p, 0)) * 100%) / 100% 230%; }
.mundo > * { position: absolute; will-change: translate; }
.st { inset: -40% 0; opacity: calc(.25 + var(--p, 0) * .75); background-image: radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent), radial-gradient(1.2px 1.2px at 38% 62%, #fff, transparent), radial-gradient(1.8px 1.8px at 66% 28%, #ffe9b8, transparent), radial-gradient(1.2px 1.2px at 84% 74%, #fff, transparent), radial-gradient(1.4px 1.4px at 52% 8%, #cfe, transparent); background-size: 340px 340px; animation: tw 5s ease-in-out infinite alternate; }
.st.b { background-size: 530px 530px; animation-delay: -2.5s; }
.sol { width: min(24vw, 250px); aspect-ratio: 1; border-radius: 50%; right: 13%; top: 34%; background: radial-gradient(circle at 38% 36%, #fff3c4, #ffc857 55%, #ff8a5c); box-shadow: 0 0 140px 50px rgba(255, 150, 90, .35); }
.orb { border-radius: 50%; filter: blur(80px); opacity: .42; animation: voa 11s ease-in-out infinite; }
.orb-rosa { width: 42vw; height: 42vw; left: -12%; top: 28%; background: #ff4f9a; }
.orb-ciano { width: 34vw; height: 34vw; right: -8%; top: 60%; background: #35e0c2; animation-delay: -5s; }
.col { left: -5%; width: 110%; bottom: 0; }
.col svg { width: 100%; height: 100%; display: block; }
.col-1 { height: 46vh; } .col-2 { height: 34vh; } .col-3 { height: 22vh; }

/* base */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 20px; padding: 12px max(22px, 4vw); background: rgba(12, 8, 33, .5); backdrop-filter: blur(14px); border-bottom: 1px solid var(--bd); }
.top nav { margin-left: auto; display: flex; gap: 22px; color: var(--mu); font-weight: 600; font-size: .94rem; }
.top nav a:hover { color: #fff; }
.marca { display: flex; gap: 10px; align-items: center; font: 800 1.3rem var(--h); }
.marca img { border-radius: 11px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 22px; border-radius: 999px; font: 800 1rem var(--b); border: 1px solid var(--bd); color: var(--tx); background: none; cursor: pointer; transition: transform .25s, box-shadow .25s; }
.btn:hover { transform: translateY(-3px); }
.sol-b { background: linear-gradient(135deg, var(--sol), #ff9a56); color: #2a0f3a; border: 0; box-shadow: 0 10px 34px rgba(255, 170, 80, .4); }
.xl { padding: 19px 34px; font-size: 1.22rem; position: relative; overflow: hidden; animation: pulso 2.6s infinite; }
.xl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .65) 50%, transparent 70%); transform: translateX(-130%); animation: brilho 3.4s infinite; }
.xl small { font-weight: 600; opacity: .75; font-size: .8rem; border-left: 2px solid rgba(42, 15, 58, .3); padding-left: 10px; }
.ghost { background: rgba(255, 255, 255, .07); backdrop-filter: blur(8px); }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; min-height: calc(100svh - 70px); padding-top: 30px; padding-bottom: 70px; }
.hero > * { min-width: 0; }
.chip { display: inline-block; padding: 6px 14px; border-radius: 99px; background: rgba(255, 255, 255, .1); border: 1px solid var(--bd); font-weight: 800; font-size: .85rem; color: var(--sol); margin: 0 0 18px; }
h1 { font-size: clamp(2.8rem, 7.4vw, 5.6rem); font-weight: 800; background: linear-gradient(95deg, #fff 20%, #ffd9a0 50%, #ff9fc0 80%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fluxo 8s ease-in-out infinite alternate; }
.lead { color: var(--mu); font-size: 1.15rem; max-width: 33em; }
.cta { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin: 28px 0 14px; }
.mini { color: var(--mu); font-size: .86rem; margin: 0; }

/* palco do mascote */
.palco { position: relative; display: grid; place-items: center; min-height: 430px; }
.palco::before { content: ""; position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#ff6b8f44, #35e0c233, #ffc85744, #ff6b8f44); filter: blur(34px); animation: gira 16s linear infinite; }
.mas { position: relative; width: min(310px, 72vw); background: none; border: 0; padding: 0; cursor: pointer; animation: voa 5s ease-in-out infinite; color: inherit; }
.mas:focus { outline: none; }
.mas:focus-visible { outline: 3px solid var(--ci); outline-offset: 8px; border-radius: 24px; }
.mas.pula { animation: pula .6s cubic-bezier(.3, 1.6, .5, 1); }
.mas-svg { display: block; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .45)); }
.fala { position: absolute; top: -8px; left: -14%; z-index: 2; background: #fff; color: #2a0f3a; font-weight: 800; font-size: .92rem; padding: 8px 14px; border-radius: 16px 16px 16px 4px; white-space: nowrap; animation: pop .6s .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.fala.troca { animation: pop .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.bl { position: absolute; padding: 7px 15px; border-radius: 99px 99px 99px 6px; background: var(--gl); border: 1px solid var(--bd); backdrop-filter: blur(8px); font-weight: 700; font-size: .86rem; animation: voa 6s ease-in-out infinite; }
.b1 { left: 0; top: 22%; } .b2 { right: -2%; top: 12%; animation-delay: -2s; } .b3 { left: 2%; bottom: 16%; animation-delay: -4s; } .b4 { right: 2%; bottom: 10%; animation-delay: -1s; }

/* faixa */
.fx { overflow: hidden; transform: rotate(-1.6deg); background: var(--sol); color: #2a0f3a; font: 800 1.5rem var(--h); padding: 14px 0; margin: 10px 0; white-space: nowrap; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.fx div { display: inline-block; animation: mq 24s linear infinite; }
.fx span { margin: 0 14px; }
.fx i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--co); margin: 0 12px; }

/* seções */
section.b { padding: 96px 0; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.duo.inv > :first-child { order: 2; }
h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 800; margin-bottom: 14px; }
.t p, .sub { color: var(--mu); }
.ct { text-align: center; max-width: 640px; margin: 0 auto; }
.card { background: var(--gl); border: 1px solid var(--bd); border-radius: 30px 12px 30px 12px; padding: 24px; backdrop-filter: blur(14px); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.rv { opacity: 0; transform: translateY(36px); transition: opacity .8s, transform .8s cubic-bezier(.2, .8, .2, 1); }
.rv.on { opacity: 1; transform: none; }
.sw { display: inline-flex; gap: 12px; align-items: center; cursor: pointer; font-weight: 700; }
.sw input { position: absolute; opacity: 0; }
.tr { width: 54px; height: 30px; border-radius: 99px; background: #5a4a86; padding: 3px; transition: .25s; }
.tr i { display: block; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: .25s; }
.sw input:checked + .tr { background: var(--ci); }
.sw input:checked + .tr i { transform: translateX(24px); }
.sw input:focus-visible + .tr { outline: 3px solid #fff; }
canvas { width: 100%; height: auto; display: block; border-radius: 14px; background: rgba(0, 0, 0, .25); }
.tg { float: right; font-size: .8rem; font-weight: 800; color: var(--ci); }
.tg.sujo { color: var(--co); }
.ptt { text-align: center; transition: .3s; }
.ptt.on { border-color: var(--ci); box-shadow: 0 0 60px #35e0c255; }
.pm { width: 150px; margin: 0 auto 10px; animation: voa 4s ease-in-out infinite; }
.pe-texto { color: var(--mu); margin: 12px 0 0; }
#pb { touch-action: none; user-select: none; -webkit-user-select: none; }
kbd { background: rgba(255, 255, 255, .14); border-radius: 6px; padding: 1px 8px; font: 700 .9em var(--b); }

/* call de demonstração */
.call { max-width: 840px; margin: 36px auto 0; }
.abas { display: flex; gap: 8px; margin-bottom: 10px; }
.abas[hidden] { display: none; }
.abas button { border: 1px solid var(--bd); background: rgba(255, 255, 255, .07); color: var(--mu); border-radius: 99px; padding: 6px 14px; font-weight: 700; font-size: .85rem; cursor: pointer; }
.abas button.ativa { background: var(--ci); border-color: var(--ci); color: #06281f; }
.tela { aspect-ratio: 16 / 8; border-radius: 22px; position: relative; overflow: hidden; background: #140a2c; }
.cena-lunnar, .cena-voce { position: absolute; inset: 0; transition: opacity .35s; }
.cena-lunnar { background: linear-gradient(180deg, #ff8a5c, #ff4f90 55%, #7a2bb8); }
.cena-lunnar .s { position: absolute; width: 19%; aspect-ratio: 1; border-radius: 50%; background: #ffd36e; left: 50%; top: 18%; translate: -50%; animation: voa 5s infinite; }
.cena-lunnar .m { position: absolute; bottom: -34%; width: 62%; aspect-ratio: 1; background: #3b1568; rotate: 45deg; left: -8%; }
.cena-lunnar .m + .m { left: auto; right: -12%; background: #26104d; }
.cena-lunnar .n { position: absolute; top: 30%; width: 34px; height: 12px; border-radius: 99px; background: var(--ci); animation: nave 7s linear infinite; }
.cena-voce { opacity: 0; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, #2a1a5e, #0f0726); }
.tela.ver-voce .cena-voce { opacity: 1; }
.tela.ver-voce .cena-lunnar { opacity: 0; }
.janela { width: 70%; border-radius: 12px; overflow: hidden; background: #1f1446; border: 1px solid var(--bd); box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.janela-barra { display: flex; gap: 6px; align-items: center; padding: 8px 12px; background: rgba(255, 255, 255, .06); font-size: .78rem; color: var(--mu); }
.janela-barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--co); }
.janela-barra i:nth-child(2) { background: var(--sol); }
.janela-barra i:nth-child(3) { background: var(--ci); }
.janela-barra span { margin-left: 6px; }
.janela-corpo { display: grid; gap: 6px; padding: 22px 20px; text-align: center; }
.janela-corpo span { color: var(--mu); font-size: .88rem; }
.tela em { position: absolute; left: 14px; bottom: 10px; font: 700 .8rem var(--b); font-style: normal; background: rgba(0, 0, 0, .55); padding: 3px 10px; border-radius: 99px; }
.vivo { background: var(--co); color: #fff; border-radius: 6px; padding: 0 6px; margin-right: 4px; font-size: .7rem; letter-spacing: .04em; }
.tela-som { position: absolute; left: 14px; top: 12px; font-weight: 700; font-size: .8rem; background: rgba(0, 0, 0, .55); padding: 3px 10px; border-radius: 99px; }
.tela-som[hidden] { display: none; }
.cam-bolha { position: absolute; right: 12px; bottom: 12px; width: 92px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; display: none; place-items: center; background: linear-gradient(160deg, #3b2378, #1a0d3d); border: 2px solid transparent; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); transition: border-color .2s; }
.cam-bolha.on { display: grid; }
.cam-bolha.fa { border-color: var(--ci); }
.cam-bolha [data-mascote] { width: 84px; margin-top: 18px; }
.gente { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.pe { position: relative; border-radius: 18px; background: rgba(255, 255, 255, .08); padding: 12px 6px; text-align: center; border: 2px solid transparent; transition: border-color .2s, box-shadow .2s, opacity .3s; font-weight: 700; font-size: .86rem; color: var(--tx); display: grid; justify-items: center; align-content: start; }
button.pe { cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.pe.fa { border-color: var(--ci); box-shadow: 0 0 24px #35e0c288; }
.pe.voce.bloq { border-color: var(--co); animation: treme .3s 2; }
@keyframes treme { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.pe .sel { font-size: .72rem; color: var(--mu); font-weight: 700; min-height: 1.2em; }
.pe .sel:empty::before { content: "\00a0"; }
.call.surdo .pe:not(.voce) { opacity: .55; }
.av { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 4px; background: var(--c); font-weight: 800; }
.barra { display: flex; justify-content: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.barra button { position: relative; overflow: hidden; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--bd); background: rgba(255, 255, 255, .1); display: grid; place-items: center; color: var(--tx); cursor: pointer; transition: transform .2s, background .2s; }
.barra button:hover { transform: scale(1.12); }
.barra button.off { background: var(--co); border-color: var(--co); }
.barra button.off::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 44%, #fff 48%, #fff 52%, transparent 56%); }
.barra button.on { background: var(--ci); border-color: var(--ci); color: #06281f; }
.barra button.sair { background: var(--co); border-color: var(--co); }
#av { text-align: center; color: var(--mu); min-height: 3.2em; margin: 8px 0 0; }
.saiu { display: none; text-align: center; padding: 26px 10px 4px; }
.saiu.on { display: block; }
.saiu h3 { font-size: 1.3rem; margin: 12px 0 4px; }
.saiu p { color: var(--mu); margin: 0 0 18px; }
.fm2 { width: 130px; margin: 0 auto; }
.call.saindo .tela, .call.saindo .abas, .call.saindo .gente, .call.saindo .barra, .call.saindo #av { display: none; }

/* recursos, portas, passos */
.gr { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 34px; }
.it { padding: 22px; border-radius: 22px; background: var(--gl); border: 1px solid var(--bd); backdrop-filter: blur(12px); transition: transform .25s; }
.it b { font-size: 1.8rem; }
.it h3 { font-size: 1.15rem; margin: 8px 0 6px; }
.it p { margin: 0; color: var(--mu); font-size: .93rem; }
.portas { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; }
.pt { padding: 32px; border-radius: 34px 14px 34px 14px; display: flex; flex-direction: column; gap: 10px; transition: transform .3s; }
.pt:hover { transform: translateY(-6px); }
.pt p { margin: 0; }
.pt h3 { font-size: 1.9rem; }
.pa { background: linear-gradient(135deg, var(--sol), #ff8a5c); color: #2a0f3a; }
.pw { background: var(--gl); border: 1px solid var(--bd); backdrop-filter: blur(12px); }
.pw p { color: var(--mu); }
.pt strong { margin-top: auto; padding-top: 10px; }
.passos { list-style: none; padding: 0; margin: 34px auto 0; max-width: 660px; display: grid; gap: 14px; }
.passos li { display: flex; gap: 16px; padding: 20px; border-radius: 22px; background: var(--gl); border: 1px solid var(--bd); backdrop-filter: blur(12px); }
.passos li > span { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--sol); color: #2a0f3a; font: 800 1.1rem var(--h); }
.passos li > div { min-width: 0; }
.passos h3 { font-size: 1.1rem; }
.passos p { margin: 4px 0 0; color: var(--mu); font-size: .94rem; }
.sm { margin-top: 12px; background: #1d5db0; border-radius: 6px; padding: 14px; font-size: .82rem; max-width: 380px; color: #fff; }
.sm div { text-align: right; margin-top: 8px; }
.sm span { display: inline-block; padding: 3px 12px; background: #2d6fc4; margin-left: 6px; }
.sm .on { background: #fff; color: #111; animation: pulso 2s infinite; }
details { max-width: 660px; margin: 12px auto 0; border-radius: 18px; background: var(--gl); border: 1px solid var(--bd); backdrop-filter: blur(12px); padding: 16px 20px; }
summary { font-weight: 800; cursor: pointer; }
details p { color: var(--mu); margin: 10px 0 0; }
.final { text-align: center; padding: 90px 0 100px; }
.final .fm { width: 190px; margin: 0 auto 10px; animation: voa 4s ease-in-out infinite; }
.final .cta { justify-content: center; }
.rodape { text-align: center; color: var(--mu); font-size: .9rem; padding: 26px 22px 40px; background: linear-gradient(transparent, rgba(8, 4, 24, .8)); }

/* confete ao baixar */
.confete { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.confete i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 3px; animation: cai 1.6s ease-in forwards; }

/* Açaízinho (desenho em /site/mascote.svg; as classes m-* vêm do SVG) */
[data-mascote] svg { display: block; width: 100%; height: auto; overflow: visible; }
[data-mascote] .m-olhos-abertos { animation: pisca 4.6s infinite; transform-origin: 120px 150px; }
[data-mascote] .m-mao-aceno { animation: aceno 1.1s ease-in-out infinite; transform-origin: 172px 172px; }
[data-mascote] .m-corpo, [data-mascote] .m-fone, [data-mascote] .m-rosto, [data-mascote] .m-braco-aceno { animation: respira 3.2s ease-in-out infinite; transform-origin: 120px 250px; }
[data-mascote] .m-falando .m-boca-aberta { animation: falar .32s ease-in-out infinite alternate; transform-origin: 120px 172px; }
[data-mascote] .m-zzz { animation: zzz 2.4s ease-in-out infinite; }
[data-mascote] .m-lagrima { animation: lagrima 1.8s ease-in infinite; }
.m-pupila { transition: transform .08s linear; }

@keyframes voa { 50% { transform: translateY(-14px); } }
@keyframes pulso { 0% { box-shadow: 0 10px 34px rgba(255, 170, 80, .4), 0 0 0 0 rgba(255, 200, 87, .55); } 70%, 100% { box-shadow: 0 10px 34px rgba(255, 170, 80, .4), 0 0 0 22px rgba(255, 200, 87, 0); } }
@keyframes brilho { 40%, 100% { transform: translateX(130%); } }
@keyframes fluxo { to { background-position: 100% 0; } }
@keyframes gira { to { transform: rotate(1turn); } }
@keyframes tw { to { filter: brightness(.55); } }
@keyframes pop { from { transform: scale(0); } }
@keyframes mq { to { transform: translateX(-50%); } }
@keyframes nave { from { left: -8%; } to { left: 108%; } }
@keyframes pula { 0%, 100% { transform: none; } 30% { transform: translateY(-26px) rotate(-4deg); } 60% { transform: translateY(0) scale(1.04, .96); } }
@keyframes cai { to { transform: translateY(110vh) rotate(720deg); } }
@keyframes pisca { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes aceno { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-16deg); } }
@keyframes respira { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes falar { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes zzz { 0% { transform: translate(0, 4px); opacity: .2; } 50% { opacity: 1; } 100% { transform: translate(6px, -8px); opacity: .2; } }
@keyframes lagrima { 0% { transform: translateY(0); opacity: .95; } 100% { transform: translateY(26px); opacity: 0; } }

@media (max-width: 820px) {
  .hero, .duo, .portas { grid-template-columns: 1fr; }
  .duo.inv > :first-child { order: 0; }
  .top nav { display: none; }
  .top .btn { margin-left: auto; }
  .palco { min-height: 350px; }
  .fala { left: 0; }
}
@media (max-width: 560px) {
  .gente { grid-template-columns: repeat(2, 1fr); }
  .tela { aspect-ratio: 4 / 3; }
  .janela { width: 86%; }
  .cam-bolha { width: 72px; }
  .cam-bolha [data-mascote] { width: 66px; margin-top: 14px; }
  .bl { font-size: .78rem; padding: 6px 11px; }
  .b2 { right: 0; } .b4 { right: 0; }
  .xl { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}