/* Molde la-campanhas (clone da página Campanhas e desafios do Link Affiliattes, capturada em 05/11/2026), escopado em .mx-la-campanhas e vestido por papel de cor (var(--m-*)) com ~/.jarvis/marcio-safirion/clone/bin/vestir-css.mjs; acabamento do molde no fim. As cores do AdvoGestão moram em src/landing/rotas/RecessoForense.css. Não editar à mão: refazer pelo vestir-css. */ /* molde escopado em .mx-la-campanhas por escopar-css.mjs — não editar à mão o que veio da origem; acabamento vai em molde-acabamento.css */ :where(.mx-la-campanhas, .mx-la-campanhas *:not(svg *), .mx-la-campanhas ::before, .mx-la-campanhas ::after) { all: revert; } .mx-la-campanhas { --mx-rem: 16px; font-size: var(--mx-rem); display: block; position: relative; isolation: isolate; } .mx-la-campanhas *, .mx-la-campanhas ::before, .mx-la-campanhas ::after { box-sizing: border-box; } /* Link Affiliattes — LP de recrutamento de parceiros. Mobile-first; o celular copia a composição do computador. */ .mx-la-campanhas{ --bg:var(--m-fundo);--bg2:var(--m-fundo-2);--card:var(--m-superficie);--card2:var(--m-superficie-2); --line:color-mix(in srgb, var(--m-texto) 9%, transparent);--line2:color-mix(in srgb, var(--m-texto) 16%, transparent); --tx:var(--m-texto);--mut:var(--m-texto-suave);--dim:var(--m-texto-fraco); --red:var(--m-primaria);--red-d:color-mix(in srgb, var(--m-primaria), var(--m-fundo) 25%);--red-hi:var(--m-primaria-2);--ok:var(--m-alta); --r:24px; --ease:cubic-bezier(.22,1,.36,1); --shell:1200px; --pad:clamp(16px,4vw,32px); --sec:clamp(44px,6.5vw,96px); --f-h1:clamp(calc(2.4 * var(--mx-rem)),calc(1.2 * var(--mx-rem)) + 6vw,calc(5.6 * var(--mx-rem))); --f-h2:clamp(calc(1.85 * var(--mx-rem)),calc(1.2 * var(--mx-rem)) + 3vw,calc(4 * var(--mx-rem))); } .mx-la-campanhas *,.mx-la-campanhas *::before,.mx-la-campanhas *::after{box-sizing:border-box} .mx-la-campanhas{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px} .mx-la-campanhas{position:relative;margin:0;background:var(--bg);color:var(--tx);font:400 calc(1 * var(--mx-rem))/1.55 var(--m-f-corpo);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} /* um fundo só, de ponta a ponta: preto puro (o mesmo do planeta da hero) com um grão que nunca para numa borda de seção. Fica na camada de baixo da raiz (z-index -1): por cima do fundo e dos brilhos de encontro (.enc), por baixo de todo conteúdo. Nenhuma seção pinta fundo próprio de ponta a ponta (18/10/2026: "não pode ser cinza o fundo das páginas"). */ .mx-la-campanhas img,.mx-la-campanhas svg,.mx-la-campanhas canvas{display:block;max-width:100%} .mx-la-campanhas a{color:inherit;text-decoration:none} .mx-la-campanhas button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} .mx-la-campanhas h1,.mx-la-campanhas h2,.mx-la-campanhas h3,.mx-la-campanhas h4,.mx-la-campanhas p,.mx-la-campanhas ul,.mx-la-campanhas ol{margin:0;padding:0} .mx-la-campanhas ul,.mx-la-campanhas ol{list-style:none} .mx-la-campanhas em{font-style:normal} .mx-la-campanhas :focus-visible{outline:2px solid var(--red-hi);outline-offset:3px;border-radius:8px} .mx-la-campanhas .ic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .mx-la-campanhas .skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--m-texto);color:var(--m-fundo);padding:10px 14px;border-radius:10px} .mx-la-campanhas .skip:focus{left:8px} .mx-la-campanhas .wrap{width:min(100% - var(--pad)*2,var(--shell));margin-inline:auto} /* ---------- botões (luz = fundo animado, nunca caixa) ---------- */ .mx-la-campanhas .btn{position:relative;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:46px;padding:0 1.35em;border-radius:999px;font-weight:600;font-size:calc(1 * var(--mx-rem));letter-spacing:-.01em;color:var(--m-sobre-primaria); background:linear-gradient(105deg,transparent 38%,color-mix(in srgb, var(--m-texto) 30%, transparent) 50%,transparent 62%) 160% 0/260% 100% no-repeat,linear-gradient(180deg,var(--m-primaria),var(--red) 55%,var(--red-d)); box-shadow:0 0 0 1px color-mix(in srgb, var(--m-texto) 12%, transparent) inset,0 10px 24px -10px rgba(0,0,0,.7); transition:transform .18s var(--ease),background-position .7s var(--ease),box-shadow .3s} .mx-la-campanhas .btn:active{transform:scale(.98)} .mx-la-campanhas .btn .ic{transition:transform .25s var(--ease)} .mx-la-campanhas .btn-sm{min-height:44px;padding:0 1.1em;font-size:calc(.95 * var(--mx-rem))} .mx-la-campanhas .btn-lg{min-height:56px;padding:0 1.7em;font-size:calc(1.05 * var(--mx-rem))} .mx-la-campanhas .btn-ghost{background:color-mix(in srgb, var(--m-texto) 6%, transparent);box-shadow:0 0 0 1px var(--line2) inset} .mx-la-campanhas .link-more{display:inline-flex;align-items:center;gap:.5em;min-height:44px;font-weight:600;color:var(--tx)} .mx-la-campanhas .link-more .ic{transition:transform .25s var(--ease);color:var(--red-hi)} @media (hover:hover) and (pointer:fine){ .mx-la-campanhas .btn:hover{background-position:-60% 0,0 0;box-shadow:0 0 0 1px color-mix(in srgb, var(--m-texto) 18%, transparent) inset,0 14px 30px -10px rgba(0,0,0,.8)} .mx-la-campanhas .btn:hover .ic,.mx-la-campanhas .link-more:hover .ic{transform:translateX(4px)} .mx-la-campanhas .btn-ghost:hover{background-color:color-mix(in srgb, var(--m-texto) 10%, transparent)} } /* ---------- botão neon: o "Abrir conta" da Kesef/BlackCat no vermelho da marca (27/10/2026) ---------- Corpo d93224 → c8271b → a41d14 (matiz 4,2°, a de --red): atrás do texto o branco dá 5,36:1 parado e 4,72:1 no pior quadro da luz que passa (fundo animado, rgb 255 214 205 a 11%), medido em 390 e 1440 px na hero e na barra (27/10/2026); o topo mais claro do degradê fica acima da linha do texto. O hover cresce o brilho e não clareia. Aro de luz (27/10/2026, pedido do Victor: o "brilho que vai passando devagarzinho" do selo "Cadastro de parceiros" nos botões de criar conta): o cônico do .selo, girando a cada 4 s, corre a borda de 1px de todo botão de cadastro; o vidro (entrar) fica sem, para o olho ir ao cadastro. Sobre a borda rosada do neon o núcleo de um ponto só sumia (no selo a borda é escura): aqui o branco ocupa 4% da volta e a cauda começa em 50%, medido ampliado em 3x (27/10/2026). Camadas, de cima para baixo: a luz que varre, o corpo (só por dentro da borda), o aro (na borda) e a borda de base, 28% de branco já composto sobre o corpo. Com "menos movimento" o aro fica parado. */ .mx-la-campanhas .btn-neon{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:5px 5px 5px 18px;border:1px solid transparent;border-radius:100px;font-size:15px;font-weight:500;line-height:1;letter-spacing:-.01em;white-space:nowrap;color:var(--m-sobre-primaria); background-color:var(--red); background-image:linear-gradient(105deg,transparent 0%,transparent 40%,color-mix(in srgb, color-mix(in srgb, var(--m-destaque), var(--m-texto) 60%) 11%, transparent) 50%,transparent 60%,transparent 100%),linear-gradient(180deg,var(--m-primaria) 0%,color-mix(in srgb, var(--m-primaria), var(--m-fundo) 8%) 45%,color-mix(in srgb, var(--m-primaria), var(--m-fundo) 25%) 100%),conic-gradient(from var(--sa),transparent 0 50%,color-mix(in srgb, color-mix(in srgb, var(--m-destaque), var(--m-texto) 60%) 50%, transparent) 64%,color-mix(in srgb, color-mix(in srgb, var(--m-destaque), var(--m-texto) 75%) 95%, transparent) 73%,var(--m-texto) 76% 80%,color-mix(in srgb, color-mix(in srgb, var(--m-destaque), var(--m-texto) 75%) 95%, transparent) 83%,transparent 95%),linear-gradient(180deg,var(--m-primaria-2) 0%,color-mix(in srgb, var(--m-primaria-2), var(--m-fundo) 6%) 45%,color-mix(in srgb, var(--m-primaria-2), var(--m-fundo) 18%) 100%); background-origin:border-box;background-clip:border-box,padding-box,border-box,border-box;background-repeat:no-repeat;background-size:250% 100%,100% 100%,100% 100%,100% 100%;background-position:130% 0,0 0,0 0,0 0; box-shadow:0 0 75px color-mix(in srgb, var(--m-primaria-2) 20%, transparent),0 0 42px color-mix(in srgb, var(--m-primaria-2) 22%, transparent),0 0 20px color-mix(in srgb, var(--m-primaria-2) 28%, transparent),0 0 6px color-mix(in srgb, var(--m-primaria-2) 45%, transparent),0 2px 8px rgba(0,0,0,.35),inset 0 1px 0 color-mix(in srgb, var(--m-texto) 70%, transparent),inset 0 0 6px color-mix(in srgb, color-mix(in srgb, var(--m-destaque), var(--m-texto) 60%) 42%, transparent),inset 0 -2px 3px color-mix(in srgb, color-mix(in srgb, var(--m-primaria), black 80%) 28%, transparent); animation:mx-la-campanhas-la-luz 5.5s cubic-bezier(.45,0,.25,1) 1.6s infinite,mx-la-campanhas-selo 4s linear infinite; transition:transform .18s var(--ease),box-shadow .3s ease} /* fora da tela (la.js): a luz e o aro param */ .mx-la-campanhas .btn-neon.pausa{animation-play-state:paused} .mx-la-campanhas .btn-neon>span:first-child{color:inherit} .mx-la-campanhas .cta-seta{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb, var(--m-primaria), var(--m-fundo) 85%);color:var(--red-hi)} .mx-la-campanhas .cta-seta svg{width:18px;height:18px} /* fora da hero (barra): círculo de 32px = 44px de altura */ .mx-la-campanhas .btn-neon-sm{font-size:14px;gap:8px;padding:5px 5px 5px 16px} .mx-la-campanhas .btn-neon-sm .cta-seta{width:32px;height:32px} .mx-la-campanhas .btn-neon-sm .cta-seta svg{width:17px;height:17px} @keyframes mx-la-campanhas-la-luz{0%{background-position:130% 0,0 0,0 0,0 0}38%,100%{background-position:-30% 0,0 0,0 0,0 0}} .mx-la-campanhas .btn-neon:focus-visible{outline:2px solid var(--red-hi);outline-offset:3px;border-radius:100px} @media (hover:hover) and (pointer:fine){ .mx-la-campanhas .btn-neon:hover{transform:translateY(-1px);box-shadow:0 0 90px color-mix(in srgb, var(--m-primaria-2) 28%, transparent),0 0 50px color-mix(in srgb, var(--m-primaria-2) 30%, transparent),0 0 24px color-mix(in srgb, var(--m-primaria-2) 36%, transparent),0 0 8px color-mix(in srgb, var(--m-primaria-2) 55%, transparent),0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 color-mix(in srgb, var(--m-texto) 70%, transparent),inset 0 0 6px color-mix(in srgb, color-mix(in srgb, var(--m-destaque), var(--m-texto) 60%) 42%, transparent),inset 0 -2px 3px color-mix(in srgb, color-mix(in srgb, var(--m-primaria), black 80%) 28%, transparent)} } .mx-la-campanhas .btn-neon:active{transform:scale(.98)} @media (prefers-reduced-motion:reduce){ /* luz parada fora do botão e aro parado; sem deslocamento no hover */ .mx-la-campanhas .btn-neon{animation:none;background-position:130% 0,0 0,0 0,0 0} .mx-la-campanhas .btn-neon:hover{transform:none} } /* ---------- navbar (cápsula flutuante) ---------- */ .mx-la-campanhas .nav-wrap{position:fixed;inset:12px 0 auto;z-index:50;display:flex;flex-direction:column;align-items:center;gap:8px;padding-inline:clamp(12px,2.4vw,40px);pointer-events:none} .mx-la-campanhas .nav{pointer-events:auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:8px 10px 8px 18px;border-radius:999px;background:transparent;box-shadow:none;transition:background-color .3s,box-shadow .3s} .mx-la-campanhas .nav-wrap.scrolled .nav{width:min(100%,1120px);background:color-mix(in srgb, var(--m-fundo-2) 72%, transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 0 0 1px var(--line) inset,0 12px 40px -12px rgba(0,0,0,.7)} .mx-la-campanhas .nav-logo{display:inline-flex} .mx-la-campanhas .nav-logo img{height:auto;width:clamp(112px,34vw,148px)} .mx-la-campanhas .nav-links{display:none} .mx-la-campanhas .nav-actions{display:flex;align-items:center;gap:8px} /* "Entrar" em vidro, o secundário da hero da Kesef/BlackCat (27/10/2026): pílula de raio 100px, degradê lateral a 7%, borda a 14% e ícone de entrar; some abaixo de 900px e na faixa do menu do celular, onde o "Criar conta" ao lado leva à mesma tela de acesso */ .mx-la-campanhas .nav-login{display:none;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px 0 14px;border-radius:100px;border:1px solid color-mix(in srgb,currentColor 14%,transparent);background:linear-gradient(90deg,color-mix(in srgb,currentColor 7%,transparent) 0%,transparent 50.48%,color-mix(in srgb,currentColor 7%,transparent) 100%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--tx);font-size:14px;font-weight:500;line-height:1;letter-spacing:-.01em;white-space:nowrap;transition:transform .18s var(--ease),border-color .25s ease,background-color .25s ease,box-shadow .3s ease} .mx-la-campanhas .nav-login-ic{flex:none;width:17px;height:17px;color:color-mix(in srgb,var(--red-hi) 62%,currentColor)} .mx-la-campanhas .nav-login:focus-visible{outline:2px solid var(--red-hi);outline-offset:3px;border-radius:100px} .mx-la-campanhas .nav-burger{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:color-mix(in srgb, var(--m-texto) 7%, transparent);box-shadow:0 0 0 1px var(--line) inset} .mx-la-campanhas .nav-burger .ic{width:22px;height:22px} .mx-la-campanhas .nav-sheet{pointer-events:auto;width:min(100%,1120px);border-radius:24px;padding:10px;background:color-mix(in srgb, var(--m-fundo-2) 94%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--line) inset;display:grid;grid-template-columns:1fr 1fr;gap:6px} .mx-la-campanhas .nav-sheet[hidden]{display:none} .mx-la-campanhas .nav-sheet a{display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:14px;font-weight:600;background:color-mix(in srgb, var(--m-texto) 4%, transparent)} /* celular estreito (27/10/2026, pedido do Victor: logo maior): em 320px o "Criar conta" e o menu (186px) espremiam o logo a 70px. Menos respiro na cápsula, entre as ações e dentro do neon devolve a largura ao logo; o toque continua com 44px. O logo da barra pede 148px e cede aos botões o que faltar (min-width:0 aqui, max-width:100% na imagem): medido 104px em 320, 138 em 360 e 148 a partir de 370. O do rodapé fica com a regra de cima */ @media (max-width:429px){ .mx-la-campanhas .nav-wrap{padding-inline:8px} .mx-la-campanhas .nav{gap:10px;padding:8px 6px 8px 12px} .mx-la-campanhas .nav .nav-logo{min-width:0} .mx-la-campanhas .nav .nav-logo img{width:148px} .mx-la-campanhas .nav-actions{gap:6px} .mx-la-campanhas .nav-actions .btn-neon-sm{gap:6px;padding-left:12px} } @media (max-width:339px){.mx-la-campanhas .nav-actions .btn-neon-sm{font-size:13px}} @media (min-width:900px){ .mx-la-campanhas .nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)} .mx-la-campanhas .nav-wrap.scrolled .nav{width:min(100% - 80px,1120px)} .mx-la-campanhas .nav-actions{justify-self:end} .mx-la-campanhas .nav-links{display:flex;gap:4px} .mx-la-campanhas .nav-links a{display:flex;align-items:center;min-height:44px;padding:0 clamp(8px,1.1vw,14px);border-radius:999px;color:var(--mut);font-weight:500;transition:color .2s,background .2s} .mx-la-campanhas .nav-login{display:inline-flex} .mx-la-campanhas .nav-burger,.mx-la-campanhas .nav-sheet{display:none!important} } @media (hover:hover) and (pointer:fine){ .mx-la-campanhas .nav-links a:hover{color:var(--tx);background:color-mix(in srgb, var(--m-texto) 6%, transparent)} .mx-la-campanhas .nav-login:hover{transform:translateY(-1px);border-color:color-mix(in srgb,currentColor 26%,transparent);background-color:color-mix(in srgb,currentColor 5%,transparent);box-shadow:0 0 24px color-mix(in srgb, var(--m-primaria-2) 12%, transparent)} } .mx-la-campanhas .nav-login:active{transform:scale(.98)} @media (prefers-reduced-motion:reduce){.mx-la-campanhas .nav-login:hover{transform:none}} /* barra estreita (27/10/2026): com o "Entrar" em vidro e o "Criar conta" neon (240px juntos), as abas da home só cabem CENTRADAS a partir de 1020px, também na cápsula rolada (que tira 80px). Até 1019 vale o menu do celular; de 1020 a 1139 as abas e o "Entrar" encolhem um pouco (folga medida >= 12px). As páginas-guia têm rótulos mais largos: faixas próprias no lp.css */ @media (min-width:900px) and (max-width:1019px){ .mx-la-campanhas .nav{display:flex} .mx-la-campanhas .nav-links,.mx-la-campanhas .nav-login{display:none} .mx-la-campanhas .nav-burger{display:grid!important} .mx-la-campanhas .nav-sheet:not([hidden]){display:grid!important} } @media (min-width:1020px) and (max-width:1139px){ .mx-la-campanhas .nav-links{gap:2px} .mx-la-campanhas .nav-links a{padding-inline:6px;font-size:calc(.9375 * var(--mx-rem))} .mx-la-campanhas .nav-login{padding:0 12px 0 10px;gap:6px} .mx-la-campanhas .nav-actions{gap:6px} } /* ---------- hero (cobre a tela inteira; composição da referência: selo, título, apoio, 2 botões e o horizonte do planeta) ---------- */ @property --sa{syntax:"";inherits:false;initial-value:0deg} .mx-la-campanhas .hero{--gw:min(100vw,1600px,max(min(100vw,1600px) * .62,(100vh - 540px) * 4.2));--gf:clamp(0px,(100vw - var(--gw)) * .8,12%);position:relative;isolation:isolate;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:112px 0 calc(var(--gw) * .43);overflow:hidden;contain:paint;background:radial-gradient(70% 46% at 50% 0,color-mix(in srgb, var(--m-primaria) 5%, transparent) 0,transparent 72%)} .mx-la-campanhas .sky{position:absolute;inset:0;z-index:-1;overflow:hidden} /* o Lynk gigante atrás do horizonte (camadas da mesma imagem 1672x941; posições em % dela) */ @supports (height:1svh){.mx-la-campanhas .hero{--gw:min(100vw,1600px,max(min(100vw,1600px) * .62,(100svh - 540px) * 4.2))}} /* no celular ele passa da tela: o corte leva o braço, os dedos ficam no planeta */ @media (max-width:599px){.mx-la-campanhas .hero{--gw:128vw}} /* a base do gigante passa um pouco da hero: o esmaecer de baixo acontece dentro dela */ .mx-la-campanhas .gig{position:absolute;left:50%;bottom:calc(var(--gw) * -.06);width:var(--gw);margin-left:calc(var(--gw) * -.5);aspect-ratio:1672/941;pointer-events:none;-webkit-mask:linear-gradient(#000 72%,#0000 89%);mask:linear-gradient(#000 72%,#0000 89%)} .mx-la-campanhas .gig img{display:block;max-width:none} /* quando ele fica mais estreito que a tela, corpo e planeta somem nas laterais; as mãos nunca */ .mx-la-campanhas .gig-c,.mx-la-campanhas .gig-planeta{-webkit-mask:linear-gradient(90deg,#0000,#000 var(--gf),#000 calc(100% - var(--gf)),#0000);mask:linear-gradient(90deg,#0000,#000 var(--gf),#000 calc(100% - var(--gf)),#0000)} .mx-la-campanhas .gig-c{position:absolute;left:0;top:0;width:100%;height:76.514%;animation:mx-la-campanhas-gig-sobe 2.6s var(--ease) .3s both} .mx-la-campanhas .gig-corpo{width:100%;height:100%;-webkit-mask:linear-gradient(#0000 13%,#000 33%);mask:linear-gradient(#0000 13%,#000 33%)} .mx-la-campanhas .gig-planeta{position:absolute;left:0;top:53.135%;width:100%;height:46.865%;animation:mx-la-campanhas-nasce 1.6s var(--ease) .1s both} .mx-la-campanhas .gig-m{position:absolute;inset:0} .mx-la-campanhas .gig-mao{position:absolute;top:45.696%;height:auto;animation:mx-la-campanhas-gig-pousa .9s ease-out 2.3s both} .mx-la-campanhas .gig-mao.e{left:0;width:24.522%} .mx-la-campanhas .gig-mao.d{left:75.957%;width:24.043%} /* viseira: um reflexo que segue o cursor e uma luz que atravessa de tempos em tempos */ .mx-la-campanhas .gig-vis{position:absolute;left:35.71%;top:28.47%;width:27.03%;height:38.89%;border-radius:48%/50%;overflow:hidden;mix-blend-mode:screen} .mx-la-campanhas .gig-luz{position:absolute;left:22%;top:4%;width:56%;height:56%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb, color-mix(in srgb, var(--m-destaque), var(--m-texto) 75%) 12%, transparent),rgba(255,236,232,0));transition:transform .7s var(--ease)} .mx-la-campanhas .gig-varre{position:absolute;inset:-20% -60%;background:linear-gradient(100deg,transparent 43%,color-mix(in srgb, color-mix(in srgb, var(--m-destaque), var(--m-texto) 70%) 16%, transparent) 50%,transparent 57%);transform:translateX(-70%);animation:mx-la-campanhas-gig-varre 9s ease-in-out 3.2s 3} /* os elos dos fones acendem quando o sinal sai de uma mão e chega na outra */ .mx-la-campanhas .gig-eco{position:absolute;width:7%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;background:radial-gradient(closest-side,color-mix(in srgb, color-mix(in srgb, var(--m-destaque), var(--m-texto) 75%) 50%, transparent),rgba(255,238,232,0));mix-blend-mode:screen;opacity:0;animation:mx-la-campanhas-gig-eco 7s ease-in-out 3s infinite} .mx-la-campanhas .gig-eco.e{left:29.9%;top:52.1%} .mx-la-campanhas .gig-eco.d{left:69.3%;top:53.5%;animation-name:mx-la-campanhas-gig-eco-d} /* o sinal corre o horizonte de uma mão à outra: gira em volta do centro do planeta (só transform) */ .mx-la-campanhas .gig-sinal{position:absolute;left:49.545%;top:301.71%;width:0;height:0;opacity:0;transform:rotate(-10.5deg);animation:mx-la-campanhas-gig-sinal 7s cubic-bezier(.45,0,.25,1) 3s infinite} .mx-la-campanhas .gig-sinal i{position:absolute;left:calc(var(--gw) * -.09);bottom:calc(var(--gw) * 1.3832 - 2px);width:calc(var(--gw) * .09);height:3px;border-radius:3px;background:linear-gradient(90deg,rgba(255,59,48,0),color-mix(in srgb, var(--m-destaque) 80%, transparent) 70%,color-mix(in srgb, var(--m-destaque), var(--m-texto) 85%))} @keyframes mx-la-campanhas-gig-sobe{from{translate:0 36%;opacity:0}30%{opacity:1}} @keyframes mx-la-campanhas-gig-pousa{from{opacity:0}} @keyframes mx-la-campanhas-gig-varre{0%{transform:translateX(-70%)}22%,100%{transform:translateX(70%)}} @keyframes mx-la-campanhas-gig-eco{0%{opacity:0}5%{opacity:.9}18%,100%{opacity:0}} @keyframes mx-la-campanhas-gig-eco-d{0%,52%{opacity:0}60%{opacity:.9}75%,100%{opacity:0}} @keyframes mx-la-campanhas-gig-sinal{0%{opacity:0;transform:rotate(-10.5deg)}6%,55%{opacity:1}60%{opacity:0;transform:rotate(10.6deg)}100%{opacity:0;transform:rotate(10.6deg)}} /* ao rolar, ele solta o planeta e afunda de volta atrás do horizonte */ @keyframes mx-la-campanhas-gig-afunda{to{transform:translateY(46%)}} @keyframes mx-la-campanhas-gig-solta{to{opacity:0}} @media (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){ .mx-la-campanhas .gig-c{animation:mx-la-campanhas-gig-sobe 2.6s var(--ease) .3s both,mx-la-campanhas-gig-afunda linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 80vh} .mx-la-campanhas .gig-m{animation:mx-la-campanhas-gig-solta linear both;animation-timeline:scroll(root);animation-range:0 38vh} .mx-la-campanhas .hero.off .gig-c,.mx-la-campanhas .hero.off .gig-m{animation-play-state:running!important} }} /* o horizonte do planeta é a linha que separa os botões das IAs: a borda acesa fica no topo do bloco .ask */ .mx-la-campanhas .globe{position:absolute;left:0;top:0;width:100%;height:100%;-webkit-mask:linear-gradient(#0000 10%,#000 13%,#0000 27%);mask:linear-gradient(#0000 10%,#000 13%,#0000 27%);pointer-events:none} .mx-la-campanhas .globe img{width:100%;height:100%;object-fit:contain;animation:mx-la-campanhas-nasce 1.6s var(--ease) .25s both,mx-la-campanhas-respira 7s ease-in-out 1.9s infinite alternate} @keyframes mx-la-campanhas-nasce{from{opacity:0;transform:translateY(6%)}} @keyframes mx-la-campanhas-respira{to{opacity:.78}} .mx-la-campanhas .hero-c{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(18px,2.2vw,28px)} .mx-la-campanhas .selo{display:inline-flex;padding:1px;border-radius:999px;background:conic-gradient(from var(--sa),transparent 0 62%,color-mix(in srgb, var(--m-primaria-2) 90%, transparent) 74%,var(--m-texto) 78%,color-mix(in srgb, var(--m-primaria-2) 90%, transparent) 82%,transparent 94%),color-mix(in srgb, var(--m-texto) 10%, transparent);animation:mx-la-campanhas-selo 4s linear infinite} @keyframes mx-la-campanhas-selo{to{--sa:360deg}} .mx-la-campanhas .selo-in{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 6px 0 12px;border-radius:999px;background:linear-gradient(90deg,var(--m-superficie),var(--m-fundo-2));font-size:calc(.9 * var(--mx-rem));font-weight:500;color:var(--m-texto)} .mx-la-campanhas .selo-ic{width:18px;height:18px;color:var(--red-hi);animation:mx-la-campanhas-gira 9s linear infinite} @keyframes mx-la-campanhas-gira{to{transform:rotate(360deg)}} .mx-la-campanhas .selo b{font-size:max(12px,calc(.74 * var(--mx-rem)));font-weight:600;letter-spacing:.06em;padding:6px 10px;border-radius:999px;background:color-mix(in srgb, var(--m-primaria-2) 16%, transparent);color:var(--m-destaque)} .mx-la-campanhas .rw{font-size:var(--f-h1);line-height:1;font-weight:500;letter-spacing:-.045em} .mx-la-campanhas .rw .line{display:block} .mx-la-campanhas .hero .rw{font-size:clamp(calc(2.5 * var(--mx-rem)),calc(1.6 * var(--mx-rem)) + 3.2vw,calc(3.9 * var(--mx-rem)));line-height:1.12;letter-spacing:-.03em;color:var(--m-texto)} .mx-la-campanhas .acc{color:var(--red-hi)} .mx-la-campanhas .lede{max-width:36em;font-size:clamp(calc(1.02 * var(--mx-rem)),calc(.95 * var(--mx-rem)) + .4vw,calc(1.25 * var(--mx-rem)));color:var(--m-texto-suave);line-height:1.5} .mx-la-campanhas .cta-row{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap} /* hero das guias (27/10/2026): o mesmo par da home, neon de cadastro + vidro, no tamanho deles (sem esticar), lado a lado e centralizado em toda largura; rótulo curto (.sm) abaixo de 600px. Os ajustes de celular ficam junto dos da .hero-ctas */ .mx-la-campanhas .hero-cta{justify-content:center;flex-wrap:nowrap;gap:10px;width:100%;margin-top:4px} .mx-la-campanhas .hero-cta>a{flex:0 0 auto;min-width:0} .mx-la-campanhas .hero-cta .sm{display:inline}.mx-la-campanhas .hero-cta .lg{display:none} @media (min-width:600px){ .mx-la-campanhas .hero-cta{gap:16px} .mx-la-campanhas .hero-cta .sm{display:none}.mx-la-campanhas .hero-cta .lg{display:inline} } /* ---------- hero no molde da Kesef/BlackCat (27/10/2026): título em degradê, apoio, neon + vidro e entrada escalonada ---------- O título sai do .rw: o la.js parte o .rw em palavras com transform e opacity, e isso apaga o background-clip:text. O selo fica como estava (mesmo espaço até o título). Contrastes sobre o preto da hero: pontas do título #8c7774 5,01 (centro #fff 21) · apoio #ab9c9a 7,95 · branco no neon 5,36 parado e 4,72 com a luz passando · seta #ff5448 no círculo #150403 6,30. */ .mx-la-campanhas .hero-bc{gap:0} .mx-la-campanhas .hero-bc .selo{margin-bottom:clamp(18px,2.2vw,28px)} .mx-la-campanhas .hero-titulo{font-size:clamp(34px,calc(27.8px + 2.1vw),64px);line-height:1.08;font-weight:500;letter-spacing:-.02em;text-wrap:balance} .mx-la-campanhas .hero-titulo .line{display:block} /* o degradê numa caixa do tamanho do texto (inline-block): as pontas escuras caem nas pontas das letras */ .mx-la-campanhas .titulo-luz{display:inline-block;max-width:100%;background-image:linear-gradient(90deg,var(--m-texto-suave) 0%,var(--m-texto) 50%,var(--m-texto-suave) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} @supports not ((-webkit-background-clip:text) or (background-clip:text)){.mx-la-campanhas .titulo-luz{background:none;color:var(--m-texto);-webkit-text-fill-color:currentColor}} .mx-la-campanhas .hero-texto{max-width:min(100%,620px);margin-top:22px;font-size:17px;font-weight:500;line-height:1.6;letter-spacing:-.02em;color:var(--m-texto-suave);text-wrap:balance} /* par de botões: lado a lado e centralizado em toda largura */ .mx-la-campanhas .hero-ctas{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:10px;max-width:100%;margin-top:32px} .mx-la-campanhas .hero-ctas>a{flex:0 0 auto} .mx-la-campanhas .hero-ctas .sm{display:inline}.mx-la-campanhas .hero-ctas .lg{display:none} /* secundário: o vidro da referência, com o ícone na frente */ .mx-la-campanhas .btn-vidro{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 14px;border:1px solid color-mix(in srgb, var(--m-texto) 10%, transparent);border-radius:100px;background:linear-gradient(90deg,color-mix(in srgb, var(--m-texto) 6%, transparent) 0%,rgba(255,255,255,0) 50.48%,color-mix(in srgb, var(--m-texto) 6%, transparent) 100%);font-size:15px;font-weight:500;line-height:1;letter-spacing:-.01em;white-space:nowrap;color:var(--tx);transition:transform .18s var(--ease),border-color .25s ease,background-color .25s ease,box-shadow .3s ease} .mx-la-campanhas .btn-vidro .ic{width:18px;height:18px;color:var(--red-hi)} /* âncora na mesma página ("Ver como sacar"): a seta do vidro aponta para baixo */ .mx-la-campanhas .btn-vidro .ic-desce{rotate:90deg} .mx-la-campanhas .btn-vidro:focus-visible{outline:2px solid var(--red-hi);outline-offset:3px;border-radius:100px} @media (hover:hover) and (pointer:fine){.mx-la-campanhas .btn-vidro:hover{transform:translateY(-1px);border-color:color-mix(in srgb, var(--m-texto) 22%, transparent);background-color:color-mix(in srgb, var(--m-texto) 4%, transparent);box-shadow:0 0 24px color-mix(in srgb, var(--m-primaria-2) 12%, transparent)}} .mx-la-campanhas .btn-vidro:active{transform:scale(.98)} /* entrada: fade + 16px, 400ms, 60ms entre título, apoio e botões; aparece sem JS (fill both) */ @keyframes mx-la-campanhas-la-hero-entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes mx-la-campanhas-la-hero-fade{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:no-preference){ .mx-la-campanhas .hero-bc .hero-titulo,.mx-la-campanhas .hero-bc .hero-texto,.mx-la-campanhas .hero-bc .hero-ctas{animation:mx-la-campanhas-la-hero-entra 400ms var(--ease) both} .mx-la-campanhas .hero-bc .hero-titulo{animation-delay:140ms} .mx-la-campanhas .hero-bc .hero-texto{animation-delay:200ms} .mx-la-campanhas .hero-bc .hero-ctas{animation-delay:260ms} } @media (prefers-reduced-motion:reduce){ /* sem deslocamento, com um fade curto (o "menos movimento" geral zera a duração; aqui ela volta a 200ms) */ .mx-la-campanhas .hero-bc .hero-titulo,.mx-la-campanhas .hero-bc .hero-texto,.mx-la-campanhas .hero-bc .hero-ctas{animation:mx-la-campanhas-la-hero-fade 200ms ease-out both;animation-duration:200ms!important} .mx-la-campanhas .btn-vidro:hover{transform:none} } @media (min-width:600px){.mx-la-campanhas .hero-ctas .sm{display:none}.mx-la-campanhas .hero-ctas .lg{display:inline}} /* celular: o bloco encolhe para o horizonte do planeta continuar na 1ª tela; botões lado a lado com rótulo curto. Vale para todo par neon + vidro: hero da home (.hero-ctas), hero das guias (.hero-cta) e fechamento (.cta-row.c) */ @media (max-width:47.99rem){ .mx-la-campanhas .hero-titulo{line-height:1.05} .mx-la-campanhas .hero-texto{margin-top:12px;font-size:16px;line-height:1.5} .mx-la-campanhas .hero-ctas{margin-top:16px;gap:8px} .mx-la-campanhas :is(.hero-ctas,.hero-cta,.cta-row.c) .btn-neon{font-size:14px;gap:8px;padding:5px 5px 5px 15px} .mx-la-campanhas :is(.hero-ctas,.hero-cta,.cta-row.c) .cta-seta{width:32px;height:32px} .mx-la-campanhas :is(.hero-ctas,.hero-cta,.cta-row.c) .cta-seta svg{width:17px;height:17px} .mx-la-campanhas .btn-vidro{font-size:14px;gap:7px;padding:0 15px 0 12px} .mx-la-campanhas .btn-vidro .ic{width:17px;height:17px} } /* aparelho de 320–339px: os dois continuam lado a lado, com menos respiro (letra no piso de 13px) */ @media (max-width:21.24rem){ .mx-la-campanhas .hero-ctas,.mx-la-campanhas .hero-cta,.mx-la-campanhas .cta-row.c{gap:6px} .mx-la-campanhas :is(.hero-ctas,.hero-cta,.cta-row.c) .btn-neon{font-size:13px;gap:6px;padding-left:12px} .mx-la-campanhas :is(.hero-ctas,.hero-cta,.cta-row.c) .cta-seta{width:30px;height:30px} .mx-la-campanhas .btn-vidro{font-size:13px;gap:6px;padding:0 12px 0 10px} } .mx-la-campanhas .cta-row.c{justify-content:center;flex-wrap:nowrap;width:100%} .mx-la-campanhas .cta-row.c>*{flex:0 0 auto;min-width:0} /* demonstração: o palco que saiu da hero, com o Lynk */ .mx-la-campanhas .hero-grid{display:grid;gap:36px;align-items:center} .mx-la-campanhas .hero-grid>*{min-width:0} .mx-la-campanhas .hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px} .mx-la-campanhas .proof{display:none;gap:10px;margin-top:6px} @media (min-width:600px){.mx-la-campanhas .proof{display:grid}} .mx-la-campanhas .proof li{display:flex;align-items:center;gap:10px;color:var(--m-texto-suave);font-size:calc(.95 * var(--mx-rem))} .mx-la-campanhas .proof .ic{color:var(--red-hi);width:1.25em;height:1.25em} /* palco do painel */ .mx-la-campanhas .stage{position:relative;display:grid;gap:14px;justify-items:center;padding-bottom:6px;margin-top:calc(min(.405 * (100vw - 2 * var(--pad)), 220px) + 8px);container-type:inline-size} .mx-la-campanhas .tilt{grid-area:1/1;z-index:2;--rx:0deg;--ry:0deg;position:relative;width:100%;transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .35s var(--ease);will-change:transform} .mx-la-campanhas .p-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap} .mx-la-campanhas .eyebrow{font-size:calc(.8 * var(--mx-rem));font-weight:600;color:var(--mut);letter-spacing:-.005em} .mx-la-campanhas .tag-ex{font-size:max(12px,calc(.75 * var(--mx-rem)));padding:3px 9px;border-radius:999px;background:color-mix(in srgb, var(--m-texto) 7%, transparent);color:var(--mut)} .mx-la-campanhas .p-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px} .mx-la-campanhas .s{position:relative;text-align:center;padding:10px 12px;border-radius:12px;background:var(--card);box-shadow:0 0 0 1px var(--line) inset;transition:box-shadow .4s,background .4s} .mx-la-campanhas .s span{display:block;font-size:max(12px,calc(.74 * var(--mx-rem)));color:var(--dim)} .mx-la-campanhas .s b{display:flex;align-items:center;justify-content:center;gap:7px;font-size:calc(1.4 * var(--mx-rem));font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-top:2px} .mx-la-campanhas .stage[data-step="0"] .s0,.mx-la-campanhas .stage[data-step="1"] .s1,.mx-la-campanhas .stage[data-step="2"] .s2{background:var(--m-superficie-2);box-shadow:0 0 0 1px color-mix(in srgb, var(--m-primaria-2) 60%, transparent) inset} .mx-la-campanhas .p-bal{position:relative;padding:14px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb, var(--m-primaria), var(--m-fundo) 8%),color-mix(in srgb, var(--m-primaria), var(--m-fundo) 45%) 70%);box-shadow:0 0 0 1px color-mix(in srgb, var(--m-texto) 16%, transparent) inset;transition:box-shadow .4s} .mx-la-campanhas .stage[data-step="3"] .p-bal{box-shadow:0 0 0 1px color-mix(in srgb, var(--m-texto) 30%, transparent) inset,0 18px 40px -16px rgba(0,0,0,.8)} .mx-la-campanhas .bal-head{display:flex;align-items:center;justify-content:space-between;gap:8px} .mx-la-campanhas .p-bal .eyebrow{color:var(--m-texto)} .mx-la-campanhas .chip{font-size:max(12px,calc(.74 * var(--mx-rem)));font-weight:600;padding:3px 10px;border-radius:999px;background:color-mix(in srgb, var(--m-texto) 20%, transparent);color:var(--m-texto)} .mx-la-campanhas .bal-val{font-size:clamp(calc(1.7 * var(--mx-rem)),calc(1.2 * var(--mx-rem)) + 2vw,calc(2.3 * var(--mx-rem)));font-weight:600;letter-spacing:-.04em;line-height:1.1;margin:6px 0 2px;font-variant-numeric:tabular-nums} .mx-la-campanhas .bal-note{font-size:max(12px,calc(.78 * var(--mx-rem)));color:var(--m-texto);line-height:1.35} .mx-la-campanhas .bal-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid color-mix(in srgb, var(--m-texto) 20%, transparent)} .mx-la-campanhas .bal-row span{display:block;font-size:max(12px,calc(.7 * var(--mx-rem)));color:var(--m-sobre-primaria)} .mx-la-campanhas .bal-row b{font-size:calc(.84 * var(--mx-rem));font-weight:600;font-variant-numeric:tabular-nums} .mx-la-campanhas .push{position:absolute;z-index:3;left:8px;right:8px;bottom:-18px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:color-mix(in srgb, var(--m-superficie-2) 88%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--line2) inset,0 20px 40px -10px rgba(0,0,0,.8);opacity:0;transform:translateY(14px) scale(.97);transition:opacity .45s var(--ease),transform .45s var(--ease)} .mx-la-campanhas .push img{width:36px;height:36px;border-radius:9px} .mx-la-campanhas .push small{display:block;font-size:max(12px,calc(.72 * var(--mx-rem)));color:var(--dim)} .mx-la-campanhas .push b{display:block;font-size:calc(.9 * var(--mx-rem));font-weight:600;line-height:1.2} .mx-la-campanhas .push p{font-size:max(12px,calc(.78 * var(--mx-rem)));color:var(--mut);line-height:1.3} .mx-la-campanhas .stage:not([data-step="0"]) .push{opacity:1;transform:none} @keyframes mx-la-campanhas-bob{50%{transform:translateY(-6px)}} @keyframes mx-la-campanhas-float{50%{transform:translateY(-8px)}} .mx-la-campanhas .stepper{grid-area:2/1;display:grid;grid-template-columns:repeat(4,1fr) 44px;gap:6px;width:100%;margin-top:22px} .mx-la-campanhas .st{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;padding:6px 4px;border-radius:14px;background:color-mix(in srgb, var(--m-superficie) 90%, transparent);box-shadow:0 0 0 1px var(--line) inset;color:var(--m-texto-suave);font-size:calc(.82 * var(--mx-rem));font-weight:600;position:relative;min-width:0;clip-path:inset(0 round 14px);transition:background .25s,box-shadow .25s} .mx-la-campanhas .st b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb, var(--m-texto) 14%, transparent);color:var(--m-texto);font-size:max(12px,calc(.74 * var(--mx-rem)))} .mx-la-campanhas .st.on{background:color-mix(in srgb, var(--m-primaria), var(--m-fundo) 70%);color:var(--m-texto);box-shadow:0 0 0 1px color-mix(in srgb, var(--m-primaria-2) 70%, transparent) inset} .mx-la-campanhas .st.on b{background:var(--red);color:var(--m-sobre-primaria)} .mx-la-campanhas .stage[data-playing="true"] .st.on{background-image:linear-gradient(var(--red-hi),var(--red-hi));background-repeat:no-repeat;background-size:200% 3px;background-position:100% 100%;animation:mx-la-campanhas-fill var(--dur,3.6s) linear forwards} @keyframes mx-la-campanhas-fill{from{background-position:100% 100%}to{background-position:0 100%}} .mx-la-campanhas .playbtn{display:grid;place-items:center;min-height:56px;border-radius:14px;background:color-mix(in srgb, var(--m-superficie) 90%, transparent);box-shadow:0 0 0 1px var(--line) inset} .mx-la-campanhas .playbtn .ic{fill:currentColor;stroke:none;width:16px;height:16px} .mx-la-campanhas .stage-cap{grid-area:3/1;font-size:calc(.88 * var(--mx-rem));color:var(--m-texto);text-align:center;max-width:30em} @media (min-width:900px){ .mx-la-campanhas .stage{margin-top:84px} .mx-la-campanhas .hero-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,4vw,64px)} } /* ---------- seções ---------- */ .mx-la-campanhas .sec{padding-block:var(--sec)} /* o pulso do Lynk (escala 1,7 a 94% da largura dele) e a órbita passavam da borda direita em 1280–1440 e criavam rolagem lateral; a seção de ponta a ponta recorta o efeito na lateral */ .mx-la-campanhas .demo,.mx-la-campanhas .split{overflow-x:clip} /* a faísca do horizonte do rodapé (.ft-hz::before) atravessa a linha e saía até 152px pela direita no fim da página; o rodapé recorta só na lateral */ .mx-la-campanhas .foot{overflow-x:clip} .mx-la-campanhas .sec-head{display:grid;gap:14px;justify-items:start;margin-bottom:clamp(28px,5vw,56px);max-width:calc(48 * var(--mx-rem))} .mx-la-campanhas .kicker{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:calc(.95 * var(--mx-rem));color:var(--red-hi)} .mx-la-campanhas h2{font-size:var(--f-h2);line-height:1.06;font-weight:500;letter-spacing:-.035em;text-wrap:balance} .mx-la-campanhas h2:has(br){text-wrap:pretty} /* com
a 1ª linha já ocupa a largura toda e balance não estreita nada; pretty puxa a penúltima palavra para a última linha */ /* 18/10/2026: 1.04 apertava as duas linhas no celular (abaixo de 1.05) e "painel." e "você." caíam sozinhos na última linha; balance divide a frase por igual */ .mx-la-campanhas h2 em{color:var(--mut)} .mx-la-campanhas .desc{font-size:clamp(calc(1.02 * var(--mx-rem)),calc(.95 * var(--mx-rem)) + .35vw,calc(1.2 * var(--mx-rem)));color:var(--mut);max-width:38em} .mx-la-campanhas .cap{margin-top:18px;font-size:calc(.9 * var(--mx-rem));color:var(--dim);max-width:44em} .mx-la-campanhas .js-ok .rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .mx-la-campanhas .js-ok .rv.in{opacity:1;transform:none} .mx-la-campanhas .js-ok .rw .w{display:inline-block;opacity:0;transform:translateY(.28em);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i)*55ms)} .mx-la-campanhas .js-ok .rw.in .w{opacity:1;filter:none;transform:none} /* nichos */ .mx-la-campanhas .vit{padding:clamp(14px,3vw,28px);border-radius:var(--r);background:linear-gradient(180deg,var(--card),var(--bg2));box-shadow:0 0 0 1px var(--line) inset} .mx-la-campanhas .vit-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px} .mx-la-campanhas .vit-top h3{font-size:calc(1.25 * var(--mx-rem));font-weight:600;letter-spacing:-.03em} .mx-la-campanhas .chips{display:flex;flex-wrap:wrap;gap:8px} .mx-la-campanhas .chip-f{min-height:44px;padding:0 16px;border-radius:999px;background:color-mix(in srgb, var(--m-texto) 5%, transparent);box-shadow:0 0 0 1px var(--line) inset;font-size:calc(.9 * var(--mx-rem));font-weight:600;color:var(--mut);transition:background .2s,color .2s,box-shadow .2s} .mx-la-campanhas .chip-f[aria-pressed="true"]{background:color-mix(in srgb, var(--m-primaria) 22%, transparent);color:var(--m-texto);box-shadow:0 0 0 1px color-mix(in srgb, var(--m-primaria-2) 70%, transparent) inset} .mx-la-campanhas .vit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .mx-la-campanhas .vit-grid article{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:18px;background:var(--card2);box-shadow:0 0 0 1px var(--line) inset;transition:box-shadow .3s,opacity .3s,transform .3s var(--ease)} .mx-la-campanhas .vit-grid h4{font-size:calc(1 * var(--mx-rem));font-weight:600;letter-spacing:-.025em;line-height:1.2} .mx-la-campanhas .vit-grid p{display:none;font-size:calc(.88 * var(--mx-rem));color:var(--mut);line-height:1.4} .mx-la-campanhas .vit.filtering article{opacity:.4} .mx-la-campanhas .vit.filtering article.hit{opacity:1;box-shadow:0 0 0 1px color-mix(in srgb, var(--m-primaria-2) 70%, transparent) inset;transform:translateY(-2px)} .mx-la-campanhas .viz{height:64px;border-radius:12px;background:color-mix(in srgb, var(--m-texto) 3%, transparent);display:flex;align-items:flex-end;gap:5px;padding:10px;overflow:hidden} .mx-la-campanhas .viz i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--red-hi),var(--red-d));transform-origin:bottom;animation:mx-la-campanhas-grow 3.2s var(--ease) infinite alternate} .mx-la-campanhas .v-com i:nth-child(1){height:30%}.mx-la-campanhas .v-com i:nth-child(2){height:48%;animation-delay:.1s}.mx-la-campanhas .v-com i:nth-child(3){height:62%;animation-delay:.2s}.mx-la-campanhas .v-com i:nth-child(4){height:78%;animation-delay:.3s}.mx-la-campanhas .v-com i:nth-child(5){height:100%;animation-delay:.4s} @keyframes mx-la-campanhas-grow{from{transform:scaleY(.55)}to{transform:scaleY(1)}} .mx-la-campanhas .v-conv{align-items:center;justify-content:center} .mx-la-campanhas .v-conv svg{width:44px;height:44px;transform:rotate(-90deg)} .mx-la-campanhas .v-conv circle{fill:none;stroke:color-mix(in srgb, var(--m-texto) 10%, transparent);stroke-width:5} .mx-la-campanhas .v-conv .arc{stroke:var(--red-hi);stroke-linecap:round;stroke-dasharray:38 100;animation:none} .mx-la-campanhas .v-prazo i{background:linear-gradient(180deg,color-mix(in srgb, var(--m-destaque), var(--m-texto) 30%),var(--red))} .mx-la-campanhas .v-prazo i:nth-child(1){height:90%}.mx-la-campanhas .v-prazo i:nth-child(2){height:75%}.mx-la-campanhas .v-prazo i:nth-child(3){height:60%}.mx-la-campanhas .v-prazo i:nth-child(4){height:46%}.mx-la-campanhas .v-prazo i:nth-child(5){height:34%}.mx-la-campanhas .v-prazo i:nth-child(6){height:24%} .mx-la-campanhas .v-mer{gap:3px}.mx-la-campanhas .v-mer i:nth-child(1){height:18%}.mx-la-campanhas .v-mer i:nth-child(2){height:30%}.mx-la-campanhas .v-mer i:nth-child(3){height:44%}.mx-la-campanhas .v-mer i:nth-child(4){height:36%}.mx-la-campanhas .v-mer i:nth-child(5){height:58%}.mx-la-campanhas .v-mer i:nth-child(6){height:70%}.mx-la-campanhas .v-mer i:nth-child(7){height:62%}.mx-la-campanhas .v-mer i:nth-child(8){height:84%}.mx-la-campanhas .v-mer i:nth-child(9){height:100%} .mx-la-campanhas .v-pla{align-items:center}.mx-la-campanhas .v-pla i{height:34%;border-radius:8px;animation:none;opacity:.55}.mx-la-campanhas .v-pla i:nth-child(2){height:62%;opacity:1}.mx-la-campanhas .v-pla i:nth-child(3){height:48%;opacity:.75} .mx-la-campanhas .v-vag{align-items:center;gap:4px}.mx-la-campanhas .v-vag i{height:auto;max-width:16px;aspect-ratio:1;border-radius:3px;background:color-mix(in srgb, var(--m-texto) 12%, transparent);animation:none}.mx-la-campanhas .v-vag i.f{background:var(--red-hi)} .mx-la-campanhas .v-bri{flex-direction:column;justify-content:center;align-items:stretch;gap:5px}.mx-la-campanhas .v-bri i{flex:none;height:6px;border-radius:3px;background:color-mix(in srgb, var(--m-texto) 14%, transparent);animation:none}.mx-la-campanhas .v-bri i:nth-child(1){width:90%;background:var(--red-hi)}.mx-la-campanhas .v-bri i:nth-child(2){width:100%}.mx-la-campanhas .v-bri i:nth-child(3){width:78%}.mx-la-campanhas .v-bri i:nth-child(4){width:56%} .mx-la-campanhas .v-demo{align-items:center;justify-content:center}.mx-la-campanhas .v-demo .ic{width:34px;height:34px;color:var(--red-hi);stroke-width:1.5} @media (min-width:600px){.mx-la-campanhas .vit-grid p{display:block}} @media (min-width:768px){.mx-la-campanhas .vit-grid{grid-template-columns:repeat(4,1fr);gap:12px}} /* rede / calculadora (sem faixa clara própria: o fundo é o da página) */ .mx-la-campanhas .split{padding-block:var(--sec)} .mx-la-campanhas .lab{display:grid;gap:16px;margin-bottom:22px} .mx-la-campanhas .lab-ctl,.mx-la-campanhas .lab-out{padding:clamp(16px,3vw,28px);border-radius:var(--r);background:var(--card);box-shadow:0 0 0 1px var(--line) inset;min-width:0} .mx-la-campanhas .lab-ctl{display:grid;gap:22px;align-content:start} .mx-la-campanhas .lab-ctl label span{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;font-weight:500;color:var(--mut);font-size:calc(.95 * var(--mx-rem))} .mx-la-campanhas .lab-ctl strong{font-size:calc(1.3 * var(--mx-rem));font-weight:600;color:var(--tx);letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap} .mx-la-campanhas input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;--p:50%} .mx-la-campanhas input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--red-hi) var(--p),color-mix(in srgb, var(--m-texto) 14%, transparent) var(--p))} .mx-la-campanhas input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--red-hi) var(--p),color-mix(in srgb, var(--m-texto) 14%, transparent) var(--p))} .mx-la-campanhas input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:var(--m-texto);box-shadow:0 0 0 5px color-mix(in srgb, var(--m-primaria-2) 35%, transparent),0 4px 12px rgba(0,0,0,.5)} .mx-la-campanhas input[type=range]::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:var(--m-texto);box-shadow:0 0 0 5px color-mix(in srgb, var(--m-primaria-2) 35%, transparent)} .mx-la-campanhas .fine{font-size:calc(.88 * var(--mx-rem));color:var(--dim);line-height:1.45} .mx-la-campanhas .lab-out{display:grid;gap:14px;align-content:start} .mx-la-campanhas .tree{display:none} @media (min-width:600px){.mx-la-campanhas .tree{display:block}} .mx-la-campanhas .tree svg{width:100%;height:auto;max-height:150px} .mx-la-campanhas .tl path{stroke:var(--line2);stroke-dasharray:4 5;animation:dash 6s linear infinite} .mx-la-campanhas .tree circle{stroke-width:1.5} .mx-la-campanhas .n-you{fill:var(--red);stroke:color-mix(in srgb, var(--m-texto) 40%, transparent)} .mx-la-campanhas .n-sub{fill:var(--m-superficie-2);stroke:var(--red-hi)} .mx-la-campanhas .tree text{fill:var(--m-texto);font:600 11px var(--m-f-corpo)} .mx-la-campanhas .tree .pc{font-size:9px} .mx-la-campanhas .bar{position:relative;height:12px;border-radius:6px;clip-path:inset(0 round 6px);background:var(--m-texto-suave)} .mx-la-campanhas .b-you{background:linear-gradient(90deg,var(--red-d),var(--red-hi));position:absolute;inset:0;transform-origin:left;transform:scaleX(.6);transition:transform .35s var(--ease)} .mx-la-campanhas .b-sub{display:none} .mx-la-campanhas .rec{display:grid;gap:10px} .mx-la-campanhas .rec>div{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:color-mix(in srgb, var(--m-texto) 4%, transparent)} .mx-la-campanhas .rec>div>div{flex:1;min-width:0} .mx-la-campanhas .rec strong{display:block;font-weight:600} .mx-la-campanhas .rec small{display:block;color:var(--dim);font-size:calc(.84 * var(--mx-rem));line-height:1.3} .mx-la-campanhas .rec b{font-size:calc(1.35 * var(--mx-rem));font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap} .mx-la-campanhas .ri{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;flex:none} .mx-la-campanhas .ri.you{background:var(--red);color:var(--m-sobre-primaria)}.mx-la-campanhas .ri.sub{background:var(--m-texto-suave);color:var(--m-inv-texto)} @media (min-width:900px){.mx-la-campanhas .lab{grid-template-columns:1fr 1fr;align-items:stretch}} /* abas */ .mx-la-campanhas .tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px} .mx-la-campanhas .tabs button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 10px;border-radius:16px;background:color-mix(in srgb, var(--m-texto) 4%, transparent);box-shadow:0 0 0 1px var(--line) inset;font-weight:600;font-size:calc(.95 * var(--mx-rem));color:var(--mut);transition:background .25s,color .25s,box-shadow .25s} .mx-la-campanhas .tabs button[aria-selected="true"]{background:color-mix(in srgb, var(--m-primaria) 20%, transparent);color:var(--m-texto);box-shadow:0 0 0 1px color-mix(in srgb, var(--m-primaria-2) 70%, transparent) inset} .mx-la-campanhas .tpanel{display:grid;gap:18px;padding:clamp(18px,3vw,36px);border-radius:var(--r);background:linear-gradient(135deg,var(--card),var(--bg2));box-shadow:0 0 0 1px var(--line) inset} .mx-la-campanhas .tp-lead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 12px;align-items:center;align-content:start} .mx-la-campanhas .tp-ic{display:grid;place-items:center;color:var(--red-hi)} .mx-la-campanhas .tp-ic .ic{width:30px;height:30px} .mx-la-campanhas .tp-lead h3{font-size:clamp(calc(1.4 * var(--mx-rem)),calc(1.1 * var(--mx-rem)) + 1.2vw,calc(2.1 * var(--mx-rem)));font-weight:500;letter-spacing:-.045em;line-height:1.1} .mx-la-campanhas .tp-lead p{grid-column:1/-1;color:var(--mut)} /* telas reais do painel */ .mx-la-campanhas .shot{display:grid;gap:12px;margin:0 0 clamp(20px,3vw,32px)} .mx-la-campanhas .shot .tabs{margin:0;width:min(100%,calc(24 * var(--mx-rem)))} .mx-la-campanhas .shot .tabs button{white-space:nowrap} .mx-la-campanhas .shot-win{border-radius:var(--r);clip-path:inset(0 round var(--r));background:var(--m-fundo-2);box-shadow:0 0 0 1px var(--line) inset} .mx-la-campanhas .shot-win img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(#000 88%,transparent);mask-image:linear-gradient(#000 88%,transparent)} .mx-la-campanhas .shot figcaption{font-size:calc(.88 * var(--mx-rem));color:var(--mut)} @media (max-width:599px){.mx-la-campanhas .shot-win img{aspect-ratio:780/1180;object-fit:cover;object-position:top;-webkit-mask-image:linear-gradient(#000 84%,transparent);mask-image:linear-gradient(#000 84%,transparent)}} /* passos 1-2-3: faixa de 3 também no celular (copy de apoio some só lá) */ .mx-la-campanhas .tp-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .mx-la-campanhas .tp-steps::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(var(--red-hi),var(--red-hi)) 0 0/calc((100% - 16px)/3) 100% no-repeat,var(--line2);pointer-events:none} .mx-la-campanhas .tp-steps li{display:flex;flex-direction:column;gap:6px;padding:16px 4px 0} .mx-la-campanhas .tp-steps li>span{font-size:calc(1.3 * var(--mx-rem));font-weight:600;letter-spacing:-.04em;color:var(--red-hi);line-height:1} .mx-la-campanhas .tp-steps strong{display:block;font-weight:600;line-height:1.25;font-size:calc(.92 * var(--mx-rem))} .mx-la-campanhas .tp-steps p{display:none;color:var(--mut);font-size:calc(.92 * var(--mx-rem));line-height:1.4;margin-top:3px} .mx-la-campanhas .tpanel.swap{animation:mx-la-campanhas-swap .45s var(--ease)} @keyframes mx-la-campanhas-swap{from{opacity:.2;transform:translateY(8px)}} @media (min-width:600px){ .mx-la-campanhas .tabs{grid-template-columns:repeat(4,1fr)} .mx-la-campanhas .tp-steps p{display:block} .mx-la-campanhas .tp-steps li{padding:18px 8px 0} .mx-la-campanhas .tp-steps li>span{font-size:calc(1.4 * var(--mx-rem))} .mx-la-campanhas .tp-steps strong{font-size:calc(1 * var(--mx-rem))} } @media (min-width:900px){.mx-la-campanhas .tpanel{grid-template-columns:1fr 1.5fr;gap:36px;align-items:center}} /* painel (módulos) */ .mx-la-campanhas .mods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .mx-la-campanhas .mods article{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:14px 6px;border-radius:20px;background:var(--card);box-shadow:0 0 0 1px var(--line) inset;transition:box-shadow .3s,transform .3s var(--ease)} .mx-la-campanhas .mods .ic{width:26px;height:26px;color:var(--red-hi);stroke-width:1.6} .mx-la-campanhas .mods h3{font-size:clamp(calc(1 * var(--mx-rem)),calc(.85 * var(--mx-rem)) + .6vw,calc(1.25 * var(--mx-rem)));font-weight:600;letter-spacing:-.03em} .mx-la-campanhas .mods p{display:none;font-size:calc(.9 * var(--mx-rem));color:var(--mut);line-height:1.4} @media (min-width:600px){.mx-la-campanhas .mods{gap:14px}.mx-la-campanhas .mods article{align-items:flex-start;text-align:left;padding:22px}.mx-la-campanhas .mods p{display:block}} @media (hover:hover) and (pointer:fine){ .mx-la-campanhas .mods article:hover,.mx-la-campanhas .vit-grid article:hover{box-shadow:0 0 0 1px color-mix(in srgb, var(--m-primaria-2) 50%, transparent) inset,0 20px 40px -20px rgba(0,0,0,.7);transform:translateY(-3px)} } /* faq */ .mx-la-campanhas .faq h2{font-size:clamp(calc(1.85 * var(--mx-rem)),calc(1 * var(--mx-rem)) + 2.6vw,calc(3.2 * var(--mx-rem)))} .mx-la-campanhas .faq{display:grid;gap:28px;padding-block:var(--sec)} .mx-la-campanhas .faq>*{min-width:0} .mx-la-campanhas .faq-l{display:grid;gap:16px;align-content:start;justify-items:start} .mx-la-campanhas .faq-r{display:grid;gap:10px;align-content:start} .mx-la-campanhas .faq details{border-radius:18px;background:var(--card);box-shadow:0 0 0 1px var(--line) inset;overflow:hidden} .mx-la-campanhas .faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 18px;font-weight:600;font-size:calc(1.02 * var(--mx-rem));letter-spacing:-.02em;cursor:pointer;list-style:none} .mx-la-campanhas .faq summary::-webkit-details-marker{display:none} .mx-la-campanhas .faq summary .ic{width:22px;height:22px;color:var(--red-hi);transition:transform .3s var(--ease)} .mx-la-campanhas .faq details[open] summary .ic{transform:rotate(45deg)} .mx-la-campanhas .faq details p{padding:0 18px 18px;color:var(--mut)} .mx-la-campanhas .faq .more-q{display:none} .mx-la-campanhas .faq-r.open .more-q{display:block} .mx-la-campanhas .more{display:inline-flex;align-items:center;justify-content:center;gap:8px;justify-self:center;min-height:48px;padding:0 22px;border-radius:999px;background:color-mix(in srgb, var(--m-texto) 6%, transparent);box-shadow:0 0 0 1px var(--line2) inset;font-weight:600} @media (min-width:900px){.mx-la-campanhas .faq{grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px)}.mx-la-campanhas .faq-l{position:sticky;top:var(--faq-top,96px);align-self:start}} /* fechamento */ .mx-la-campanhas .closing{--gw:clamp(800px,100vw,1440px);position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(56px,8vw,112px) clamp(36px,4vw,56px);text-align:center;contain:paint} .mx-la-campanhas .close-light{position:absolute;z-index:-1;left:50%;top:calc(var(--gw) * -.086);width:var(--gw);margin-left:calc(var(--gw) * -.5);aspect-ratio:1440/954;pointer-events:none} .mx-la-campanhas .close-in{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;justify-items:center;text-align:center} .mx-la-campanhas .close-sym{width:44px;height:44px} /* título e apoio com a copy da hero (27/10/2026): a mesma luz no título (.titulo-luz, sem o vermelho da 2ª linha) e o tom, o peso e o corpo do apoio da hero. Sai do .rw pelo mesmo motivo da hero (palavra partida apaga o background-clip:text). A caixa da luz desce sob a perna das letras da última linha (g, p, ç) e sobe sobre o acento: o degradê só pinta dentro dela, e com entrelinha 1 a perna passa da linha; padding e margem negativa se anulam, o desenho não mexe */ .mx-la-campanhas .close-titulo{font-size:clamp(calc(2.2 * var(--mx-rem)),calc(1 * var(--mx-rem)) + 6vw,calc(5.4 * var(--mx-rem)));line-height:1;font-weight:500;letter-spacing:-.045em;text-wrap:balance} .mx-la-campanhas .close-titulo .line{display:block} .mx-la-campanhas .close-titulo .titulo-luz{padding-block:.08em .2em;margin-block:-.08em -.2em} .mx-la-campanhas .closing .desc{max-width:min(100%,620px);margin-inline:auto;font-size:17px;font-weight:500;line-height:1.6;letter-spacing:-.02em;color:var(--m-texto-suave);text-wrap:balance} @media (max-width:47.99rem){.mx-la-campanhas .closing .desc{font-size:16px;line-height:1.5}} /* entrada como a da hero (fade + 16px, 400ms, 60ms entre título, apoio e botões), quando o bloco chega à tela: o la.js põe .in no .entra assim que o título, o apoio ou os botões cruzam a tela (quem chega de baixo vê os botões primeiro). Sem JS fica tudo à vista; com menos movimento, o fade curto da hero (200ms, sem deslocamento) */ .mx-la-campanhas .js-ok .close-titulo.entra:not(.in),.mx-la-campanhas .js-ok .close-titulo.entra:not(.in)~:is(.desc,.cta-row){opacity:0} @media (prefers-reduced-motion:no-preference){ .mx-la-campanhas .close-titulo.entra.in,.mx-la-campanhas .close-titulo.entra.in~:is(.desc,.cta-row){animation:mx-la-campanhas-la-hero-entra 400ms var(--ease) both} .mx-la-campanhas .close-titulo.entra.in~.desc{animation-delay:60ms} .mx-la-campanhas .close-titulo.entra.in~.cta-row{animation-delay:120ms} } @media (prefers-reduced-motion:reduce){ /* o "menos movimento" geral zera a duração; aqui ela volta a 200ms, como na hero */ .mx-la-campanhas .close-titulo.entra.in,.mx-la-campanhas .close-titulo.entra.in~:is(.desc,.cta-row){animation:mx-la-campanhas-la-hero-fade 200ms ease-out both;animation-duration:200ms!important} } .mx-la-campanhas .note{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--mut);font-size:calc(.92 * var(--mx-rem));text-align:left} .mx-la-campanhas .note .ic{color:var(--red-hi)} .mx-la-campanhas .ask{position:relative;margin-top:clamp(18px,3vw,34px);padding-top:clamp(34px,4vw,48px);width:100%;max-width:820px;display:grid;gap:12px;justify-items:center} .mx-la-campanhas .ask p{color:var(--mut);font-size:calc(.95 * var(--mx-rem));text-wrap:balance} /* as três IAs: logo oficial, a cor de cada marca na luz que gira pela borda (a mesma do selo da hero) e no brilho de dentro */ .mx-la-campanhas .ask ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.4vw,14px);width:100%;max-width:760px} .mx-la-campanhas .ia{display:block;padding:1px;border-radius:16px;background:conic-gradient(from var(--sa),transparent 0 58%,rgba(var(--c),.95) 72%,var(--m-texto) 77%,rgba(var(--c),.95) 82%,transparent 94%),rgba(var(--c),.3);box-shadow:0 16px 30px -18px rgba(0,0,0,.9);animation:mx-la-campanhas-selo 4.2s linear var(--d,0s) infinite;transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .mx-la-campanhas .ia-in{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 14px;border-radius:15px;background:radial-gradient(120% 150% at 50% -40%,rgba(var(--c),.34),transparent 62%),radial-gradient(70% 90% at 50% 140%,rgba(var(--c),.22),transparent 70%),linear-gradient(180deg,var(--m-superficie),var(--m-fundo-2));color:var(--m-texto);font-size:calc(1.02 * var(--mx-rem));font-weight:600;letter-spacing:-.01em} .mx-la-campanhas .ia-logo{flex:none;width:22px;height:22px;fill:currentColor;color:var(--l,var(--m-texto))} .mx-la-campanhas .ia-sai{flex:none;width:15px;height:15px;opacity:.55;transition:transform .2s var(--ease),opacity .2s} .mx-la-campanhas .ia:active{transform:scale(.98)} @media (hover:hover) and (pointer:fine){.mx-la-campanhas .ia:hover{transform:translateY(-2px);box-shadow:0 20px 34px -18px rgba(0,0,0,.95)}.mx-la-campanhas .ia:hover .ia-sai{opacity:1;transform:translate(2px,-2px)}} /* celular: as três continuam lado a lado, com o logo em cima do nome */ @media (max-width:599px){.mx-la-campanhas .ia-in{flex-direction:column;gap:7px;min-height:76px;padding:10px 6px;font-size:calc(.9 * var(--mx-rem))}.mx-la-campanhas .ia-logo{width:24px;height:24px}.mx-la-campanhas .ia-sai{position:absolute;top:8px;right:8px;width:12px;height:12px}} /* rodapé */ .mx-la-campanhas .foot{padding-block:28px 20px;border-top:1px solid var(--line)} .mx-la-campanhas .foot-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:20px} .mx-la-campanhas .foot-top p{margin-top:12px;max-width:32em;color:var(--mut);font-size:calc(.95 * var(--mx-rem))} .mx-la-campanhas .foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-block:20px} .mx-la-campanhas .foot-cols h3{font-size:calc(.95 * var(--mx-rem));font-weight:600;margin-bottom:10px} .mx-la-campanhas .foot-cols a{display:inline-flex;align-items:center;min-height:44px;color:var(--mut);font-size:calc(.95 * var(--mx-rem))} .mx-la-campanhas .foot-bot{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:center;text-align:center;padding-top:20px;border-top:1px solid var(--line);color:var(--dim);font-size:calc(.9 * var(--mx-rem))} @media (min-width:700px){.mx-la-campanhas .foot-cols{grid-template-columns:repeat(3,1fr)}} /* celular: o terceiro grupo ocupa a linha toda com os links em duas colunas, sem coluna órfã */ @media (max-width:699px){.mx-la-campanhas .foot-cols>div:last-child{grid-column:1/-1}.mx-la-campanhas .foot-cols>div:last-child ul{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}} @media (hover:hover) and (pointer:fine){.mx-la-campanhas .foot-cols a:hover{color:var(--tx)}} /* Lynk, o mascote do sistema: de pé ao lado do painel, com olhos vivos */ .mx-la-campanhas .lynk{--lw:min(44cqw,240px);grid-area:1/1;align-self:start;justify-self:end;position:relative;width:var(--lw);height:0;margin-right:-1cqw;pointer-events:none} .mx-la-campanhas .lynk-in{position:absolute;left:0;top:calc(var(--lw) * -.917);width:100%} .mx-la-campanhas .lynk-body{position:relative;z-index:1;container-type:inline-size;animation:mx-la-campanhas-float 6s ease-in-out infinite;pointer-events:none} .mx-la-campanhas .lynk-toque{position:absolute;left:26%;top:0;width:72%;height:62%;border-radius:40% 40% 30% 30%;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent} .mx-la-campanhas .lynk-body img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 26px color-mix(in srgb, var(--m-fundo) 55%, transparent))} .mx-la-campanhas .face{position:absolute;inset:0;transform:translate(calc(var(--lx,0) * 1.8cqw),calc(var(--ly,0) * 1.4cqw));transition:transform .45s var(--ease)} .mx-la-campanhas .eye{position:absolute;display:block;transform-origin:50% 55%;animation:mx-la-campanhas-blink 5.2s infinite} .mx-la-campanhas .e1{left:46.15%;top:18.6%;width:4.65%;height:7.37%} .mx-la-campanhas .e2{left:64.23%;top:18.17%;width:5.32%;height:7.46%} .mx-la-campanhas .eye b{position:absolute;inset:0;border-radius:999px;background:var(--m-texto);box-shadow:0 0 1.2cqw color-mix(in srgb, var(--m-texto) 30%, transparent);transition:transform .3s var(--ease),opacity .25s} .mx-la-campanhas .eye::after{content:"";position:absolute;left:0;right:0;top:0;bottom:46%;border:1.15cqw solid var(--m-texto);border-bottom:0;border-radius:999px 999px 0 0;opacity:0;transition:opacity .25s} .mx-la-campanhas .lynk[data-humor="surpreso"] .eye b{transform:scale(1.14)} .mx-la-campanhas .lynk[data-humor="feliz"] .eye b{opacity:0} .mx-la-campanhas .lynk[data-humor="feliz"] .eye::after{opacity:1} @keyframes mx-la-campanhas-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}} .mx-la-campanhas .ping{position:absolute;left:94.4%;top:21.1%;width:16%;aspect-ratio:1;margin:-8% 0 0 -8%;border-radius:50%;box-shadow:0 0 0 .7cqw color-mix(in srgb, var(--m-primaria-2) 85%, transparent) inset;opacity:0;pointer-events:none} .mx-la-campanhas .lynk.pinga .ping{animation:mx-la-campanhas-ping 1.1s var(--ease) both} .mx-la-campanhas .lynk.pinga .p2{animation-delay:.28s} @keyframes mx-la-campanhas-ping{0%{opacity:.95;transform:scale(.35)}100%{opacity:0;transform:scale(1.7)}} .mx-la-campanhas .orbit{position:absolute;z-index:0;left:-45%;top:44%;width:190%;height:auto;overflow:visible;transform:translateY(-50%) rotate(-14deg);pointer-events:none} .mx-la-campanhas .bubble{position:absolute;z-index:4;right:90%;bottom:56%;width:max-content;max-width:150px;padding:7px 11px;border-radius:14px 14px 4px 14px;background:var(--m-texto);color:var(--m-inv-texto);font-size:max(12px,calc(.78 * var(--mx-rem)));font-weight:600;line-height:1.25;box-shadow:0 10px 24px -8px rgba(0,0,0,.6)} @media (min-width:900px) and (max-width:1199px){.mx-la-campanhas .stage{margin-top:clamp(160px,20vw,228px)}} @media (min-width:1200px){ .mx-la-campanhas .demo{padding-bottom:calc(var(--sec) + 72px)} .mx-la-campanhas .hero-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);width:min(100% - var(--pad) * 2,1320px)} .mx-la-campanhas .stage{margin-top:0;justify-items:start} .mx-la-campanhas .tilt,.mx-la-campanhas .stepper,.mx-la-campanhas .stage-cap{width:64%} .mx-la-campanhas .lynk{--lw:min(52cqw,400px,calc(64svh / 1.479));align-self:end;margin-right:-4cqw} .mx-la-campanhas .lynk-body{z-index:3} .mx-la-campanhas .lynk-in{top:calc(-14px - var(--lw) * .674)} .mx-la-campanhas .lynk-body img{-webkit-mask-image:linear-gradient(#000 86%,transparent 99%);mask-image:linear-gradient(#000 86%,transparent 99%)} .mx-la-campanhas .bubble{right:auto;left:30%;bottom:calc(100% + 6px);max-width:200px;border-radius:14px 14px 14px 4px;font-size:calc(.84 * var(--mx-rem))} } /* telas estreitas */ @media (max-width:420px){ .mx-la-campanhas .hero{padding-top:100px} .mx-la-campanhas .stepper{gap:5px} .mx-la-campanhas .st{font-size:max(12px,calc(.75 * var(--mx-rem)));padding-inline:2px} .mx-la-campanhas .bubble{max-width:138px;font-size:calc(.8 * var(--mx-rem))} } /* menos movimento */ @media (prefers-reduced-motion:reduce){ .mx-la-campanhas *,.mx-la-campanhas *::before,.mx-la-campanhas *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .mx-la-campanhas .js-ok .rv,.mx-la-campanhas .js-ok .rw .w{opacity:1;filter:none;transform:none} .mx-la-campanhas .gig-c,.mx-la-campanhas .gig img,.mx-la-campanhas .gig-sinal{animation-delay:0s!important} } /* hero fora da tela: animações param */ .mx-la-campanhas .hero.off *,.mx-la-campanhas .hero.off,.mx-la-campanhas .demo.off *,.mx-la-campanhas .demo.off{animation-play-state:paused!important} /* Link Affiliattes — camada que eleva #painel, #faq e o rodapé ao nível da hero e do fechamento. Mobile-first, só transform/opacity em movimento (o rodapé ainda desenha o elo por @property); hover só com mouse; "menos movimento" vira um fade curto. Os tokens são os do la.css. */ @property --mx{syntax:"";inherits:true;initial-value:-999px} @property --my{syntax:"";inherits:true;initial-value:-999px} @property --dr{syntax:"";inherits:true;initial-value:0} @property --pv-sx{syntax:"";inherits:false;initial-value:130%} /* ================= PAINEL: a seção ================= */ /* o que sai da caixa para os lados (luz, chips, grade de pontos) fica preso aqui dentro: zero rolagem lateral. Para baixo, não: o halo da janela atravessa a fronteira e se apaga já dentro do FAQ (recortado ali, virava degrau) */ .mx-la-campanhas #painel{--pe:cubic-bezier(.16,1,.3,1);position:relative;isolation:isolate;contain:paint} @supports (overflow:clip){.mx-la-campanhas #painel{contain:none;overflow-x:clip;overflow-y:visible}} /* sem fundo próprio (o brilho branco do topo e o grão da caixa faziam a faixa cinza e o degrau nas duas fronteiras): o fundo e o grão são os da página */ .mx-la-campanhas .pnl-fundo{display:none} .mx-la-campanhas #painel .pnl-head{justify-items:center;text-align:center;margin-inline:auto} .mx-la-campanhas .pnl-sub{display:none;max-width:calc(38 * var(--mx-rem));color:var(--mut);font-size:clamp(calc(1 * var(--mx-rem)),calc(.95 * var(--mx-rem)) + .25vw,calc(1.12 * var(--mx-rem)));line-height:1.55} @media (min-width:600px){.mx-la-campanhas .pnl-sub{display:block}} /* ================= PAINEL: vitrine das telas reais ================= */ .mx-la-campanhas #painel .pv{gap:clamp(14px,2vw,20px);margin-bottom:clamp(22px,3.4vw,44px)} .mx-la-campanhas .pv-bar{display:flex;flex-direction:column;align-items:center;gap:10px} .mx-la-campanhas .pv-bar figcaption{font-size:calc(.88 * var(--mx-rem));color:var(--mut);text-align:center} /* abas num trilho só, com o indicador vermelho que desliza (transform) e a barra do avanço automático */ .mx-la-campanhas .pv-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(100%,calc(22 * var(--mx-rem)));padding:4px;border-radius:999px;background:color-mix(in srgb, var(--m-texto) 4%, transparent);box-shadow:0 0 0 1px var(--line) inset} .mx-la-campanhas .pv-tabs button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:0;padding:0 12px;border-radius:999px;font-weight:600;font-size:calc(.95 * var(--mx-rem));white-space:nowrap;color:var(--mut);transition:color .35s var(--pe),transform .18s var(--pe)} .mx-la-campanhas .pv-tabs button .ic{width:18px;height:18px} .mx-la-campanhas .pv-tabs button[aria-selected="true"]{color:var(--m-texto)} .mx-la-campanhas .pv-tabs button:active{transform:scale(.98)} .mx-la-campanhas .pv-ind{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:999px;overflow:hidden;pointer-events:none; background:linear-gradient(180deg,var(--m-primaria),var(--red) 55%,var(--red-d));box-shadow:0 0 0 1px color-mix(in srgb, var(--m-texto) 14%, transparent) inset,0 8px 18px -8px rgba(0,0,0,.8);transition:transform .6s var(--pe)} .mx-la-campanhas .pv[data-on="b"] .pv-ind{transform:translateX(100%)} .mx-la-campanhas .pv-prog{position:absolute;left:16px;right:16px;bottom:5px;height:2px;border-radius:2px;background:color-mix(in srgb, var(--m-texto) 60%, transparent);transform:scaleX(0);transform-origin:left;opacity:0} .mx-la-campanhas .pv-ind.roda .pv-prog{opacity:1;animation:mx-la-campanhas-pv-prog 6.5s linear both} .mx-la-campanhas .pv.pausa .pv-prog{animation-play-state:paused} @keyframes mx-la-campanhas-pv-prog{to{transform:scaleX(1)}} @media (hover:hover) and (pointer:fine){.mx-la-campanhas .pv-tabs button[aria-selected="false"]:hover{color:var(--tx)}} /* a cena: grade de pontos, luz volumétrica que nasce da borda de baixo da janela, cantos de mira e chips em profundidade */ .mx-la-campanhas .pv-cena{--fora:-2%;--mo:8px;--pb:clamp(34px,6vw,76px);position:relative;isolation:isolate;perspective:1800px;padding:clamp(22px,3.4vw,46px) 0 var(--pb)} .mx-la-campanhas .pv-cena::before{content:"";position:absolute;z-index:-2;inset:-4% -30% 0;pointer-events:none; background:radial-gradient(circle,color-mix(in srgb, var(--m-texto) 10%, transparent) 1px,transparent 1.5px) 50% 50%/22px 22px; -webkit-mask-image:radial-gradient(52% 58% at 50% 46%,#000 20%,transparent 78%);mask-image:radial-gradient(52% 58% at 50% 46%,#000 20%,transparent 78%)} .mx-la-campanhas .pv-luz{position:absolute;z-index:-1;left:0;right:0;top:0;bottom:var(--pb);pointer-events:none} /* o halo: o centro mora na borda de baixo da janela (o fim desta caixa) e se espalha para os lados e para baixo */ .mx-la-campanhas .pv-luz::before{content:"";position:absolute;inset:0 -38% -42%; background:radial-gradient(16% 13% at 50% 70.4%,color-mix(in srgb, color-mix(in srgb, var(--m-destaque), var(--m-texto) 30%) 34%, transparent),transparent 72%), radial-gradient(42% 30% at 50% 70.4%,color-mix(in srgb, var(--m-primaria) 50%, transparent),color-mix(in srgb, var(--m-primaria) 14%, transparent) 52%,transparent 80%), radial-gradient(closest-side at 50% 70.4%,color-mix(in srgb, var(--m-primaria) 12%, transparent),transparent 92%)} /* no celular a janela é alta e o halo descia até 280px abaixo dela, por cima do começo do FAQ: ali ele se apaga em 150px, atravessando a fronteira sem corte (o #painel não recorta para baixo) */ @media (max-width:599px){.mx-la-campanhas .pv-luz::before{-webkit-mask:linear-gradient(#000 70.4%,rgba(0,0,0,.5) calc(70.4% + 56px),transparent calc(70.4% + 150px));mask:linear-gradient(#000 70.4%,rgba(0,0,0,.5) calc(70.4% + 56px),transparent calc(70.4% + 150px))}} /* feixes parados que sobem da borda (volume), apagando antes das pontas; um a cada 8deg, sem gradiente repetido */ .mx-la-campanhas .pv-raios{position:absolute;left:-30%;right:-30%;top:-8%;bottom:0;opacity:.9; background:conic-gradient(from -90deg at 50% 100%,transparent 0deg,transparent 3deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 3.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 4.4deg,transparent 5deg,transparent 11deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 11.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 12.4deg,transparent 13deg,transparent 19deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 19.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 20.4deg,transparent 21deg,transparent 27deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 27.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 28.4deg,transparent 29deg,transparent 35deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 35.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 36.4deg,transparent 37deg,transparent 43deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 43.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 44.4deg,transparent 45deg,transparent 51deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 51.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 52.4deg,transparent 53deg,transparent 59deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 59.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 60.4deg,transparent 61deg,transparent 67deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 67.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 68.4deg,transparent 69deg,transparent 75deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 75.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 76.4deg,transparent 77deg,transparent 83deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 83.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 84.4deg,transparent 85deg,transparent 91deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 91.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 92.4deg,transparent 93deg,transparent 99deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 99.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 100.4deg,transparent 101deg,transparent 107deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 107.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 108.4deg,transparent 109deg,transparent 115deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 115.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 116.4deg,transparent 117deg,transparent 123deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 123.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 124.4deg,transparent 125deg,transparent 131deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 131.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 132.4deg,transparent 133deg,transparent 139deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 139.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 140.4deg,transparent 141deg,transparent 147deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 147.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 148.4deg,transparent 149deg,transparent 155deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 155.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 156.4deg,transparent 157deg,transparent 163deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 163.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 164.4deg,transparent 165deg,transparent 171deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 171.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 172.4deg,transparent 173deg,transparent 179deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 179.6deg,color-mix(in srgb, var(--m-destaque) 7.5%, transparent) 180.4deg,transparent 181deg,transparent 180deg); -webkit-mask-image:radial-gradient(48% 92% at 50% 100%,#000 8%,transparent 74%);mask-image:radial-gradient(48% 92% at 50% 100%,#000 8%,transparent 74%)} /* o horizonte: uma linha acesa na borda de baixo, visível dos dois lados da janela */ .mx-la-campanhas .pv-horiz{position:absolute;left:-6%;right:-6%;bottom:0;height:1px; background:linear-gradient(90deg,rgba(255,84,72,0),color-mix(in srgb, var(--m-primaria-2) 85%, transparent) 22%,color-mix(in srgb, var(--m-destaque), var(--m-texto) 60%) 50%,color-mix(in srgb, var(--m-primaria-2) 85%, transparent) 78%,rgba(255,84,72,0))} .mx-la-campanhas .pv-palco{position:relative;transform-style:preserve-3d;margin-inline:auto} .mx-la-campanhas .pv-giro{position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 1.2s var(--pe)} .mx-la-campanhas .pv-win{position:relative;padding:1px;border-radius:calc(var(--r) + 1px); background:linear-gradient(180deg,color-mix(in srgb, var(--m-texto) 28%, transparent),color-mix(in srgb, var(--m-texto) 8%, transparent) 22%,color-mix(in srgb, var(--m-texto) 6%, transparent) 68%,color-mix(in srgb, var(--m-primaria-2) 75%, transparent)); box-shadow:0 60px 110px -50px rgba(0,0,0,.95),0 30px 60px -30px rgba(0,0,0,.8)} .mx-la-campanhas .pv-in{border-radius:var(--r);overflow:hidden;background:var(--m-fundo-2)} .mx-la-campanhas .pv-top{position:relative;display:flex;align-items:center;gap:7px;height:34px;padding:8px 14px;background:linear-gradient(var(--m-superficie),var(--m-fundo-2));border-bottom:1px solid var(--line)} .mx-la-campanhas .pv-top>i{display:none;width:10px;height:10px;border-radius:50%;background:color-mix(in srgb, var(--m-texto) 16%, transparent)} .mx-la-campanhas .pv-url{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 12px;border-radius:999px;background:color-mix(in srgb, var(--m-texto) 5%, transparent);font-size:calc(.76 * var(--mx-rem));color:var(--m-texto-suave);white-space:nowrap} .mx-la-campanhas .pv-url .ic{width:12px;height:12px;color:var(--ok)} /* celular: a tela do app inteira, como ela é (barra de baixo inclusive), nada cortado */ .mx-la-campanhas .pv-tela{position:relative;display:grid;aspect-ratio:780/1688;overflow:hidden;background:var(--m-fundo-2)} .mx-la-campanhas .pv-shot{grid-area:1/1;display:block;min-width:0} .mx-la-campanhas .pv-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0} .mx-la-campanhas .pv-varre{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0; background:linear-gradient(100deg,transparent 40%,color-mix(in srgb, var(--m-destaque) 16%, transparent) 50%,transparent 60%) var(--pv-sx) 0/260% 100% no-repeat} .mx-la-campanhas .pv-tela.troca .pv-varre{animation:mx-la-campanhas-pv-varre 1s var(--pe)} @keyframes mx-la-campanhas-pv-varre{0%{opacity:1;--pv-sx:130%}100%{opacity:0;--pv-sx:-30%}} /* com o script, as duas telas ficam no mesmo lugar e trocam por esmaecimento */ .mx-la-campanhas .lc-js .pv-shot{opacity:0;transform:scale(.985);transition:opacity .6s var(--pe),transform .9s var(--pe)} .mx-la-campanhas .lc-js .pv-shot.on{opacity:1;transform:none} /* cantos de mira: chegam de fora e travam na janela */ .mx-la-campanhas .pv-mira{position:absolute;inset:calc(-1 * var(--mo));pointer-events:none} .mx-la-campanhas .pv-mira i{position:absolute;width:clamp(14px,2vw,26px);aspect-ratio:1;border:0 solid color-mix(in srgb, var(--m-primaria-2) 85%, transparent)} .mx-la-campanhas .pv-mira i:nth-child(1){left:0;top:0;border-width:1.5px 0 0 1.5px;border-top-left-radius:6px;--ox:-12px;--oy:-12px} .mx-la-campanhas .pv-mira i:nth-child(2){right:0;top:0;border-width:1.5px 1.5px 0 0;border-top-right-radius:6px;--ox:12px;--oy:-12px} .mx-la-campanhas .pv-mira i:nth-child(3){left:0;bottom:0;border-width:0 0 1.5px 1.5px;border-bottom-left-radius:6px;--ox:-12px;--oy:12px} .mx-la-campanhas .pv-mira i:nth-child(4){right:0;bottom:0;border-width:0 1.5px 1.5px 0;border-bottom-right-radius:6px;--ox:12px;--oy:12px} .mx-la-campanhas .lc-js .pv-mira i{opacity:0;transform:translate(var(--ox),var(--oy)) scale(1.25);transition:opacity .7s var(--pe),transform 1.2s var(--pe)} .mx-la-campanhas .lc-js .pv-cena.in .pv-mira i{opacity:1;transform:none} /* chips da interface: vidro fosco, borda fina, em profundidade (translateZ) para a paralaxe sair do 3D */ .mx-la-campanhas .pv-chips{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d} .mx-la-campanhas .pv-chip{position:absolute;display:flex;align-items:center;gap:.65em;padding:.6em .85em;border-radius:1em;font-size:12px;line-height:1.2;white-space:nowrap;color:var(--tx); background:color-mix(in srgb, var(--m-fundo-2) 80%, transparent);-webkit-backdrop-filter:blur(8px) saturate(1.3);backdrop-filter:blur(8px) saturate(1.3); border:1px solid color-mix(in srgb, var(--m-texto) 14%, transparent);box-shadow:inset 0 1px 0 color-mix(in srgb, var(--m-texto) 9%, transparent),0 22px 44px -20px rgba(0,0,0,.95); transform:translateZ(var(--z,46px))} .mx-la-campanhas .pc-1{display:none;left:var(--fora);top:16%;--z:60px} .mx-la-campanhas .pc-2{right:var(--fora);top:46%;--z:80px} .mx-la-campanhas .pc-3{left:calc(var(--fora) + 6%);bottom:-3%;--z:52px} .mx-la-campanhas .pc-4{display:none;right:calc(var(--fora) + 8%);top:-4%;--z:40px;padding:.4em} .mx-la-campanhas .pc-tx{display:grid;gap:.15em;min-width:0} .mx-la-campanhas .pc-tx b{font-weight:600;font-size:1.1em;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .mx-la-campanhas .pc-tx small{color:var(--mut);font-size:max(12px,.86em)} .mx-la-campanhas .pc-tx small:first-child{font-weight:600} .mx-la-campanhas .pc-ic{display:grid;place-items:center;flex:none;width:2.4em;height:2.4em;border-radius:50%;border:1px solid color-mix(in srgb, var(--m-texto) 18%, transparent);color:var(--red-hi)} .mx-la-campanhas .pc-ic .ic{width:1.15em;height:1.15em} .mx-la-campanhas .pc-ic.ok{color:var(--ok);border-color:color-mix(in srgb, var(--m-alta) 40%, transparent)} .mx-la-campanhas .pc-val{margin-left:.3em;font-style:normal;font-weight:700;font-size:1.05em;color:var(--red-hi);font-variant-numeric:tabular-nums} .mx-la-campanhas .pc-spark{width:4.4em;height:1.7em;fill:none;stroke:var(--ok);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke} .mx-la-campanhas .pc-btn{display:inline-flex;align-items:center;gap:.5em;padding:.6em 1.05em;border-radius:999px;font-weight:600;color:var(--m-sobre-primaria);background:linear-gradient(180deg,var(--m-primaria),var(--red) 55%,var(--red-d));box-shadow:0 0 0 1px color-mix(in srgb, var(--m-texto) 14%, transparent) inset} .mx-la-campanhas .pc-busca{display:inline-flex;align-items:center;gap:.6em;min-width:15em;padding:.55em .9em;border-radius:.7em;border:1px solid color-mix(in srgb, var(--m-texto) 14%, transparent);color:var(--mut)} .mx-la-campanhas .pc-btn .ic,.mx-la-campanhas .pc-busca .ic{width:1.15em;height:1.15em} /* um conjunto de chips por aba; sem o script, ficam os da primeira tela */ .mx-la-campanhas .pv-chip[data-tela="b"]{opacity:0} .mx-la-campanhas .lc-js .pv-chip{opacity:0;scale:.9;transition:opacity .7s var(--pe),scale 1s var(--pe);transition-delay:calc(var(--k) * 110ms + 150ms)} .mx-la-campanhas .lc-js .pv-cena.in .pv-chip[data-tela="a"]{opacity:1;scale:1} .mx-la-campanhas .lc-js .pv[data-on="b"] .pv-cena.in .pv-chip[data-tela="a"]{opacity:0;scale:.9;transition-delay:0s} .mx-la-campanhas .lc-js .pv[data-on="b"] .pv-cena.in .pv-chip[data-tela="b"]{opacity:1;scale:1} @media (min-width:600px){ .mx-la-campanhas .pv-cena{--fora:-2.5%;--mo:12px} .mx-la-campanhas .pv-top{height:38px} .mx-la-campanhas .pv-top>i{display:block} .mx-la-campanhas .pv-url{font-size:calc(.8 * var(--mx-rem));height:24px} /* computador: recorte no vão entre dois blocos: no início, logo abaixo da jornada e do "Copiar link", antes do "Resumo em números"; no financeiro, antes dos títulos do extrato */ .mx-la-campanhas .pv-tela{aspect-ratio:2880/1612} .mx-la-campanhas .pv-tela::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3.5%;z-index:1;pointer-events:none;background:linear-gradient(rgba(10,11,13,0),var(--m-fundo-2))} .mx-la-campanhas .pv-chip{font-size:12px} .mx-la-campanhas .pc-1,.mx-la-campanhas .pc-4{display:flex} .mx-la-campanhas .pc-3{bottom:-6%;left:calc(var(--fora) + 9%)} } @media (min-width:1024px){ .mx-la-campanhas .pv-cena{--fora:-5.5%;--mo:16px} .mx-la-campanhas .pv-palco{width:90%} .mx-la-campanhas .pv-chip{font-size:clamp(12.5px,calc(.55 * var(--mx-rem)) + .45vw,14.5px)} } /* a janela chega inclinada e se endireita com a rolagem; os chips andam em velocidades diferentes (paralaxe) */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ .mx-la-campanhas .pv-palco{animation:mx-la-campanhas-pv-ergue linear both;animation-timeline:view();animation-range:cover 0% cover 32%} .mx-la-campanhas .pv-luz{animation:mx-la-campanhas-pv-acende linear both;animation-timeline:view();animation-range:cover 0% cover 42%} .mx-la-campanhas .pv-chip{animation:mx-la-campanhas-pc-paralaxe linear both;animation-timeline:view();animation-range:cover 0% cover 100%} } @supports not (animation-timeline:view()){ .mx-la-campanhas .lc-js .pv-palco{transition:transform 1.1s var(--pe)} .mx-la-campanhas .lc-js .pv:not(.in) .pv-palco{transform:rotateX(16deg) scale(.93) translateY(36px)} } } @keyframes mx-la-campanhas-pv-ergue{from{transform:rotateX(18deg) scale(.92) translateY(40px)}to{transform:none}} @keyframes mx-la-campanhas-pv-acende{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}} @keyframes mx-la-campanhas-pc-paralaxe{from{translate:0 calc(var(--d,24) * 1px)}to{translate:0 calc(var(--d,24) * -1px)}} /* entrada do rodapé: as colunas sobem e o elo se desenha */ @keyframes mx-la-campanhas-bt-entra{to{opacity:1;translate:none}} @keyframes mx-la-campanhas-bt-desenha{from{--dr:100}to{--dr:0}} /* ================= FAQ ================= */ .mx-la-campanhas .fq{position:relative;isolation:isolate;interpolate-size:allow-keywords} /* a luz quente mora no bloco do título e anda com ele quando ele acompanha a rolagem */ .mx-la-campanhas .fq .faq-l{isolation:isolate} @media (max-width:899px){.mx-la-campanhas .fq .faq-l{position:relative}} .mx-la-campanhas .fq .faq-l::before{content:"";position:absolute;z-index:-1;inset:-35% 0;pointer-events:none; background:radial-gradient(closest-side,color-mix(in srgb, var(--m-primaria) 14%, transparent),transparent)} .mx-la-campanhas .fq details{position:relative;background:linear-gradient(180deg,var(--m-superficie),var(--card));transition:box-shadow .35s var(--ease),transform .35s var(--ease)} .mx-la-campanhas .fq details[open]{background:linear-gradient(180deg,var(--m-superficie-2),var(--m-superficie) 70%);box-shadow:0 0 0 1px color-mix(in srgb, var(--m-primaria-2) 42%, transparent) inset,0 24px 44px -30px rgba(0,0,0,.9)} .mx-la-campanhas .fq summary{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:64px;padding:12px 14px 12px 18px;transition:transform .18s var(--ease)} .mx-la-campanhas .fq summary:active{transform:scale(.99)} .mx-la-campanhas .fq summary:focus-visible{outline-offset:-3px} .mx-la-campanhas .ft .nav-logo{min-height:44px;align-items:center} .mx-la-campanhas .fq-n{font-size:calc(.82 * var(--mx-rem));font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--dim);transition:color .3s} .mx-la-campanhas .fq details[open] .fq-n{color:var(--red-hi)} .mx-la-campanhas .fq-q{min-width:0} .mx-la-campanhas .fq-x{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;box-shadow:0 0 0 1px var(--line2) inset} .mx-la-campanhas .fq-x::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--red);transform:scale(0);transition:transform .4s var(--ease)} .mx-la-campanhas .fq summary .fq-x .ic{position:relative;width:18px;height:18px;color:var(--red-hi);transition:transform .45s var(--ease),color .3s} .mx-la-campanhas .fq details[open] .fq-x::before{transform:scale(1)} .mx-la-campanhas .fq details[open] summary .fq-x .ic{transform:rotate(135deg);color:var(--m-texto)} .mx-la-campanhas .fq details p{padding:0 18px 20px 52px;color:var(--m-texto-suave);line-height:1.6} .mx-la-campanhas .fq details[open] p{animation:mx-la-campanhas-fq-resp .55s var(--ease) both .06s} @keyframes mx-la-campanhas-fq-resp{from{opacity:0;transform:translateY(-6px)}} /* abertura com altura suave onde o navegador sabe animar o conteúdo do
*/ @supports selector(::details-content){ .mx-la-campanhas .fq details::details-content{block-size:0;overflow-y:clip;transition:block-size .5s var(--ease),content-visibility .5s allow-discrete} .mx-la-campanhas .fq details[open]::details-content{block-size:auto} } /* "ver mais": a mesma borda de luz que gira do selo da hero */ .mx-la-campanhas .fq .fq-mais{min-height:48px;margin-top:6px;border:1px solid transparent;box-shadow:0 12px 26px -16px rgba(0,0,0,.9); background:linear-gradient(var(--m-superficie),var(--m-superficie)) padding-box, conic-gradient(from var(--sa),transparent 0 62%,color-mix(in srgb, var(--m-primaria-2) 90%, transparent) 74%,var(--m-texto) 78%,color-mix(in srgb, var(--m-primaria-2) 90%, transparent) 82%,transparent 94%) border-box, linear-gradient(var(--line2),var(--line2)) border-box; animation:mx-la-campanhas-selo 5s linear 2 both;transition:transform .18s var(--ease)} .mx-la-campanhas .fq .fq-mais .ic{color:var(--red-hi);transition:transform .35s var(--ease)} .mx-la-campanhas .fq .fq-mais:active{transform:scale(.98)} .mx-la-campanhas .faq-r.open .more-q{animation:mx-la-campanhas-fq-entra .55s var(--ease) both} .mx-la-campanhas .faq-r.open .more-q:nth-of-type(7){animation-delay:.07s} .mx-la-campanhas .faq-r.open .more-q:nth-of-type(8){animation-delay:.14s} /* aberto, o "+" do botão vira "×" e o botão fecha a lista */ .mx-la-campanhas .fq .fq-mais[aria-expanded="true"] .ic{transform:rotate(45deg)} @keyframes mx-la-campanhas-fq-entra{from{opacity:0;transform:translateY(12px)}} @media (min-width:600px){.mx-la-campanhas .fq summary{padding-inline:22px 16px;gap:18px}.mx-la-campanhas .fq details p{padding:0 22px 22px 60px}} @media (max-width:599px){.mx-la-campanhas .fq details p{padding-left:18px}} @media (hover:hover) and (pointer:fine){ .mx-la-campanhas .fq details:not([open]):hover{transform:translateY(-2px);box-shadow:0 0 0 1px color-mix(in srgb, var(--m-texto) 18%, transparent) inset,0 18px 36px -26px rgba(0,0,0,.9)} .mx-la-campanhas .fq details:not([open]):hover .fq-n{color:var(--mut)} .mx-la-campanhas .fq .fq-mais:hover{transform:translateY(-2px)} .mx-la-campanhas .fq .fq-mais:hover .ic{transform:rotate(90deg)} } /* ================= RODAPÉ ================= */ .mx-la-campanhas .ft{position:relative;isolation:isolate;border-top:0;padding-top:clamp(32px,4vw,48px)} .mx-la-campanhas .ft-hz{position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;transform-origin:50% 50%; background:linear-gradient(90deg,rgba(255,84,72,0),color-mix(in srgb, var(--m-primaria-2) 75%, transparent) 50%,rgba(255,84,72,0)),var(--line)} .mx-la-campanhas .ft-hz::after{content:"";position:absolute;left:10%;right:10%;top:0;height:90px;background:radial-gradient(50% 100% at 50% 0,color-mix(in srgb, var(--m-primaria) 16%, transparent),transparent 72%)} .mx-la-campanhas .ft-hz::before{content:"";position:absolute;left:0;top:-1px;width:16%;height:3px;border-radius:3px;opacity:0;transform:translateX(-100%); background:linear-gradient(90deg,rgba(255,140,120,0),color-mix(in srgb, var(--m-destaque) 90%, transparent) 70%,color-mix(in srgb, var(--m-destaque), var(--m-texto) 85%))} .mx-la-campanhas .ft-elo{display:none;position:absolute;z-index:-1;right:0;bottom:78px;width:clamp(150px,15vw,210px);height:auto;fill:none;stroke-width:28;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;--dr:0} .mx-la-campanhas .ft-elo path{stroke-dasharray:100;stroke-dashoffset:var(--dr)} .mx-la-campanhas .ft-elo .r{stroke:color-mix(in srgb, var(--m-primaria-2) 26%, transparent)} .mx-la-campanhas .ft-elo .b{stroke:color-mix(in srgb, var(--m-texto) 9%, transparent)} .mx-la-campanhas .ft .foot-cols h3{color:var(--tx)} .mx-la-campanhas .ft .foot-cols a{position:relative;transition:color .25s} .mx-la-campanhas .ft .foot-cols a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:var(--red-hi);transform:scaleX(0);transform-origin:100% 50%;transition:transform .4s var(--ease)} .mx-la-campanhas .ft .foot-cols a:active{transform:scale(.98)} .mx-la-campanhas .ft .foot-bot{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px} .mx-la-campanhas .ft .foot-bot>span{grid-column:2} .mx-la-campanhas .ft-topo{grid-column:3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--tx);box-shadow:0 0 0 1px var(--line2) inset;transition:transform .25s var(--ease)} .mx-la-campanhas .ft-topo .ic{width:18px;height:18px;transform:rotate(-90deg);color:var(--red-hi)} .mx-la-campanhas .ft-topo:active{transform:scale(.96)} @media (min-width:700px){.mx-la-campanhas .ft-elo{display:block}} /* entrada: a linha acende do centro, a faísca corre o horizonte uma vez, as colunas sobem e o elo se desenha */ .mx-la-campanhas .lc-js .ft .ft-hz{transform:scaleX(0)} .mx-la-campanhas .lc-js .ft.in .ft-hz{animation:mx-la-campanhas-ft-acende 1.2s var(--ease) both} .mx-la-campanhas .lc-js .ft.in .ft-hz::before{animation:mx-la-campanhas-ft-faisca 2.4s cubic-bezier(.45,0,.25,1) .7s both} .mx-la-campanhas .lc-js .ft .foot-top,.mx-la-campanhas .lc-js .ft .foot-cols>div,.mx-la-campanhas .lc-js .ft .foot-bot{opacity:0;translate:0 14px} .mx-la-campanhas .lc-js .ft.in .foot-top,.mx-la-campanhas .lc-js .ft.in .foot-cols>div,.mx-la-campanhas .lc-js .ft.in .foot-bot{animation:mx-la-campanhas-bt-entra .7s var(--ease) both} .mx-la-campanhas .lc-js .ft.in .foot-cols>div:nth-child(1){animation-delay:.12s} .mx-la-campanhas .lc-js .ft.in .foot-cols>div:nth-child(2){animation-delay:.2s} .mx-la-campanhas .lc-js .ft.in .foot-cols>div:nth-child(3){animation-delay:.28s} .mx-la-campanhas .lc-js .ft.in .foot-bot{animation-delay:.36s} .mx-la-campanhas .lc-js .ft .ft-elo{--dr:100} .mx-la-campanhas .lc-js .ft.in .ft-elo{animation:mx-la-campanhas-bt-desenha 2.2s var(--ease) .3s both} @keyframes mx-la-campanhas-ft-acende{from{transform:scaleX(0)}to{transform:none}} @keyframes mx-la-campanhas-ft-faisca{0%{opacity:0;transform:translateX(-100%)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(625%)}} @media (hover:hover) and (pointer:fine){ .mx-la-campanhas .ft .foot-cols a:hover::after{transform:scaleX(1);transform-origin:0 50%} .mx-la-campanhas .ft-topo:hover{transform:translateY(-3px);box-shadow:0 0 0 1px color-mix(in srgb, var(--m-primaria-2) 60%, transparent) inset} } /* ================= menos movimento: nada se desloca, nada em laço; só um esmaecimento curto ================= */ @media (prefers-reduced-motion:reduce){ .mx-la-campanhas .fq .fq-mais{animation:none!important} .mx-la-campanhas .lc-js .pv-shot,.mx-la-campanhas .lc-js .pv-shot.on{transform:none!important;transition:opacity .25s linear!important} .mx-la-campanhas .pv-ind,.mx-la-campanhas .pv-giro{transition:none!important} .mx-la-campanhas .pv-giro{transform:none!important} .mx-la-campanhas .lc-js .pv-mira i,.mx-la-campanhas .lc-js .pv-chip{transform:none;scale:1;transition:opacity .3s linear!important;transition-delay:0s!important} .mx-la-campanhas .pv-chip{transform:none} .mx-la-campanhas .lc-js .ft .foot-top,.mx-la-campanhas .lc-js .ft .foot-cols>div,.mx-la-campanhas .lc-js .ft .foot-bot{translate:none} .mx-la-campanhas .lc-js .ft.in .foot-top,.mx-la-campanhas .lc-js .ft.in .foot-cols>div,.mx-la-campanhas .lc-js .ft.in .foot-bot{animation:mx-la-campanhas-lc-fade .3s linear both!important} .mx-la-campanhas .lc-js .ft .ft-elo{--dr:0} .mx-la-campanhas .lc-js .ft .ft-hz{transform:none} .mx-la-campanhas .lc-js .ft.in .ft-hz,.mx-la-campanhas .lc-js .ft.in .ft-hz::before,.mx-la-campanhas .lc-js .ft.in .ft-elo,.mx-la-campanhas .fq details[open] p,.mx-la-campanhas .faq-r.open .more-q,.mx-la-campanhas .pv-tela.troca .pv-varre{animation:none!important} .mx-la-campanhas .fq details::details-content{transition:none!important} } @keyframes mx-la-campanhas-lc-fade{from{opacity:0}to{opacity:1}} .mx-la-campanhas .fq.off .fq-mais{animation-play-state:paused} /* Link Affiliattes — #rede: clone do bento "1M+ / 2M+ / 20+" da a referência (a referência). Medidas 1:1 com a referência (grade de 944, cartão de raio 40 com borda em degradê, título 24→40, botão de 48, carrossel centrado de 160); trocados a copy, a foto (mão + print real da Rede no painel), a cor de destaque (verde → vermelho da marca) e a família da letra (Public Sans). */ .mx-la-campanhas #rede .rd-in{max-width:944px;margin-inline:auto} /* o celular passa da borda de cima do cartão grande (64px até 1279, 95px dali para cima): o cabeçalho abre espaço para ele não encostar no texto */ @media (min-width:768px){.mx-la-campanhas #rede .sec-head{margin-bottom:96px}} @media (min-width:1280px){.mx-la-campanhas #rede .sec-head{margin-bottom:128px}} /* ---------- grade ---------- */ .mx-la-campanhas .rd-grid{display:grid;gap:16px} .mx-la-campanhas .rd-big{grid-column:1/-1} @media (min-width:768px){.mx-la-campanhas .rd-grid{grid-template-columns:1fr 1fr;grid-template-rows:minmax(320px,1fr)}} @media (min-width:1280px){.mx-la-campanhas .rd-grid{grid-template-rows:440px minmax(360px,1fr)}} /* ---------- cartão: borda de 1px em degradê + miolo em degradê radial ---------- */ .mx-la-campanhas .rd-hide,.mx-la-campanhas .rd-borda,.mx-la-campanhas .rd-card{height:100%} .mx-la-campanhas .rd-borda{padding:1px;border-radius:40px;background:linear-gradient(148.42deg,color-mix(in srgb, var(--m-borda), var(--m-texto) 10%) 13.56%,var(--m-superficie) 80.96%)} .mx-la-campanhas .rd-card{position:relative;border-radius:40px;background:radial-gradient(100.15% 191.04% at 15.32% 0%,var(--m-superficie-2) 0%,var(--m-superficie) 66.17%)} /* revelar ao entrar na tela, como a referência: sobe 35% e acende em .6s */ .mx-la-campanhas .js-ok .rd-hide{opacity:0;transform:translateY(35%);transition:transform .6s ease-out,opacity .6s ease-out} .mx-la-campanhas .js-ok .rd-c.on .rd-hide{opacity:1;transform:none} /* ---------- título: a primeira parte acende do cinza para o branco ---------- */ .mx-la-campanhas .rd-h3{margin:0 0 16px;font-size:24px;line-height:1.06;font-weight:600;letter-spacing:-.02em;color:color-mix(in srgb, var(--m-texto) 56%, transparent);text-wrap:pretty} .mx-la-campanhas .rd-h3 span{color:var(--m-texto)} .mx-la-campanhas .js-ok .rd-h3 span{color:color-mix(in srgb, var(--m-texto) 56%, transparent)} .mx-la-campanhas .js-ok .rd-c.on .rd-h3 span{animation:mx-la-campanhas-rd-luz .6s .3s forwards} @keyframes mx-la-campanhas-rd-luz{from{color:color-mix(in srgb, var(--m-texto) 56%, transparent)}to{color:var(--m-texto)}} @media (min-width:1280px){.mx-la-campanhas .rd-h3{font-size:40px}} /* ---------- cartão grande ---------- */ .mx-la-campanhas .rd-big-in{padding-top:40px;text-align:center} .mx-la-campanhas .rd-big-head{max-width:272px;margin:0 auto} .mx-la-campanhas .rd-cta{display:flex;flex-direction:column;align-items:center;padding-top:8px} /* o botão do cartão é o .btn-neon do la.css (27/10/2026): o vermelho chapado .rd-btn saiu de todas as páginas */ .mx-la-campanhas .rd-link:focus-visible{outline:2px solid var(--red-hi);outline-offset:3px} /* a imagem tem 18,2% de vazio à direita do braço: a margem negativa do mesmo tamanho, dentro de quem recorta (sangria deliberada), leva a manga até a borda do cartão, que corta o pulso no canto como na referência. No celular a foto encosta à direita; com o cartão acima de 400px, o respiro da direita cresce metade do que sobra e o celular volta para perto do meio (medido na referência em 600 px: a manga para a 90 px da borda; aqui, a ~76) */ .mx-la-campanhas .rd-foto{margin:40px auto 0;padding-right:max(0px,calc((100% - 400px) / 2));display:flex;justify-content:flex-end;overflow:hidden;border-radius:40px} .mx-la-campanhas .rd-foto-box{position:relative;flex:none;width:333px;bottom:-4px;margin-right:-60px;container-type:inline-size} .mx-la-campanhas .rd-foto-box img{display:block;width:100%;height:auto;aspect-ratio:696/803} @media (min-width:768px){ .mx-la-campanhas .rd-big-in{position:relative;min-height:320px;padding:40px 32px;display:flex;align-items:center;text-align:left} .mx-la-campanhas .rd-big-head{max-width:304px;margin:0} .mx-la-campanhas .rd-cta{align-items:flex-start} /* daqui para cima o recorte só arredonda o canto do cartão (embaixo à direita) e abre 24px à esquerda do celular: a etiqueta da esquerda passa da borda da foto e, sem a folga, o texto dela saía cortado reto (achado do de audit) */ .mx-la-campanhas .rd-foto{position:absolute;bottom:0;right:0;margin:0;padding:0 0 0 24px;border-radius:0 0 40px 0} .mx-la-campanhas .rd-foto-box{bottom:0} } @media (min-width:1280px){ .mx-la-campanhas .rd-big-in{min-height:440px} .mx-la-campanhas .rd-big-head{max-width:400px} .mx-la-campanhas .rd-foto-box{width:464px;margin-right:-84px} } /* etiquetas "+ R$" flutuando em volta do celular: fundo escuro, borda vermelha com brilho, um lado inclinado */ .mx-la-campanhas .rd-tag{position:absolute;left:var(--x);top:var(--y);width:24cqw;height:9.6cqw;display:grid;place-items:center; padding-left:1.6cqw;font-size:4cqw;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--m-texto);white-space:nowrap; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 72' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230d5a49'/%3E%3Cstop offset='1' stop-color='%23023a2f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M32 1.5H166Q178.5 1.5 178.5 14V58Q178.5 70.5 166 70.5H14Q1.5 70.5 4.5 58L17.5 14Q20.5 1.5 32 1.5Z' fill='url(%23g)' fill-opacity='.9' stroke='%23ff5448' stroke-width='2'/%3E%3C/svg%3E") center/100% 100% no-repeat; filter:drop-shadow(0 0 1.6cqw color-mix(in srgb, var(--m-primaria-2) 45%, transparent))} .mx-la-campanhas .rd-tag-d{padding-left:0;padding-right:1.6cqw; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 72' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230d5a49'/%3E%3Cstop offset='1' stop-color='%23023a2f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M148 1.5H14Q1.5 1.5 1.5 14V58Q1.5 70.5 14 70.5H166Q178.5 70.5 175.5 58L162.5 14Q159.5 1.5 148 1.5Z' fill='url(%23g)' fill-opacity='.9' stroke='%23ff5448' stroke-width='2'/%3E%3C/svg%3E")} /* posições: as da referência, recalculadas para o celular da nossa foto (x 13–51%, y 0–68%): uma sobre a borda direita em cima, uma à direita no meio, uma sobre a borda esquerda */ .mx-la-campanhas .rd-t1{--x:42%;--y:3%} .mx-la-campanhas .rd-t2{--x:52%;--y:29.5%} .mx-la-campanhas .rd-t3{--x:-2%;--y:37.5%} /* ~36% dela sobre o celular, como a "+$150" da referência */ /* ---------- cartões pequenos ---------- */ .mx-la-campanhas .rd-sm{display:grid;min-height:296px;padding:40px 32px} .mx-la-campanhas .rd-sm-head{max-width:272px} @media (min-width:768px){.mx-la-campanhas .rd-sm{min-height:400px}.mx-la-campanhas .rd-sm-head{max-width:304px}} @media (min-width:1280px){.mx-la-campanhas .rd-sm{min-height:440px}.mx-la-campanhas .rd-sm-head{max-width:400px}} .mx-la-campanhas .rd-ln{display:flex;flex-direction:column;align-items:flex-start;row-gap:12px} .mx-la-campanhas .rd-link{display:inline-flex;align-items:center;min-height:44px;margin-block:-10px;transform:translateX(4px); color:var(--red-hi);font-size:14px;line-height:21px;font-weight:600;white-space:nowrap;transition:color .3s} @media (min-width:768px){.mx-la-campanhas .rd-link{font-size:16px;line-height:24px}} .mx-la-campanhas .rd-seta{position:relative;left:-8px;width:7px;height:12px;margin-left:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} @media (hover:hover) and (pointer:fine) and (min-width:1280px){.mx-la-campanhas .rd-link:hover .rd-seta{animation:mx-la-campanhas-rd-vai .6s infinite}} @keyframes mx-la-campanhas-rd-vai{0%{left:-8px}50%{left:0}100%{left:-8px}} /* fileira de quem entrou na rede (o lugar dos ícones sociais da referência) */ .mx-la-campanhas .rd-av{display:flex;gap:12px;margin:auto 0 0;padding:0;list-style:none} .mx-la-campanhas .rd-av li{width:40px;height:40px;display:grid;place-items:center;border:1.5px solid var(--m-texto);border-radius:11px; font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--m-texto)} .mx-la-campanhas .rd-av svg{width:18px;height:18px;fill:none;stroke:var(--red-hi);stroke-width:2.2;stroke-linecap:round} .mx-la-campanhas .rd-av .rd-av-mais{border-color:var(--red-hi)} /* cartão das etapas: o carrossel vai de borda a borda */ .mx-la-campanhas .rd-sm-sl{padding:40px 0;min-height:350px} .mx-la-campanhas .rd-sm-sl .rd-sm-head{max-width:375px;padding:0 32px} @media (min-width:1280px){.mx-la-campanhas .rd-sm-sl .rd-sm-head{max-width:100%}} .mx-la-campanhas .rd-sl{position:relative;margin-top:auto;overflow:hidden} /* o leitor de tela lê as quatro etapas paradas; a trilha que anda fica escondida dele */ .mx-la-campanhas .rd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .mx-la-campanhas .rd-sl-trk{display:flex;margin:0;padding:0;list-style:none} .mx-la-campanhas .rd-sl-trk li{flex:0 0 160px;display:grid;justify-items:center;align-content:start;gap:8px} /* as etapas dos lados ficam apagadas, como na referência, mas por COR e não por opacidade: a .3 a letra caía para 1:1; assim a apagada já tem 5:1 e, ao acender, só o fundo da pílula clareia (nenhum meio-termo abaixo de 4,5) */ .mx-la-campanhas .rd-pill{width:fit-content;margin:0;padding:8px 12px;border-radius:20px;background:var(--m-texto-fraco);color:var(--m-inv-texto);font-size:20px;line-height:20px;font-weight:600;letter-spacing:-.02em;transition:background-color .6s} .mx-la-campanhas .rd-tit{margin:0;padding:0 8px;text-align:center;font-size:16px;line-height:24px;color:var(--m-texto-fraco);transition:color .6s} .mx-la-campanhas .rd-sl-trk li.on .rd-pill{background:var(--m-texto)} .mx-la-campanhas .rd-sl-trk li.on .rd-tit{color:var(--m-texto)} /* sem JS, ou com "menos movimento" ligado: as quatro etapas em grade, paradas e todas acesas */ .mx-la-campanhas .rd-sl.parado .rd-sl-trk{flex-wrap:wrap;justify-content:center;row-gap:16px} .mx-la-campanhas .rd-sl.parado .rd-sl-trk .rd-pill{background:var(--m-texto)} .mx-la-campanhas .rd-sl.parado .rd-sl-trk .rd-tit{color:var(--m-texto)} @media (prefers-reduced-motion:reduce){ .mx-la-campanhas .js-ok .rd-hide{transform:none;transition:opacity .3s} } /* Link Affiliattes — o encontro entre as seções (18/10/2026). Pedido do Victor: "não pode ser cinza o fundo das páginas" e "um encontro elegante, impactante e muito fluido em todas as seções". A página tem um fundo só (preto puro + o grão do body, no la.css) e nenhuma seção pinta fundo de ponta a ponta. Em cada fronteira mora um .enc de altura zero, na camada de baixo da raiz (z-index -1): passa por baixo do conteúdo das duas seções e atravessa a fronteira sem corte, porque não está dentro de caixa nenhuma que recorte. O desenho repete a língua da hero: o brilho vermelho da atmosfera (.enc-luz) e, nas fronteiras do meio da página, um horizonte distante (.enc-arco: arco achatado com a borda acesa). Ao rolar, a luz cresce, o arco se abre do centro e uma faísca corre a borda (CSS puro, animation-timeline). Sem suporte ou com menos movimento, fica o estado final, parado. Largura nunca passa de 100%: zero rolagem lateral. Tudo aria-hidden no HTML. */ @property --enc-a{syntax:"";inherits:false;initial-value:-80deg} .mx-la-campanhas .enc{position:relative;z-index:-1;height:0;pointer-events:none;view-timeline:--enc block} .mx-la-campanhas .enc>i{position:absolute;left:0;right:0;margin-inline:auto;display:block} /* a luz: larga, centrada na própria fronteira, e se apaga antes de qualquer borda da caixa */ .mx-la-campanhas .enc-luz{--h:clamp(300px,40vw,560px);top:calc(var(--h) * -.5);width:100%;height:var(--h); background:radial-gradient(48% 50% at 50% 50%,color-mix(in srgb, var(--m-primaria) 15%, transparent),color-mix(in srgb, var(--m-primaria) 5.5%, transparent) 46%,transparent 74%)} /* saindo do planeta da hero, a luz é mais quente e desce mais: a borda acesa dele continua na página */ .mx-la-campanhas .enc-hero .enc-luz{--h:clamp(340px,48vw,680px); background:radial-gradient(52% 50% at 50% 50%,color-mix(in srgb, var(--m-primaria-2) 19%, transparent),color-mix(in srgb, var(--m-primaria) 7%, transparent) 44%,transparent 74%)} /* o horizonte: só a borda de cima de uma elipse achatada aparece (as máscaras apagam as pontas e a metade de baixo) */ .mx-la-campanhas .enc-arco{top:0;width:min(100%,1480px);aspect-ratio:4.2/1;border-radius:50%; background:radial-gradient(50% 50% at 50% 50%,transparent 76%,color-mix(in srgb, var(--m-primaria) 7%, transparent) 90%,color-mix(in srgb, var(--m-primaria-2) 20%, transparent) 100%); box-shadow:0 0 0 1px color-mix(in srgb, var(--m-primaria-2) 50%, transparent) inset; -webkit-mask:linear-gradient(90deg,transparent 4%,#000 30%,#000 70%,transparent 96%),linear-gradient(#000 20%,transparent 46%); -webkit-mask-composite:source-in; mask:linear-gradient(90deg,transparent 4%,#000 30%,#000 70%,transparent 96%),linear-gradient(#000 20%,transparent 46%); mask-composite:intersect} /* a faísca que corre a borda (o mesmo desenho do .la-horiz do #demo e do .ft-hz do rodapé) */ .mx-la-campanhas .enc-arco::before{content:"";position:absolute;inset:0;border-radius:50%;padding:1.5px;opacity:0; background:conic-gradient(from var(--enc-a),var(--m-texto) 0deg,color-mix(in srgb, var(--m-destaque) 60%, transparent) 2deg,transparent 8deg,transparent 352deg,color-mix(in srgb, var(--m-destaque) 60%, transparent) 358deg,var(--m-texto) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)} /* a rolagem conduz: a luz cresce e o arco se abre do centro enquanto a fronteira sobe da base até o meio da tela, e a faísca atravessa a borda nesse caminho. Só transform, opacity e o ângulo registrado. */ @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .mx-la-campanhas .enc-luz{animation:mx-la-campanhas-enc-luz linear both;animation-timeline:--enc;animation-range:entry 0% cover 50%} .mx-la-campanhas .enc-arco{animation:mx-la-campanhas-enc-abre linear both;animation-timeline:--enc;animation-range:entry 0% cover 48%} .mx-la-campanhas .enc-arco::before{animation:mx-la-campanhas-enc-corre linear both;animation-timeline:--enc;animation-range:cover 18% cover 72%} } } @keyframes mx-la-campanhas-enc-luz{from{opacity:.3}to{opacity:1}} @keyframes mx-la-campanhas-enc-abre{from{opacity:.15;transform:scaleX(.62)}to{opacity:1;transform:none}} @keyframes mx-la-campanhas-enc-corre{0%{--enc-a:-80deg;opacity:0}14%{opacity:1}84%{opacity:1}100%{--enc-a:80deg;opacity:0}} /* Link Affiliattes — kit das páginas internas (18/10/2026). Carrega DEPOIS de la.css + la-c.css + la-encontro.css + la-rede.css. Vocabulário clonado da a referência (a referência container de 944, H1 56, H2 40, h3 de cartão 24, corpo 16/24 a 56% de branco, cartão de raio 40 com borda em degradê, revelação ao entrar na tela), trocados cor (verde → vermelho da marca), fonte (Public Sans) e mídia (renders e prints próprios). Fundo único preto: nenhuma seção pinta fundo de ponta a ponta. */ .mx-la-campanhas{--lp-mut:color-mix(in srgb, var(--m-texto) 56%, transparent);--lp-mut2:color-mix(in srgb, var(--m-texto) 66%, transparent);--lp-w:944px} /* ---------- molde ---------- */ .mx-la-campanhas .lp-s{position:relative;padding-block:var(--sec)} .mx-la-campanhas .lp-in{width:min(100% - var(--pad)*2,var(--lp-w));margin-inline:auto} .mx-la-campanhas .lp-in--l{width:min(100% - var(--pad)*2,1200px)} .mx-la-campanhas .lp-head{display:grid;justify-items:center;gap:16px;max-width:720px;margin:0 auto clamp(32px,5vw,56px);text-align:center} .mx-la-campanhas .lp-head--l{justify-items:start;text-align:left;margin-inline:0} .mx-la-campanhas .lp-h1{font-size:clamp(calc(2 * var(--mx-rem)),calc(1.1 * var(--mx-rem)) + 3.9vw,calc(3.5 * var(--mx-rem)));line-height:1;font-weight:600;letter-spacing:-.02em;text-wrap:balance;color:var(--m-texto)} .mx-la-campanhas .lp-h2{font-size:clamp(calc(1.75 * var(--mx-rem)),calc(1.2 * var(--mx-rem)) + 2.2vw,calc(2.5 * var(--mx-rem)));line-height:1;font-weight:600;letter-spacing:-.02em;text-wrap:balance;color:var(--m-texto)} .mx-la-campanhas .lp-h1 .a,.mx-la-campanhas .lp-h2 .a{color:var(--red-hi)} .mx-la-campanhas .lp-h1 .g,.mx-la-campanhas .lp-h2 .g{color:var(--lp-mut)} .mx-la-campanhas .lp-p{font-size:calc(1 * var(--mx-rem));line-height:1.5;color:var(--lp-mut);text-wrap:pretty} .mx-la-campanhas .lp-p a,.mx-la-campanhas .lp-txt a{color:var(--red-hi);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .mx-la-campanhas .lp-p b,.mx-la-campanhas .lp-p strong{color:var(--m-texto);font-weight:600} .mx-la-campanhas .lp-s .cap{max-width:none;text-align:center;margin-top:24px} /* ---------- hero (cobre a tela inteira; a mesma língua da home: preto, brilho vermelho, horizonte aceso) ---------- */ .mx-la-campanhas .lp-hero{position:relative;isolation:isolate;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:112px var(--pad) 96px;text-align:center;overflow:hidden;contain:paint; background:radial-gradient(60% 42% at 50% 0,color-mix(in srgb, var(--m-primaria) 13%, transparent) 0,transparent 72%)} .mx-la-campanhas .lp-hero-c{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:clamp(16px,2vw,24px);width:min(100%,860px)} /* tela baixa (celular deitado, notebook pequeno): o herói perde respiro, nunca conteúdo, para o botão principal continuar na primeira tela */ @media (max-height:600px){.mx-la-campanhas .lp-hero{padding-top:84px}.mx-la-campanhas .lp-hero-c{gap:10px}} .mx-la-campanhas .lp-hero .lp-h1.rw{font-size:clamp(calc(1.75 * var(--mx-rem)),calc(.9 * var(--mx-rem)) + 3.9vw,calc(3.5 * var(--mx-rem)));line-height:1;font-weight:600;letter-spacing:-.02em;color:var(--m-texto);max-width:100%} .mx-la-campanhas .lp-hero .lp-h1 .line{text-wrap:balance;overflow-wrap:anywhere} .mx-la-campanhas .lp-hero .lp-lede{max-width:38em;font-size:clamp(calc(1 * var(--mx-rem)),calc(.95 * var(--mx-rem)) + .3vw,calc(1.125 * var(--mx-rem)));line-height:1.5;color:var(--lp-mut2);text-wrap:pretty} .mx-la-campanhas .lp-hero .lp-sub{font-size:calc(.9 * var(--mx-rem));color:var(--lp-mut)} .mx-la-campanhas .lp-hero .lp-sub>a:not([class]){display:inline-flex;align-items:center;min-height:44px;color:var(--tx);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb, var(--m-texto) 30%, transparent)} .mx-la-campanhas .lp-hint{position:absolute;left:0;right:0;bottom:22px;display:grid;justify-items:center;gap:4px;font-size:calc(.8 * var(--mx-rem));letter-spacing:.04em;color:var(--lp-mut);pointer-events:none;transition:opacity .4s} .mx-la-campanhas .lp-hint svg{width:16px;height:16px;transform:rotate(90deg);animation:mx-la-campanhas-lp-desce 1.8s ease-in-out infinite;color:var(--red-hi)} .mx-la-campanhas .lp-hint.off{opacity:0} @keyframes mx-la-campanhas-lp-desce{0%,100%{translate:0 -2px}50%{translate:0 4px}} /* trilha de navegação (a BreadcrumbList também vai no JSON-LD) */ .mx-la-campanhas .lp-bc{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 8px;font-size:calc(.85 * var(--mx-rem));color:var(--lp-mut)} .mx-la-campanhas .lp-bc a{display:inline-flex;align-items:center;min-height:44px;color:var(--lp-mut2);transition:color .2s} .mx-la-campanhas .lp-bc li{display:flex;align-items:center;gap:8px} .mx-la-campanhas .lp-bc li+li::before{content:"";width:5px;height:5px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.55} .mx-la-campanhas .lp-bc [aria-current]{color:var(--m-texto)} @media (hover:hover) and (pointer:fine){.mx-la-campanhas .lp-bc a:hover{color:var(--m-texto)}} /* hero com a janela do painel em perspectiva, que some para o preto (a da a referência: terminal inclinado) */ .mx-la-campanhas .lp-hero--janela{justify-content:flex-start;padding-bottom:0} .mx-la-campanhas .lp-persp{position:relative;width:min(100%,1120px);margin:clamp(28px,4vw,48px) auto 0;perspective:1600px; -webkit-mask:linear-gradient(#000 38%,#0000 94%);mask:linear-gradient(#000 38%,#0000 94%)} .mx-la-campanhas .lp-persp-in{transform:rotateX(36deg) scale(.94);transform-origin:50% 0;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px color-mix(in srgb, var(--m-texto) 14%, transparent) inset,0 40px 120px -30px color-mix(in srgb, var(--m-primaria-2) 35%, transparent)} .mx-la-campanhas .lp-persp-in img{width:100%;height:auto} @media (max-width:599px){.mx-la-campanhas .lp-persp-in{transform:rotateX(28deg) scale(.96)}} @media (min-width:600px) and (max-width:1439px){.mx-la-campanhas .lp-hero--janela .lp-persp{width:min(100%,1120px,calc(70vw + 116px))}} /* hero com a imagem cobrindo a tela inteira (cena própria, escurecida para o texto) */ .mx-la-campanhas .lp-hero--img::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb, var(--m-fundo) 55%, transparent),color-mix(in srgb, var(--m-fundo) 20%, transparent) 40%,color-mix(in srgb, var(--m-fundo) 78%, transparent) 100%)} .mx-la-campanhas .lp-hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)} /* ---------- passos: texto à esquerda, celular no meio e o selo à direita (a referência: linhas de 408) ---------- */ .mx-la-campanhas .lp-passos{display:grid;gap:56px} .mx-la-campanhas .lp-passo{display:grid;justify-items:center;gap:28px;text-align:center} .mx-la-campanhas .lp-passo-n{font-size:calc(.875 * var(--mx-rem));line-height:20px;color:var(--m-texto);font-variant-numeric:tabular-nums} .mx-la-campanhas .lp-passo-t{margin-top:8px;font-size:clamp(calc(1.5 * var(--mx-rem)),calc(1.2 * var(--mx-rem)) + 1vw,calc(1.75 * var(--mx-rem)));line-height:1.04;font-weight:600;letter-spacing:-.02em;color:var(--lp-mut);text-wrap:balance} .mx-la-campanhas .lp-passo-t b{font-weight:600;color:var(--m-texto)} .mx-la-campanhas .lp-passo-d{margin:12px auto 0;font-size:calc(1 * var(--mx-rem));line-height:1.5;color:var(--lp-mut);max-width:30em;text-wrap:pretty} .mx-la-campanhas .lp-passo-v{position:relative;width:min(280px,76%);aspect-ratio:328/360} .mx-la-campanhas .lp-passo-m{position:absolute;inset:0;overflow:hidden;-webkit-mask:linear-gradient(#000 62%,#0000 98%);mask:linear-gradient(#000 62%,#0000 98%)} .mx-la-campanhas .lp-passo-m .lp-cel{width:100%} .mx-la-campanhas .lp-selo{position:absolute;right:-10%;bottom:4%;width:40%;aspect-ratio:1;border-radius:50%;overflow:hidden;pointer-events:none; box-shadow:0 0 0 1.5px color-mix(in srgb, var(--m-primaria-2) 55%, transparent),0 0 0 8px rgba(0,0,0,.9),0 24px 60px -12px color-mix(in srgb, var(--m-primaria-2) 50%, transparent)} .mx-la-campanhas .lp-selo img{display:block;width:100%;height:100%;object-fit:cover;object-position:46% 50%} @media (min-width:1024px){ .mx-la-campanhas .lp-passos{gap:0} .mx-la-campanhas .lp-passo{grid-template-columns:minmax(0,376px) 328px 160px;justify-content:center;column-gap:33px;min-height:408px;align-items:center;justify-items:stretch;text-align:left} .mx-la-campanhas .lp-passo-v{width:328px;justify-self:center} .mx-la-campanhas .lp-passo-d{margin-left:0;max-width:24em} .mx-la-campanhas .lp-selo{right:-193px;bottom:12px;width:232px} } .mx-la-campanhas .js-ok .lp-passo{opacity:0;transform:translateY(72px);transition:transform .6s ease-out,opacity .6s ease-out} .mx-la-campanhas .js-ok .lp-passo.on{opacity:1;transform:none} .mx-la-campanhas .js-ok .lp-passo-t b{color:color-mix(in srgb, var(--m-texto) 56%, transparent)} .mx-la-campanhas .js-ok .lp-passo.on .lp-passo-t b{animation:mx-la-campanhas-rd-luz .6s .3s forwards} @media (prefers-reduced-motion:reduce){.mx-la-campanhas .js-ok .lp-passo{transform:none;transition:opacity .3s}} /* ---------- celular com a moldura do iPhone e o print real dentro (percentuais do simulador da extensão) ---------- */ .mx-la-campanhas .lp-cel{position:relative;aspect-ratio:878/1806} .mx-la-campanhas .lp-cel-tela{position:absolute;left:4.328%;top:1.6611%;width:91.5718%;height:96.6777%;overflow:hidden;background:var(--m-fundo-2); -webkit-mask:none 0 0/100% 100% no-repeat;mask:none 0 0/100% 100% no-repeat} /* o print do sistema não tem barra de status: desce uma faixa escura sob a ilha dinâmica para ela não cobrir o cabeçalho */ .mx-la-campanhas .lp-cel-tela img{display:block;width:100%;height:auto;margin-top:12%} .mx-la-campanhas .lp-cel-m{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} /* ---------- janela do painel (o "Experimente aqui" da a referência: a tela real com um botão no meio) ---------- */ .mx-la-campanhas .lp-win{position:relative;border-radius:24px;padding:1px;background:linear-gradient(148deg,color-mix(in srgb, var(--m-borda), var(--m-texto) 12%),var(--m-superficie) 80%)} .mx-la-campanhas .lp-win-in{position:relative;border-radius:23px;overflow:hidden;background:var(--m-fundo-2)} .mx-la-campanhas .lp-win-bar{display:flex;align-items:center;gap:6px;height:28px;padding:0 14px;background:var(--m-superficie);border-bottom:1px solid var(--line)} .mx-la-campanhas .lp-win-bar i{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb, var(--m-borda), var(--m-texto) 8%)} .mx-la-campanhas .lp-win-in img{display:block;width:100%;height:auto} .mx-la-campanhas .lp-win-cta{position:absolute;left:50%;top:50%;translate:-50% -50%} /* ---------- cartões de leitura: imagem 16:9, título 24/24 e "Saiba mais" (a base de conhecimento da a referência) ---------- */ .mx-la-campanhas .lp-kb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px} .mx-la-campanhas .lp-kb-c{display:grid;align-content:start;gap:16px} .mx-la-campanhas .lp-kb-img{position:relative;display:block;aspect-ratio:304/171;border-radius:24px;overflow:hidden;background:var(--m-fundo-2);box-shadow:0 0 0 1px var(--line) inset} .mx-la-campanhas .lp-kb-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .mx-la-campanhas .lp-kb-t{font-size:clamp(calc(1.0625 * var(--mx-rem)),calc(.9 * var(--mx-rem)) + .8vw,calc(1.5 * var(--mx-rem)));line-height:1.08;font-weight:600;letter-spacing:-.02em;color:var(--m-texto);text-wrap:balance} .mx-la-campanhas .lp-kb-c .rd-link{justify-self:start;margin-block:-12px 0;transform:none} @media (min-width:768px){.mx-la-campanhas .lp-kb{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (hover:hover) and (pointer:fine){.mx-la-campanhas .lp-kb-c:hover .lp-kb-img img{transform:scale(1.04)}} /* ---------- números (cartão grande + etiqueta pequena) ---------- */ .mx-la-campanhas .lp-num{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .mx-la-campanhas .lp-num .rd-card{display:grid;align-content:space-between;gap:12px;min-height:200px;padding:24px 20px;overflow:hidden} .mx-la-campanhas .lp-num-v{font-size:clamp(calc(2.5 * var(--mx-rem)),calc(1.4 * var(--mx-rem)) + 4.2vw,calc(5 * var(--mx-rem)));line-height:.95;font-weight:600;letter-spacing:-.04em;color:var(--m-texto);font-variant-numeric:tabular-nums} .mx-la-campanhas .lp-num-v small{font-size:.38em;letter-spacing:-.02em;color:var(--lp-mut);font-weight:600;margin-left:.15em} .mx-la-campanhas .lp-num-v .a{color:var(--red-hi)} .mx-la-campanhas .lp-num-t{font-size:calc(1 * var(--mx-rem));line-height:1.25;font-weight:600;color:var(--m-texto)} .mx-la-campanhas .lp-num-d{margin-top:4px;font-size:calc(.9 * var(--mx-rem));line-height:1.4;color:var(--lp-mut)} @media (min-width:768px){.mx-la-campanhas .lp-num{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.mx-la-campanhas .lp-num .rd-card{min-height:260px;padding:28px 24px}} .mx-la-campanhas .lp-num--3{grid-template-columns:repeat(3,minmax(0,1fr))} .mx-la-campanhas .lp-num--3 .rd-card{padding:20px 14px;min-height:180px} @media (min-width:768px){.mx-la-campanhas .lp-num--3{grid-template-columns:repeat(3,minmax(0,1fr))}.mx-la-campanhas .lp-num--3 .rd-card{padding:32px 28px;min-height:280px}} .mx-la-campanhas .lp-num .lp-hl .rd-card,.mx-la-campanhas .lp-num .rd-card.lp-hl{background:linear-gradient(160deg,var(--m-primaria),color-mix(in srgb, var(--m-primaria), var(--m-fundo) 25%))} .mx-la-campanhas .lp-num .lp-hl .lp-num-d{color:color-mix(in srgb, var(--m-texto) 88%, transparent)} /* ---------- cartão de texto + imagem (bento largo) ---------- */ .mx-la-campanhas .lp-duo{display:grid;gap:16px} .mx-la-campanhas .lp-duo .rd-card{display:grid;gap:20px;align-content:start;overflow:hidden;padding:32px 24px} .mx-la-campanhas .lp-duo .rd-card .lp-m{margin:auto -24px -32px} .mx-la-campanhas .lp-duo .rd-h3{margin:0} @media (min-width:768px){.mx-la-campanhas .lp-duo{grid-template-columns:1fr 1fr}.mx-la-campanhas .lp-duo .rd-card{padding:40px 32px}.mx-la-campanhas .lp-duo .rd-card .lp-m{margin:auto -32px -40px}} .mx-la-campanhas .lp-m img{display:block;width:100%;height:auto} /* ---------- texto corrido (SEO): bloco citável, listas, subtítulos ---------- */ .mx-la-campanhas .lp-txt{max-width:680px;margin-inline:auto;color:var(--lp-mut2);font-size:calc(1.0625 * var(--mx-rem));line-height:1.65} .mx-la-campanhas .lp-txt h2{margin:clamp(32px,5vw,48px) 0 14px;font-size:clamp(calc(1.5 * var(--mx-rem)),calc(1.1 * var(--mx-rem)) + 1.6vw,calc(2 * var(--mx-rem)));line-height:1.1;font-weight:600;letter-spacing:-.02em;color:var(--m-texto);text-wrap:balance} .mx-la-campanhas .lp-txt h2:first-child{margin-top:0} .mx-la-campanhas .lp-txt h3{margin:28px 0 10px;font-size:calc(1.25 * var(--mx-rem));line-height:1.2;font-weight:600;letter-spacing:-.01em;color:var(--m-texto)} .mx-la-campanhas .lp-txt p+p{margin-top:14px} .mx-la-campanhas .lp-txt strong,.mx-la-campanhas .lp-txt b{color:var(--m-texto);font-weight:600} .mx-la-campanhas .lp-txt ul,.mx-la-campanhas .lp-txt ol{margin:14px 0;display:grid;gap:10px} .mx-la-campanhas .lp-txt ul li{position:relative;padding-left:22px} .mx-la-campanhas .lp-txt ul li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--red-hi)} .mx-la-campanhas .lp-txt ol{counter-reset:n} .mx-la-campanhas .lp-txt ol li{position:relative;padding-left:34px;counter-increment:n} .mx-la-campanhas .lp-txt ol li::before{content:counter(n);position:absolute;left:0;top:.05em;width:24px;height:24px;display:grid;place-items:center;border-radius:8px;border:1.5px solid color-mix(in srgb, var(--m-texto) 50%, transparent);font-size:calc(.8 * var(--mx-rem));font-weight:600;color:var(--m-texto)} .mx-la-campanhas .lp-cite{max-width:680px;margin:0 auto clamp(28px,4vw,40px);padding:22px 24px;border-radius:24px;background:linear-gradient(160deg,color-mix(in srgb, var(--m-primaria) 16%, transparent),color-mix(in srgb, var(--m-primaria) 4%, transparent) 60%);box-shadow:0 0 0 1px color-mix(in srgb, var(--m-primaria-2) 28%, transparent) inset;color:var(--m-texto);font-size:calc(1.0625 * var(--mx-rem));line-height:1.6} .mx-la-campanhas .lp-cite small{display:block;margin-bottom:8px;font-size:calc(.78 * var(--mx-rem));font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--red-hi)} /* ---------- tabela comparativa ( de verdade: cartão por linha no celular, tabela daqui para cima) ---------- */ .mx-la-campanhas .lp-tab-box{border-radius:24px} .mx-la-campanhas .lp-tab{width:100%;border-collapse:separate;border-spacing:0} .mx-la-campanhas .lp-tab caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .mx-la-campanhas .lp-tab thead{display:none} .mx-la-campanhas .lp-tab tbody,.mx-la-campanhas .lp-tab tr,.mx-la-campanhas .lp-tab th,.mx-la-campanhas .lp-tab td{display:block} .mx-la-campanhas .lp-tab tbody{display:grid;gap:12px} .mx-la-campanhas .lp-tab tr{display:grid;gap:10px;padding:18px;border-radius:24px;background:var(--m-superficie);box-shadow:0 0 0 1px var(--line) inset} .mx-la-campanhas .lp-tab tbody th{font-size:calc(1.0625 * var(--mx-rem));font-weight:600;text-align:left;color:var(--m-texto)} .mx-la-campanhas .lp-tab td{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:12px;font-size:calc(.95 * var(--mx-rem));line-height:1.4;color:var(--lp-mut2)} .mx-la-campanhas .lp-tab td::before{content:attr(data-r);color:var(--lp-mut);font-size:calc(.85 * var(--mx-rem))} .mx-la-campanhas .lp-tab tr.nos,.mx-la-campanhas .lp-tab tr.dest{background:linear-gradient(160deg,color-mix(in srgb, var(--m-primaria) 14%, transparent),var(--m-superficie) 70%);box-shadow:0 0 0 1px color-mix(in srgb, var(--m-primaria-2) 40%, transparent) inset} .mx-la-campanhas .lp-tab tr.nos th::after{content:"nós";margin-left:10px;padding:3px 9px;border-radius:999px;background:color-mix(in srgb, var(--m-primaria-2) 18%, transparent);font-size:calc(.72 * var(--mx-rem));font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--m-destaque)} @media (min-width:768px){ .mx-la-campanhas .lp-tab-box{overflow:hidden;box-shadow:0 0 0 1px var(--line) inset;background:var(--m-fundo-2)} .mx-la-campanhas .lp-tab{display:table} .mx-la-campanhas .lp-tab thead{display:table-header-group} .mx-la-campanhas .lp-tab tbody{display:table-row-group} .mx-la-campanhas .lp-tab tr{display:table-row;padding:0;border-radius:0;background:none;box-shadow:none} .mx-la-campanhas .lp-tab th,.mx-la-campanhas .lp-tab td{display:table-cell;padding:18px 20px;vertical-align:top;text-align:left} .mx-la-campanhas .lp-tab thead td,.mx-la-campanhas .lp-tab thead th{font-size:calc(.8 * var(--mx-rem));font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--lp-mut);border-bottom:1px solid var(--line)} .mx-la-campanhas .lp-tab td::before{display:none} .mx-la-campanhas .lp-tab tbody tr+tr th,.mx-la-campanhas .lp-tab tbody tr+tr td{border-top:1px solid var(--line)} .mx-la-campanhas .lp-tab tr.nos,.mx-la-campanhas .lp-tab tr.dest{background:linear-gradient(90deg,color-mix(in srgb, var(--m-primaria) 12%, transparent),transparent 80%);box-shadow:none} .mx-la-campanhas .lp-tab tr.nos th::after{display:none} } /* ---------- lista de verdades / "o que não somos" ---------- */ .mx-la-campanhas .lp-ck{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))} .mx-la-campanhas .lp-ck li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:16px;border-radius:20px;background:var(--m-superficie);box-shadow:0 0 0 1px var(--line) inset;font-size:calc(.95 * var(--mx-rem));line-height:1.4;color:var(--lp-mut2)} .mx-la-campanhas .lp-ck li b{display:block;margin-bottom:4px;color:var(--m-texto);font-weight:600} .mx-la-campanhas .lp-ck .ic{width:20px;height:20px;margin-top:2px;color:var(--red-hi)} .mx-la-campanhas .lp-ck--no .ic{color:var(--lp-mut)} @media (min-width:900px){.mx-la-campanhas .lp-ck{grid-template-columns:repeat(3,minmax(0,1fr))}.mx-la-campanhas .lp-ck--2{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ---------- cartões de página irmã (links internos) ---------- */ .mx-la-campanhas .lp-rel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .mx-la-campanhas .lp-rel li{display:grid;grid-template-columns:minmax(0,1fr)} .mx-la-campanhas .lp-rel a{position:relative;display:grid;align-content:space-between;gap:16px;min-height:150px;padding:18px;border-radius:24px;background:var(--m-superficie);box-shadow:0 0 0 1px var(--line) inset;transition:box-shadow .3s,transform .25s var(--ease)} .mx-la-campanhas .lp-rel b{padding-right:22px;font-size:calc(1.0625 * var(--mx-rem));line-height:1.2;font-weight:600;letter-spacing:-.01em;color:var(--m-texto)} .mx-la-campanhas .lp-rel span{font-size:calc(.9 * var(--mx-rem));line-height:1.4;color:var(--lp-mut)} .mx-la-campanhas .lp-rel i{position:absolute;right:16px;top:16px;color:var(--red-hi)} .mx-la-campanhas .lp-rel i .ic{width:18px;height:18px} .mx-la-campanhas .lp-rel a:active{transform:scale(.98)} @media (max-width:359.98px){.mx-la-campanhas .lp-rel a{padding:14px 12px;gap:12px}.mx-la-campanhas .lp-rel b{padding-right:16px;font-size:calc(.9375 * var(--mx-rem))}.mx-la-campanhas .lp-rel i{right:8px;top:8px}} @media (min-width:768px){.mx-la-campanhas .lp-rel{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.mx-la-campanhas .lp-rel a{padding:24px;min-height:180px}} @media (hover:hover) and (pointer:fine){.mx-la-campanhas .lp-rel a:hover{box-shadow:0 0 0 1px color-mix(in srgb, var(--m-primaria-2) 50%, transparent) inset;transform:translateY(-2px)}} /* ---------- faixa de fatos curtos (carência, prazo, mínimo) ---------- */ .mx-la-campanhas .lp-fatos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border-radius:24px;overflow:hidden;background:var(--line);box-shadow:0 0 0 1px var(--line)} .mx-la-campanhas .lp-fatos>div{display:grid;gap:4px;align-content:start;padding:20px 18px;background:var(--m-fundo)} .mx-la-campanhas .lp-fatos b{font-size:clamp(calc(1.5 * var(--mx-rem)),calc(1.1 * var(--mx-rem)) + 1.6vw,calc(2.25 * var(--mx-rem)));line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--m-texto)} .mx-la-campanhas .lp-fatos span{font-size:calc(.9 * var(--mx-rem));line-height:1.35;color:var(--lp-mut)} @media (min-width:768px){.mx-la-campanhas .lp-fatos{grid-template-columns:repeat(4,minmax(0,1fr))}.mx-la-campanhas .lp-fatos>div{padding:28px 24px}} /* ---------- abas (nichos, ferramentas) ---------- */ .mx-la-campanhas .lp-abas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px} .mx-la-campanhas .lp-abas button{min-height:44px;padding:0 18px;border-radius:999px;font-weight:600;font-size:calc(.95 * var(--mx-rem));color:var(--lp-mut2);box-shadow:0 0 0 1px var(--line2) inset;transition:background .2s,color .2s} .mx-la-campanhas .lp-abas button[aria-selected="true"]{background:var(--m-texto);color:var(--m-fundo);box-shadow:none} .mx-la-campanhas .lp-painel[hidden]{display:none} @media (hover:hover) and (pointer:fine){.mx-la-campanhas .lp-abas button[aria-selected="false"]:hover{background:color-mix(in srgb, var(--m-texto) 8%, transparent);color:var(--m-texto)}} /* ---------- fechamento e FAQ nas páginas internas: a mesma peça da home, com a escala da a referência ---------- */ .mx-la-campanhas .closing .close-titulo.lp-h2{font-size:clamp(calc(2 * var(--mx-rem)),calc(1.1 * var(--mx-rem)) + 4vw,calc(3.5 * var(--mx-rem)));line-height:1.04;letter-spacing:-.025em;font-weight:600} .mx-la-campanhas .lp-faq h2{font-size:clamp(calc(1.75 * var(--mx-rem)),calc(1.1 * var(--mx-rem)) + 2.4vw,calc(2.5 * var(--mx-rem)));font-weight:600;letter-spacing:-.02em;line-height:1.05} /* rodapé: cinco colunas (as cinco famílias de página, 28/10/2026). Celular: 2 + 2 + a quinta na largura toda, com a lista em 2; tablet: 3 + 2 numa grade de 6; computador: 5 lado a lado. Nunca coluna órfã. */ .mx-la-campanhas .lp-foot .foot-cols{grid-template-columns:1fr 1fr;gap:8px 16px} .mx-la-campanhas .lp-foot .foot-cols h3 a{color:inherit} .mx-la-campanhas .lp-foot .foot-cols li{display:flex} .mx-la-campanhas .lp-foot .foot-cols a{display:flex;align-items:center;width:100%;line-height:1.25;padding-block:6px} @media (max-width:699px){.mx-la-campanhas .lp-foot .foot-cols>div:last-child{grid-column:1/-1}.mx-la-campanhas .lp-foot .foot-cols>div:last-child ul{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}} @media (min-width:700px) and (max-width:1023px){.mx-la-campanhas .lp-foot .foot-cols{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px 24px}.mx-la-campanhas .lp-foot .foot-cols>div{grid-column:span 2}.mx-la-campanhas .lp-foot .foot-cols>div:nth-child(n+4){grid-column:span 3}} @media (min-width:1024px){.mx-la-campanhas .lp-foot .foot-cols{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 24px}} .mx-la-campanhas .lc-js .ft.in .foot-cols>div:nth-child(4){animation-delay:.36s} .mx-la-campanhas .lc-js .ft.in .foot-cols>div:nth-child(5){animation-delay:.44s} /* link dentro da resposta do FAQ: área de toque de 44px sem mexer na entrelinha; link na legenda sempre sublinhado */ .mx-la-campanhas .lp-faq #faq-list p a{padding-block:12.5px} .mx-la-campanhas .cap a{text-decoration:underline;text-underline-offset:3px} /* trilha no celular: uma linha só; o último item (o nome da página) encurta com reticências em vez de quebrar com a seta solta */ @media (max-width:599px){ .mx-la-campanhas .lp-bc{flex-wrap:nowrap;max-width:100%} .mx-la-campanhas .lp-bc li{flex:none} .mx-la-campanhas .lp-bc li:last-child{flex:0 1 auto;min-width:0} .mx-la-campanhas .lp-bc [aria-current]{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} } /* navegação das páginas internas: os cinco rótulos são mais largos que os da home e, com o "Entrar" em vidro e o "Criar conta" neon da barra (27/10/2026), só cabem CENTRADOS sem tocar o "Entrar", também na cápsula rolada (80px mais estreita), a partir de 1080 px. Até 1079 vale o menu do celular; de 1080 a 1219 as abas e o "Entrar" encolhem um pouco. Folga mínima medida ~22px nas duas pontas (em 1060 e 1200 dava 13: 1px acima do limite de 12, sem margem para a fonte de outro sistema) */ @media (min-width:900px) and (max-width:1079px){ .mx-la-campanhas .nav{display:flex} .mx-la-campanhas .nav-links,.mx-la-campanhas .nav-login{display:none} .mx-la-campanhas .nav-burger{display:grid!important} .mx-la-campanhas .nav-sheet:not([hidden]){display:grid!important} } @media (min-width:1080px) and (max-width:1219px){ .mx-la-campanhas .nav-links{gap:2px} .mx-la-campanhas .nav-links a{padding-inline:6px;font-size:calc(.9375 * var(--mx-rem))} .mx-la-campanhas .nav-login{padding:0 12px 0 10px;gap:6px} .mx-la-campanhas .nav-actions{gap:6px} } .mx-la-campanhas .nav-wrap.scrolled .nav{background:color-mix(in srgb, var(--m-fundo-2) 86%, transparent)} @media (prefers-reduced-motion:reduce){.mx-la-campanhas .lp-hint svg{animation:none}.mx-la-campanhas .lp-kb-img img{transition:none}} /* /campanhas-e-desafios — clone de a referência Só classes p-cmp-* e o hero desta página. Cartão da casa: borda de luz em degradê (padding-box + border-box), raio 24 no celular e 40 a partir de 768. Movimento só com transform e opacity; "menos movimento" desliga a flutuação. */ .mx-la-campanhas .p-cmp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .mx-la-campanhas .p-cmp-trofeu{width:100%;height:100%} /* ---------- hero centrado (a a referência: título, mão com o aparelho, três mini-cartões, um botão) ---------- o kit monta trilha, h1, lede, botão e sub dentro de .lp-hero-c e a mídia depois; aqui o bloco some (contents) e a ordem passa a ser a da referência: trilha, título, apoio, mídia, mini-cartões, botão */ .mx-la-campanhas .lp-hero--janela{gap:clamp(10px,1.6vw,18px);padding-bottom:64px} .mx-la-campanhas .lp-hero--janela .lp-hero-c{display:contents} .mx-la-campanhas .lp-hero--janela .lp-hero-c>nav{order:1} .mx-la-campanhas .lp-hero--janela .lp-h1{order:2} .mx-la-campanhas .lp-hero--janela .lp-lede{order:3;max-width:34em} .mx-la-campanhas .lp-hero--janela .lp-persp{order:4} .mx-la-campanhas .lp-hero--janela .lp-sub{order:5} .mx-la-campanhas .lp-hero--janela .hero-cta{order:6} @media (min-width:768px){.mx-la-campanhas .lp-hero--janela .lp-persp::before{inset:6% -30% 0}.mx-la-campanhas .lp-hero--janela .lp-h1 .line{display:inline}.mx-la-campanhas .lp-hero--janela .lp-lede{max-width:46em}} .mx-la-campanhas .lp-hero--janela .lp-persp{width:auto;margin:0;perspective:none;-webkit-mask:none;mask:none;isolation:isolate} .mx-la-campanhas .lp-hero--janela .lp-persp::before{content:"";position:absolute;inset:6% -8% 0;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb, var(--m-primaria) 45%, transparent),color-mix(in srgb, var(--m-primaria) 12%, transparent) 55%,transparent);pointer-events:none} .mx-la-campanhas .lp-hero--janela .lp-persp-in{transform:none;border-radius:0;overflow:visible;box-shadow:none} /* a mídia encolhe pela ALTURA da tela, para o botão caber na primeira tela; em tela muito baixa (celular deitado) ela sai e ficam o título, os três cartões e o botão */ .mx-la-campanhas .lp-hero--janela .lp-persp-in img{display:block;width:auto;height:clamp(150px,calc(100svh - 560px),560px);margin-inline:auto; -webkit-mask:linear-gradient(180deg,#000 80%,transparent);mask:linear-gradient(180deg,#000 80%,transparent)} @media (max-height:600px){.mx-la-campanhas .lp-hero--janela .lp-persp{display:none}} /* os três mini-cartões, lado a lado também no celular */ .mx-la-campanhas .lp-hero--janela .lp-sub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(100%,600px);margin:0;color:var(--m-texto)} .mx-la-campanhas .p-cmp-mini{position:relative;display:flex;align-items:flex-end;min-height:84px;padding:12px;border-radius:16px;overflow:clip;text-align:left; border:1px solid transparent;background:linear-gradient(160deg,var(--m-superficie),var(--m-fundo-2)) padding-box,linear-gradient(180deg,color-mix(in srgb, var(--m-texto) 18%, transparent),color-mix(in srgb, var(--m-texto) 5%, transparent)) border-box} .mx-la-campanhas .p-cmp-mini-t{position:relative;z-index:1;font-size:calc(.9375 * var(--mx-rem));line-height:1.2;color:var(--m-texto);text-shadow:0 1px 8px var(--m-fundo)} .mx-la-campanhas .p-cmp-mini img{position:absolute;right:-14px;top:-12px;width:64px;height:64px;opacity:.95;pointer-events:none} @media (min-width:768px){ .mx-la-campanhas .lp-hero--janela .lp-sub{gap:20px} .mx-la-campanhas .p-cmp-mini{min-height:96px;padding:14px 16px;border-radius:20px} .mx-la-campanhas .p-cmp-mini-t{font-size:calc(1 * var(--mx-rem))} .mx-la-campanhas .p-cmp-mini img{right:-6px;top:-6px;width:96px;height:96px} } /* ---------- cartões com a borda de luz da casa ---------- */ .mx-la-campanhas .p-cmp-palco,.mx-la-campanhas .p-cmp-n,.mx-la-campanhas .p-cmp-b,.mx-la-campanhas .p-cmp-ev-ic{border:1px solid transparent; background:radial-gradient(120% 120% at 0 0,var(--m-superficie-2) 0,var(--m-fundo-2) 60%,var(--m-fundo-2) 100%) padding-box, linear-gradient(180deg,color-mix(in srgb, var(--m-texto) 20%, transparent),color-mix(in srgb, var(--m-texto) 5%, transparent) 45%,color-mix(in srgb, var(--m-texto) 10%, transparent)) border-box} /* ---------- 1. o cartão-palco ---------- */ .mx-la-campanhas .p-cmp-s1 .lp-cite{margin-bottom:clamp(24px,4vw,48px)} .mx-la-campanhas .p-cmp-palco{position:relative;isolation:isolate;overflow:clip;height:clamp(340px,30vw + 230px,500px);border-radius:24px; background:radial-gradient(70% 80% at 50% 105%,color-mix(in srgb, var(--m-primaria) 50%, transparent),color-mix(in srgb, var(--m-primaria) 12%, transparent) 55%,transparent 75%) padding-box, radial-gradient(120% 120% at 0 0,var(--m-superficie-2) 0,var(--m-fundo-2) 60%,var(--m-fundo-2) 100%) padding-box, linear-gradient(180deg,color-mix(in srgb, var(--m-texto) 20%, transparent),color-mix(in srgb, var(--m-texto) 5%, transparent) 45%,color-mix(in srgb, var(--m-texto) 10%, transparent)) border-box} .mx-la-campanhas .p-cmp-ped{position:absolute;left:50%;bottom:-1px;width:min(64%,640px);height:34%;translate:-50% 0;z-index:-1;border-radius:28px 28px 0 0; background:linear-gradient(180deg,var(--m-superficie-2),var(--m-fundo-2) 60%);box-shadow:0 1px 0 color-mix(in srgb, var(--m-texto) 14%, transparent) inset,0 -30px 60px -20px rgba(0,0,0,.8)} .mx-la-campanhas .p-cmp-ped::before{content:"";position:absolute;inset:-14% 0 auto;height:28%;border-radius:50%;background:radial-gradient(closest-side,var(--m-superficie-2),var(--m-superficie) 80%);box-shadow:0 1px 0 color-mix(in srgb, var(--m-texto) 10%, transparent) inset} .mx-la-campanhas .p-cmp-palco-med{position:absolute;left:50%;bottom:24%;width:min(78%,560px);translate:-50% 0;pointer-events:none} .mx-la-campanhas .p-cmp-palco-med img{display:block;width:100%;height:auto;mix-blend-mode:lighten; -webkit-mask:radial-gradient(farthest-side at 50% 52%,#000 60%,#0000 100%);mask:radial-gradient(farthest-side at 50% 52%,#000 60%,#0000 100%)} .mx-la-campanhas .p-cmp-tile{position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;color:var(--red-hi); background:linear-gradient(160deg,var(--m-superficie-2),var(--m-fundo-2));box-shadow:0 0 0 1px color-mix(in srgb, var(--m-texto) 14%, transparent) inset,0 18px 30px -12px #000} .mx-la-campanhas .p-cmp-tile svg{width:22px;height:22px} .mx-la-campanhas .p-cmp-tile--1{left:7%;top:16%;rotate:-8deg} .mx-la-campanhas .p-cmp-tile--2{right:6%;top:6%;rotate:9deg} .mx-la-campanhas .p-cmp-tile--3{right:12%;top:46%;rotate:-6deg} .mx-la-campanhas .p-cmp-palco-btn{position:absolute;left:50%;bottom:8%;translate:-50% 0} @media (min-width:768px){ .mx-la-campanhas .p-cmp-palco{border-radius:40px} .mx-la-campanhas .p-cmp-tile{width:84px;height:84px;border-radius:22px} .mx-la-campanhas .p-cmp-tile svg{width:38px;height:38px} .mx-la-campanhas .p-cmp-tile--1{left:5%;top:14%} .mx-la-campanhas .p-cmp-tile--2{right:8%;top:5%} .mx-la-campanhas .p-cmp-tile--3{right:18%;top:44%} .mx-la-campanhas .p-cmp-palco-med{width:min(52%,560px)} } /* ---------- 2. as três partes de um desafio sobre o placar ---------- */ .mx-la-campanhas .p-cmp-niv{position:relative} .mx-la-campanhas .p-cmp-niv-m{display:block;border-radius:16px;overflow:hidden; -webkit-mask:linear-gradient(180deg,#000 45%,transparent 92%);mask:linear-gradient(180deg,#000 45%,transparent 92%)} .mx-la-campanhas .p-cmp-niv-m img{display:block;width:100%;height:auto} .mx-la-campanhas .p-cmp-niv-g{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:-30%} .mx-la-campanhas .p-cmp-r{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none} .mx-la-campanhas .p-cmp-n{position:relative;display:grid;align-content:start;justify-items:center;gap:12px;padding:28px 10px 16px;border-radius:20px;text-align:center} .mx-la-campanhas .p-cmp-n--hl{background:radial-gradient(120% 90% at 50% 0,color-mix(in srgb, var(--m-primaria) 22%, transparent),var(--m-fundo-2) 60%) padding-box,linear-gradient(180deg,var(--red-hi),color-mix(in srgb, var(--m-primaria) 25%, transparent) 60%,color-mix(in srgb, var(--m-primaria) 50%, transparent)) border-box} .mx-la-campanhas .p-cmp-n-top{display:grid;justify-items:center;gap:4px;width:100%} .mx-la-campanhas .p-cmp-pill{position:absolute;left:50%;top:0;translate:-50% -50%;padding:6px 14px;border-radius:999px;background:var(--m-texto);color:var(--m-fundo);font-weight:600;font-size:calc(.9375 * var(--mx-rem));line-height:1.1;white-space:nowrap} .mx-la-campanhas .p-cmp-n--hl .p-cmp-pill{background:var(--red);color:var(--m-texto)} .mx-la-campanhas .p-cmp-n-ic{width:56px;height:56px;margin-bottom:6px} .mx-la-campanhas .p-cmp-n-top small{font-size:calc(.875 * var(--mx-rem));line-height:1.25;color:var(--lp-mut2)} .mx-la-campanhas .p-cmp-n-top b{font-size:clamp(calc(1.125 * var(--mx-rem)),calc(.7 * var(--mx-rem)) + 2vw,calc(2.75 * var(--mx-rem)));line-height:1.05;font-weight:600;letter-spacing:-.02em;color:var(--m-texto);text-wrap:balance} /* o número do cartão em destaque: o --red-hi (#ff5448) dava 4,07–4,37:1 sobre o brilho vermelho do topo do cartão (medição de 19/10/2026); o mesmo vermelho um tom mais claro passa de 4,5:1 sem trocar a cor da marca */ .mx-la-campanhas .p-cmp-n--hl .p-cmp-n-top b{color:var(--m-destaque)} /* sobre o brilho vermelho do cartão destaque: #ff7268 dava 4,48:1 */ .mx-la-campanhas .p-cmp-n-dl{display:grid;gap:12px;margin:0;width:100%} .mx-la-campanhas .p-cmp-n-dl div{display:grid;gap:2px} .mx-la-campanhas .p-cmp-n-dl dt{font-size:calc(.9375 * var(--mx-rem));color:var(--lp-mut2)} .mx-la-campanhas .p-cmp-n-dl dd{margin:0;font-size:calc(1 * var(--mx-rem));line-height:1.3;color:var(--m-texto)} /* no celular: os três cartões lado a lado (pílula, ícone, valor) e as linhas do cartão tocado numa faixa larga */ @media (max-width:767.98px){ @supports selector(:has(*)){ .mx-la-campanhas .p-cmp-n{display:contents} .mx-la-campanhas .p-cmp-n-top{grid-row:1;position:relative;align-content:start;min-height:100%;padding:24px 6px 14px;border-radius:18px;cursor:pointer; border:1px solid transparent;background:radial-gradient(120% 120% at 0 0,var(--m-superficie-2) 0,var(--m-fundo-2) 60%,var(--m-fundo-2) 100%) padding-box,linear-gradient(180deg,color-mix(in srgb, var(--m-texto) 20%, transparent),color-mix(in srgb, var(--m-texto) 5%, transparent) 45%,color-mix(in srgb, var(--m-texto) 10%, transparent)) border-box; transition:transform .18s var(--ease)} .mx-la-campanhas .p-cmp-n-top:active{transform:scale(.98)} .mx-la-campanhas .p-cmp-n-ic{width:44px;height:44px;margin:0} .mx-la-campanhas .p-cmp-n-dl,.mx-la-campanhas .p-cmp-n-btn{display:none;grid-column:1/-1} .mx-la-campanhas .p-cmp-n-dl{grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px;padding:14px 12px;border-radius:18px;background:var(--m-fundo-2);box-shadow:0 0 0 1px var(--line2) inset;text-align:center} .mx-la-campanhas .p-cmp-n-dl dd{font-size:calc(.9375 * var(--mx-rem))} .mx-la-campanhas .p-cmp-n-btn{grid-row:3;justify-self:center;margin-top:4px} .mx-la-campanhas .p-cmp-niv-g:has(#p-cmp-r1:checked) .p-cmp-n--meta :is(.p-cmp-n-dl), .mx-la-campanhas .p-cmp-niv-g:has(#p-cmp-r2:checked) .p-cmp-n--placar :is(.p-cmp-n-dl), .mx-la-campanhas .p-cmp-niv-g:has(#p-cmp-r3:checked) .p-cmp-n--premio :is(.p-cmp-n-dl){display:grid} .mx-la-campanhas .p-cmp-niv-g:has(#p-cmp-r1:checked) .p-cmp-n--meta .p-cmp-n-btn, .mx-la-campanhas .p-cmp-niv-g:has(#p-cmp-r2:checked) .p-cmp-n--placar .p-cmp-n-btn, .mx-la-campanhas .p-cmp-niv-g:has(#p-cmp-r3:checked) .p-cmp-n--premio .p-cmp-n-btn{display:inline-flex} .mx-la-campanhas .p-cmp-niv-g:has(#p-cmp-r1:checked) .p-cmp-n--meta .p-cmp-n-top, .mx-la-campanhas .p-cmp-niv-g:has(#p-cmp-r2:checked) .p-cmp-n--placar .p-cmp-n-top, .mx-la-campanhas .p-cmp-niv-g:has(#p-cmp-r3:checked) .p-cmp-n--premio .p-cmp-n-top{background:radial-gradient(120% 90% at 50% 0,color-mix(in srgb, var(--m-primaria) 24%, transparent),var(--m-fundo-2) 65%) padding-box,linear-gradient(180deg,var(--red-hi),color-mix(in srgb, var(--m-primaria) 30%, transparent) 60%,color-mix(in srgb, var(--m-primaria) 55%, transparent)) border-box} .mx-la-campanhas .p-cmp-niv-g:has(#p-cmp-r1:focus-visible) .p-cmp-n--meta .p-cmp-n-top, .mx-la-campanhas .p-cmp-niv-g:has(#p-cmp-r2:focus-visible) .p-cmp-n--placar .p-cmp-n-top, .mx-la-campanhas .p-cmp-niv-g:has(#p-cmp-r3:focus-visible) .p-cmp-n--premio .p-cmp-n-top{outline:2px solid var(--red-hi);outline-offset:3px} } } @media (min-width:768px){ .mx-la-campanhas .p-cmp-r{display:none} .mx-la-campanhas .p-cmp-niv-m{border-radius:24px} .mx-la-campanhas .p-cmp-niv-g{gap:16px;margin-top:-16%} .mx-la-campanhas .p-cmp-n{gap:16px;padding:40px 20px 28px;border-radius:40px} .mx-la-campanhas .p-cmp-pill{padding:8px 20px;font-size:calc(1.25 * var(--mx-rem))} .mx-la-campanhas .p-cmp-n-ic{width:76px;height:76px} .mx-la-campanhas .p-cmp-n-top small{font-size:calc(1 * var(--mx-rem))} .mx-la-campanhas .p-cmp-n-dl dt{font-size:calc(1 * var(--mx-rem))} .mx-la-campanhas .p-cmp-n-dl dd{font-size:calc(1.125 * var(--mx-rem))} } /* ---------- 3. a aba Campanhas: dois aparelhos, o ladrilho do troféu, a frase e o link ---------- */ .mx-la-campanhas .p-cmp-ev{position:relative;isolation:isolate;display:grid;justify-items:center} .mx-la-campanhas .p-cmp-ev::before{content:"";position:absolute;inset:-6% 0 30%;z-index:-1;background:radial-gradient(50% 50% at 62% 45%,color-mix(in srgb, var(--m-primaria) 32%, transparent),transparent 70%),radial-gradient(40% 40% at 30% 60%,color-mix(in srgb, var(--m-primaria) 18%, transparent),transparent 70%);pointer-events:none} .mx-la-campanhas .p-cmp-ev-cels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:clamp(14px,3vw,36px);width:min(100%,560px); -webkit-mask:linear-gradient(180deg,#000 58%,transparent 92%);mask:linear-gradient(180deg,#000 58%,transparent 92%)} .mx-la-campanhas .p-cmp-ev-c--a{margin-top:22%} .mx-la-campanhas .p-cmp-ev-c .lp-cel{filter:drop-shadow(0 30px 40px color-mix(in srgb, var(--m-fundo) 60%, transparent))} .mx-la-campanhas .p-cmp-ev-x{position:relative;display:grid;justify-items:center;gap:12px;margin-top:-14%;max-width:30em;text-align:center} .mx-la-campanhas .p-cmp-ev-ic{display:grid;place-items:center;width:56px;height:56px;padding:13px;border-radius:16px;color:var(--red-hi);box-shadow:0 0 30px -6px color-mix(in srgb, var(--m-primaria-2) 60%, transparent)} .mx-la-campanhas .p-cmp-ev-t{font-size:clamp(calc(1.25 * var(--mx-rem)),calc(1 * var(--mx-rem)) + 1vw,calc(1.625 * var(--mx-rem)));line-height:1.2;color:var(--lp-mut);text-wrap:balance} .mx-la-campanhas .p-cmp-ev-t b{display:block;font-weight:600;color:var(--m-texto)} @media (min-width:768px){.mx-la-campanhas .p-cmp-ev-ic{width:72px;height:72px;padding:16px;border-radius:20px}.mx-la-campanhas .p-cmp-ev-x{margin-top:-9%}} /* ---------- 4. bento: cartão largo + duas colunas desencontradas (a da esquerda alta em cima, a da direita alta embaixo) ---------- */ .mx-la-campanhas .p-cmp-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; grid-template-areas:"w w" "a c" "a d" "b d";grid-template-rows:auto minmax(190px,auto) minmax(40px,auto) minmax(190px,auto)} .mx-la-campanhas .p-cmp-b{position:relative;isolation:isolate;overflow:clip;display:grid;align-content:start;justify-items:center;gap:10px;padding:18px 12px;border-radius:24px;text-align:center} .mx-la-campanhas .p-cmp-b--w{grid-area:w;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:12px;text-align:center} .mx-la-campanhas .p-cmp-b--a{grid-area:a} .mx-la-campanhas .p-cmp-b--b{grid-area:b} .mx-la-campanhas .p-cmp-b--c{grid-area:c} .mx-la-campanhas .p-cmp-b--d{grid-area:d} /* os quatro de baixo: texto em cima; o print desce ao pé e o medalhão ocupa só a sobra (não dita a altura do cartão) */ .mx-la-campanhas .p-cmp-b--a,.mx-la-campanhas .p-cmp-b--b,.mx-la-campanhas .p-cmp-b--c,.mx-la-campanhas .p-cmp-b--d{display:flex;flex-direction:column;align-items:center} .mx-la-campanhas .p-cmp-b h3{font-size:calc(1.0625 * var(--mx-rem));line-height:1.2;font-weight:600;letter-spacing:-.01em;color:var(--lp-mut2);text-wrap:balance} .mx-la-campanhas .p-cmp-b h3 b{font-weight:600;color:var(--m-texto)} .mx-la-campanhas .p-cmp-b p{font-size:calc(1 * var(--mx-rem));line-height:1.45;color:var(--lp-mut2);text-wrap:pretty} .mx-la-campanhas .p-cmp-lg{display:none} .mx-la-campanhas .p-cmp-b-x{display:grid;justify-items:center;gap:10px} .mx-la-campanhas .p-cmp-b-vid{position:relative;display:grid;align-items:center;min-height:180px} .mx-la-campanhas .p-cmp-b-vid-med{position:absolute;inset:-20% 0 -20% -10%;z-index:-1;pointer-events:none} .mx-la-campanhas .p-cmp-b-vid-med img{width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten;opacity:.75; -webkit-mask:radial-gradient(farthest-side,#000 55%,#0000);mask:radial-gradient(farthest-side,#000 55%,#0000)} .mx-la-campanhas .p-cmp-vidro{display:grid;gap:4px;margin:0;padding:6px;list-style:none;border-radius:16px;text-align:left; background:color-mix(in srgb, var(--m-superficie) 72%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px color-mix(in srgb, var(--m-texto) 14%, transparent) inset,0 24px 50px -20px #000} .mx-la-campanhas .p-cmp-vidro li{display:grid;grid-template-columns:16px 1fr;align-items:center;gap:8px;padding:8px;border-radius:10px;font-size:calc(.875 * var(--mx-rem));line-height:1.2;color:var(--lp-mut2)} .mx-la-campanhas .p-cmp-vidro li svg{width:16px;height:16px;color:var(--lp-mut)} .mx-la-campanhas .p-cmp-vidro li.on{background:color-mix(in srgb, var(--m-texto) 8%, transparent);color:var(--m-texto);box-shadow:0 0 0 1px color-mix(in srgb, var(--m-primaria-2) 45%, transparent) inset} .mx-la-campanhas .p-cmp-vidro li.on svg{color:var(--red-hi)} .mx-la-campanhas .p-cmp-b-prints{display:grid;gap:6px;width:calc(100% + 24px);margin:auto -12px -18px 0;padding-top:6px;align-self:flex-start} .mx-la-campanhas .p-cmp-b-prints img{display:block;width:100%;height:auto;border-radius:10px 0 0 10px;box-shadow:0 0 0 1px color-mix(in srgb, var(--m-texto) 10%, transparent),0 20px 40px -18px #000} .mx-la-campanhas .p-cmp-b-prints--pilha{position:relative;margin-bottom:6px} .mx-la-campanhas .p-cmp-b-prints--pilha::after{content:"";position:absolute;left:6%;right:0;bottom:-8px;height:24px;z-index:-1;border-radius:0 0 10px 10px;background:var(--m-superficie);box-shadow:0 0 0 1px color-mix(in srgb, var(--m-texto) 8%, transparent)} .mx-la-campanhas .p-cmp-b-med{position:relative;flex:1 1 0;min-height:110px;width:calc(100% + 24px);margin:0 -12px -18px;pointer-events:none} /* a moeda enche a caixa (cover) e passa do pé: o corte é do próprio quadro, nada sai do cartão */ .mx-la-campanhas .p-cmp-b-med img{position:absolute;left:0;top:0;display:block;width:100%;height:170%;object-fit:cover;object-position:50% 0;mix-blend-mode:lighten; -webkit-mask:radial-gradient(farthest-side at 50% 52%,#000 60%,#0000 100%);mask:radial-gradient(farthest-side at 50% 52%,#000 60%,#0000 100%)} .mx-la-campanhas .p-cmp-b-med--alto img{height:190%} /* celular: o apoio curto aparece nos quatro de baixo e o print entra em escala de leitura, sangrando pela borda direita */ @media (max-width:767.98px){ .mx-la-campanhas :is(.p-cmp-b--a,.p-cmp-b--b,.p-cmp-b--c,.p-cmp-b--d) .p-cmp-lg{display:block;font-size:calc(.875 * var(--mx-rem));line-height:1.35} .mx-la-campanhas .p-cmp-b-prints{width:calc(100% + 12px); -webkit-mask:linear-gradient(90deg,#000 72%,transparent 100%);mask:linear-gradient(90deg,#000 72%,transparent 100%)} /* a caixa do print fica dentro do cartão; a imagem é que cresce 2,5x e mostra o começo da regra (object-fit) */ .mx-la-campanhas .p-cmp-b-prints img{aspect-ratio:1076/495;object-fit:cover;object-position:left center;border-radius:10px 0 0 10px} .mx-la-campanhas .p-cmp-b-prints--pilha img{aspect-ratio:1076/400} .mx-la-campanhas .p-cmp-b-prints--pilha::after{display:none} } @media (min-width:768px){ .mx-la-campanhas .p-cmp-bento{gap:16px;grid-template-rows:auto minmax(300px,auto) minmax(110px,auto) minmax(300px,auto)} .mx-la-campanhas .p-cmp-b{padding:36px 32px;gap:14px;border-radius:40px} .mx-la-campanhas .p-cmp-b--w{padding:40px;min-height:320px} .mx-la-campanhas .p-cmp-b h3{font-size:calc(1.625 * var(--mx-rem));line-height:1.15} .mx-la-campanhas .p-cmp-lg{display:block} .mx-la-campanhas .p-cmp-b-x{gap:14px} .mx-la-campanhas .p-cmp-vidro{padding:8px;gap:6px;max-width:300px;margin-left:auto} .mx-la-campanhas .p-cmp-vidro li{grid-template-columns:18px 1fr;padding:12px 14px;font-size:calc(1 * var(--mx-rem))} .mx-la-campanhas .p-cmp-b-prints{width:calc(100% + 32px);margin:auto -32px -36px 0;padding-top:10px;gap:10px} .mx-la-campanhas .p-cmp-b-prints--pilha{margin-bottom:10px} .mx-la-campanhas .p-cmp-b-med{width:calc(100% + 64px);margin:4px -32px -36px;min-height:150px} .mx-la-campanhas .p-cmp-b-med img{height:125%;object-position:50% 20%} .mx-la-campanhas .p-cmp-b-med--alto img{height:125%} } /* ---------- movimento: flutuação contínua (transform), hover só com mouse ---------- */ @media (prefers-reduced-motion:no-preference){ .mx-la-campanhas .p-cmp-palco-med{animation:mx-la-campanhas-p-cmp-flutua 6s var(--ease) infinite alternate} .mx-la-campanhas .p-cmp-tile--1{animation:mx-la-campanhas-p-cmp-boia 5s ease-in-out infinite alternate} .mx-la-campanhas .p-cmp-tile--2{animation:mx-la-campanhas-p-cmp-boia 6s ease-in-out -2s infinite alternate} .mx-la-campanhas .p-cmp-tile--3{animation:mx-la-campanhas-p-cmp-boia 5.5s ease-in-out -4s infinite alternate} .mx-la-campanhas .p-cmp-ev-c--a{animation:mx-la-campanhas-p-cmp-boia 7s ease-in-out infinite alternate} .mx-la-campanhas .p-cmp-ev-c--b{animation:mx-la-campanhas-p-cmp-boia 7s ease-in-out -3.5s infinite alternate} } @keyframes mx-la-campanhas-p-cmp-flutua{from{transform:translateY(0)}to{transform:translateY(-12px)}} @keyframes mx-la-campanhas-p-cmp-boia{from{transform:translateY(0)}to{transform:translateY(-10px)}} @media (hover:hover) and (pointer:fine){ .mx-la-campanhas .p-cmp-n,.mx-la-campanhas .p-cmp-b,.mx-la-campanhas .p-cmp-mini{transition:transform .3s var(--ease)} .mx-la-campanhas .p-cmp-n:hover,.mx-la-campanhas .p-cmp-b:hover{transform:translateY(-4px)} } /* ========================================================================================== Acabamento do molde la-campanhas nas rotas (05/11/2026): só o que a cópia fiel não resolve sozinha. Nada aqui move bloco nem troca componente, e cor só entra por var(--m-*). 1. Vão: teto de 120 px entre blocos no computador e 72 no celular. 2. Hero de tela inteira descontando o cabeçalho FIXO de cada domínio (--pg-nav-h) e o zoom; a mão com o celular da Safirion no lugar da mão da origem; mini-cartões que levam às seções. 3. Cartões de nível com um passo só no detalhe (a origem tem três pares termo/valor). 4. Piso de leitura (13 px) e de toque (44 px); tabela em bloco no celular. 5. Espaço do texto (o chassi força pre-wrap em h1–h6 e p) e traço dos ícones. 6. Ritmo entre as peças que o gerador põe na mesma seção. ========================================================================================== */ /* ---------- 1 · vão ---------- */ .mx-la-campanhas { --sec: clamp(36px, 4.2vw, 60px); overflow-wrap: break-word; } .mx-la-campanhas .closing { padding-top: clamp(36px, 4.2vw, 60px); } .mx-la-campanhas .lp-s .cap { margin-top: 16px; } /* ---------- 2 · hero de tela inteira ---------- */ .mx-la-campanhas .lp-hero { min-height: calc(100svh / var(--zoom, 1)); padding-top: calc(var(--pg-nav-h, 0px) + 32px); } .mx-la-campanhas .lp-hero--janela .lp-persp-in img[src*="safirion-mao"] { object-fit: contain; } .mx-la-campanhas .p-cmp-onde-abre { display: block; max-width: 34em; margin-top: 10px; font-size: max(13px, calc(.875 * var(--mx-rem))); line-height: 1.4; color: var(--m-texto-suave); } /* o anel de moedas recortado em três pontos faz as vezes das três moedas da origem */ .mx-la-campanhas .p-cmp-mini img, .mx-la-campanhas .p-cmp-n-ic { object-fit: cover; border-radius: 50%; } .mx-la-campanhas a.p-cmp-mini { min-height: max(84px, 44px); color: var(--m-texto); text-decoration: none; } @media (hover: hover) and (pointer: fine) { .mx-la-campanhas a.p-cmp-mini { transition: transform .18s var(--ease, ease); } .mx-la-campanhas a.p-cmp-mini:hover { transform: translateY(-2px); } } .mx-la-campanhas a.p-cmp-mini:active { transform: scale(.98); } /* ---------- 3 · cartões de nível ---------- */ .mx-la-campanhas .p-cmp-n-dl div:only-child { grid-column: 1 / -1; text-align: left; } .mx-la-campanhas .p-cmp-n-top small { text-wrap: balance; } .mx-la-campanhas .p-cmp-niv + .lp-txt ol { margin-top: 0; } /* ---------- 4 · piso de leitura, toque e tabela ---------- */ .mx-la-campanhas .lp-hint { font-size: max(13px, calc(.8 * var(--mx-rem))); } .mx-la-campanhas .lp-cite small { font-size: max(13px, calc(.78 * var(--mx-rem))); } .mx-la-campanhas .p-cmp-pill, .mx-la-campanhas .cap, .mx-la-campanhas .p-cmp-n-top small, .mx-la-campanhas .p-cmp-n-dl dt { font-size: max(13px, calc(.8125 * var(--mx-rem))); } .mx-la-campanhas .p-cmp-mini-t { font-size: max(13px, calc(.9375 * var(--mx-rem))); } .mx-la-campanhas .lp-tab :is(thead td, thead th) { font-size: max(13px, calc(.8 * var(--mx-rem))); } .mx-la-campanhas .lp-tab :is(td, th) { overflow-wrap: break-word; } .mx-la-campanhas .lp-bc a { padding-inline: 7px; margin-inline: -7px; } .mx-la-campanhas .lp-bc [aria-current] { overflow: visible; text-overflow: clip; white-space: normal; text-wrap: balance; } .mx-la-campanhas .p-cmp-b h3 b { overflow-wrap: break-word; } @media (max-width: 767.98px) { .mx-la-campanhas .lp-tab { display: block; width: 100%; } .mx-la-campanhas .lp-tab tbody { display: block; } } @media (max-width: 47.99rem) { .mx-la-campanhas .lp-ck--longa { grid-template-columns: minmax(0, 1fr); } .mx-la-campanhas .lp-ck li { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 11 5 4; } .mx-la-campanhas .p-cmp-n-top small { -webkit-hyphens: auto; hyphens: auto; } } .mx-la-campanhas .lp-num--txt .lp-num-v, .mx-la-campanhas .lp-num:has(.lp-num-v:not([data-conta])) .lp-num-v { font-size: clamp(calc(1.375 * var(--mx-rem)), calc(1.1 * var(--mx-rem)) + 1.2vw, calc(2 * var(--mx-rem))); line-height: 1.15; letter-spacing: -.02em; overflow-wrap: anywhere; } /* ---------- 5 · espaço do texto e traço dos ícones ---------- */ @layer chassi { .mx-la-campanhas :is(h1, h2, h3, h4, h5, h6, p) { white-space: normal !important; } } :where(.mx-la-campanhas svg[fill="none"]) { fill: none; } :where(.mx-la-campanhas svg[fill="currentColor"]) { fill: currentColor; } :where(.mx-la-campanhas svg[stroke="currentColor"]) { stroke: currentColor; } :where(.mx-la-campanhas svg[stroke-width="2"]) { stroke-width: 2; } :where(.mx-la-campanhas svg[stroke-width="2.2"]) { stroke-width: 2.2; } :where(.mx-la-campanhas svg[stroke-linecap="round"]) { stroke-linecap: round; } :where(.mx-la-campanhas svg[stroke-linejoin="round"]) { stroke-linejoin: round; } /* ---------- 6 · ritmo entre peças da mesma seção ---------- */ .mx-la-campanhas .lp-in > :not(.lp-head) + :not(.lp-head, .mx-b-fonte, .note, .cap) { margin-top: clamp(24px, 2.6vw, 36px); } .mx-la-campanhas .lp-in > :not(.lp-head) + .mx-b-fonte { margin-top: clamp(12px, 1vw, 14px); text-align: center; font-size: max(13px, calc(.8125 * var(--mx-rem))); } .mx-la-campanhas .lp-in > .lp-txt + .mx-b-fonte { max-width: 680px; margin-inline: auto; text-align: left; } .mx-la-campanhas .lp-in > :not(.lp-head) + .note { max-width: 680px; margin: clamp(16px, 1.8vw, 24px) auto 0; } .mx-la-campanhas .mx-fecho__wrap { width: min(100% - var(--pad) * 2, var(--shell)); }