@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');:root{--bg:#08080C;--bg-2:#0D0D13;--surface:#12121A;--surface-2:#171722;--line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.12);--pink:#FF2E9A;--pink-2:#E0007D;--pink-deep:#9C0059;--glow:rgba(255,46,154,.35);--green:#22C55E;--amber:#F5A524;--blue:#3B82F6;--txt:#F4F4F7;--txt-2:#A6A6B8;--txt-3:#6E6E82;--r-sm:10px;--r:16px;--r-lg:24px;--r-xl:32px;--pad:clamp(14px,3vw,44px);--head-h:64px;--nav-h:62px;--ff-display:'Archivo',system-ui,sans-serif;--ff-body:'Inter',system-ui,sans-serif;--ff-mono:'JetBrains Mono',ui-monospace,monospace;--shadow:0 24px 60px -20px rgba(0,0,0,.9);--shadow-pink:0 18px 46px -14px rgba(255,46,154,.45)}@media (max-width:720px){:root{--pad:16px;--head-h:58px;--nav-h:56px}}@media (max-width:480px){:root{--pad:12px;--r-lg:18px;--r-xl:22px}}html.upm-boot{background:#08080C}html.upm-boot body{visibility:hidden}html.upm,html.upm body{margin:0;background:var(--bg)!important;color:var(--txt)!important;font-family:var(--ff-body)!important;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}@media (max-width:720px){html.upm,html.upm body{font-size:14px}}@media (max-width:480px){html.upm,html.upm body{font-size:13px}}.upm-root *,.upm-root *::before,.upm-root *::after{box-sizing:border-box}.upm-root img{max-width:100%;display:block}.upm-root button,.upm-root input,.upm-root select,.upm-root textarea{font:inherit;color:inherit}.upm-root button{cursor:pointer;background:none;border:0}.upm-root a{color:inherit;text-decoration:none}.upm-root svg{display:block;flex-shrink:0}.upm-root:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:6px}::selection{background:var(--pink);color:#fff}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#26263a;border-radius:20px}::-webkit-scrollbar-thumb:hover{background:#3a3a55}.upm-root h1,.upm-root h2,.upm-root h3,.upm-root h4{font-family:var(--ff-display);margin:0;line-height:1.05;letter-spacing:-.02em;color:var(--txt)}.upm-root p{margin:0}.wrap{width:min(1480px,94vw);margin-inline:auto}.hide{display:none!important}.eyebrow{font-family:var(--ff-display);font-size:.7rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--pink);display:flex;align-items:center;gap:10px;justify-content:center}.eyebrow::before,.eyebrow::after{content:"";height:1px;width:28px;background:linear-gradient(90deg,transparent,var(--pink))}.eyebrow::after{background:linear-gradient(270deg,transparent,var(--pink))}.upm-root .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.75rem 1.5rem;border-radius:999px;font-weight:700;font-size:.9rem;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s;white-space:nowrap;min-height:48px;border:0}.upm-root .btn:active{transform:translateY(1px)}.upm-root .btn-primary{background:linear-gradient(135deg,var(--pink),var(--pink-2) 60%,var(--pink-deep))!important;color:#fff!important;box-shadow:var(--shadow-pink)}.upm-root .btn-primary:hover{box-shadow:0 22px 54px -12px rgba(255,46,154,.62)}.upm-root .btn-ghost{border:1px solid var(--line-2);background:rgba(255,255,255,.03)!important;color:var(--txt)}.upm-root .btn-ghost:hover{border-color:var(--pink);color:var(--pink)}.upm-root .btn-block{width:100%}.upm-root .auth-tab{display:block;text-align:center}.upm-root .auth-tab.on{background:linear-gradient(135deg,var(--pink),var(--pink-2))!important;color:#fff!important}.chip{display:inline-flex;align-items:center;gap:6px;padding:.4rem .9rem;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-family:var(--ff-display)}.dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.16)}.field{display:block;margin-bottom:12px}.field>span{display:block;font-size:.7rem;font-weight:700;color:var(--txt-2);margin-bottom:5px}.upm-root .inp{width:100%;padding:.7rem .9rem;border-radius:var(--r-sm);background:#0A0A10!important;border:1px solid var(--line-2)!important;color:var(--txt)!important;transition:border-color .16s,box-shadow .16s;font-size:.9rem}.upm-root .inp::placeholder{color:var(--txt-3)}.upm-root .inp:focus{outline:0;border-color:var(--pink)!important;box-shadow:0 0 0 3px rgba(255,46,154,.14)!important}.aura{position:fixed;inset:0;pointer-events:none;z-index:0}.aura::before,.aura::after{content:"";position:absolute;border-radius:50%;filter:blur(120px);opacity:.4}.aura::before{width:50vw;height:50vw;left:-14vw;top:-18vw;background:radial-gradient(circle,rgba(255,46,154,.28),transparent 68%)}.aura::after{width:44vw;height:44vw;right:-12vw;top:26vw;background:radial-gradient(circle,rgba(156,0,89,.22),transparent 68%)}.upm-root{position:relative;z-index:1}.site-head{position:sticky;top:0;z-index:60;height:var(--head-h);display:flex;align-items:center;background:rgba(8,8,12,.72)!important;backdrop-filter:blur(18px);border-bottom:1px solid var(--line)!important;box-shadow:none!important}.site-head .wrap{display:flex;align-items:center;gap:16px}.site-head a{text-decoration:none!important}.logo{display:flex;align-items:center;gap:8px;font-family:var(--ff-display)!important;font-weight:900;letter-spacing:-.03em}.logo-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:linear-gradient(140deg,var(--pink),var(--pink-deep))!important;box-shadow:var(--shadow-pink);font-size:.8rem;color:#fff!important}.logo-txt{display:flex;flex-direction:column;line-height:1}.logo-txt b{font-size:.95rem;color:var(--txt)!important}.logo-txt small{font-size:.5rem;letter-spacing:.34em;color:var(--pink)!important;font-weight:800;margin-top:2px}.head-nav{display:flex;align-items:center;gap:4px;margin-left:auto;margin-right:14px}.head-nav a{position:relative;padding:.5rem 1rem;border-radius:999px;font-size:.82rem;font-weight:600;color:var(--txt-2)!important;transition:color .16s,background .16s;white-space:nowrap}.head-nav a:hover{color:#fff!important;background:rgba(255,255,255,.05)}.head-nav a.on{color:#fff!important;background:rgba(255,46,154,.12)}.head-nav a.on::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:16px;height:2px;border-radius:2px;background:var(--pink);box-shadow:0 0 10px var(--glow)}.lang{display:flex;align-items:center;gap:6px;padding:.45rem .95rem;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.03)!important;color:var(--txt-2)!important;font-size:.78rem;font-weight:600;cursor:default}.lang svg{opacity:.55}.burger{display:none;margin-left:auto;padding:.5rem;border:1px solid var(--line-2);border-radius:10px;color:var(--txt)}.hero{padding:clamp(32px,5vw,64px) 0 clamp(40px,5vw,72px)}.hero-grid{display:grid;grid-template-columns:1.08fr .82fr;gap:clamp(24px,3.5vw,52px);align-items:center}.hero h1{font-size:clamp(2.4rem,6.5vw,4.8rem);font-weight:900;margin:18px 0 16px;letter-spacing:-.045em}.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--pink) 10%,#FF7AC0 50%,var(--pink-2) 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.hero-lead{color:var(--txt-2);font-size:clamp(.9rem,1.2vw,1.05rem);max-width:56ch}.hero-checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.check{display:flex;align-items:center;gap:7px;padding:.5rem .9rem;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:.8rem;font-weight:600}.check i{width:18px;height:18px;border-radius:50%;background:rgba(34,197,94,.14);color:var(--green);display:grid;place-items:center;flex:none}.hero-cta{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}.auth{position:relative;padding:clamp(18px,2.2vw,28px);border-radius:var(--r-xl);background:linear-gradient(165deg,#1A1020,#0C0C12 62%);border:1px solid rgba(255,46,154,.22);box-shadow:var(--shadow),0 0 90px -34px var(--glow)}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#0A0A10;border-radius:999px;border:1px solid var(--line);margin-bottom:16px}.auth-tab{padding:.5rem;border-radius:999px;font-weight:700;font-size:.8rem;color:var(--txt-2);transition:.16s}.auth-tab.on{background:linear-gradient(135deg,var(--pink),var(--pink-2));color:#fff}.auth h3{font-size:1.3rem;font-weight:800;margin-bottom:6px}.auth-note{font-size:.75rem;color:var(--txt-3);margin-bottom:14px;line-height:1.4}.auth-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.link-pink{color:var(--pink);font-size:.75rem;font-weight:600}.auth-foot{text-align:center;margin-top:12px;font-size:.8rem;color:var(--txt-2)}.sec{padding:clamp(40px,5vw,72px) 0;position:relative;z-index:1}.sec-head{text-align:center;max-width:760px;margin:0 auto clamp(24px,3.5vw,44px)}.sec-head h2{font-size:clamp(1.8rem,3.8vw,3rem);font-weight:900;margin:12px 0 10px}.sec-head p{color:var(--txt-2);font-size:.95rem}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.feat{padding:20px 18px 22px;border-radius:var(--r-lg);background:linear-gradient(180deg,#16101C,#0C0C11);border:1px solid var(--line);transition:.22s}.feat:hover{border-color:rgba(255,46,154,.4);transform:translateY(-3px)}.feat .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,46,154,.12);border:1px solid rgba(255,46,154,.28);color:var(--pink);margin-bottom:14px}.feat h3{font-size:1rem;font-weight:800;margin-bottom:6px}.feat p{color:var(--txt-2);font-size:.8rem}.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;position:relative}.steps::before{content:"";position:absolute;top:26px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--pink-deep),var(--pink),var(--pink-deep),transparent)}.step{text-align:center;position:relative}.step b{display:grid;place-items:center;width:50px;height:50px;margin:0 auto 12px;border-radius:16px;background:var(--bg);border:1px solid rgba(255,46,154,.4);font-family:var(--ff-display);font-size:1rem;font-weight:900;position:relative;z-index:2}.step h4{font-size:.85rem;font-weight:800;margin-bottom:4px}.step p{color:var(--txt-3);font-size:.75rem;line-height:1.4}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(120deg,#1D0E1B,#0C0C12 55%);border:1px solid var(--line);margin-top:clamp(28px,4vw,48px)}.stat{padding:clamp(18px,2.5vw,32px) 12px;text-align:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.stat b{display:block;font-family:var(--ff-display);font-size:clamp(1.5rem,2.7vw,2.4rem);font-weight:900;letter-spacing:-.04em;color:var(--txt);font-variant-numeric:tabular-nums}.stat span{display:block;margin-top:4px;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);font-weight:700}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.upm-carrossel{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * 14px) / 3);gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:0;padding-bottom:14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#26263a transparent}.upm-carrossel>*{scroll-snap-align:start;min-width:0}.upm-carrossel::-webkit-scrollbar{height:6px}.upm-carrossel::-webkit-scrollbar-thumb{background:#26263a;border-radius:20px}.upm-carrossel::-webkit-scrollbar-thumb:hover{background:var(--pink)}.upm-carrossel-caixa{position:relative}.upm-seta{position:absolute;top:50%;translate:0 -50%;z-index:5;width:40px;height:40px;border-radius:50%;display:none;place-items:center;background:rgba(12,12,18,.9);border:1px solid var(--line-2);color:var(--txt);backdrop-filter:blur(10px);box-shadow:var(--shadow);cursor:pointer;transition:.16s}.upm-carrossel-caixa.tem-mais .upm-seta{display:grid}.upm-seta:hover{border-color:var(--pink);color:var(--pink)}.upm-seta[disabled]{opacity:.3;pointer-events:none}.upm-seta-esq{left:-18px}.upm-seta-dir{right:-18px}@media (max-width:1024px){.upm-carrossel{grid-auto-columns:88%}.upm-seta{display:none!important}}.fb{padding:20px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}.stars{color:var(--amber);letter-spacing:2px;margin-bottom:12px;font-size:.85rem}.fb q{display:block;font-size:.85rem;color:var(--txt);line-height:1.6}.fb-who{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}.fb-who .av{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--pink),#7C3AED);font-weight:800;font-size:.7rem;flex:none}.fb-who b{font-size:.8rem}.fb-who small{display:block;color:var(--txt-3);font-size:.65rem}.pays{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.pay{display:flex;align-items:center;justify-content:center;gap:8px;padding:18px 10px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:.8rem;transition:.2s}.pay:hover{border-color:var(--pink);color:var(--pink)}.pay i{color:var(--pink);display:grid;place-items:center}.faq{max-width:920px;margin:0 auto;display:grid;gap:10px}.qa{border-radius:var(--r);background:linear-gradient(180deg,#16101C,#0C0C11);border:1px solid var(--line);overflow:hidden}.qa summary{list-style:none;display:flex;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;font-weight:700;font-size:.9rem}.qa summary::-webkit-details-marker{display:none}.qa summary::after{content:"+";margin-left:auto;flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,46,154,.14);color:var(--pink);font-size:1rem;font-weight:700;transition:transform .2s}.qa[open] summary::after{content:"−";transform:rotate(180deg)}.qa p{padding:0 18px 18px;color:var(--txt-2);font-size:.85rem;max-width:74ch}.cta-box{text-align:center;padding:clamp(32px,5vw,64px) 20px;border-radius:var(--r-xl);background:radial-gradient(120% 140% at 50% 0%,rgba(255,46,154,.24),transparent 62%),#0C0C12;border:1px solid rgba(255,46,154,.24)}.cta-box h2{font-size:clamp(1.8rem,4.2vw,3.2rem);font-weight:900;margin-bottom:10px}.cta-box p{color:var(--txt-2);margin-bottom:22px;font-size:.95rem}.site-foot{border-top:1px solid var(--line);padding:24px 0;text-align:center;color:var(--txt-3);font-size:.7rem}.upm-foot-links{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-bottom:12px}.upm-foot-links a{color:var(--txt-2)!important;font-size:.78rem;font-weight:600}.upm-foot-links a:hover{color:var(--pink)!important}.logo-img{height:34px;width:auto;max-width:170px;object-fit:contain;display:block;flex:none}.floats{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:70;display:grid;gap:8px;justify-items:end}.float{display:flex;align-items:center;gap:8px;padding:.6rem 1rem;border-radius:999px;font-size:.8rem;font-weight:700;box-shadow:var(--shadow)}.float-pink{background:linear-gradient(135deg,var(--pink),var(--pink-2));color:#fff}.float-green{background:#25D366;color:#06240F}.toast{position:fixed;left:50%;translate:-50% 0;bottom:24px;z-index:120;padding:.6rem 1.2rem;border-radius:999px;background:#15151F;border:1px solid var(--line-2);box-shadow:var(--shadow);font-size:.8rem;font-weight:600;display:none;align-items:center;gap:8px}.toast.on{display:flex}.upm-root #upm-form-slot form{display:block}.upm-root #upm-form-slot .form-group,.upm-root #upm-form-slot .form-row>[class*="col"]{margin-bottom:12px}.upm-root #upm-form-slot .form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}@media (max-width:720px){.upm-root #upm-form-slot .form-row{grid-template-columns:1fr}}.upm-root #upm-form-slot label,.upm-root .upm-label{display:block;font-size:.7rem;font-weight:700;color:var(--txt-2)!important;margin-bottom:5px}.upm-root #upm-form-slot input.inp,.upm-root #upm-form-slot select.inp,.upm-root #upm-form-slot textarea.inp{margin-bottom:0}.upm-root #upm-form-slot input[type=checkbox]{width:auto;display:inline-block;margin-right:7px;vertical-align:middle;accent-color:var(--pink)}.upm-root #upm-form-slot input[type=checkbox]+span,.upm-root #upm-form-slot label:has(input[type=checkbox]){display:inline-flex;align-items:center;gap:6px}.upm-root #upm-form-slot .upm-google{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:18px}.upm-root .upm-ou{display:flex;align-items:center;gap:12px;width:100%;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}.upm-root .upm-ou::before,.upm-root .upm-ou::after{content:"";flex:1;height:1px;background:var(--line-2)}.upm-root #upm-form-slot .g_id_signin{height:44px;min-height:44px;max-height:44px;overflow:hidden;display:flex;justify-content:center;align-items:center;width:100%;border-radius:999px}.upm-root #upm-form-slot .g_id_signin>div{margin:0 auto}.upm-root #upm-form-slot .g_id_signin iframe{border-radius:999px!important}.upm-root #upm-form-slot #g_id_onload{display:none}.upm-root #upm-form-slot .btn-primary{min-height:52px;font-size:.95rem;letter-spacing:.01em;box-shadow:0 18px 42px -14px rgba(255,46,154,.72)}.upm-root #upm-form-slot .btn-primary:hover{transform:translateY(-1px)}.upm-campo-erro{display:block;color:#FB7185!important;font-size:.72rem;margin-top:4px;font-weight:600}.upm-root #upm-form-slot .has-error input.inp,.upm-root #upm-form-slot input.inp.is-invalid{border-color:rgba(244,63,94,.55)!important}.upm-root #upm-form-slot iframe,.upm-root #upm-form-slot .h-captcha,.upm-root #upm-form-slot .altcha,.upm-root #upm-form-slot [class*="captcha"]{max-width:100%;margin:10px 0}.upm-root #upm-form-slot .altcha{background:#0A0A10!important;border:1px solid var(--line-2)!important;border-radius:var(--r-sm);color:var(--txt)!important}.upm-erro{background:rgba(244,63,94,.10);border:1px solid rgba(244,63,94,.32);color:#FB7185;border-radius:var(--r-sm);padding:.7rem .9rem;font-size:.78rem;line-height:1.45;margin-bottom:12px}.upm-erro div+div{margin-top:4px}.hero-cta .btn{line-height:1}.hero-cta .btn svg{width:16px;height:16px}@media (max-width:1180px){.grid-4{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(3,1fr);gap:22px 12px}.steps::before{display:none}.pays{grid-template-columns:repeat(3,1fr)}}.upm-menu-mobile{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;padding:8px;gap:2px;background:rgba(10,10,16,.97);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}.site-head{position:sticky}.site-head.menu-aberto .upm-menu-mobile{display:flex}.upm-menu-mobile a{padding:.75rem .9rem;border-radius:12px;font-size:.9rem;font-weight:600;color:var(--txt-2)!important}.upm-menu-mobile a:hover,.upm-menu-mobile a.on{background:rgba(255,46,154,.12);color:#fff!important}.upm-menu-idioma{padding:.7rem .9rem;margin-top:4px;border-top:1px solid var(--line);font-size:.78rem;color:var(--txt-3)}.site-head.menu-aberto .burger{border-color:var(--pink);color:var(--pink)}@media (max-width:1024px){.hero-grid{grid-template-columns:1fr;gap:28px}.head-nav,.lang{display:none}.burger{display:grid}.grid-3{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:0}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}.hero-cta{display:none}}@media (min-width:1025px){.upm-menu-mobile{display:none!important}}@media (max-width:720px){.grid-4{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.pays{grid-template-columns:repeat(2,1fr)}.auth-row{grid-template-columns:1fr}.float span{display:none}.float{padding:.6rem;width:44px;height:44px;justify-content:center}.hero h1{font-size:clamp(2rem,10vw,3.2rem)}.qa summary{padding:14px 16px;font-size:.85rem}.qa p{padding:0 16px 16px}.hero-cta .btn{width:100%;justify-content:center}}@media (max-width:480px){.steps{grid-template-columns:1fr}.pays{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}.site-head .logo:has(.logo-img) .logo-txt{display:none!important}.upm-atalhos{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin:18px 0 0}.upm-root .upm-atalho,.upm-atalho{display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;padding:14px 16px;border-radius:16px;background:#12121A!important;color:#F4F4F7!important;border:1px solid rgba(255,255,255,.07)!important;transition:border-color .18s,background .18s,transform .18s}.upm-root .upm-atalho:hover,.upm-atalho:hover{border-color:#FF2E9A!important;background:rgba(255,46,154,.07)!important;transform:translateY(-1px)}.upm-atalho-ic{flex:0 0 42px;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#FF2E9A;background:rgba(255,46,154,.10);border:1px solid rgba(255,46,154,.24)}.upm-atalho-ic svg{width:22px;height:22px;display:block}.upm-atalho-txt{display:flex;flex-direction:column;min-width:0}.upm-atalho-txt b{font-size:.88rem;font-weight:800;line-height:1.2}.upm-atalho-txt small{font-size:.7rem;color:#A6A6B8;margin-top:2px;line-height:1.3}.upm-oculto-flutuante{display:none!important}.grupo-botoes-flutuantes.upm-flutuantes{width:auto!important}.botao-flutuante.upm-zap{width:54px!important;height:54px!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center!important;font-size:0!important;box-shadow:0 14px 30px -10px rgba(37,211,102,.55)!important}.botao-flutuante.upm-zap svg{width:28px!important;height:28px!important;color:#fff!important}@media (max-width:600px){.upm-atalhos{grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.upm-root .upm-atalho,.upm-atalho{flex-direction:column!important;align-items:center!important;text-align:center!important;gap:6px!important;padding:12px 8px!important}.upm-atalho-ic{flex:0 0 34px;width:34px;height:34px;border-radius:11px}.upm-atalho-ic svg{width:18px;height:18px}.upm-atalho-txt{align-items:center}.upm-atalho-txt b{font-size:.76rem;line-height:1.25}.upm-atalho-txt small{display:none}}@media (min-width:992px){.upm-root .hero-cta.upm-hero-atalhos>.btn{display:none!important}.upm-root .hero-cta.upm-hero-atalhos{display:block}.upm-root .hero-cta.upm-hero-atalhos .upm-atalhos{width:100%;margin:0}}.g_id_signin,div.g_id_signin{height:44px!important;min-height:44px!important;max-height:44px!important;overflow:hidden!important;display:block!important}.g_id_signin>div{margin:0 auto!important}#g_id_onload{display:none!important}html.upm-boot .g_id_signin{visibility:hidden!important}
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');:root{--upm-bg:#08080C;--upm-bg-2:#0D0D13;--upm-surface:#12121A;--upm-surface-2:#171722;--upm-line:rgba(255,255,255,.07);--upm-line-2:rgba(255,255,255,.12);--upm-pink:#FF2E9A;--upm-pink-2:#E0007D;--upm-pink-deep:#9C0059;--upm-glow:rgba(255,46,154,.35);--upm-green:#22C55E;--upm-amber:#F5A524;--upm-txt:#F4F4F7;--upm-txt-2:#A6A6B8;--upm-txt-3:#6E6E82;--upm-r-sm:10px;--upm-r:16px;--upm-r-lg:24px;--upm-r-xl:32px;--upm-ff-display:'Archivo',system-ui,sans-serif;--upm-ff-body:'Inter',system-ui,sans-serif;--upm-ff-mono:'JetBrains Mono',ui-monospace,monospace;--upm-shadow:0 24px 60px -20px rgba(0,0,0,.9);--upm-shadow-pink:0 18px 46px -14px rgba(255,46,154,.45)}html,body{background:var(--upm-bg)!important;color:var(--upm-txt)!important;font-family:var(--upm-ff-body)!important;-webkit-font-smoothing:antialiased}body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(50vw 50vw at 8% -6%,rgba(255,46,154,.20),transparent 68%),radial-gradient(44vw 44vw at 96% 34%,rgba(156,0,89,.16),transparent 68%)}body>*{position:relative;z-index:1}h1,h2,h3,h4,h5,.text-block__title,.block-signin__title,.features-block__header-title,.reviews-block__title,.faq-block__header-title,.how-it-works-title{font-family:var(--upm-ff-display)!important;letter-spacing:-.02em;line-height:1.08;color:var(--upm-txt)!important}p,span,label,li,td,div{color:inherit}::selection{background:var(--upm-pink);color:#fff}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#26263a;border-radius:20px}::-webkit-scrollbar-thumb:hover{background:#3a3a55}.block-bg,.bg-image,.bg-overlay{background-color:transparent!important;background-image:none!important}.wrapper,.wrapper-content,.block-wrapper,.wrapper-content__header,.wrapper-content__body,.wrapper-content__footer{background:transparent!important}.component-navbar,.component-navbar__navbar-public,.wrapper-navbar,.navbar{background:rgba(8,8,12,.72)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--upm-line)!important;box-shadow:none!important}.component-navbar-brand,.component-navbar-public-brand,.sidebar-block__top-brand{font-family:var(--upm-ff-display)!important;font-weight:900!important;letter-spacing:-.03em;color:var(--upm-txt)!important}.component-navbar-nav-link,.component-navbar-nav-link__navbar-public{color:var(--upm-txt-2)!important;font-weight:600!important;border-radius:999px!important;transition:color .16s,background .16s}.component-navbar-nav-link:hover,.component-navbar-nav-link__navbar-public:hover{color:#fff!important;background:rgba(255,255,255,.05)!important}.component-navbar-nav-link-active__navbar-public,.component-navbar-nav-link.active{background:linear-gradient(135deg,var(--upm-pink),var(--upm-pink-2))!important;color:#fff!important}.navbar-burger-line{background:var(--upm-txt)!important}.component-navbar-collapse-divider{background:var(--upm-line)!important}.card,.component_card,.totals-card,.how-it-works-card,.block-reviews__card,.card__reviews{background:var(--upm-surface)!important;border:1px solid var(--upm-line)!important;border-radius:var(--upm-r-lg)!important;box-shadow:none!important;color:var(--upm-txt)!important}.block-signin__card{background:linear-gradient(165deg,#1A1020,#0C0C12 62%)!important;border:1px solid rgba(255,46,154,.22)!important;border-radius:var(--upm-r-xl)!important;box-shadow:var(--upm-shadow),0 0 90px -34px var(--upm-glow)!important}.block-signin__title{font-weight:900!important;letter-spacing:-.045em}.block-signin__description,.style-text-signin{color:var(--upm-txt-2)!important}.block-signin__link,.el-links--link,a.link{color:var(--upm-pink)!important}.block-signin__remember{color:var(--upm-txt-2)!important}.btn,.btn-big-primary,.component_button_submit,.text-block-with-button__button,button[type=submit]{border-radius:999px!important;font-family:var(--upm-ff-body)!important;font-weight:700!important;border:0!important;min-height:48px;transition:transform .18s ease,box-shadow .18s ease}.btn-big-primary,.component_button_submit,.text-block-with-button__button,button[type=submit]{background:linear-gradient(135deg,var(--upm-pink),var(--upm-pink-2) 60%,var(--upm-pink-deep))!important;color:#fff!important;box-shadow:var(--upm-shadow-pink)!important}.btn-big-primary:hover,.component_button_submit:hover,.text-block-with-button__button:hover,button[type=submit]:hover{box-shadow:0 22px 54px -12px rgba(255,46,154,.62)!important;transform:translateY(-1px)}.btn:active{transform:translateY(1px)}button.btn-big-primary,a.btn-big-primary,.btn.btn-big-primary,button[class*="btn-big-primary"],a[class*="btn-big-primary"]{background:linear-gradient(135deg,var(--upm-pink),var(--upm-pink-2) 60%,var(--upm-pink-deep))!important;color:#fff!important;border:0!important}button.btn-big-primary *,a.btn-big-primary *{color:#fff!important}.component_button_link{border:1px solid var(--upm-line-2)!important;background:rgba(255,255,255,.03)!important;color:var(--upm-txt)!important}.component_button_link:hover{border-color:var(--upm-pink)!important;color:var(--upm-pink)!important}.form-control,input,select,textarea{background:#0A0A10!important;border:1px solid var(--upm-line-2)!important;border-radius:var(--upm-r-sm)!important;color:var(--upm-txt)!important;font-family:var(--upm-ff-body)!important;transition:border-color .16s,box-shadow .16s}.form-control::placeholder,input::placeholder,textarea::placeholder{color:var(--upm-txt-3)!important}.form-control:focus,input:focus,select:focus,textarea:focus{outline:0!important;border-color:var(--upm-pink)!important;box-shadow:0 0 0 3px rgba(255,46,154,.14)!important}.form-group label,.form-group>span{color:var(--upm-txt-2)!important;font-size:.78rem!important;font-weight:700!important}.text-block__title{font-weight:900!important}.text-block__description,.features-block__body-description,.faq-block__body-description,.reviews-block__desc,.how-it-works-description,.text-block-with-button__description,.item__desc{color:var(--upm-txt-2)!important}.style-text-dark{color:var(--upm-txt)!important}.style-text-primary{color:var(--upm-pink)!important}.features-block__header{margin-bottom:14px}.features-block__header-image{width:42px;height:42px;border-radius:12px;background:rgba(255,46,154,.12);border:1px solid rgba(255,46,154,.28);padding:9px;filter:hue-rotate(276deg) saturate(2.4) brightness(1.15)}.features-block__header-title{font-size:1rem!important;font-weight:800!important}.totals-card{background:linear-gradient(120deg,#1D0E1B,#0C0C12 55%)!important;border-radius:var(--upm-r-xl)!important}.totals-card__count-value{font-family:var(--upm-ff-display)!important;font-weight:900!important;letter-spacing:-.04em;color:var(--upm-txt)!important}.totals-card__name{font-size:.62rem!important;letter-spacing:.18em;text-transform:uppercase;color:var(--upm-txt-3)!important;font-weight:700!important}.how-it-works-card{background:transparent!important;border:0!important}.how-it-works-card__icon-wrap{width:50px;height:50px;border-radius:16px!important;background:var(--upm-bg)!important;border:1px solid rgba(255,46,154,.4)!important;box-shadow:0 0 24px -8px var(--upm-glow)}.how-it-works-card__icon-fa,.style-card-number{font-family:var(--upm-ff-display)!important;font-weight:900!important;color:var(--upm-pink)!important}.how-it-works-title{font-size:.9rem!important;font-weight:800!important}.style-review-card-title{font-weight:900!important}.style-review-card-desc{color:var(--upm-txt-2)!important}.style-review-card-author{color:var(--upm-txt)!important;font-weight:700!important;border-top:1px solid var(--upm-line);padding-top:14px;margin-top:14px;display:block}.faq-block__header{background:linear-gradient(180deg,#16101C,#0C0C11)!important;border:1px solid var(--upm-line)!important;border-radius:var(--upm-r)!important;padding:16px 18px!important;font-weight:700!important;transition:border-color .18s}.faq-block__header:hover{border-color:rgba(255,46,154,.34)!important}.faq-block__header-title{font-size:.92rem!important;font-weight:700!important}.faq-block__header-icon,.faq-block__icon{width:26px;height:26px;border-radius:50%;background:rgba(255,46,154,.14)!important;color:var(--upm-pink)!important;display:grid;place-items:center;transition:transform .2s}.faq-block__header:not(.collapsed) .faq-block__header-icon{transform:rotate(180deg)}.faq-block__body{background:transparent!important;border:0!important;padding:2px 18px 18px!important}.faq-block__body-description{font-size:.88rem!important;line-height:1.65}.text-block-with-button{background:radial-gradient(120% 140% at 50% 0%,rgba(255,46,154,.24),transparent 62%),#0C0C12!important;border:1px solid rgba(255,46,154,.24)!important;border-radius:var(--upm-r-xl)!important;padding:clamp(32px,5vw,64px) 20px!important}.footer{background:transparent!important;border-top:1px solid var(--upm-line)!important;color:var(--upm-txt-3)!important}.footer-logo{font-family:var(--upm-ff-display)!important;font-weight:900!important;color:var(--upm-txt)!important}.footer-links a,.footer a{color:var(--upm-txt-2)!important}.footer-links a:hover,.footer a:hover{color:var(--upm-pink)!important}table{color:var(--upm-txt)!important}thead th,th{background:#0A0A10!important;color:var(--upm-txt-3)!important;font-size:.62rem!important;letter-spacing:.14em;text-transform:uppercase;font-weight:800!important;border-color:var(--upm-line)!important}td{border-top:1px solid var(--upm-line)!important;border-bottom:0!important;color:var(--upm-txt)!important}tbody tr:hover{background:rgba(255,255,255,.02)!important}.sidebar-block__top{background:#0A0A10!important;border-right:1px solid var(--upm-line)!important}.balance,.user-balance,[class*="balance"]{font-family:var(--upm-ff-mono)!important;font-weight:700!important}@media (max-width:720px){.block-signin__card{border-radius:22px!important}.totals-card{border-radius:22px!important}}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}html body input.form-control,html body input[type=text],html body input[type=email],html body input[type=password],html body input[type=number],html body select.form-control,html body textarea.form-control{background:#0A0A10!important;background-color:#0A0A10!important;border:1px solid var(--upm-line-2)!important;color:var(--upm-txt)!important;-webkit-text-fill-color:var(--upm-txt)!important}html body input.form-control:focus{border-color:var(--upm-pink)!important;box-shadow:0 0 0 3px rgba(255,46,154,.14)!important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--upm-txt)!important;-webkit-box-shadow:0 0 0 1000px #0A0A10 inset!important;caret-color:var(--upm-txt)}.features-block__header-title,.features-block__header-title *,.reviews-block__title *,.text-block__title *,.how-it-works-title *{color:var(--upm-txt)!important}.block-signin__link,.block-signin__link *,a[href*="password"],a[href*="reset"]{color:var(--upm-pink)!important}.style-bg-light,.how-it-works-number,.style-box-shadow-default{background:var(--upm-bg)!important;background-color:var(--upm-bg)!important;border:1px solid rgba(255,46,154,.4)!important;border-radius:16px!important;color:var(--upm-pink)!important;box-shadow:0 0 24px -8px var(--upm-glow)!important;font-family:var(--upm-ff-display)!important;font-weight:900!important}.features-block__header-image img,.features-block__header img,img.img-fluid[src*="/editor/themes/"]{filter:brightness(0) saturate(100%) invert(38%) sepia(93%) saturate(5000%) hue-rotate(311deg) brightness(103%) contrast(101%)!important;opacity:1!important}h1,h2,h3,h4,h5,h6,.text-block__title,.text-block-with-button,.text-block-with-button *{color:var(--upm-txt)!important}.text-block-with-button .btn,.text-block-with-button__button{color:#fff!important}.component-navbar-nav-link,.component-navbar-nav-link__navbar-public,.component-navbar-nav-item a{color:#C8C8D8!important;opacity:1!important}.component-navbar-nav-link-active__navbar-public,.component-navbar-nav-link-active__navbar-public *{color:#fff!important}.style-review-card-author,.style-review-card-author *,.block-reviews__card strong,.block-reviews__card .style-review-card-author span{color:var(--upm-pink)!important;font-weight:700!important}table,.table,.table>:not(caption)>*>*,.card,.card-body,.card-header,.card-footer,.panel,.panel-body,.panel-heading,.list-group,.list-group-item,.modal-content,.modal-header,.modal-body,.modal-footer,.dropdown-menu,.popover,.tooltip-inner,.bg-white,.bg-light,.table-light,pre,code,kbd,samp{background-color:var(--upm-surface)!important;color:var(--upm-txt)!important;border-color:var(--upm-line)!important}.table>thead th,table thead th{background-color:#0A0A10!important;color:var(--upm-txt-3)!important}.table-striped>tbody>tr:nth-of-type(odd)>*{background-color:rgba(255,255,255,.02)!important;color:var(--upm-txt)!important}.table-hover>tbody>tr:hover>*{background-color:rgba(255,46,154,.06)!important;color:var(--upm-txt)!important}.table td,.table th,table td,table th{border-color:var(--upm-line)!important}pre,code,kbd,samp{background-color:#0A0A10!important;color:var(--upm-pink)!important;border:1px solid var(--upm-line-2)!important;border-radius:var(--upm-r-sm)!important}pre code{border:0!important;background:transparent!important}[style*="background-color: #fff"],[style*="background-color:#fff"],[style*="background: #fff"],[style*="background:#fff"],[style*="background-color: white"],[style*="background-color:rgb(255, 255, 255)"]{color:#12121A!important}.upm-topo{position:sticky;top:0;z-index:70;display:flex;align-items:center;gap:12px;height:64px;padding:0 16px;background:rgba(8,8,12,.82)!important;backdrop-filter:blur(18px);border-bottom:1px solid var(--upm-line)}.upm-menu-btn{width:40px;height:40px;flex:none;display:grid;place-items:center;border:1px solid var(--upm-line-2)!important;border-radius:12px;background:rgba(255,255,255,.03)!important;color:var(--upm-txt)!important;cursor:pointer;transition:.16s}.upm-menu-btn:hover{border-color:var(--upm-pink)!important;color:var(--upm-pink)!important}.upm-topo .logo{display:flex;align-items:center;gap:8px;text-decoration:none!important}.upm-saldo{margin-left:auto;display:flex;align-items:center;gap:6px;padding:.4rem 1rem;border-radius:999px;background:linear-gradient(135deg,var(--upm-pink),var(--upm-pink-2))!important;color:#fff!important;font-family:var(--upm-ff-mono)!important;font-weight:700;font-size:.8rem;box-shadow:var(--upm-shadow-pink);white-space:nowrap}.upm-saldo *{color:#fff!important;font-family:var(--upm-ff-mono)!important}.upm-saldo a{text-decoration:none!important}input[type=search],input[placeholder*="Search" i],input[placeholder*="Busca" i],.form-control-search,[class*="search"] input,.input-group .form-control{background:#0A0A10!important;border:1px solid var(--upm-line-2)!important;color:var(--upm-txt)!important;border-radius:var(--upm-r-sm)!important}.input-group-text,.input-group-append .btn,.input-group-prepend .btn,[class*="search"] button,button.btn-search{background:rgba(255,255,255,.04)!important;border:1px solid var(--upm-line-2)!important;color:var(--upm-txt-2)!important;border-radius:var(--upm-r-sm)!important}[class*="search"] button:hover,.input-group-append .btn:hover{border-color:var(--upm-pink)!important;color:var(--upm-pink)!important}.dropdown-toggle,.btn-outline-secondary,.btn-secondary,.btn-light,.btn-default{background:rgba(255,255,255,.04)!important;border:1px solid var(--upm-line-2)!important;color:var(--upm-txt)!important}.dropdown-toggle:hover,.btn-outline-secondary:hover{border-color:var(--upm-pink)!important;color:var(--upm-pink)!important}.dataTables_empty,.no-data,[class*="empty"]{color:var(--upm-txt-3)!important}.upm-lateral{position:fixed;left:0;top:64px;bottom:0;width:270px;z-index:100;padding:12px;overflow-y:auto;background:#0A0A10;border-right:1px solid var(--upm-line);display:flex;flex-direction:column;gap:2px}@media (max-width:1024px){.upm-lateral{transform:translateX(-104%);transition:transform .28s cubic-bezier(.22,1,.36,1)}html.upm-menu-aberto .upm-lateral{transform:translateX(0);box-shadow:var(--upm-shadow)}}.upm-lateral a{display:block;padding:.6rem .8rem;border-radius:12px;color:var(--upm-txt-2)!important;font-size:.85rem;font-weight:600;text-decoration:none!important;transition:.16s}.upm-lateral a:hover{background:rgba(255,255,255,.04);color:#fff!important}.upm-lateral a.on{background:linear-gradient(100deg,rgba(255,46,154,.20),rgba(255,46,154,.04));color:#fff!important;border-left:3px solid var(--upm-pink)}@media (max-width:1024px){[class*="component-sidebar"],.wrapper-sidebar-navbar>[class*="sidebar"]{position:fixed!important;left:0;top:0;bottom:0;width:270px;z-index:100;transform:translateX(-104%);transition:transform .28s cubic-bezier(.22,1,.36,1);overflow-y:auto}html.upm-menu-aberto [class*="component-sidebar"],html.upm-menu-aberto .wrapper-sidebar-navbar>[class*="sidebar"]{transform:translateX(0);box-shadow:var(--upm-shadow)}html.upm-menu-aberto body::after{content:"";position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}}.wrapper-sidebar-navbar,.component-sidebar,[class*="component-sidebar"],.component_private_navbar,[class*="sidebar"]{background:#0A0A10!important;border-color:var(--upm-line)!important;color:var(--upm-txt)!important}.component_private_navbar{background:rgba(8,8,12,.78)!important;backdrop-filter:blur(18px);border-bottom:1px solid var(--upm-line)!important}.component-navbar-brand.component-sidebar,.component-sidebar .component-navbar-brand{color:var(--upm-txt)!important;font-family:var(--upm-ff-display)!important;font-weight:900!important}.component-sidebar__menu-item-link,[class*="sidebar__menu-item"] a,[class*="sidebar"] a{color:var(--upm-txt-2)!important;border-color:var(--upm-line)!important;border-radius:12px;font-weight:600!important;transition:background .16s,color .16s}.component-sidebar__menu-item-link:hover,[class*="sidebar"] a:hover{background:rgba(255,255,255,.04)!important;color:#fff!important}.component-sidebar__menu-item-link.active,.component-sidebar__menu-item-link[class*="active"],[class*="sidebar"] a.active,[class*="menu-item"][class*="active"] a,[class*="menu-item"][class*="active"]{background:linear-gradient(100deg,rgba(255,46,154,.20),rgba(255,46,154,.04))!important;color:#fff!important;border-left:3px solid var(--upm-pink)!important}[class*="user-balance"],[class*="balance"]{color:var(--upm-txt)!important;font-family:var(--upm-ff-mono)!important;font-weight:700!important}.component_private_navbar .btn,.component_private_navbar a.btn,[class*="private_navbar"] .btn{background:rgba(255,255,255,.04)!important;border:1px solid var(--upm-line-2)!important;color:var(--upm-txt)!important;border-radius:999px!important}.component_private_navbar .btn:hover,[class*="private_navbar"] .btn:hover{border-color:var(--upm-pink)!important;color:var(--upm-pink)!important}.select2-selection,.select2-selection--single,.select2-selection--multiple,.select2-container .select2-selection{background:#0A0A10!important;border:1px solid var(--upm-line-2)!important;border-radius:var(--upm-r-sm)!important;color:var(--upm-txt)!important;height:auto!important;min-height:44px;display:flex!important;align-items:center}.select2-selection__rendered{color:var(--upm-txt)!important;line-height:1.4!important}.select2-selection__placeholder{color:var(--upm-txt-3)!important}.select2-selection__arrow b{border-top-color:var(--upm-txt-2)!important}.select2-container--open .select2-selection{border-color:var(--upm-pink)!important;box-shadow:0 0 0 3px rgba(255,46,154,.14)!important}.select2-dropdown,.select2-search__field{background:#0C0C12!important;border:1px solid rgba(255,46,154,.28)!important;color:var(--upm-txt)!important;border-radius:14px!important}.select2-search__field{border-radius:var(--upm-r-sm)!important}.select2-results__option{background:transparent!important;color:var(--upm-txt-2)!important;border-radius:10px;padding:.55rem .7rem!important}.select2-results__option--highlighted,.select2-results__option[aria-selected=true]{background:rgba(255,46,154,.14)!important;color:#fff!important}.component-navbar-nav-link__navbar-private,[class*="navbar-nav-link__navbar-private"]{background:rgba(255,255,255,.04)!important;border:1px solid var(--upm-line-2)!important;border-radius:999px!important;color:var(--upm-txt)!important;padding:.45rem 1rem!important}.component-navbar-nav-link__navbar-private:hover{border-color:var(--upm-pink)!important;color:var(--upm-pink)!important}select,select.form-control,.custom-select,[class*="select"] .dropdown-toggle,[class*="select__control"]{background:#0A0A10!important;border:1px solid var(--upm-line-2)!important;color:var(--upm-txt)!important;border-radius:var(--upm-r-sm)!important}select option{background:#0A0A10!important;color:var(--upm-txt)!important}[class*="select__menu"],[class*="select__option"]{background:#0C0C12!important;color:var(--upm-txt)!important}[class*="select__option"]:hover,[class*="select__option--is-focused"]{background:rgba(255,46,154,.14)!important}.upm-chip{display:inline-flex;align-items:center;gap:6px;padding:.4rem .9rem;border-radius:999px;border:1px solid var(--upm-line-2);background:rgba(255,255,255,.03);font-family:var(--upm-ff-display);font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--upm-txt);margin-bottom:14px}.upm-dot{width:6px;height:6px;border-radius:50%;background:var(--upm-green);box-shadow:0 0 0 3px rgba(34,197,94,.16)}.upm-checks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:20px 0 0}.upm-check{display:flex;align-items:center;gap:7px;padding:.5rem .9rem;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid var(--upm-line);font-size:.8rem;font-weight:600;color:var(--upm-txt)}.upm-check i{width:18px;height:18px;border-radius:50%;flex:none;background:rgba(34,197,94,.14);color:var(--upm-green);display:grid;place-items:center;font-style:normal;font-size:.7rem;font-weight:900}.upm-eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--upm-ff-display);font-size:.7rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--upm-pink);margin-bottom:12px}.upm-eyebrow::before,.upm-eyebrow::after{content:"";height:1px;width:28px;background:linear-gradient(90deg,transparent,var(--upm-pink))}.upm-eyebrow::after{background:linear-gradient(270deg,transparent,var(--upm-pink))}.upm-pays{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;max-width:1100px;margin:0 auto;padding:0 16px}.upm-pay{display:flex;align-items:center;justify-content:center;gap:8px;padding:18px 10px;border-radius:var(--upm-r);background:var(--upm-surface);border:1px solid var(--upm-line);font-weight:700;font-size:.82rem;color:var(--upm-txt);transition:.2s}.upm-pay:hover{border-color:var(--upm-pink);color:var(--upm-pink)}.upm-pay svg{color:var(--upm-pink)}@media (max-width:1180px){.upm-pays{grid-template-columns:repeat(3,1fr)}}@media (max-width:720px){.upm-pays{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.upm-pays{grid-template-columns:1fr}}.upm-sec{padding:clamp(30px,4vw,56px) 0}.upm-sec-title{text-align:center;font-family:var(--upm-ff-display);font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:900;color:var(--upm-txt);margin-bottom:8px;letter-spacing:-.02em}.upm-sec-desc{text-align:center;color:var(--upm-txt-2);font-size:.94rem;margin-bottom:26px}.upm-brand{display:flex;align-items:center;gap:8px}.upm-brand-mark{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;background:linear-gradient(140deg,var(--upm-pink),var(--upm-pink-deep));box-shadow:var(--upm-shadow-pink);font-family:var(--upm-ff-display);font-size:.8rem;font-weight:900;color:#fff}.upm-brand-txt{display:flex;flex-direction:column;line-height:1}.upm-brand-txt b{font-family:var(--upm-ff-display);font-size:.95rem;font-weight:900;color:var(--upm-txt);letter-spacing:-.03em}.upm-brand-txt small{font-size:.5rem;letter-spacing:.34em;color:var(--upm-pink);font-weight:800;margin-top:2px}.upm-grad{font-style:normal;background:linear-gradient(100deg,var(--upm-pink) 10%,#FF7AC0 50%,var(--upm-pink-2) 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.block-signin__title{font-size:clamp(2.1rem,5.2vw,3.9rem)!important;letter-spacing:-.045em!important}
/* ==========================================================================
PONTE PARA O BOOTSTRAP DO PAINEL
O tema acima e o original, sem alteracao. O painel renderiza formularios,
tabelas e botoes com as classes do Bootstrap 3 - o trecho abaixo faz essas
classes assumirem as MESMAS variaveis do tema, para nao existirem dois
visuais no mesmo site.
========================================================================== */
.form-control{background:#0A0A10;border:1px solid var(--line);border-radius:var(--r-sm);
color:var(--txt);height:auto;padding:12px 14px;font-size:.85rem;box-shadow:none}
.form-control:focus{background:#0A0A10;border-color:var(--pink);color:var(--txt);
box-shadow:0 0 0 3px rgba(255,46,154,.16)}
.form-control::placeholder{color:var(--txt-3)}
.control-label,label{color:var(--txt-2);font-weight:600;font-size:.78rem;margin-bottom:7px}
select.form-control option{background:#0A0A10;color:var(--txt)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
-webkit-text-fill-color:var(--txt);caret-color:var(--txt);
-webkit-box-shadow:0 0 0 1000px #0A0A10 inset;
transition:background-color 600000s 0s,color 600000s 0s}
.btn{border-radius:999px;font-weight:800;font-size:.82rem;padding:.7rem 1.3rem;border:1px solid transparent}
.btn-primary,.btn-primary:focus{background:linear-gradient(135deg,var(--pink),var(--pink-2));
border-color:transparent;color:#fff;box-shadow:var(--shadow-pink)}
.btn-primary:hover{background:linear-gradient(135deg,var(--pink),var(--pink-2));filter:brightness(1.07)}
.btn-ghost{background:rgba(255,255,255,.03);border:1px solid var(--line-2);color:var(--txt)}
.btn-ghost:hover{background:rgba(255,255,255,.07);color:var(--txt)}
.btn-block{display:block;width:100%}
.well,.panel{background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-lg);box-shadow:none;padding:24px;margin-bottom:20px}
.alert{border-radius:var(--r);border:1px solid var(--line);padding:14px 16px;font-size:.85rem}
.alert-danger{background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.32);color:#FFC9D2}
.alert-success{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.32);color:#BBF7D0}
.alert .close{color:inherit;opacity:.7;text-shadow:none}
.table{color:var(--txt)}
.table>thead>tr>th{background:rgba(255,255,255,.04);border-bottom:0;color:var(--txt-2);
font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:13px 14px}
.table>tbody>tr>td{border-top:1px solid var(--line);padding:14px;vertical-align:middle}
.table-responsive{border:0}
.modal-content{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.modal-header,.modal-footer{border-color:var(--line)}
.close{color:var(--txt);text-shadow:none;opacity:.7}
::selection{background:#4A0A28;color:#fff}
/* --------------------------------------------------------------------------
Correcoes de encaixe
Em CSS grid, a coluna tem largura minima "auto" - conteudo largo empurra
a coluna vizinha para fora da tela. Foi o que jogou a caixa de login para
1572px numa tela de 1280. "min-width:0" devolve o comportamento esperado.
-------------------------------------------------------------------------- */
.hero-grid > *{min-width:0}
.grid-4 > *,.steps > *,.pays > *,.upm-atalhos > *{min-width:0}
.upm-carrossel > *{min-width:0}
body{overflow-x:hidden}
/* ==========================================================================
AJUSTES DE LEGIBILIDADE E ACABAMENTO
Este bloco fica no fim de proposito: e a ultima palavra sobre tamanho de
texto e alinhamento. Foi escrito depois de olhar a pagina publicada -
varios textos tinham ficado pequenos demais para ler com conforto, e o
cartao de login estava desproporcional em relacao ao resto da pagina.
========================================================================== */
/* ---------------------------------------------------------------- cabecalho
Barra um pouco mais alta e textos em tamanho de leitura. */
:root{--head-h:72px}
@media (max-width:720px){:root{--head-h:64px}}
.logo-txt b{font-size:1.12rem}
.logo-txt small{font-size:.56rem;letter-spacing:.3em}
.logo-img{height:38px}
.head-nav{gap:6px}
.head-nav a{font-size:.95rem;padding:.55rem 1.1rem}
.lang{font-size:.88rem;padding:.5rem 1rem;cursor:pointer;position:relative}
/* Lista de idiomas: fechada por padrao, abre no clique. */
.upm-idiomas{
position:absolute;top:calc(100% + 8px);right:0;z-index:70;
display:none;min-width:170px;padding:6px;
border:1px solid var(--line-2);border-radius:var(--r-sm);
background:var(--surface-2);box-shadow:var(--shadow)
}
.lang.aberto .upm-idiomas{display:block}
.upm-idiomas a{display:block;padding:.55rem .75rem;border-radius:8px;
color:var(--txt-2);font-size:.88rem;font-weight:600}
.upm-idiomas a:hover{background:rgba(255,255,255,.05);color:var(--txt)}
.upm-idiomas a.on{color:var(--pink)}
/* ------------------------------------------------------- selos e chamadas */
.chip{font-size:.72rem;padding:.45rem 1rem;letter-spacing:.1em}
.chip--auth{margin-bottom:1rem}
.check{font-size:.87rem;padding:.55rem 1rem}
.eyebrow{font-size:.76rem}
/* ------------------------------------------------- cartao de entrar/criar
Tudo aqui e escrito na medida certa em vez de herdar os tamanhos antigos,
que vinham de um cartao bem menor. Alvo: texto legivel, campos altos o
bastante para o dedo no celular e uma unica largura para todos os
controles, inclusive o botao do Google. */
.auth{padding:clamp(22px,2.4vw,32px)}
.auth h3{font-size:1.45rem;margin:0 0 .5rem}
.auth-note{font-size:.92rem;line-height:1.55;color:var(--txt-2);margin-bottom:1.25rem}
.auth-tab{font-size:.95rem;padding:.7rem 1rem;font-weight:700}
.auth .form-group{margin-bottom:16px;position:relative}
.auth label,
.auth .control-label{
display:block;margin-bottom:7px;
font-size:.88rem;font-weight:600;color:var(--txt-2)
}
.auth .form-control,
.auth input[type=text],
.auth input[type=email],
.auth input[type=password]{
width:100%;height:52px;padding:0 16px;
font-size:1rem;line-height:52px;
border-radius:12px;
background:#0A0A10!important;
border:1px solid var(--line-2)!important;
color:var(--txt)!important;
box-shadow:none!important;
transition:border-color .16s,box-shadow .16s
}
.auth .form-control::placeholder{color:var(--txt-3)}
.auth .form-control:focus{
border-color:var(--pink)!important;
box-shadow:0 0 0 3px rgba(255,46,154,.16)!important
}
/* "Esqueceu sua senha?" ancorado no canto do rotulo, sem empurrar o campo */
.auth .form-group__password{position:relative}
.auth .forgot-password{
position:absolute;top:0;right:0;
font-size:.82rem;font-weight:600;color:var(--pink)!important
}
.auth .forgot-password:hover{text-decoration:underline}
/* Botao principal com a mesma largura e altura dos campos */
.auth .btn,
.auth .btn-primary{
width:100%;min-height:52px;
font-size:1rem;font-weight:700;
border-radius:12px;
display:flex;align-items:center;justify-content:center
}
/* Separador "ou" */
.upm-ou{display:flex;align-items:center;gap:12px;margin:18px 0;
color:var(--txt-3);font-size:.82rem;font-weight:600}
.upm-ou::before,.upm-ou::after{content:"";flex:1;height:1px;background:var(--line-2)}
/* Botao do Google: centralizado e na mesma largura do resto. O widget vem
num iframe de largura fixa, entao ele e centralizado em vez de esticado -
esticar deformaria o desenho do proprio botao do Google. */
.auth .upm-google{display:flex;justify-content:center;width:100%;margin-bottom:4px}
.auth .g_id_signin{display:flex;justify-content:center;width:100%}
.auth .g_id_signin>div{margin:0 auto!important}
.auth #g_id_onload{display:none}
.auth-foot{margin-top:18px;text-align:center;font-size:.92rem;color:var(--txt-2)}
.auth-foot .link-pink{color:var(--pink)!important;font-weight:700}
/* Avisos de erro e acerto dentro do cartao */
.auth .alert{border-radius:12px;font-size:.9rem;padding:.9rem 1rem;margin-bottom:14px}
/* Caixa dos termos, na aba de cadastro */
.auth .checkbox label{font-size:.88rem;color:var(--txt-2);font-weight:500;
display:flex;align-items:flex-start;gap:9px;line-height:1.5}
.auth .checkbox input[type=checkbox]{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--pink)}
.auth .checkbox a{color:var(--pink)!important;font-weight:600}
/* ------------------------------------------------------- atalhos do topo
Cor roxa solida, como era antes. Eles moram dentro da coluna do texto,
entao a largura acompanha a coluna - antes escapavam para 94% da tela e
passavam por tras do cartao de login. */
.upm-atalhos{width:100%;margin:18px 0 0}
.upm-atalho,
.upm-root .upm-atalho{
background:#7C3AED!important;
border:1px solid #7C3AED!important;
color:#fff!important;
padding:14px 16px!important
}
.upm-atalho:hover,
.upm-root .upm-atalho:hover{
background:#6D28D9!important;
border-color:#6D28D9!important;
transform:translateY(-1px)
}
.upm-atalho-ic{
background:rgba(255,255,255,.16)!important;
border-color:rgba(255,255,255,.26)!important;
color:#fff!important
}
.upm-atalho-txt b{font-size:.95rem;color:#fff}
.upm-atalho-txt small{font-size:.78rem;color:rgba(255,255,255,.8)}
@media (max-width:600px){
.upm-atalho,.upm-root .upm-atalho{padding:12px 10px!important}
.upm-atalho-txt b{font-size:.82rem}
}
/* ------------------------------------------------------------- rodape */
.site-foot{font-size:.88rem}
.site-foot nav a{font-size:.88rem}
/* ==========================================================================
ESCALA DE TEXTO
Os tamanhos originais tinham varios textos entre 0,6 e 0,8 rem - de 10 a
13 pixels - o que fica pequeno demais para leitura corrida, ainda mais no
celular. Aqui a escala inteira e refeita de uma vez, mantendo a mesma
hierarquia visual: titulo grande, subtitulo medio, texto de apoio menor,
porem sempre acima de 14 pixels.
========================================================================== */
html{font-size:16px}
@media (max-width:480px){html{font-size:15px}}
/* Abertura da pagina */
.hero-lead{font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.6}
/* Cabecalho das secoes */
.sec-head h2{font-size:clamp(2rem,3.6vw,3rem)}
.sec-head p{font-size:1.05rem;line-height:1.6;max-width:64ch;margin-inline:auto}
/* Diferenciais */
.feat h3{font-size:1.12rem;margin-bottom:.5rem}
.feat p{font-size:.95rem;line-height:1.6}
/* Os 5 passos */
.step h3{font-size:1.1rem;margin-bottom:.4rem}
.step p{font-size:.92rem;line-height:1.55}
.step>b{font-size:.95rem}
/* Numeros do painel */
.stat b{font-size:clamp(1.9rem,3vw,2.8rem)}
.stat span{font-size:.85rem;letter-spacing:.12em}
/* Feedbacks */
.fb p{font-size:1rem;line-height:1.6}
.fb-who b{font-size:.95rem}
.fb-who small{font-size:.82rem}
.stars{font-size:1rem}
/* Formas de pagamento */
.pay{font-size:1rem;font-weight:600}
/* Duvidas frequentes */
.qa summary{font-size:1.02rem;font-weight:600}
.qa p{font-size:.95rem;line-height:1.65}
/* Chamada final */
.cta-box p{font-size:1.05rem;line-height:1.6}
/* Rodape */
.site-foot,.site-foot nav a,.site-foot span{font-size:.9rem}
/* ==========================================================================
ICONES, CAPTCHA E ACABAMENTOS FINAIS
========================================================================== */
/* --------------------------------------------------------------- icones
Todos os icones cresceram junto com o texto, para a proporcao entre um e
outro continuar a mesma. */
.feat .ic{width:52px;height:52px;border-radius:15px;margin-bottom:16px}
.feat .ic svg{width:24px;height:24px}
.check i{width:22px;height:22px}
.check i svg{width:13px;height:13px}
.step b{width:58px;height:58px;border-radius:18px;font-size:1.05rem}
.av{width:42px;height:42px;border-radius:12px;font-size:.85rem}
.qa summary::after{width:30px;height:30px;font-size:1.15rem}
.pay{padding:20px 12px}
.pay svg{width:26px;height:26px}
.upm-atalho-ic{flex:0 0 46px;width:46px;height:46px;border-radius:14px}
.upm-atalho-ic svg{width:24px;height:24px}
.stars{letter-spacing:.12em;color:var(--amber)}
/* Setas e sinais do cabecalho */
.site-head svg{width:15px;height:15px}
.burger svg{width:26px;height:26px}
/* --------------------------------------------------------------- captcha
O captcha vem do proprio painel num tamanho fixo, entao ele e centralizado
dentro do cartao em vez de esticado - esticar deformaria o widget. Vale
tanto para o reCAPTCHA quanto para hCaptcha e Altcha. */
.auth-captcha{
display:flex;justify-content:center;align-items:center;
width:100%;margin:6px 0 18px
}
.auth-captcha>*{margin:0 auto!important;float:none!important}
.auth-captcha iframe,
.auth-captcha .g-recaptcha,
.auth-captcha .h-captcha,
.auth-captcha .altcha{margin:0 auto!important;display:block!important}
/* Em telas estreitas o widget nao cabe inteiro; encolhe mantendo o centro. */
@media (max-width:420px){
.auth-captcha{transform:scale(.88);transform-origin:center}
}
/* ------------------------------------------------------- retoques finais */
/* Os cartoes de numero ficam com a mesma altura, sem a borda sobrando na
ultima coluna. */
.stat:last-child{border-right:0}
/* Espaco de respiro entre as secoes em telas grandes. */
@media (min-width:992px){
.sec{padding-block:clamp(48px,5vw,84px)}
}
/* ==========================================================================
TOPO COMPACTO E ALINHAMENTO DAS DUAS ABAS
Tres coisas resolvidas aqui:
1. O cartao de entrar precisa aparecer inteiro assim que a pagina abre,
sem ter que rolar. Entao o titulo, os botoes e o proprio cartao
encolhem um pouco - sem voltar aos tamanhos ilegiveis de antes.
2. A coluna do texto passa a ficar ancorada no alto. Antes ela era
centralizada, entao quando o cartao crescia (o cadastro tem mais
campos que o login) o titulo descia junto e dava a impressao de que a
pagina tinha pulado ao trocar de aba. Ancorada no alto, o titulo fica
exatamente no mesmo lugar nas duas abas: quem rola desce com a pagina
inteira, como e o normal.
3. No celular os atalhos ficam mais finos e com o icone ao lado do texto,
nunca por cima dele.
========================================================================== */
/* ------------------------------------------------- 1 e 2: topo da pagina */
.hero{padding:clamp(20px,3vw,40px) 0 clamp(28px,3.5vw,52px)}
.hero-grid{align-items:start}
.hero h1{
font-size:clamp(1.9rem,4.4vw,3.4rem);
margin:14px 0 12px
}
.hero-lead{font-size:clamp(.95rem,1.1vw,1.02rem);line-height:1.55;max-width:52ch}
.hero-checks{margin-top:14px;gap:7px}
.check{font-size:.82rem;padding:.42rem .8rem}
.check i{width:19px;height:19px}
.hero-cta{margin-top:16px;gap:9px}
.hero-cta .btn{min-height:44px;padding:.62rem 1.25rem;font-size:.88rem}
/* Cartao de entrar / criar conta, um pouco mais enxuto */
.auth{padding:clamp(18px,1.9vw,24px);border-radius:var(--r-lg)}
.auth-tabs{margin-bottom:.85rem}
.auth-tab{font-size:.9rem;padding:.58rem 1rem}
.auth .chip--auth{margin-bottom:.7rem;font-size:.68rem;padding:.35rem .8rem}
.auth h3{font-size:1.25rem;margin:0 0 .35rem}
.auth-note{font-size:.86rem;line-height:1.45;margin-bottom:.95rem}
.auth .form-group{margin-bottom:12px}
.auth label,.auth .control-label{font-size:.83rem;margin-bottom:5px}
.auth .form-control,
.auth input[type=text],
.auth input[type=email],
.auth input[type=password]{height:46px;line-height:46px;font-size:.95rem;padding:0 14px}
.auth .btn,.auth .btn-primary{min-height:46px;font-size:.94rem}
.auth .forgot-password{font-size:.78rem}
.upm-ou{margin:13px 0;font-size:.8rem}
.auth-foot{margin-top:13px;font-size:.87rem}
.auth-captcha{margin:2px 0 12px}
/* Em tela baixa e larga, aperta mais um pouco para o cartao caber inteiro. */
@media (min-width:992px) and (max-height:820px){
.hero{padding-top:18px}
.hero h1{font-size:clamp(1.8rem,3.4vw,2.7rem);margin:10px 0}
.auth{padding:18px}
.auth .form-control{height:44px;line-height:44px}
.auth .btn,.auth .btn-primary{min-height:44px}
.upm-atalhos{margin-top:12px}
}
/* ------------------------------------------- 3: atalhos no celular */
/* O ajuste antigo empilhava icone em cima do texto. Aqui eles voltam a
ficar lado a lado, em qualquer largura de tela, e a faixa fica mais fina. */
@media (max-width:600px){
.upm-atalhos{grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.upm-atalho,
.upm-root .upm-atalho{
flex-direction:row!important;
align-items:center!important;
text-align:left!important;
gap:9px!important;
padding:9px 10px!important;
border-radius:13px!important
}
.upm-atalho-ic{flex:0 0 30px!important;width:30px!important;height:30px!important;border-radius:9px!important}
.upm-atalho-ic svg{width:17px!important;height:17px!important}
.upm-atalho-txt{align-items:flex-start!important;text-align:left!important}
.upm-atalho-txt b{font-size:.78rem;line-height:1.15}
.upm-atalho-txt small{display:none!important}
}
/* Telas bem estreitas: um atalho embaixo do outro, ainda com icone ao lado. */
@media (max-width:360px){
.upm-atalhos{grid-template-columns:1fr}
.upm-atalho-txt small{display:block!important;font-size:.7rem}
}
/* Abas do cartao em caixa alta, como pedido. */
.auth-tab{text-transform:uppercase;letter-spacing:.06em;font-weight:800}
/* Enquanto a outra aba nao chegou, o cartao esmaece de leve - dura poucos
milissegundos porque o formulario ja vem adiantado em segundo plano. */
.auth.trocando #upm-form-slot{opacity:.45;transition:opacity .12s}
/* ==========================================================================
COLUNA DA ESQUERDA OCUPANDO A ALTURA TODA
A coluna do texto agora acompanha a altura do cartao de login, e os dois
atalhos roxos sao empurrados para o pe dela. Assim o bloco da esquerda
termina rente ao cartao, sem aquela sobra de espaco embaixo.
O titulo continua ancorado no alto - e o que garante que ele nao se mexe
quando o visitante troca entre Login e Cadastro, mesmo o cartao de
cadastro sendo mais alto.
========================================================================== */
.hero-grid{align-items:stretch}
.hero-grid>div:first-child{
display:flex;
flex-direction:column;
align-items:flex-start
}
/* Empurra os atalhos para o pe da coluna. */
.upm-atalhos{margin-top:auto;padding-top:18px;align-self:stretch}
/* Com mais espaco disponivel, o texto volta a respirar. */
.hero h1{font-size:clamp(2.05rem,4.8vw,3.6rem);margin:16px 0 14px}
.hero-lead{font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.6}
.hero-checks{margin-top:18px}
.check{font-size:.85rem;padding:.48rem .9rem}
.hero-cta{margin-top:20px}
.hero-cta .btn{min-height:46px;font-size:.9rem}
/* No celular a coluna e o cartao ficam um embaixo do outro, entao o
empurrao para o pe nao faz sentido - volta ao espacamento normal. */
@media (max-width:991px){
.hero-grid>div:first-child{display:block}
.upm-atalhos{margin-top:14px;padding-top:0}
}
/* --------------------------------------------------------------------------
Botoes ficam como estavam: quem cresce e so o texto - titulo, subtitulo e
o restante da leitura. Os botoes de acao e os dois atalhos roxos mantem o
tamanho compacto.
-------------------------------------------------------------------------- */
.hero-cta .btn{min-height:44px;padding:.6rem 1.2rem;font-size:.87rem}
.upm-atalho,
.upm-root .upm-atalho{padding:12px 14px!important}
.upm-atalho-ic{flex:0 0 40px;width:40px;height:40px;border-radius:12px}
.upm-atalho-ic svg{width:21px;height:21px}
.upm-atalho-txt b{font-size:.9rem}
.upm-atalho-txt small{font-size:.75rem}
/* Titulo e textos de leitura, um pouco maiores. */
.hero h1{font-size:clamp(2.15rem,5vw,3.8rem)}
.hero-lead{font-size:clamp(1.02rem,1.2vw,1.12rem)}
/* --------------------------------------------------------------------------
Selos do topo e botao do Google
-------------------------------------------------------------------------- */
/* O sinal de confirmado dentro de cada selo. */
.check i.ic{display:grid;place-items:center}
.check i.ic svg{width:12px;height:12px;display:block}
/* Botao do Google alinhado com o botao de entrar: mesma largura, mesma
altura e o mesmo canto arredondado. A largura em si e pedida ao Google
pelo script; aqui fica so o acabamento. */
.auth .upm-google{margin:0 0 2px}
.auth .g_id_signin,
.auth .g_id_signin>div{width:100%!important;display:flex!important;justify-content:center!important}
.auth .g_id_signin iframe{
margin:0 auto!important;
border-radius:12px!important;
min-height:46px!important
}
/* --------------------------------------------------------------------------
Largura do cartao acertada com o botao do Google
O componente do Google aceita no maximo 400 pixels de largura - acima
disso ele ignora o pedido e desenha menor, o que deixava o botao dele mais
estreito que o de entrar. Entao a coluna do cartao passa a ter a largura
exata em que o formulario mede 400 pixels: assim campo, botao Entrar e
botao do Google ficam todos do mesmo tamanho, um debaixo do outro.
-------------------------------------------------------------------------- */
@media (min-width:992px){
.hero-grid{grid-template-columns:1fr minmax(0,448px)}
}
/* ==========================================================================
BOTOES DO CANTO E JANELA DO CONTADOR
Os tres botoes do canto e as janelas de reposicao e contador vem do codigo
de cabecalho do painel, que fica nas Configuracoes - uma area que esta
fora do editor de tema. Como o tema manda na aparencia, os ajustes de
visual sao feitos daqui, sem precisar mexer naquele codigo:
- o botao "Contador de Seguidores" sai do canto, porque agora ele e
chamado pelo atalho roxo do topo da pagina. O botao continua existindo
escondido, que e o que o atalho aciona - por isso ele nao e removido
do html, so deixa de aparecer;
- o WhatsApp vira um botao redondo so com o simbolo, que ocupa bem menos
espaco na tela;
- a janela do contador passa a abrir no meio da tela, e nao mais colada
no canto de baixo.
========================================================================== */
/* O botao do contador sai da vista, mas segue no html para o atalho do topo
continuar acionando a mesma funcao de sempre. */
.grupo-botoes-flutuantes .botao-contador{
position:absolute!important;
width:1px!important;height:1px!important;
padding:0!important;margin:0!important;
opacity:0!important;pointer-events:none!important;
overflow:hidden!important
}
/* WhatsApp: so o simbolo, num botao redondo. */
.grupo-botoes-flutuantes{align-items:flex-end!important}
.grupo-botoes-flutuantes .botao-whatsapp{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:56px!important;
height:56px!important;
min-width:0!important;
padding:0!important;
border-radius:50%!important;
font-size:0!important;
line-height:0!important;
align-self:flex-end!important;
background:#25D366!important;
box-shadow:0 8px 22px -6px rgba(37,211,102,.6)!important
}
.grupo-botoes-flutuantes .botao-whatsapp::before{
content:"";
display:block;
width:32px;height:32px;
background:#fff;
-webkit-mask:var(--upm-zap) center/contain no-repeat;
mask:var(--upm-zap) center/contain no-repeat
}
.grupo-botoes-flutuantes .botao-whatsapp:hover{
background:#1FBA59!important;
transform:translateY(-2px)
}
/* Janela do contador no centro da tela. A animacao de abrir continua a
mesma - so o ponto de partida e de chegada mudam de lugar. */
.janela-contador{
right:auto!important;
bottom:auto!important;
left:50%!important;
top:50%!important;
transform:translate(-50%,-50%) translateY(14px) scale(.97)!important;
width:min(420px,calc(100vw - 28px))!important;
max-height:calc(100vh - 40px)!important
}
.janela-contador.ativo{
transform:translate(-50%,-50%) translateY(0) scale(1)!important
}
/* ==========================================================================
PREENCHIMENTO AUTOMATICO DO NAVEGADOR
Quando o visitante escolhia um usuario salvo, o Chrome pintava o campo de
branco e o texto sumia contra o fundo claro. Aqui o campo mantem o fundo
escuro do tema e a letra clara, entao da para ler o que foi preenchido sem
precisar clicar em outro lugar.
========================================================================== */
.auth input:-webkit-autofill,
.auth input:-webkit-autofill:hover,
.auth input:-webkit-autofill:focus,
.auth input:-webkit-autofill:active{
-webkit-text-fill-color:#F4F4F7!important;
caret-color:#F4F4F7!important;
-webkit-box-shadow:0 0 0 1000px #0A0A10 inset!important;
box-shadow:0 0 0 1000px #0A0A10 inset!important;
border:1px solid rgba(255,255,255,.12)!important;
transition:background-color 100000s ease-in-out 0s
}
.auth input:-webkit-autofill:focus{
border-color:#FF2E9A!important;
-webkit-box-shadow:0 0 0 1000px #0A0A10 inset,0 0 0 3px rgba(255,46,154,.16)!important;
box-shadow:0 0 0 1000px #0A0A10 inset,0 0 0 3px rgba(255,46,154,.16)!important
}
/* Firefox */
.auth input:autofill{
background:#0A0A10!important;
color:#F4F4F7!important
}
:root{--upm-zap:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.46-2.39-1.48-.88-.79-1.48-1.76-1.65-2.06-.18-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.91-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.87 1.22 3.07c.15.2 2.1 3.2 5.08 4.49.7.3 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2-1.41.25-.7.25-1.29.18-1.42-.08-.12-.28-.2-.57-.35M12.05 21.79h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.88 9.89-9.88a9.82 9.82 0 0 1 6.99 2.89 9.83 9.83 0 0 1 2.89 7c0 5.45-4.44 9.88-9.88 9.88M20.52 3.45A11.85 11.85 0 0 0 12.05 0C5.46 0 .1 5.36.1 11.94c0 2.1.55 4.14 1.59 5.95L0 24l6.34-1.65a11.88 11.88 0 0 0 5.68 1.45h.01c6.58 0 11.95-5.36 11.95-11.95a11.87 11.87 0 0 0-3.45-8.4'/%3E%3C/svg%3E")}
/* A janela do contador nasceu clara, de quando o site era claro. Aqui ela
recebe as cores do tema para nao destoar do resto da pagina. */
.janela-contador{
background:#12121A!important;
border:1px solid rgba(255,46,154,.22)!important;
color:#F4F4F7!important;
box-shadow:0 24px 60px -20px rgba(0,0,0,.9),0 0 90px -34px rgba(255,46,154,.35)!important
}
.janela-contador h2{color:#F4F4F7!important;font-family:'Archivo',system-ui,sans-serif;font-weight:800}
.janela-contador .campo-contador{
background:#0A0A10!important;
border:1px solid rgba(255,255,255,.12)!important;
border-radius:12px!important
}
.janela-contador .campo-contador input{
background:transparent!important;
color:#F4F4F7!important
}
.janela-contador .campo-contador input::placeholder{color:#6E6E82!important}
.janela-contador .mensagem-contador{color:#A6A6B8!important}
.janela-contador .aviso-contador{
background:rgba(255,46,154,.07)!important;
border:1px solid rgba(255,46,154,.18)!important;
border-radius:12px!important;
color:#A6A6B8!important
}
.janela-contador .aviso-contador strong{color:#FF2E9A!important}
.janela-contador .aviso-contador p{color:#A6A6B8!important}
.janela-contador .nome-resultado strong{color:#F4F4F7!important}
.janela-contador .nome-resultado span{color:#A6A6B8!important}
.janela-contador .fechar-modal{
background:rgba(255,46,154,.14)!important;
color:#FF2E9A!important;
border:1px solid rgba(255,46,154,.28)!important
}
/* As abas sao links, entao o navegador as sublinha ao receber o clique.
Aqui elas ficam limpas em qualquer estado. */
.auth-tab,
.auth-tab:hover,
.auth-tab:focus,
.auth-tab:active,
.auth-tab:visited{text-decoration:none!important;outline:none}
/* ==========================================================================
AJUSTE FINO DA PRIMEIRA TELA
1. Os dois atalhos roxos param de descer quando o visitante vai para a aba
Cadastro. A coluna da esquerda passa a ter uma altura propria, igual a
do cartao de login, em vez de acompanhar o cartao - que e mais alto no
cadastro. Assim os atalhos ficam ancorados sempre na mesma linha, nas
duas abas.
2. Titulo e atalhos ficam um pouco mais estreitos.
3. O cartao de login e cadastro fica mais largo. Por dentro, os campos
seguem com 400 pixels, que e o limite que o botao do Google aceita -
e o que mantem os tres botoes do mesmo tamanho. O que cresce e a
moldura do cartao.
========================================================================== */
@media (min-width:992px){
/* Cartao mais largo por fora, campos na mesma medida por dentro. */
.hero-grid{grid-template-columns:1fr minmax(0,496px)}
.auth{padding:26px 48px 28px}
/* A coluna da esquerda deixa de esticar junto com o cartao. */
.hero-grid{align-items:start}
.hero-grid>div:first-child{
display:flex;
flex-direction:column;
align-items:flex-start;
min-height:574px /* mesma altura do cartao na aba de login */
}
/* Titulo e texto de abertura um pouco mais estreitos. */
.hero h1{max-width:14ch}
.hero-lead{max-width:46ch}
/* Atalhos ancorados no pe da coluna e menos largos. */
.upm-atalhos{
margin-top:auto;
padding-top:18px;
align-self:flex-start;
width:100%;
max-width:640px
}
}
/* --------------------------------------------------------------------------
Mais 15 pixels de largura no cartao, no titulo e nos atalhos.
-------------------------------------------------------------------------- */
@media (min-width:992px){
.hero-grid{grid-template-columns:1fr minmax(0,511px)} /* cartao: 496 -> 511 */
.hero h1{max-width:583px} /* titulo: 568 -> 583 */
.upm-atalhos{max-width:655px} /* atalhos: 640 -> 655 */
}
/* --------------------------------------------------------------------------
Colunas mais proximas
O texto e o cartao ficavam cada um grudado numa ponta da tela, com um vao
grande no meio. Agora as duas colunas tem largura propria e o par inteiro
e centralizado, entao elas ficam lado a lado, sem aquele buraco.
-------------------------------------------------------------------------- */
@media (min-width:992px){
.hero-grid{
grid-template-columns:minmax(0,655px) minmax(0,511px);
justify-content:center;
gap:32px
}
}
/* --------------------------------------------------------------------------
Cadastro em duas etapas
-------------------------------------------------------------------------- */
.upm-passo{
margin:0 0 12px;
font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--pink)
}
.upm-etapa[hidden]{display:none!important}
.upm-seguir{margin-top:2px}
.upm-voltar{
display:block;width:100%;margin-top:10px;padding:.5rem;
background:none;border:0;
color:var(--txt-2);font-size:.86rem;font-weight:600;cursor:pointer
}
.upm-voltar:hover{color:var(--pink)}
/* --------------------------------------------------------------------------
Bandeiras do seletor de idioma
O cabecalho mostra so a bandeira do idioma em uso. No clique, a lista abre
com a bandeira e o nome de cada idioma disponivel.
-------------------------------------------------------------------------- */
.upm-bandeira{display:inline-flex;align-items:center;flex:none;line-height:0}
.upm-bandeira svg{
display:block;border-radius:3px;
box-shadow:0 0 0 1px rgba(255,255,255,.16)
}
.lang{gap:8px;padding:.4rem .7rem}
.upm-idiomas a{display:flex;align-items:center;gap:9px;white-space:nowrap}
/* Seletor dentro do painel, ja logado. */
.lang--logado{
display:flex!important;align-items:center;gap:8px;
position:relative;cursor:pointer;
padding:0 14px;margin:0;
list-style:none
}
.lang--logado>svg{opacity:.5}
.lang--logado .upm-idiomas{top:calc(100% + 4px)}
.lang--logado.aberto .upm-idiomas{display:block}
/* No menu do celular a bandeira aparece junto do nome. */
.upm-menu-idioma{display:flex!important;align-items:center;gap:9px}
/* ==========================================================================
JANELA DE REPOSICAO
Uma janela do tamanho do conteudo, no meio da tela - nao a tela inteira.
Cabe o campo, a resposta e as regras sem esticar; se a resposta for longa,
a rolagem acontece dentro da janela, e nao na pagina atras dela.
========================================================================== */
.upm-modal{position:fixed;inset:0;z-index:999995;display:grid;place-items:center;padding:16px}
.upm-modal[hidden]{display:none}
.upm-modal-fundo{
position:absolute;inset:0;
background:rgba(4,4,8,.72);
backdrop-filter:blur(4px);
opacity:0;transition:opacity .18s
}
.upm-modal.aberto .upm-modal-fundo{opacity:1}
.upm-modal-caixa{
position:relative;z-index:1;
width:min(520px,100%);
max-height:min(86vh,760px);
overflow-y:auto;
padding:26px 26px 22px;
border-radius:var(--r-lg);
background:linear-gradient(165deg,#181020,#0C0C12 62%);
border:1px solid rgba(255,46,154,.22);
box-shadow:var(--shadow),0 0 90px -34px var(--glow);
opacity:0;transform:translateY(12px) scale(.98);
transition:opacity .18s,transform .18s
}
.upm-modal.aberto .upm-modal-caixa{opacity:1;transform:none}
.upm-modal-x{
position:absolute;top:14px;right:14px;
width:34px;height:34px;line-height:1;
display:grid;place-items:center;
border-radius:50%;
background:rgba(255,46,154,.14);
border:1px solid rgba(255,46,154,.28);
color:var(--pink);font-size:1.3rem;cursor:pointer
}
.upm-modal-x:hover{background:rgba(255,46,154,.24)}
.upm-modal-caixa h3{font-size:1.3rem;margin:0 34px .4rem 0}
.upm-modal-sub{font-size:.92rem;color:var(--txt-2);line-height:1.5;margin:0 0 1.1rem}
/* Campo e botao lado a lado; no celular, um sobre o outro. */
.upm-refil-form label{
display:block;margin-bottom:7px;
font-size:.86rem;font-weight:600;color:var(--txt-2)
}
.upm-refil-linha{display:flex;gap:9px}
.upm-refil-linha .form-control{
flex:1;min-width:0;height:48px;padding:0 15px;
font-size:.96rem;border-radius:12px;
background:#0A0A10!important;
border:1px solid var(--line-2)!important;
color:var(--txt)!important
}
.upm-refil-linha .form-control:focus{
border-color:var(--pink)!important;
box-shadow:0 0 0 3px rgba(255,46,154,.16)!important
}
.upm-refil-linha .btn{flex:none;min-height:48px;padding:0 1.4rem;border-radius:12px;font-size:.92rem}
.upm-refil-linha .btn[disabled]{opacity:.6;cursor:default}
@media (max-width:520px){
.upm-refil-linha{flex-direction:column}
.upm-refil-linha .btn{width:100%}
.upm-modal-caixa{padding:22px 18px 18px}
}
/* ---------------------------------------------------------- a resposta */
.upm-refil-saida{
margin-top:16px;padding:15px 16px;
border-radius:14px;
border:1px solid var(--line-2);
background:rgba(255,255,255,.03)
}
.upm-refil-saida[hidden]{display:none}
.upm-refil-saida.ok{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08)}
.upm-refil-saida.aviso{border-color:rgba(245,165,36,.35);background:rgba(245,165,36,.08)}
.upm-refil-saida.erro{border-color:rgba(255,46,154,.32);background:rgba(255,46,154,.07)}
.upm-refil-topo{display:flex;gap:11px;align-items:flex-start}
.upm-refil-topo p{margin:0;font-size:.93rem;line-height:1.55;color:var(--txt)}
.upm-refil-ic{font-size:1.25rem;line-height:1.3;flex:none}
/* Rodinha de espera, para a consulta nao parecer travada. */
.upm-girando{
width:18px;height:18px;margin-top:2px;
border:2px solid rgba(255,255,255,.18);
border-top-color:var(--pink);
border-radius:50%;
animation:upm-gira .7s linear infinite
}
@keyframes upm-gira{to{transform:rotate(360deg)}}
.upm-refil-det{
margin-top:13px;padding-top:12px;
border-top:1px solid var(--line);
display:grid;gap:7px
}
.upm-refil-item{display:flex;justify-content:space-between;gap:14px;font-size:.88rem}
.upm-refil-item span{color:var(--txt-2)}
.upm-refil-item b{color:var(--txt);font-family:var(--ff-mono);font-weight:700}
.upm-refil-pedido{
margin-top:12px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--txt-3);font-weight:700
}
/* ------------------------------------------------------------- regras */
.upm-refil-regras{
margin-top:18px;padding-top:15px;
border-top:1px solid var(--line)
}
.upm-refil-regras b{
display:block;margin-bottom:10px;
font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink)
}
.upm-refil-regras ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.upm-refil-regras li{
display:flex;gap:9px;align-items:flex-start;
font-size:.86rem;line-height:1.5;color:var(--txt-2)
}
.upm-refil-regras li span{flex:none;line-height:1.4}
/* Pagina parada enquanto a janela esta aberta. */
body.upm-travado{overflow:hidden}
/* ==========================================================================
O canto da tela fica so com o WhatsApp
A reposicao agora tem janela propria, aberta pelo atalho roxo do topo,
entao o botao do canto sai de vista. Ele continua no html porque quem o
coloca ali e o codigo de cabecalho do painel, que nao esta ao alcance do
editor de tema - e nada mais depende dele.
========================================================================== */
.grupo-botoes-flutuantes .botao-reposicao{
position:absolute!important;
width:1px!important;height:1px!important;
padding:0!important;margin:0!important;
opacity:0!important;pointer-events:none!important;
overflow:hidden!important
}
/* ------------------------------------------------------------- lateral */
.upm-logado .lateral{
position:fixed;
inset:0 auto 0 0;
flex:none;
width:var(--lateral);
overflow-y:auto;
scrollbar-width:none;
background:var(--bg-2);
border-right:1px solid var(--line);
display:flex;
flex-direction:column;
padding:20px 32px;
z-index:40
}
.upm-logado .lateral::-webkit-scrollbar{width:0;height:0}
.upm-logado .marca{
display:flex;
align-items:center;
min-height:44px;
margin-bottom:26px;
flex:none
}
.upm-logado .marca img{max-width:176px;max-height:44px;width:auto;height:auto;object-fit:contain}
.upm-logado .marca span{
font-family:var(--ff-display);font-weight:900;font-size:1.05rem;
letter-spacing:-.03em;color:var(--txt)
}
.upm-logado .menu{display:flex;flex-direction:column;gap:4px}
.upm-logado .menu a{
display:flex;
align-items:center;
gap:10px;
width:176px;
min-height:43px;
padding:8px 16px;
border-radius:999px;
color:#fff;
font:600 13.12px/19.68px var(--ff-body);
transition:background .15s
}
.upm-logado .menu a:hover{background:rgba(255,255,255,.05)}
.upm-logado .menu a.on{
background:linear-gradient(100deg,rgba(255,46,154,.2),rgba(255,46,154,.04))
}
.upm-logado .menu a svg{width:18px;height:18px;flex:none;stroke:currentColor}
/* "Historico de Pedidos" nao cabe na largura: corta com reticencias em vez
de quebrar em duas linhas, como no tema. */
.upm-logado .menu a span{
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.upm-logado .menu .risco{height:1px;background:var(--line);margin:14px 0;width:176px}
/* Moeda no pe do menu */
.upm-logado .moedas{display:flex;gap:6px;margin-top:14px;width:176px}
.upm-logado .moedas a{
flex:1;min-height:0;width:auto;justify-content:center;
padding:7px 0;border-radius:999px;
background:rgba(255,255,255,.03);
border:1px solid var(--line-2);
color:var(--txt-3);
font:700 10.5px/1.2 var(--ff-body)
}
.upm-logado .moedas a.on{background:rgba(255,46,154,.12);border-color:var(--pink);color:#fff}
/* ------------------------------------------------------------ conteudo */
.upm-logado .conteudo{
flex:1;
min-width:0;
margin-left:var(--lateral);
min-height:100vh;
padding:0 20px 60px
}
.upm-logado .topo{
display:flex;
align-items:center;
justify-content:flex-end;
gap:12px;
min-height:64px;
padding:10px 0 6px
}
.upm-logado .topo .abrir-menu{display:none}
.upm-logado .topo .saldo-topo{
display:flex;align-items:center;gap:7px;
padding:8px 15px;border-radius:999px;
background:var(--surface);border:1px solid var(--line);
font:700 13px/1 var(--ff-body);color:var(--txt)
}
.upm-logado .topo .saldo-topo b{color:var(--green);font-family:var(--ff-mono)}
.upm-logado .perfil{
display:grid;place-items:center;
width:38px;height:38px;
border-radius:12px;
background:var(--surface);
border:1px solid var(--line);
color:#fff
}
.upm-logado .perfil:hover{border-color:var(--pink);color:var(--pink)}
.upm-logado .perfil svg{width:19px;height:19px}
/* O seletor de idioma do painel entra no topo, com as mesmas bandeiras. */
.upm-logado .topo .lang{
display:flex;align-items:center;gap:7px;
padding:.45rem .8rem;border-radius:999px;
background:var(--surface);border:1px solid var(--line);
cursor:pointer;position:relative
}
/* -------------------------------------------------------------- celular */
.upm-logado .barra-baixo{display:none}
@media (max-width:991px){
.upm-logado .lateral{
transform:translateX(-100%);
transition:transform .22s ease;
box-shadow:var(--shadow)
}
.upm-logado .lateral.aberta{transform:none}
.upm-logado .conteudo{margin-left:0;padding:0 14px 92px}
.upm-logado .topo{justify-content:space-between}
.upm-logado .topo .abrir-menu{
display:grid;place-items:center;
width:42px;height:42px;border-radius:12px;
background:var(--surface);border:1px solid var(--line);color:#fff
}
.upm-logado .topo .abrir-menu svg{width:20px;height:20px}
.upm-logado .barra-baixo{
position:fixed;inset:auto 0 0 0;
display:grid;grid-template-columns:repeat(4,1fr);
background:var(--bg-2);
border-top:1px solid var(--line);
z-index:45
}
.upm-logado .barra-baixo a{
display:grid;justify-items:center;gap:4px;
padding:9px 4px;
color:var(--txt-3);
font:600 10.5px/1.2 var(--ff-body);
text-align:center
}
.upm-logado .barra-baixo a svg{width:20px;height:20px}
.upm-logado .barra-baixo a.on{color:var(--pink)}
.upm-logado .escurece{
position:fixed;inset:0;
background:rgba(0,0,0,.6);
z-index:39
}
}
/* --------------------------------------------------------------------------
Menu de 3 tracinhos do celular
A regra antiga esperava a classe no cabecalho, mas o script marca o
proprio menu - por isso ele nunca abria. E havia um display:none com
!important depois dela, que anulava tudo. Aqui fica a ultima palavra:
fechado por padrao, aberto quando o script marca.
-------------------------------------------------------------------------- */
.upm-menu-mobile.aberto{display:flex!important}
/* Os 3 tracinhos ficam a direita do cabecalho, no celular. */
@media (max-width:991px){
.site-head .wrap{gap:10px}
.burger{display:grid!important;place-items:center;margin-left:auto}
}
/* Dentro do menu aberto, cada opcao com espaco de toque confortavel e a
bandeira ao lado do idioma. */
.upm-menu-mobile a{display:flex;align-items:center;gap:10px;min-height:46px}
.upm-menu-mobile .upm-bandeira svg{width:20px;height:15px}
/* O menu aberto precisa cobrir o conteudo atras dele. */
.upm-menu-mobile{
background:#0A0A10!important;
border-bottom:1px solid var(--line-2)!important;
box-shadow:0 24px 60px -20px rgba(0,0,0,.95)!important;
z-index:80
}
/* ==========================================================================
TEMA DO PAINEL
Este bloco e o css do tema do painel, com cada regra presa a
body.upm-logado. Foi gerado a partir do arquivo do tema, sem alterar
valores - o que muda e so o alcance:
- nada daqui atinge a pagina de fora, que continua com o css dela;
- nada de fora atropela o painel, porque o seletor com a classe do
body pesa mais do que uma classe sozinha;
- os nomes de animacao ganharam o prefixo pnl-, para nao esbarrarem
em animacoes de mesmo nome do outro lado.
========================================================================== */
body.upm-logado{
--bg: #08080C;
--bg-2: #0D0D13;
--surface: #12121A;
--surface-2: #171722;
--campo: #0A0A10;
--line: rgba(255, 255, 255, .07);
--line-2: rgba(255, 255, 255, .12);
--pink: #FF2E9A;
--pink-2: #E0007D;
--pink-deep: #9C0059;
--roxo: #7C3AED;
--roxo-borda: #A78BFA;
--green: #22C55E;
--amber: #F5A524;
--zap: #25D366;
--txt: #F4F4F7;
--txt-2: #A6A6B8;
--txt-3: #6E6E82;
--r-sm: 10px;
--r: 16px;
--r-lg: 24px;
--ff-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
--ff-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
--ff-mono: 'JetBrains Mono', ui-monospace, monospace;
--shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
--lateral: 240px;
}
body.upm-logado *{ box-sizing: border-box; }
body.upm-logado{
margin: 0;
background: var(--bg);
color: var(--txt);
font: 400 16px/24px var(--ff-body);
-webkit-font-smoothing: antialiased;
}
body.upm-logado a{ color: inherit; text-decoration: none; }
body.upm-logado button{ font: inherit; cursor: pointer; }
body.upm-logado{ display: flex; align-items: flex-start; }
body.upm-logado .lateral{
position: fixed;
inset: 0 auto 0 0;
flex: none;
overflow-y: auto;
scrollbar-width: none;
width: var(--lateral);
background: var(--bg-2);
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
padding: 20px 32px 20px 32px;
z-index: 40;
}
body.upm-logado .marca{
display: block;
width: 176px;
height: 44px;
border-radius: 12px;
background: url("https://storage.perfectcdn.com/hz3ntn/x5yfsdw2m380xn2k.png") center/contain no-repeat;
margin-bottom: 26px;
flex: none;
}
body.upm-logado .menu{ display: flex; flex-direction: column; gap: 4px; }
body.upm-logado .menu a{
display: flex;
align-items: center;
gap: 10px;
width: 176px;
min-height: 43px;
padding: 8px 16px;
border-radius: 999px;
color: #fff;
font: 600 13.12px/19.68px var(--ff-body);
transition: background .15s;
}
body.upm-logado .menu a:hover{ background: rgba(255, 255, 255, .05); }
body.upm-logado .menu a.on{
background: linear-gradient(100deg, rgba(255, 46, 154, .2), rgba(255, 46, 154, .04));
}
body.upm-logado .menu a svg{ width: 18px; height: 18px; flex: none; stroke: currentColor; }
body.upm-logado .menu a span{
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.upm-logado .menu .risco{
height: 1px;
background: var(--line);
margin: 14px 0;
width: 176px;
}
body.upm-logado .lateral::-webkit-scrollbar{ width: 0; height: 0; }
body.upm-logado .conteudo{
flex: 1;
min-width: 0;
margin-left: var(--lateral);
min-height: 100vh;
padding: 0 20px 60px;
}
body.upm-logado .topo{
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
min-height: 64px;
padding: 10px 0 6px;
}
body.upm-logado .topo .abrir-menu{ display: none; }
body.upm-logado .perfil{
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--line);
color: #fff;
}
body.upm-logado .perfil svg{ width: 19px; height: 19px; }
body.upm-logado .tela{ display: none; }
body.upm-logado .tela.on{ display: block; }
body.upm-logado .titulo-tela{
font: 900 1.4rem/1.2 var(--ff-display);
letter-spacing: -.03em;
margin: 4px 0 18px;
}
body.upm-logado .cartoes{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 14px;
}
body.upm-logado .cartao{
display: flex;
align-items: center;
gap: 16px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 24px;
}
body.upm-logado .cartao .icone{
display: grid;
place-items: center;
width: 42px;
height: 42px;
flex: none;
border-radius: 14px;
background: rgba(255, 46, 154, .12);
border: 1px solid rgba(255, 46, 154, .26);
color: var(--pink);
}
body.upm-logado .cartao .icone svg{ width: 20px; height: 20px; }
body.upm-logado .cartao b{
display: block;
font: 700 25px/25px var(--ff-display);
letter-spacing: -.5px;
color: var(--txt);
}
body.upm-logado .cartao span{
display: block;
margin-top: 6px;
font: 700 11.2px/16.8px var(--ff-body);
letter-spacing: .09em;
text-transform: uppercase;
color: var(--txt-2);
}
body.upm-logado .atalhos{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-bottom: 14px;
}
body.upm-logado .atalho{
display: flex;
align-items: center;
gap: 14px;
min-height: 62px;
padding: 12px 14px;
border-radius: 14px;
background: var(--roxo);
border: 1px solid var(--roxo-borda);
box-shadow: rgba(124, 58, 237, .8) 0 14px 30px -16px;
color: #fff;
}
body.upm-logado .atalho .icone{
display: grid;
place-items: center;
width: 36px;
height: 36px;
flex: none;
border-radius: 11px;
background: rgba(255, 255, 255, .16);
}
body.upm-logado .atalho .icone svg{ width: 18px; height: 18px; }
body.upm-logado .atalho b{ display: block; font: 600 .9rem/1.3 var(--ff-body); }
body.upm-logado .atalho span{ display: block; font-size: .78rem; color: rgba(255, 255, 255, .82); }
body.upm-logado .aviso{
display: flex;
gap: 12px;
padding: 14px 16px;
border-radius: var(--r);
border: 1px solid rgba(245, 165, 36, .3);
background: linear-gradient(140deg, rgba(245, 165, 36, .12), rgba(245, 165, 36, .04));
margin-bottom: 18px;
}
body.upm-logado .aviso .icone{
display: grid;
place-items: center;
width: 34px;
height: 34px;
flex: none;
border-radius: 10px;
background: rgba(245, 165, 36, .16);
color: var(--amber);
}
body.upm-logado .aviso .icone svg{ width: 18px; height: 18px; }
body.upm-logado .aviso b{
display: block;
font: 800 11.2px/17.36px var(--ff-body);
letter-spacing: 1.792px;
text-transform: uppercase;
color: var(--amber);
margin-bottom: 2px;
}
body.upm-logado .aviso p{ margin: 0; font-size: 13.12px; line-height: 20.336px; color: var(--txt); }
body.upm-logado .pedido{
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 20px;
align-items: start;
}
body.upm-logado .caixa{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 22px;
}
body.upm-logado .redes{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 16px;
}
body.upm-logado .rede{
display: flex;
align-items: center;
gap: 10px;
height: 44px;
padding: 8px 16px;
border-radius: var(--r);
background: var(--campo);
border: 1px solid var(--line);
color: var(--txt-2);
font: 600 14px/1 var(--ff-body);
}
body.upm-logado .rede svg{ width: 18px; height: 18px; flex: none; }
body.upm-logado .rede.on{ background: rgba(255, 46, 154, .07); border-color: var(--pink); color: #fff; }
body.upm-logado .campo{ margin-bottom: 14px; }
body.upm-logado .campo > label{
display: block;
margin-bottom: 6px;
font: 700 11.2px/16.8px var(--ff-body);
color: var(--txt-2);
}
body.upm-logado .campo input, body.upm-logado .campo select, body.upm-logado .campo textarea{
width: 100%;
height: 44px;
padding: 6px 16px;
background: var(--campo);
color: var(--txt);
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
font: 400 14.4px/21.6px var(--ff-body);
outline: none;
appearance: none;
}
body.upm-logado .campo textarea{ height: auto; padding: 12px 16px; resize: vertical; }
body.upm-logado .campo input::placeholder{ color: var(--txt-3); }
body.upm-logado .campo input:focus, body.upm-logado .campo select:focus, body.upm-logado .campo textarea:focus{ border-color: var(--pink); }
body.upm-logado .campo select{
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px;
padding-right: 40px;
}
body.upm-logado .procurar{ position: relative; margin-bottom: 16px; }
body.upm-logado .procurar input{
width: 100%;
height: 44px;
padding: 6px 16px 6px 44px;
background: var(--campo);
color: var(--txt);
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
font: 400 14.4px/21.6px var(--ff-body);
outline: none;
}
body.upm-logado .procurar input::placeholder{ color: var(--txt-3); }
body.upm-logado .procurar input:focus{ border-color: var(--pink); }
body.upm-logado .procurar svg{
position: absolute;
left: 15px;
top: 13px;
width: 18px;
height: 18px;
color: var(--txt-3);
}
body.upm-logado .dica{ margin: -8px 0 14px; font-size: 12px; color: var(--txt-3); }
body.upm-logado .enviar{
width: 100%;
height: 48px;
padding: 12px 32px;
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, var(--pink), var(--pink-2) 60%, var(--pink-deep));
color: #fff;
font: 700 14.4px/21.6px var(--ff-body);
}
body.upm-logado .descricao-texto{
background: var(--campo);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 16px;
font-size: 13.5px;
line-height: 1.9;
color: var(--txt);
white-space: pre-line;
}
body.upm-logado .selos{ display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
body.upm-logado .selo{
flex: 1 1 0;
min-width: 0;
background: var(--campo);
border: 1px solid var(--line);
border-radius: 12px;
padding: 9.6px 11.2px;
}
body.upm-logado .selo small{
display: block;
font: 700 9.6px/14.4px var(--ff-body);
letter-spacing: 1.344px;
text-transform: uppercase;
color: var(--txt-3);
}
body.upm-logado .selo b{
display: block;
margin-top: 2px;
font: 800 13.12px/15.744px var(--ff-body);
color: var(--pink);
}
body.upm-logado .barra-tabela{
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 14px;
}
body.upm-logado .barra-tabela .procurar{ flex: 1 1 320px; margin: 0; }
body.upm-logado .barra-tabela .conta{ font-size: 12.5px; color: var(--txt-3); white-space: nowrap; }
body.upm-logado .moldura{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: auto;
max-height: 74vh;
}
body.upm-logado table{ width: 100%; border-collapse: collapse; }
body.upm-logado thead th{
position: sticky;
top: 0;
z-index: 2;
background: var(--campo);
color: var(--txt-3);
font: 800 9.6px/14.4px var(--ff-body);
letter-spacing: 1.344px;
text-transform: uppercase;
text-align: left;
padding: 12px;
white-space: nowrap;
}
body.upm-logado tbody td{
padding: 12px;
border-bottom: 1px solid var(--line);
font-size: 13px;
color: var(--txt);
vertical-align: middle;
}
body.upm-logado tbody tr:not(.categoria):hover td{ background: rgba(255, 255, 255, .03); }
body.upm-logado tr.categoria td{
background: linear-gradient(90deg, rgba(255, 46, 154, .16), rgba(255, 46, 154, 0));
border-top: 1px solid var(--line-2);
border-bottom: 1px solid var(--line-2);
font: 900 11.52px/17.28px var(--ff-display);
letter-spacing: -.1152px;
color: #fff;
}
body.upm-logado td.id{ color: var(--pink); font-family: var(--ff-mono); font-size: 12.5px; white-space: nowrap; }
body.upm-logado td.preco{ color: var(--green); font-weight: 700; white-space: nowrap; }
body.upm-logado td.prazo, body.upm-logado td.data{ color: var(--txt-2); white-space: nowrap; }
body.upm-logado td.link{ color: var(--pink); word-break: break-all; max-width: 260px; }
body.upm-logado td.servico{ color: var(--txt-2); max-width: 240px; }
body.upm-logado td.nome{ min-width: 260px; }
body.upm-logado .marca-status{
display: inline-block;
padding: 4px 11px;
border-radius: 999px;
font: 700 11px/1.4 var(--ff-body);
background: rgba(34, 197, 94, .12);
border: 1px solid rgba(34, 197, 94, .3);
color: var(--green);
white-space: nowrap;
}
body.upm-logado .ver{
background: transparent;
color: var(--pink);
border: 1px solid rgba(255, 46, 154, .35);
border-radius: 999px;
padding: 6px 14px;
font: 600 11.5px/1 var(--ff-body);
white-space: nowrap;
}
body.upm-logado .ver:hover{ background: var(--pink); border-color: var(--pink); color: #fff; }
body.upm-logado .vazio td{ text-align: center; padding: 34px 12px; color: var(--txt-3); }
body.upm-logado .flutuantes{
position: fixed;
right: 22px;
bottom: 22px;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 50;
}
body.upm-logado .flutuante{
display: grid;
place-items: center;
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--zap);
color: #fff;
border: 0;
box-shadow: rgba(37, 211, 102, .55) 0 14px 30px -10px;
}
body.upm-logado .flutuante svg{ width: 28px; height: 28px; }
body.upm-logado .barra-baixo{ display: none; }
@media (max-width: 991px) {
body.upm-logado .lateral{
position: fixed;
inset: 0 auto 0 0;
min-height: 0;
overflow-y: auto;
transform: translateX(-100%);
transition: transform .22s ease;
box-shadow: var(--shadow);
}
body.upm-logado .lateral.aberta{ transform: none; }
body.upm-logado .conteudo{ margin-left: 0; padding: 0 14px 92px; }
body.upm-logado .topo{ justify-content: space-between; }
body.upm-logado .topo .abrir-menu{
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--line);
color: #fff;
}
body.upm-logado .topo .abrir-menu svg{ width: 20px; height: 20px; }
body.upm-logado .cartoes{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.upm-logado .cartoes .cartao:first-child{ grid-column: 1 / -1; }
body.upm-logado .atalhos{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.upm-logado .redes{ grid-template-columns: repeat(4, 1fr); }
body.upm-logado .rede{ justify-content: center; padding: 8px; }
body.upm-logado .rede span{ display: none; }
body.upm-logado .pedido{ grid-template-columns: minmax(0, 1fr); }
body.upm-logado .moldura{ max-height: none; }
body.upm-logado .flutuantes{ bottom: 84px; }
body.upm-logado .barra-baixo{
position: fixed;
inset: auto 0 0 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
background: var(--bg-2);
border-top: 1px solid var(--line);
z-index: 45;
}
body.upm-logado .barra-baixo a{
display: grid;
justify-items: center;
gap: 4px;
padding: 9px 4px;
color: var(--txt-3);
font: 600 10.5px/1.2 var(--ff-body);
}
body.upm-logado .barra-baixo a svg{ width: 20px; height: 20px; }
body.upm-logado .barra-baixo a.on{ color: var(--pink); }
body.upm-logado .escurece{
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .6);
z-index: 39;
}
}
@media (max-width: 560px) {
body.upm-logado .cartoes, body.upm-logado .atalhos{ grid-template-columns: minmax(0, 1fr); }
body.upm-logado .cartoes .cartao:first-child{ grid-column: auto; }
body.upm-logado .titulo-tela{ font-size: 1.2rem; }
}
body.upm-logado .filtro-status{
display: inline-flex;
align-items: center;
height: 34px;
padding: 0 11.2px 0 0;
border-radius: 999px;
background: var(--campo);
border: 1px solid var(--line-2);
margin-bottom: 12px;
}
body.upm-logado .filtro-status > span{
padding: 4px 11.2px;
font: 700 10.4px/1 var(--ff-body);
letter-spacing: 1.664px;
text-transform: uppercase;
color: var(--txt-3);
}
body.upm-logado .filtro-status select{
height: 24px;
padding: 0 22px 0 0;
border: 0;
background: transparent;
color: var(--txt);
font: 700 10.4px/1 var(--ff-body);
outline: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 2px center;
background-size: 14px;
}
body.upm-logado .filtro-status select option{ background: var(--surface); color: var(--txt); }
body.upm-logado .barra-selecao{
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
min-height: 62px;
padding: 12px 16px;
border-radius: var(--r);
background: var(--surface);
border: 1px solid var(--line);
margin-bottom: 14px;
}
body.upm-logado .barra-selecao .todas{
display: inline-flex;
align-items: center;
gap: 9px;
font: 600 12.8px/19px var(--ff-body);
color: var(--txt-2);
cursor: pointer;
}
body.upm-logado .barra-selecao .contagem{
font: 400 11.52px/17px var(--ff-body);
color: var(--txt-3);
}
body.upm-logado .barra-selecao .bt{
margin-left: auto;
padding: 8px 17.6px;
border-radius: 999px;
background: rgba(255, 255, 255, .03);
border: 1px solid var(--line-2);
color: var(--txt-2);
font: 700 12.16px/1.2 var(--ff-body);
}
body.upm-logado .barra-selecao .bt + .bt{ margin-left: 0; }
body.upm-logado .barra-selecao .bt:hover{ border-color: var(--pink); color: #fff; }
body.upm-logado input[type="checkbox"]{
appearance: none;
width: 16px;
height: 16px;
flex: none;
margin: 0;
border-radius: 5px;
background: var(--campo);
border: 1px solid var(--line-2);
cursor: pointer;
display: grid;
place-items: center;
}
body.upm-logado input[type="checkbox"]:checked{
background: var(--pink);
border-color: var(--pink);
}
body.upm-logado input[type="checkbox"]:checked::after{
content: "";
width: 9px;
height: 5px;
border: 2px solid #fff;
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translate(1px, -1px);
}
body.upm-logado th.col-marca, body.upm-logado td.col-marca{ width: 44px; padding: 12px; }
body.upm-logado tbody tr.marcada td{ background: rgba(255, 46, 154, .06); }
body.upm-logado .duas-colunas{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
body.upm-logado .caixa + .caixa{ margin-top: 16px; }
body.upm-logado .caixa h2{
margin: 0 0 4px;
font: 800 1rem/1.3 var(--ff-display);
letter-spacing: -.01em;
color: var(--txt);
}
body.upm-logado .caixa .sub{ margin: 0 0 16px; font-size: 12.5px; color: var(--txt-3); }
body.upm-logado .texto{ font-size: 13.5px; line-height: 1.85; color: var(--txt-2); }
body.upm-logado .texto h3{
margin: 22px 0 8px;
font: 800 .92rem/1.4 var(--ff-display);
color: var(--txt);
}
body.upm-logado .texto h3:first-child{ margin-top: 0; }
body.upm-logado .texto p{ margin: 0 0 10px; }
body.upm-logado .pagamentos{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
body.upm-logado .pagamento{
text-align: left;
padding: 14px 16px;
border-radius: var(--r);
background: var(--campo);
border: 1px solid var(--line);
color: var(--txt);
}
body.upm-logado .pagamento.on{ background: rgba(255, 46, 154, .07); border-color: var(--pink); }
body.upm-logado .pagamento b{ display: block; font: 700 .88rem/1.3 var(--ff-body); }
body.upm-logado .pagamento span{ display: block; margin-top: 3px; font-size: 11.5px; color: var(--txt-3); }
body.upm-logado .valores{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
body.upm-logado .valores button{
padding: 8px 18px;
border-radius: 999px;
background: rgba(255, 255, 255, .03);
border: 1px solid var(--line-2);
color: var(--txt-2);
font: 700 12.16px/1.2 var(--ff-body);
}
body.upm-logado .valores button:hover{ border-color: var(--pink); color: #fff; }
body.upm-logado .medidas{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
body.upm-logado .medida{
background: var(--campo);
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px 16px;
}
body.upm-logado .medida small{
display: block;
font: 700 9.6px/14.4px var(--ff-body);
letter-spacing: 1.344px;
text-transform: uppercase;
color: var(--txt-3);
}
body.upm-logado .medida b{ display: block; margin-top: 4px; font: 800 1.05rem/1.3 var(--ff-display); color: var(--txt); }
body.upm-logado .medida.destaque b{ color: var(--pink); }
body.upm-logado .conquista{ display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
body.upm-logado .conquista:last-child{ border-bottom: 0; }
body.upm-logado .conquista .selo-num{
display: grid; place-items: center;
width: 44px; height: 44px; flex: none;
border-radius: 14px;
background: rgba(255, 46, 154, .12);
border: 1px solid rgba(255, 46, 154, .26);
color: var(--pink);
font: 800 .82rem/1 var(--ff-display);
}
body.upm-logado .conquista b{ display: block; font: 800 .9rem/1.4 var(--ff-display); margin-bottom: 3px; }
body.upm-logado .conquista p{ margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--txt-2); }
body.upm-logado .copiavel{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
body.upm-logado .copiavel input{ flex: 1 1 260px; }
body.upm-logado .nada{
display: grid;
place-items: center;
gap: 10px;
padding: 54px 20px;
text-align: center;
color: var(--txt-3);
}
body.upm-logado .nada b{ font: 800 1rem/1.4 var(--ff-display); color: var(--txt); }
body.upm-logado .nada svg{ width: 42px; height: 42px; color: var(--green); }
body.upm-logado .moedas{ display: flex; gap: 6px; margin-top: 14px; }
body.upm-logado .moedas button{
flex: 1;
padding: 7px 0;
border-radius: 999px;
background: rgba(255, 255, 255, .03);
border: 1px solid var(--line-2);
color: var(--txt-3);
font: 700 10.5px/1.2 var(--ff-body);
}
body.upm-logado .moedas button.on{ background: rgba(255, 46, 154, .12); border-color: var(--pink); color: #fff; }
@media (max-width: 900px) {
body.upm-logado .duas-colunas, body.upm-logado .pagamentos{ grid-template-columns: minmax(0, 1fr); }
}
body.upm-logado .roleta-caixa{ text-align: center; }
body.upm-logado .roleta-palco{ position: relative; width: 300px; height: 300px; margin: 22px auto 0; display: grid; place-items: center; }
body.upm-logado .roleta-brilho{
position: absolute; inset: -22px; border-radius: 50%;
background: radial-gradient(circle, rgba(255, 46, 154, .45), transparent 65%);
filter: blur(8px); animation: pnl-pulsar 2.6s ease-in-out infinite;
}
body.upm-logado .roleta-luzes{ position: absolute; inset: 0; pointer-events: none; }
body.upm-logado .roleta-luzes i{
position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
border-radius: 50%; background: var(--amber);
box-shadow: 0 0 8px 2px rgba(245, 165, 36, .65);
transform: rotate(var(--ang)) translateY(-152px);
animation: pnl-piscar 1.6s ease-in-out infinite var(--atraso);
}
body.upm-logado .roleta-disco{
position: absolute; inset: 8px; border-radius: 50%;
border: 4px solid var(--surface-2);
will-change: transform;
filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .5));
}
body.upm-logado .roleta-disco .pino{ position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
body.upm-logado .roleta-disco .pino span{
position: absolute; left: 0; top: -118px; transform: translate(-50%, 0);
color: #fff; font: 800 14px/1 var(--ff-body); white-space: nowrap;
}
body.upm-logado .roleta-agulha{
position: absolute; top: -2px; left: 50%; transform: translateX(-50%); z-index: 3;
width: 0; height: 0;
border-left: 13px solid transparent; border-right: 13px solid transparent;
border-top: 24px solid var(--amber);
filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .6));
}
body.upm-logado .roleta-agulha::after{
content: ""; position: absolute; top: -30px; left: -8px;
width: 16px; height: 16px; border-radius: 50%;
background: var(--amber); box-shadow: 0 0 10px 3px rgba(245, 165, 36, .55);
}
body.upm-logado .roleta-botao{
position: absolute; width: 62px; height: 62px; border-radius: 50%;
background: linear-gradient(135deg, var(--pink), var(--pink-deep));
color: #fff; border: 3px solid #000; display: grid; place-items: center;
box-shadow: 0 8px 22px -6px rgba(255, 46, 154, .85), 0 0 0 5px rgba(255, 255, 255, .05);
z-index: 4;
}
body.upm-logado .roleta-botao svg{ width: 26px; height: 26px; }
body.upm-logado .roleta-botao:disabled{ filter: grayscale(.5); opacity: .75; cursor: not-allowed; }
body.upm-logado .roleta-resultado{
margin-top: 22px; min-height: 22px;
font: 700 15px/1.4 var(--ff-display); color: var(--pink);
}
body.upm-logado .roleta-rodape{ margin-top: 8px; font-size: 11.5px; color: var(--txt-3); }
body.upm-logado .premio-form{ max-width: 360px; margin: 18px auto 0; text-align: left; }
body.upm-logado .premio-form h3{ margin: 0 0 12px; font: 800 .92rem/1.4 var(--ff-display); text-align: center; }
body.upm-logado .premio-redes{ display: flex; gap: 10px; margin-bottom: 12px; }
body.upm-logado .premio-redes label{
flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px; border-radius: var(--r-sm);
background: var(--campo); border: 1px solid var(--line); cursor: pointer;
font: 600 13px/1 var(--ff-body); color: var(--txt-2);
}
body.upm-logado .premio-redes input{ accent-color: var(--pink); }
body.upm-logado .premio-status{ margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--txt-2); }
@keyframes pnl-pulsar { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.05); } }
@keyframes pnl-piscar { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (max-width: 400px) {
body.upm-logado .roleta-palco{ transform: scale(.86); transform-origin: top center; height: 258px; }
}
body.upm-logado .refil-busca{ max-width: 560px; margin: 0 auto; text-align: center; }
body.upm-logado .refil-busca input{ text-align: center; letter-spacing: .5px; }
body.upm-logado .refil-acoes{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
body.upm-logado .refil-acoes button{
min-width: 150px; padding: 12px 35px; border-radius: 999px;
border: 0; background: var(--pink); color: #fff;
font: 700 15px/1 var(--ff-body);
}
body.upm-logado .refil-acoes button.secundario{ background: rgba(255, 255, 255, .03); border: 1px solid var(--line-2); color: var(--txt-2); }
body.upm-logado .refil-acoes button:disabled{ background: #3a3a3a; color: #888; cursor: progress; }
body.upm-logado .refil-aviso{
background: var(--campo); border-left: 4px solid var(--amber);
padding: 12px 18px; margin: 18px 0 0; border-radius: 5px;
font-size: 12.5px; line-height: 1.7; color: #FFCC80;
}
body.upm-logado .refil-item{
padding: 14px 18px; border-radius: 8px; margin-top: 12px;
border-left: 5px solid; display: flex; flex-direction: column; gap: 10px;
}
body.upm-logado .refil-item.sucesso{ background: #0A1A0A; border-color: #4CAF50; }
body.upm-logado .refil-item.erro{ background: #1A0A0A; border-color: #F44336; }
body.upm-logado .refil-item .cabeca{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
body.upm-logado .refil-item .icone-txt{ font-size: 22px; }
body.upm-logado .refil-item .pedido{ font: 700 16px/1 var(--ff-mono); color: var(--pink); }
body.upm-logado .refil-item .selo{ padding: 3px 12px; border-radius: 20px; font: 700 12px/1.5 var(--ff-body); }
body.upm-logado .refil-item.sucesso .selo{ background: #1B4D2E; color: #4CAF50; }
body.upm-logado .refil-item.erro .selo{ background: #4D1B1B; color: #F44336; }
body.upm-logado .refil-item .mensagem{ font-size: 13.5px; color: var(--txt); }
body.upm-logado .refil-tags{ display: flex; flex-wrap: wrap; gap: 8px; }
body.upm-logado .refil-tags span{
padding: 4px 11px; border-radius: 999px;
background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
font: 600 11.5px/1.5 var(--ff-body); color: var(--txt-2);
}
body.upm-logado .refil-tags span.alerta{ color: var(--amber); }
body.upm-logado .modal{ position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
body.upm-logado .modal[hidden]{ display: none; }
body.upm-logado .modal-fundo{ position: absolute; inset: 0; background: rgba(0, 0, 0, .72); }
body.upm-logado .modal-caixa{
position: relative;
width: min(560px, 100%);
max-height: 88vh;
overflow: auto;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--shadow);
padding: 26px 26px 24px;
animation: pnl-subir .18s ease;
}
body.upm-logado .modal-caixa h2{
margin: 0 0 4px;
font: 800 1.05rem/1.3 var(--ff-display);
text-align: center;
}
body.upm-logado .modal-caixa .sub{ margin: 0 0 18px; font-size: 12.5px; color: var(--txt-3); text-align: center; }
body.upm-logado .modal-caixa .dica{ text-align: center; margin: -8px 0 0; }
body.upm-logado .modal-fechar{
position: absolute; top: 12px; right: 14px;
width: 32px; height: 32px; border-radius: 10px;
background: transparent; border: 1px solid var(--line);
color: var(--txt-2); font-size: 20px; line-height: 1;
}
body.upm-logado .modal-fechar:hover{ border-color: var(--pink); color: #fff; }
@keyframes pnl-subir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
body.upm-logado .modal{ padding: 12px; align-items: end; }
body.upm-logado .modal-caixa{ padding: 22px 16px 18px; max-height: 92vh; }
}
body.upm-logado .upsg-abas{ display: flex; gap: 8px; margin: 0 0 20px; }
body.upm-logado .upsg-abas button{
display: flex; align-items: center; justify-content: center; gap: 8px;
flex: 1 1 0; min-width: 0; padding: 11px 12px;
border-radius: 999px; border: 1px solid var(--line);
background: var(--campo); color: var(--txt-2);
font: 600 14px/1 var(--ff-body); white-space: nowrap;
}
body.upm-logado .upsg-abas button svg{ width: 18px; height: 18px; flex: none; }
body.upm-logado .upsg-abas button.on{
background: linear-gradient(135deg, var(--pink), var(--pink-2));
color: #fff; border-color: transparent;
}
body.upm-logado .upsg-tela{ display: none; }
body.upm-logado .upsg-tela.on{ display: block; }
body.upm-logado .upsg-topo{ margin-bottom: 20px; }
body.upm-logado .upsg-tela[data-upsg-tela="loja"] .upsg-topo, body.upm-logado .upsg-tela[data-upsg-tela="suporte"] .upsg-topo{ text-align: center; }
body.upm-logado .upsg-topo .rotulo{
display: inline-block; margin-bottom: 8px;
font: 700 10.4px/1 var(--ff-body); letter-spacing: 1.664px; text-transform: uppercase;
color: var(--pink);
}
body.upm-logado .upsg-topo h2{ margin: 0 0 8px; font: 900 1.5rem/1.2 var(--ff-display); letter-spacing: -.03em; }
body.upm-logado .upsg-topo p{ margin: 0; font-size: 13.5px; color: var(--txt-2); }
body.upm-logado .upsg-selos{ display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
body.upm-logado .upsg-selos span{
padding: 6px 14px; border-radius: 999px;
background: var(--campo); border: 1px solid var(--line);
font: 600 12px/1.5 var(--ff-body); color: var(--txt-2);
}
body.upm-logado .upsg-cartao-loja, body.upm-logado .upsg-cartao-suporte{
display: flex; align-items: center; gap: 14px;
padding: 16px 18px; margin-top: 14px;
border-radius: var(--r); background: var(--campo);
border: 1px solid var(--line); color: var(--txt);
}
body.upm-logado .upsg-cartao-loja:hover, body.upm-logado .upsg-cartao-suporte:hover{ border-color: var(--pink); }
body.upm-logado .upsg-cartao-loja .icone, body.upm-logado .upsg-cartao-suporte .icone{
display: grid; place-items: center; width: 42px; height: 42px; flex: none;
border-radius: 14px; background: rgba(255, 46, 154, .12);
border: 1px solid rgba(255, 46, 154, .26); color: var(--pink);
}
body.upm-logado .upsg-cartao-loja .icone svg, body.upm-logado .upsg-cartao-suporte .icone svg{ width: 20px; height: 20px; }
body.upm-logado .upsg-cartao-loja b, body.upm-logado .upsg-cartao-suporte b{ display: block; font: 700 .9rem/1.3 var(--ff-body); }
body.upm-logado .upsg-cartao-loja span, body.upm-logado .upsg-cartao-suporte span{ display: block; font-size: 12px; color: var(--txt-3); }
body.upm-logado .upsg-cartao-loja .seta{ margin-left: auto; color: var(--txt-3); }
body.upm-logado .upsg-vivo{
display: inline-block; padding: 2px 10px; margin-bottom: 4px;
border-radius: 999px; background: rgba(34, 197, 94, .12);
border: 1px solid rgba(34, 197, 94, .3);
font: 700 10px/1.6 var(--ff-body); color: var(--green);
}
body.upm-logado .upsg-redes{ display: flex; gap: 10px; margin-top: 14px; }
body.upm-logado .upsg-redes a{
flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px; border-radius: var(--r-sm);
background: var(--campo); border: 1px solid var(--line);
font: 600 13px/1 var(--ff-body); color: var(--txt-2);
}
body.upm-logado .upsg-redes a:hover{ border-color: var(--pink); color: #fff; }
body.upm-logado .upsg-redes svg{ width: 18px; height: 18px; }
body.upm-logado .upsg-pix{
margin-top: 14px; padding: 16px 18px;
border-radius: var(--r); background: var(--campo); border: 1px solid var(--line);
}
body.upm-logado .upsg-pix small{
display: block; font: 700 9.6px/14.4px var(--ff-body);
letter-spacing: 1.344px; text-transform: uppercase; color: var(--txt-3);
}
body.upm-logado .upsg-pix b{ display: block; margin-top: 4px; font: 700 .9rem/1.4 var(--ff-mono); }
body.upm-logado .upsg-pix span{ display: block; font-size: 12px; color: var(--txt-3); }
body.upm-logado .upsg-planos{ display: grid; gap: 10px; margin-bottom: 16px; }
body.upm-logado .upsg-plano{
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 14px 16px; border-radius: var(--r);
background: var(--campo); border: 1px solid var(--line); cursor: pointer;
}
body.upm-logado .upsg-plano.on{ background: rgba(255, 46, 154, .07); border-color: var(--pink); }
body.upm-logado .upsg-plano strong{ font: 700 .9rem/1.3 var(--ff-body); }
body.upm-logado .upsg-plano em{ display: block; font-style: normal; font-size: 11.5px; color: var(--txt-3); }
body.upm-logado .upsg-plano span{ font: 800 1rem/1 var(--ff-display); color: var(--green); }
body.upm-logado .upsg-vazio{ padding: 24px; text-align: center; color: var(--txt-3); font-size: 13px; }
body.upm-logado .upsg-beneficios{
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px;
}
body.upm-logado .upsg-beneficios div{
padding: 12px; border-radius: var(--r-sm);
background: var(--campo); border: 1px solid var(--line); text-align: center;
}
body.upm-logado .upsg-beneficios b{ display: block; font: 700 12px/1.4 var(--ff-body); }
body.upm-logado .upsg-beneficios em{ font-style: normal; font-size: 11px; color: var(--txt-3); }
body.upm-logado .upsg-barra{
display: flex; align-items: center; justify-content: space-between; gap: 14px;
margin-top: 16px; padding: 14px 16px;
border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line);
}
body.upm-logado .upsg-barra small{
display: block; font: 700 9.6px/14.4px var(--ff-body);
letter-spacing: 1.344px; text-transform: uppercase; color: var(--txt-3);
}
body.upm-logado .upsg-barra b{ font: 800 1.3rem/1.2 var(--ff-display); color: var(--txt); }
body.upm-logado .upsg-barra button{
padding: 12px 28px; border-radius: 999px; border: 0;
background: linear-gradient(135deg, var(--pink), var(--pink-2) 60%, var(--pink-deep));
color: #fff; font: 700 14px/1 var(--ff-body);
}
@media (max-width: 560px) {
body.upm-logado .upsg-beneficios{ grid-template-columns: minmax(0, 1fr); }
body.upm-logado .upsg-barra{ flex-direction: column; align-items: stretch; text-align: center; }
}
body.upm-logado .upsg-heroi{ display: grid; gap: 16px; margin-bottom: 16px; }
@media (min-width: 900px) {
body.upm-logado .upsg-heroi{ grid-template-columns: minmax(0, 1fr) 400px; align-items: stretch; }
}
@media (min-width: 1280px) {
body.upm-logado .upsg-heroi{ grid-template-columns: minmax(0, 1fr) 460px; }
}
body.upm-logado .upsg-heroi__card{
position: relative; overflow: hidden;
background: linear-gradient(155deg, #16233F 0%, #0E1626 70%);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 22px; padding: 30px 26px;
box-shadow: 0 20px 45px -20px rgba(0, 0, 0, .55);
}
body.upm-logado .upsg-heroi__card::after{
content: ""; position: absolute; inset: -40% -20% auto auto;
width: 260px; height: 260px; border-radius: 50%;
background: radial-gradient(circle, rgba(204, 0, 102, .35), transparent 70%);
pointer-events: none;
}
body.upm-logado .upsg-heroi__card .rotulo{
display: inline-block; margin-bottom: 10px;
font: 700 12.5px/1 var(--ff-body); letter-spacing: .06em; text-transform: uppercase;
color: #FF3399;
}
body.upm-logado .upsg-heroi__card h2{
margin: 4px 0 10px; font: 800 30px/1.15 var(--ff-display); letter-spacing: -.02em;
}
@media (min-width: 900px) { body.upm-logado .upsg-heroi__card h2{ font-size: 40px; } }
body.upm-logado .upsg-heroi__card p{ margin: 0; color: var(--txt-2); font-size: 15px; max-width: 46ch; }
body.upm-logado .upsg-heroi__card .upsg-selos{ justify-content: flex-start; margin: 14px 0; }
body.upm-logado .upsg-heroi__card .upsg-selos span{
background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16);
color: var(--txt); padding: 7px 12px; font-size: 12.5px;
}
body.upm-logado .upsg-girar{
display: inline-block; margin-top: 20px; padding: 16px 26px;
border: 0; border-radius: 999px;
background: linear-gradient(135deg, var(--pink), var(--pink-2) 60%, var(--pink-deep));
color: #fff; font: 700 16px/1 var(--ff-body);
}
/* --------------------------------------------------------------------------
Ajustes que o css do tema nao cobre porque nascem da pagina de fora:
o brilho rosa preso ao body e a barra lateral acompanhando a rolagem.
-------------------------------------------------------------------------- */
body.upm-logado::before,
body.upm-logado::after{content:none!important;display:none!important;background:none!important}
body.upm-logado{background:#08080C!important;background-image:none!important}
/* --------------------------------------------------------------------------
Acertos do painel sobre o css do tema
-------------------------------------------------------------------------- */
/* O tema desenhava a marca como imagem de fundo. Aqui quem manda e a
logo cadastrada no painel, entao o fundo sai para nao virar logo dobrada. */
body.upm-logado .marca{
background-image:none!important;
width:auto!important;
height:auto!important
}
body.upm-logado .marca img{max-width:176px;max-height:44px;width:auto;height:auto;object-fit:contain;display:block}
/* Moeda: o tema previa botao, aqui sao links do painel. */
body.upm-logado .moedas a{
flex:1;min-height:0;width:auto;
display:flex;align-items:center;justify-content:center;
padding:7px 4px;border-radius:999px;
background:rgba(255,255,255,.03);
border:1px solid var(--line-2);
color:var(--txt-3);
font:700 10px/1.2 var(--ff-body);
white-space:nowrap
}
body.upm-logado .moedas a.on{background:rgba(255,46,154,.12);border-color:var(--pink);color:#fff}
/* As paginas do painel vem em grade do Bootstrap, com a coluna central
deslocada. Dentro do tema a largura e toda do conteudo, entao o
deslocamento e a largura fixa saem de cena. */
body.upm-logado .conteudo .container,
body.upm-logado .conteudo .container-fluid{width:100%;max-width:none;padding:0;margin:0}
body.upm-logado .conteudo .row{margin:0;display:block}
body.upm-logado .conteudo [class*="col-md-"],
body.upm-logado .conteudo [class*="col-sm-"],
body.upm-logado .conteudo [class*="col-lg-"]{
width:100%!important;
margin-left:0!important;
left:auto!important;
padding:0!important;
float:none!important
}
/* A caixa branca do Bootstrap vira o cartao escuro do tema. */
body.upm-logado .conteudo .well,
body.upm-logado .conteudo .panel{
background:var(--surface)!important;
border:1px solid var(--line)!important;
border-radius:var(--r-lg)!important;
box-shadow:none!important;
padding:22px!important;
margin-bottom:16px
}
/* --------------------------------------------------------------------------
NOVO PEDIDO: os campos que o painel cria sozinho
Link, quantidade e tempo medio nascem dentro de #fields, montados pelo
painel conforme o servico. Eles chegam como .form-group do Bootstrap,
entao aqui recebem a mesma cara dos campos escritos no tema.
-------------------------------------------------------------------------- */
body.upm-logado #fields .form-group{margin-bottom:14px}
body.upm-logado #fields label,
body.upm-logado #order-form .control-label{
display:block;margin-bottom:6px;
font:700 11.2px/16.8px var(--ff-body);
color:var(--txt-2)
}
body.upm-logado #fields .form-control,
body.upm-logado #order-form .form-control{
width:100%;height:44px;padding:6px 16px;
background:var(--campo);color:var(--txt);
border:1px solid var(--line-2);
border-radius:var(--r-sm);
font:400 14.4px/21.6px var(--ff-body);
outline:none;appearance:none;box-shadow:none
}
body.upm-logado #order-form textarea.form-control{height:auto;padding:12px 16px;resize:vertical}
body.upm-logado #order-form .form-control:focus{border-color:var(--pink)}
body.upm-logado #order-form .form-control::placeholder{color:var(--txt-3)}
/* O texto de minimo e maximo que o painel escreve abaixo da quantidade. */
body.upm-logado #fields .help-block,
body.upm-logado #fields small,
body.upm-logado #fields p{
margin:-8px 0 14px;font-size:12px;color:var(--txt-3)
}
/* Setinha do select, igual a do tema. */
body.upm-logado #order-form select.form-control{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
padding-right:40px
}
/* A busca do painel vem numa casca propria; ela ocupa a linha inteira e o
campo cede espaco para a lupa desenhada ao lado. */
body.upm-logado .procurar .search-dropdown{position:static}
body.upm-logado .procurar .input-wrapper{position:static}
body.upm-logado .procurar .form-control{padding-left:44px}
body.upm-logado .procurar > svg{z-index:2;pointer-events:none}
/* Botao enviar do tema. */
body.upm-logado #order-form .enviar{
width:100%;height:48px;padding:12px 32px;border:0;border-radius:999px;
background:linear-gradient(135deg,var(--pink),var(--pink-2) 60%,var(--pink-deep));
color:#fff;font:700 14.4px/21.6px var(--ff-body)
}
/* Aceite dos termos numa linha so, com a caixa alinhada ao texto. */
body.upm-logado .campo-termos .terms{
display:flex;align-items:flex-start;gap:9px;
font:400 12.5px/1.6 var(--ff-body);color:var(--txt-2)
}
body.upm-logado .campo-termos a{color:var(--pink)}
/* Coluna da direita: a descricao e os selos. */
body.upm-logado .lado-descricao #service_description{margin:0}
body.upm-logado .lado-descricao #service_description.hidden{display:none}
body.upm-logado .lado-descricao .descricao-vazia{
margin:0;padding:16px;border-radius:var(--r);
background:var(--campo);border:1px dashed var(--line-2);
font-size:12.5px;line-height:1.7;color:var(--txt-3)
}
body.upm-logado .lado-descricao.tem-descricao .descricao-vazia{display:none}
body.upm-logado .selos[hidden]{display:none}
/* O aviso aceita texto formatado vindo do painel. */
body.upm-logado .aviso-texto{font-size:13.12px;line-height:20.336px;color:var(--txt)}
body.upm-logado .aviso-texto p{margin:0 0 6px}
body.upm-logado .aviso-texto p:last-child{margin-bottom:0}
/* --------------------------------------------------------------------------
Coluna da direita: um conjunto de selos, nao dois
O painel ja monta um cartao proprio com inicio, velocidade e performance
(#up-service-info-card, que vem do codigo de rodape). Como ele existe e
funciona, quem sai de cena e o conjunto do tema - senao a mesma
informacao apareceria duas vezes.
-------------------------------------------------------------------------- */
body.upm-logado #upm-selos{display:none!important}
/* O cartao do painel cabe na coluna de 320px: os tres selos dividem a
largura e o texto quebra em vez de ser cortado. */
body.upm-logado .lado-descricao #up-service-info-card{
margin:0 0 14px!important;
padding:8px!important;
gap:6px!important;
background:transparent!important;
box-shadow:none!important
}
body.upm-logado .lado-descricao #up-service-info-card .up-service-box{
padding:10px 4px 12px!important;
min-width:0!important;
background:var(--campo)!important;
border-color:var(--line)!important
}
body.upm-logado .lado-descricao #up-service-info-card .up-service-box *{
font-size:11px!important;
line-height:1.35!important;
white-space:normal!important;
overflow-wrap:anywhere
}
/* A descricao nao precisa de altura minima: acompanha o texto. */
body.upm-logado .lado-descricao .descricao-texto{
padding:14px 16px;
font-size:13px;
line-height:1.75;
max-height:none
}
body.upm-logado .lado-descricao .descricao-texto p{margin:0 0 6px}
body.upm-logado .lado-descricao .descricao-texto p:last-child{margin-bottom:0}
body.upm-logado .lado-descricao .descricao-texto br + br{display:none}
/* A lupa fica antes do texto, sem montar em cima dele. */
body.upm-logado .procurar{position:relative}
body.upm-logado .procurar > svg{position:absolute;left:15px;top:13px;width:18px;height:18px;color:var(--txt-3);z-index:2;pointer-events:none}
body.upm-logado .procurar input,
body.upm-logado .procurar .form-control{padding-left:46px!important}
/* --------------------------------------------------------------------------
Cartao de inicio / velocidade / performance
Ele fica no pe da coluna da descricao e ganha as cores do tema - antes
vinha cinza, destoando de tudo em volta.
-------------------------------------------------------------------------- */
body.upm-logado .lado-descricao #up-service-info-card{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:8px!important;
margin:14px 0 0!important;
padding:0!important;
background:transparent!important;
border-radius:0!important;
box-shadow:none!important
}
body.upm-logado .lado-descricao #up-service-info-card .up-service-box{
padding:11px 6px 13px!important;
min-width:0!important;
border-radius:12px!important;
background:var(--campo)!important;
border:1px solid var(--line)!important;
text-align:center!important
}
/* A tarja de baixo de cada selo, na cor do tema. */
body.upm-logado .lado-descricao #up-service-info-card .up-service-box::after{
background:var(--pink)!important;
height:2px!important;
left:22%!important;
width:56%!important
}
/* Rotulo pequeno em cima, valor destacado embaixo. */
body.upm-logado .lado-descricao #up-service-info-card .up-service-box > *:first-child{
font:700 9.2px/14px var(--ff-body)!important;
letter-spacing:1.2px!important;
text-transform:uppercase!important;
color:var(--txt-3)!important
}
body.upm-logado .lado-descricao #up-service-info-card .up-service-box > *:last-child{
margin-top:3px!important;
font:800 12px/1.35 var(--ff-body)!important;
color:var(--pink)!important;
white-space:normal!important;
overflow-wrap:anywhere!important
}
/* --------------------------------------------------------------------------
O WhatsApp fica sempre no canto
O grupo do rodape tinha um X que escondia os botoes. Como o WhatsApp e o
unico que sobrou ali e serve de contato direto, o X sai de cena e o
grupo nao aceita mais ser escondido.
-------------------------------------------------------------------------- */
.grupo-botoes-flutuantes .fechar-grupo-botoes,
#fecharGrupoBotoes{
display:none!important;
pointer-events:none!important
}
.grupo-botoes-flutuantes,
.grupo-botoes-flutuantes.escondendo,
.grupo-botoes-flutuantes.escondido{
display:flex!important;
opacity:1!important;
visibility:visible!important;
transform:none!important;
pointer-events:auto!important
}
/* Campo de texto que cresce conforme o que foi escrito. */
body.upm-logado #order-form textarea{
resize:none;
min-height:44px;
transition:height .12s
}
/* ==========================================================================
CONFLITO DE NOME: .modal do tema x .modal do Bootstrap
O painel usa Bootstrap, e o Bootstrap tambem chama de .modal as janelas
dele - a de "visualizar servico", por exemplo. Como o tema traz uma regra
.modal com z-index 60, essas janelas passavam a ficar ABAIXO do proprio
fundo escuro do Bootstrap, que usa 1040: a janela abria, mas nenhum
clique chegava nela. Era a tela congelada.
Aqui as janelas do Bootstrap - reconhecidas por terem .modal-dialog
dentro - voltam a se comportar como Bootstrap. As do tema, que tem
.modal-caixa, seguem como estao.
========================================================================== */
body.upm-logado .modal.fade,
body.upm-logado .modal:has(> .modal-dialog),
body.upm-logado .modal:has(.modal-dialog){
z-index:1050;
display:none; /* sem !important: o Bootstrap abre pelo estilo direto */
place-items:normal;
padding:0;
overflow-x:hidden;
overflow-y:auto
}
body.upm-logado .modal-backdrop{z-index:1040}
/* A caixa da janela do Bootstrap recebe as cores do tema. */
body.upm-logado .modal .modal-content{
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--shadow);
color:var(--txt)
}
body.upm-logado .modal .modal-header,
body.upm-logado .modal .modal-footer{border-color:var(--line)}
body.upm-logado .modal .modal-title{font-family:var(--ff-display);font-weight:800}
body.upm-logado .modal .close{color:var(--txt-2);opacity:.9;text-shadow:none;font-size:24px}
body.upm-logado .modal .close:hover{color:var(--pink)}
body.upm-logado .modal .modal-body{color:var(--txt-2);font-size:13.5px;line-height:1.8}
/* --------------------------------------------------------------------------
Pagina do canal de noticias
-------------------------------------------------------------------------- */
body.upm-logado .canal-topo{
text-align:center;
padding:36px 24px 32px;
border-radius:var(--r-lg);
background:linear-gradient(160deg,rgba(37,211,102,.10),var(--surface) 62%);
border:1px solid rgba(37,211,102,.24);
margin-bottom:16px
}
body.upm-logado .canal-marca{
display:grid;place-items:center;
width:64px;height:64px;margin:0 auto 16px;
border-radius:20px;
background:rgba(37,211,102,.14);
border:1px solid rgba(37,211,102,.32);
color:var(--zap)
}
body.upm-logado .canal-marca svg{width:32px;height:32px}
body.upm-logado .canal-topo h1{
margin:0 0 10px;
font:900 clamp(1.4rem,2.4vw,1.9rem)/1.2 var(--ff-display);
letter-spacing:-.03em;color:var(--txt)
}
body.upm-logado .canal-topo p{
margin:0 auto 22px;max-width:60ch;
font-size:14px;line-height:1.7;color:var(--txt-2)
}
body.upm-logado .canal-botao{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:50px;padding:14px 30px;
border-radius:999px;border:0;
background:var(--zap);color:#06240F;
font:800 15px/1 var(--ff-body);
box-shadow:0 14px 34px -12px rgba(37,211,102,.75);
transition:transform .16s,box-shadow .16s
}
body.upm-logado .canal-botao:hover{
transform:translateY(-2px);
box-shadow:0 18px 40px -12px rgba(37,211,102,.9);
color:#06240F
}
body.upm-logado .canal-botao svg{width:20px;height:20px}
body.upm-logado .canal-nota{
display:block;margin-top:14px;
font-size:12px;color:var(--txt-3)
}
body.upm-logado .canal-vantagens{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px
}
@media (max-width:760px){
body.upm-logado .canal-vantagens{grid-template-columns:minmax(0,1fr)}
}
body.upm-logado .canal-item{
padding:20px;
border-radius:var(--r-lg);
background:var(--surface);
border:1px solid var(--line)
}
body.upm-logado .canal-item .icone{
display:grid;place-items:center;
width:42px;height:42px;margin-bottom:14px;
border-radius:14px;
background:rgba(255,46,154,.12);
border:1px solid rgba(255,46,154,.26);
color:var(--pink)
}
body.upm-logado .canal-item .icone svg{width:20px;height:20px}
body.upm-logado .canal-item b{
display:block;margin-bottom:6px;
font:800 .95rem/1.35 var(--ff-display);color:var(--txt)
}
body.upm-logado .canal-item p{
margin:0;font-size:13px;line-height:1.75;color:var(--txt-2)
}
body.upm-logado .canal-conteudo{margin-top:16px}
/* ==========================================================================
SERVICOS
Barra com filtro, busca e contagem; tabela dentro da moldura, com as
faixas de categoria em rosa. As colunas ganham cor pelo que carregam:
id em rosa, preco em verde, tempo em cinza claro.
========================================================================== */
body.upm-logado .titulo-tela{
font:900 1.4rem/1.2 var(--ff-display);
letter-spacing:-.03em;
margin:4px 0 18px;
color:var(--txt)
}
/* -------------------------------------------------------- barra de cima */
body.upm-logado .barra-tabela{
display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px
}
body.upm-logado .barra-tabela .procurar{flex:1 1 320px;margin:0}
body.upm-logado .barra-tabela .conta{
font-size:12.5px;color:var(--txt-3);white-space:nowrap
}
body.upm-logado .busca-oculta{
position:absolute;width:1px;height:1px;opacity:0;pointer-events:none
}
body.upm-logado .filtro-categoria{position:relative}
body.upm-logado .btn-filtro{
display:flex;align-items:center;gap:8px;
height:44px;padding:0 16px;
border-radius:var(--r-sm);
background:var(--campo);
border:1px solid var(--line-2);
color:var(--txt);
font:600 13.5px/1 var(--ff-body);
white-space:nowrap
}
body.upm-logado .btn-filtro:hover{border-color:var(--pink)}
body.upm-logado .btn-filtro svg{width:17px;height:17px;color:var(--txt-3)}
body.upm-logado .btn-filtro .caret{
border-top-color:var(--txt-3);margin-left:2px
}
/* A lista de categorias, com as cores do tema. */
body.upm-logado .filtro-categoria .dropdown-menu{
max-height:60vh;overflow-y:auto;
min-width:260px;padding:6px;
background:var(--surface-2);
border:1px solid var(--line-2);
border-radius:var(--r-sm);
box-shadow:var(--shadow)
}
body.upm-logado .filtro-categoria .dropdown-menu > li > a,
body.upm-logado .filtro-categoria .dropdown-item{
display:flex;align-items:center;gap:9px;
padding:.6rem .7rem;border-radius:8px;
color:var(--txt-2);font-size:13px;white-space:normal
}
body.upm-logado .filtro-categoria .dropdown-menu > li > a:hover,
body.upm-logado .filtro-categoria .dropdown-item:hover{
background:rgba(255,46,154,.12);color:#fff
}
body.upm-logado .filtro-categoria .dropdown-menu > li.active > a{color:var(--pink)}
/* ------------------------------------------------------------- a tabela */
body.upm-logado .moldura{
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg);
overflow:auto;
max-height:74vh
}
@media (max-width:991px){ body.upm-logado .moldura{max-height:none} }
body.upm-logado .moldura table{width:100%;border-collapse:collapse;margin:0;background:transparent}
body.upm-logado .moldura thead th{
position:sticky;top:0;z-index:2;
background:var(--campo);
color:var(--txt-3);
font:800 9.6px/14.4px var(--ff-body);
letter-spacing:1.344px;
text-transform:uppercase;
text-align:left;
padding:12px;
white-space:nowrap;
border:0
}
body.upm-logado .moldura tbody td{
padding:12px;
border-bottom:1px solid var(--line);
border-top:0;
font-size:13px;
color:var(--txt);
vertical-align:middle;
background:transparent
}
body.upm-logado .moldura tbody tr:not(.categoria):hover td{background:rgba(255,255,255,.03)}
/* Faixa de categoria */
body.upm-logado .moldura tr.categoria td{
background:linear-gradient(90deg,rgba(255,46,154,.16),rgba(255,46,154,0));
border-top:1px solid var(--line-2);
border-bottom:1px solid var(--line-2);
font:900 11.52px/17.28px var(--ff-display);
letter-spacing:-.1152px;
color:#fff
}
body.upm-logado .moldura tr.categoria strong{font-weight:900}
/* Cor por tipo de coluna */
body.upm-logado .moldura td.id{color:var(--pink);font-family:var(--ff-mono);font-size:12.5px;white-space:nowrap}
body.upm-logado .moldura td.preco{color:var(--green);font-weight:700;white-space:nowrap}
body.upm-logado .moldura td.prazo{color:var(--txt-2);white-space:nowrap}
body.upm-logado .moldura td.nome{min-width:260px;color:var(--txt)}
body.upm-logado .moldura td.col-favorito{width:42px;text-align:center}
body.upm-logado .moldura td.col-favorito [data-favorite-icon]{color:var(--txt-3);font-size:15px}
body.upm-logado .moldura td.col-favorito .favorite-active [data-favorite-icon]{color:var(--amber)}
/* Botao de ver a descricao */
body.upm-logado .moldura .ver{
background:transparent;
color:var(--pink);
border:1px solid rgba(255,46,154,.35);
border-radius:999px;
padding:6px 14px;
font:600 11.5px/1 var(--ff-body);
white-space:nowrap
}
body.upm-logado .moldura .ver:hover{background:var(--pink);border-color:var(--pink);color:#fff}
/* Linha de "nada encontrado", quando a busca nao acha nada. */
body.upm-logado .moldura tr.vazio td{
text-align:center;padding:34px 12px;color:var(--txt-3)
}
/* As cores por coluna precisam vencer as regras genericas de tabela que
vem do bootstrap do painel, que usam o id #service-table. */
body.upm-logado #service-table td.id,
body.upm-logado .moldura td.id{color:var(--pink)!important;font-family:var(--ff-mono)!important}
body.upm-logado #service-table td.preco,
body.upm-logado .moldura td.preco{color:var(--green)!important;font-weight:700!important}
body.upm-logado #service-table td.prazo,
body.upm-logado .moldura td.prazo{color:var(--txt-2)!important}
body.upm-logado #service-table tr.categoria td,
body.upm-logado .moldura tr.categoria td{
background:linear-gradient(90deg,rgba(255,46,154,.16),rgba(255,46,154,0))!important;
color:#fff!important
}
/* ==========================================================================
HISTORICO DE PEDIDOS
========================================================================== */
/* Caixinha de status */
body.upm-logado .filtro-status{
display:inline-flex;align-items:center;
height:34px;padding:0 11.2px 0 0;
border-radius:999px;
background:var(--campo);
border:1px solid var(--line-2);
margin-bottom:12px
}
body.upm-logado .filtro-status > span{
padding:4px 11.2px;
font:700 10.4px/1 var(--ff-body);
letter-spacing:1.664px;text-transform:uppercase;
color:var(--txt-3)
}
body.upm-logado .filtro-status select{
height:24px;padding:0 22px 0 0;border:0;
background:transparent;color:var(--txt);
font:700 10.4px/1 var(--ff-body);
outline:none;appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 2px center;background-size:14px
}
body.upm-logado .filtro-status select option{background:var(--surface);color:var(--txt)}
/* Barra de selecao */
body.upm-logado .barra-selecao{
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
min-height:62px;padding:12px 16px;
border-radius:var(--r);
background:var(--surface);
border:1px solid var(--line);
margin-bottom:14px
}
body.upm-logado .barra-selecao .todas{
display:inline-flex;align-items:center;gap:9px;margin:0;
font:600 12.8px/19px var(--ff-body);color:var(--txt-2);cursor:pointer
}
body.upm-logado .barra-selecao .contagem{
font:400 11.52px/17px var(--ff-body);color:var(--txt-3)
}
body.upm-logado .barra-selecao .bt{
margin-left:auto;padding:8px 17.6px;
border-radius:999px;
background:rgba(255,255,255,.03);
border:1px solid var(--line-2);
color:var(--txt-2);
font:700 12.16px/1.2 var(--ff-body)
}
body.upm-logado .barra-selecao .bt + .bt{margin-left:0}
body.upm-logado .barra-selecao .bt:hover{border-color:var(--pink);color:#fff}
/* Caixa de marcar */
body.upm-logado input[type="checkbox"]{
appearance:none;-webkit-appearance:none;
width:16px;height:16px;flex:none;margin:0;
border-radius:5px;
background:var(--campo);
border:1px solid var(--line-2);
cursor:pointer;display:grid;place-items:center
}
body.upm-logado input[type="checkbox"]:checked{background:var(--pink);border-color:var(--pink)}
body.upm-logado input[type="checkbox"]:checked::after{
content:"";width:9px;height:5px;
border:2px solid #fff;border-top:0;border-right:0;
transform:rotate(-45deg) translate(1px,-1px)
}
body.upm-logado input[type="checkbox"]:indeterminate{background:var(--pink);border-color:var(--pink)}
body.upm-logado input[type="checkbox"]:indeterminate::after{
content:"";width:9px;height:2px;background:#fff;border:0;transform:none
}
body.upm-logado th.col-marca,
body.upm-logado td.col-marca{width:44px;padding:12px}
body.upm-logado tbody tr.marcada td{background:rgba(255,46,154,.06)!important}
/* Colunas do historico */
body.upm-logado .moldura td.data{color:var(--txt-2);white-space:nowrap}
body.upm-logado .moldura td.link{color:var(--pink);word-break:break-all;max-width:260px}
body.upm-logado .moldura td.link a{color:var(--txt-3);margin-left:6px}
body.upm-logado .moldura td.link a:hover{color:var(--pink)}
body.upm-logado .moldura td.servico{color:var(--txt-2);max-width:240px}
/* Etiqueta de status, com cor conforme a situacao */
body.upm-logado .marca-status{
display:inline-block;padding:4px 11px;border-radius:999px;
font:700 11px/1.4 var(--ff-body);white-space:nowrap;
background:rgba(245,165,36,.12);
border:1px solid rgba(245,165,36,.3);
color:var(--amber)
}
body.upm-logado .marca-status.st-ok{
background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.3);color:var(--green)
}
body.upm-logado .marca-status.st-ruim{
background:rgba(244,67,54,.12);border-color:rgba(244,67,54,.32);color:#F87171
}
body.upm-logado .marca-status.st-andando{
background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.3);color:#60A5FA
}
/* Botoes de refil e cancelar dentro da linha */
body.upm-logado .order-actions{display:flex;gap:6px;flex-wrap:wrap}
body.upm-logado .order-actions .ver{display:inline-block}
body.upm-logado .ver-cinza{color:var(--txt-2);border-color:var(--line-2)}
body.upm-logado .ver-cinza:hover{background:var(--txt-3);border-color:var(--txt-3);color:#fff}
body.upm-logado .ver.disabled{opacity:.5;cursor:not-allowed}
/* Paginacao */
body.upm-logado .pagination{
display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 0;padding:0;list-style:none
}
body.upm-logado .pagination > li > a{
display:grid;place-items:center;
min-width:36px;height:36px;padding:0 10px;
border-radius:10px;
background:var(--surface);
border:1px solid var(--line);
color:var(--txt-2);
font:600 13px/1 var(--ff-body)
}
body.upm-logado .pagination > li > a:hover{border-color:var(--pink);color:#fff}
body.upm-logado .pagination > li.active > a{
background:rgba(255,46,154,.14);border-color:var(--pink);color:#fff
}
/* A busca do historico e um formulario; ocupa a linha como os demais. */
body.upm-logado form.procurar{margin:0;flex:1 1 320px}
/* --------------------------------------------------------------------------
Cartoes e atalhos no celular
O nome do usuario fica sozinho na primeira linha, e saldo e total de
pedidos dividem a linha de baixo - cada um no seu bloco. Os dois atalhos
ficam lado a lado, como na tela de entrar, e nao um embaixo do outro.
-------------------------------------------------------------------------- */
@media (max-width:991px){
body.upm-logado .cartoes{
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:10px
}
body.upm-logado .cartoes .cartao:first-child{grid-column:1 / -1!important}
body.upm-logado .atalhos{
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:10px
}
}
/* Nas telas bem estreitas continua igual: nome em cima, os outros dois
dividindo a linha. So o tamanho do texto encolhe para caber. */
@media (max-width:560px){
body.upm-logado .cartoes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
body.upm-logado .cartoes .cartao:first-child{grid-column:1 / -1!important}
body.upm-logado .atalhos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
body.upm-logado .cartao{padding:14px;gap:10px}
body.upm-logado .cartao .icone{width:34px;height:34px;border-radius:11px}
body.upm-logado .cartao .icone svg{width:17px;height:17px}
body.upm-logado .cartao b{font-size:17px;line-height:19px}
body.upm-logado .cartao span{font-size:9.6px;margin-top:4px;letter-spacing:.06em}
/* o nome do usuario tem a linha toda, entao pode respirar */
body.upm-logado .cartoes .cartao:first-child b{font-size:20px;line-height:22px}
body.upm-logado .atalho{padding:10px!important;gap:9px!important}
body.upm-logado .atalho .icone{width:30px;height:30px;border-radius:9px}
body.upm-logado .atalho .icone svg{width:16px;height:16px}
body.upm-logado .atalho b{font-size:.78rem;line-height:1.2}
body.upm-logado .atalho span{display:none}
}
/* --------------------------------------------------------------------------
ADICIONAR SALDO
-------------------------------------------------------------------------- */
body.upm-logado .duas-colunas{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start
}
@media (max-width:900px){
body.upm-logado .duas-colunas{grid-template-columns:minmax(0,1fr)}
}
body.upm-logado .caixa h2{
margin:0 0 4px;font:800 1rem/1.3 var(--ff-display);
letter-spacing:-.01em;color:var(--txt)
}
body.upm-logado .caixa .sub{margin:0 0 16px;font-size:12.5px;color:var(--txt-3)}
body.upm-logado .caixa + .caixa{margin-top:16px}
body.upm-logado .pagamentos{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px
}
@media (max-width:900px){
body.upm-logado .pagamentos{grid-template-columns:minmax(0,1fr)}
}
body.upm-logado .pagamento{
text-align:left;padding:14px 16px;
border-radius:var(--r);
background:var(--campo);
border:1px solid var(--line);
color:var(--txt)
}
body.upm-logado .pagamento.on{background:rgba(255,46,154,.07);border-color:var(--pink)}
body.upm-logado .pagamento b{display:block;font:700 .88rem/1.3 var(--ff-body)}
body.upm-logado .pagamento span{display:block;margin-top:3px;font-size:11.5px;color:var(--txt-3)}
/* O select verdadeiro fica fora da vista, mas continua no formulario. */
body.upm-logado .upm-escondido{
position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap
}
body.upm-logado .valores{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
body.upm-logado .valores button{
padding:8px 18px;border-radius:999px;
background:rgba(255,255,255,.03);
border:1px solid var(--line-2);
color:var(--txt-2);
font:700 12.16px/1.2 var(--ff-body)
}
body.upm-logado .valores button:hover{border-color:var(--pink);color:#fff}
/* O painel cria campos proprios de cada forma dentro de #amount-fields. */
body.upm-logado #amount-fields > div{margin-bottom:0}
body.upm-logado #amount-fields label{
display:block;margin-bottom:6px;
font:700 11.2px/16.8px var(--ff-body);color:var(--txt-2)
}
/* --------------------------------------------------------------------------
O WhatsApp acima da barra de navegacao do celular
No painel existe a barra de atalhos presa no rodape. O botao do canto
ficava por cima dela, tapando um dos atalhos - entao ele sobe o bastante
para os dois conviverem.
-------------------------------------------------------------------------- */
@media (max-width:991px){
body.upm-logado .grupo-botoes-flutuantes{
bottom:calc(76px + env(safe-area-inset-bottom))!important
}
body.upm-logado .flutuantes{
bottom:calc(76px + env(safe-area-inset-bottom))!important
}
/* a janela do contador tambem nao pode terminar embaixo da barra */
body.upm-logado .janela-contador{
max-height:calc(100vh - 110px)!important
}
}
/* --------------------------------------------------------------------------
Formas de pagamento com desenho e explicacao
-------------------------------------------------------------------------- */
body.upm-logado .pagamento{
display:flex;flex-direction:column;align-items:flex-start;gap:8px;
min-height:96px;position:relative;transition:border-color .16s,background .16s
}
body.upm-logado .pagamento .pg-icone{
display:grid;place-items:center;
width:38px;height:38px;flex:none;
border-radius:12px;
background:rgba(255,46,154,.12);
border:1px solid rgba(255,46,154,.26);
color:var(--pink)
}
body.upm-logado .pagamento .pg-icone svg{width:19px;height:19px}
body.upm-logado .pagamento b{font:700 .9rem/1.3 var(--ff-body);color:var(--txt)}
/* Os detalhes ficam guardados no cartao e so aparecem na faixa de baixo. */
body.upm-logado .pagamento .pg-detalhe{display:none}
body.upm-logado .pagamento.on{
background:rgba(255,46,154,.07);
border-color:var(--pink)
}
body.upm-logado .pagamento.on .pg-icone{
background:var(--pink);border-color:var(--pink);color:#fff
}
/* sinal de escolhido no canto */
body.upm-logado .pagamento.on::after{
content:"";position:absolute;top:12px;right:12px;
width:16px;height:16px;border-radius:50%;
background:var(--pink);
box-shadow:inset 0 0 0 3px var(--surface)
}
body.upm-logado .pg-explicacao{
margin:-6px 0 18px;padding:12px 14px;
border-radius:var(--r-sm);
background:rgba(34,197,94,.07);
border:1px solid rgba(34,197,94,.24);
font-size:12.5px;line-height:1.7;color:var(--txt-2)
}
body.upm-logado .pg-explicacao[hidden]{display:none}
/* --------------------------------------------------------------------------
Aviso do giro gratis
-------------------------------------------------------------------------- */
.upsg-aviso{position:fixed;inset:0;z-index:999996;display:grid;place-items:center;padding:18px}
.upsg-aviso[hidden]{display:none}
.upsg-aviso-fundo{position:absolute;inset:0;background:rgba(4,4,8,.74);backdrop-filter:blur(4px)}
.upsg-aviso-caixa{
position:relative;z-index:1;
width:min(430px,100%);
padding:30px 26px 26px;
text-align:center;
border-radius:var(--r-lg);
background:linear-gradient(165deg,#1A1020,#0C0C12 62%);
border:1px solid rgba(255,46,154,.24);
box-shadow:var(--shadow),0 0 90px -34px var(--glow);
animation:pnl-subir .2s ease
}
.upsg-aviso-selo{
display:grid;place-items:center;
width:62px;height:62px;margin:0 auto 14px;
border-radius:20px;font-size:30px;
background:rgba(255,46,154,.12);
border:1px solid rgba(255,46,154,.28)
}
.upsg-aviso-caixa h2{
margin:0 0 8px;
font:900 1.3rem/1.25 var(--ff-display);
letter-spacing:-.02em;color:var(--txt)
}
.upsg-aviso-caixa p{
margin:0 0 20px;font-size:13.5px;line-height:1.65;color:var(--txt-2)
}
.upsg-aviso-botoes{display:flex;gap:10px;flex-wrap:wrap}
.upsg-aviso-sim{
flex:1 1 160px;
display:flex;align-items:center;justify-content:center;
min-height:48px;padding:12px 22px;border-radius:999px;
background:linear-gradient(135deg,var(--pink),var(--pink-2) 60%,var(--pink-deep));
color:#fff!important;font:700 14.5px/1 var(--ff-body);
box-shadow:var(--shadow-pink)
}
.upsg-aviso-nao{
flex:1 1 120px;min-height:48px;padding:12px 20px;border-radius:999px;
background:rgba(255,255,255,.03);
border:1px solid var(--line-2);
color:var(--txt-2);font:700 13.5px/1 var(--ff-body)
}
.upsg-aviso-nao:hover{border-color:var(--pink);color:#fff}
/* O QR do Pix da loja */
body.upm-logado #pixQr{
width:200px;height:200px;margin:0 auto 14px;
border-radius:12px;background:#fff;
display:grid;place-items:center;
color:#111;font:700 12px/1.4 var(--ff-body);
overflow:hidden
}
body.upm-logado #pixQr img{width:100%;height:100%;object-fit:contain}
/* --------------------------------------------------------------------------
Reposicao na linha do pedido
-------------------------------------------------------------------------- */
body.upm-logado th.col-refil,
body.upm-logado td.col-refil{white-space:nowrap;text-align:left}
body.upm-logado .refil-bt{
background:rgba(255,46,154,.10);
border-color:rgba(255,46,154,.42)
}
body.upm-logado .refil-bt:hover{background:var(--pink);border-color:var(--pink);color:#fff}
body.upm-logado .refil-feito{
display:inline-block;padding:4px 11px;border-radius:999px;
background:rgba(34,197,94,.12);
border:1px solid rgba(34,197,94,.3);
color:var(--green);
font:700 11px/1.4 var(--ff-body)
}
body.upm-logado .refil-espera{
display:block;margin-top:4px;
font:600 10.5px/1.4 var(--ff-body);color:var(--txt-3)
}
body.upm-logado .refil-vencido{
font:600 11.5px/1.4 var(--ff-body);color:var(--txt-3)
}
/* Quando a janela e aberta pela linha, o campo de digitar some: o numero
do pedido ja veio de la. */
body.upm-logado .upm-refil-form[hidden]{display:none}
/* ==========================================================================
BLOG
Vale para as duas pontas: a lista e a materia aparecem tanto para quem
esta logado quanto para quem nao esta, entao aqui nao ha escopo de
painel - as regras usam nomes proprios, que nao existem em outro lugar.
========================================================================== */
.blog-topo{padding:clamp(28px,4vw,52px) 0 clamp(18px,2.5vw,28px);text-align:center}
.blog-topo h1{
margin:10px 0 12px;
font:900 clamp(1.8rem,3.4vw,2.8rem)/1.15 var(--ff-display);
letter-spacing:-.03em;color:var(--txt)
}
.blog-topo p{
margin:0 auto;max-width:62ch;
font-size:1rem;line-height:1.65;color:var(--txt-2)
}
.blog-intro{
margin-bottom:22px;padding:18px 20px;
border-radius:var(--r);
background:var(--surface);border:1px solid var(--line);
font-size:14px;line-height:1.8;color:var(--txt-2)
}
/* ------------------------------------------------------------- a grade */
.blog-grade{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
gap:18px;
padding-bottom:8px
}
.blog-card{
display:flex;flex-direction:column;
border-radius:var(--r-lg);
background:var(--surface);
border:1px solid var(--line);
overflow:hidden;
transition:border-color .18s,transform .18s
}
.blog-card:hover{border-color:rgba(255,46,154,.4);transform:translateY(-2px)}
.blog-card-img{
display:block;aspect-ratio:16/9;
background:var(--campo);
border-bottom:1px solid var(--line);
overflow:hidden
}
.blog-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.blog-sem-img{display:grid;place-items:center;width:100%;height:100%;color:var(--txt-3)}
.blog-sem-img svg{width:40px;height:40px}
.blog-card-corpo{display:flex;flex-direction:column;gap:10px;padding:18px 20px 20px;flex:1}
.blog-card-corpo h2{margin:0;font:800 1.02rem/1.35 var(--ff-display);letter-spacing:-.01em}
.blog-card-corpo h2 a{color:var(--txt)}
.blog-card-corpo h2 a:hover{color:var(--pink)}
/* O resumo mostra o comeco da materia, cortado em tres linhas. */
.blog-card-resumo{
font-size:13.5px;line-height:1.7;color:var(--txt-2);
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
overflow:hidden
}
.blog-card-resumo *{display:inline;font-size:inherit!important;font-weight:400!important;color:inherit!important}
.blog-card-resumo svg,
.blog-card-resumo img,
.blog-card-resumo br{display:none}
.blog-link{
margin-top:auto;display:inline-flex;align-items:center;gap:7px;
font:700 13px/1 var(--ff-body);color:var(--pink)
}
.blog-link svg{width:15px;height:15px}
.blog-link:hover{gap:10px}
/* ---------------------------------------------------------- a materia */
.post{padding:clamp(22px,3vw,40px) 0 clamp(40px,5vw,70px)}
.post-wrap{max-width:780px}
.post-voltar{
display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;
font:700 13px/1 var(--ff-body);color:var(--txt-2)
}
.post-voltar svg{width:16px;height:16px}
.post-voltar:hover{color:var(--pink)}
.post-voltar--fim{margin:26px 0 0}
.post h1{
margin:0 0 20px;
font:900 clamp(1.7rem,3.2vw,2.5rem)/1.18 var(--ff-display);
letter-spacing:-.03em;color:var(--txt)
}
.post-capa{
margin:0 0 26px;border-radius:var(--r-lg);overflow:hidden;
background:var(--campo);border:1px solid var(--line)
}
.post-capa img{width:100%;height:auto;display:block}
/* Texto da materia: medida de leitura e respiro entre os blocos. */
.post-corpo{font-size:15.5px;line-height:1.85;color:var(--txt-2)}
.post-corpo > *:first-child{margin-top:0}
.post-corpo p{margin:0 0 16px}
.post-corpo h2{
margin:34px 0 12px;
font:800 1.35rem/1.3 var(--ff-display);
letter-spacing:-.02em;color:var(--txt)
}
.post-corpo h3{
margin:26px 0 10px;
font:800 1.08rem/1.4 var(--ff-display);color:var(--txt)
}
.post-corpo ul,.post-corpo ol{margin:0 0 16px;padding-left:22px}
.post-corpo li{margin-bottom:8px}
.post-corpo strong,.post-corpo b{color:var(--txt);font-weight:700}
.post-corpo a{color:var(--pink);text-decoration:underline}
.post-corpo img,.post-corpo svg{max-width:100%;height:auto;border-radius:var(--r);margin:8px 0 18px}
.post-corpo blockquote{
margin:0 0 18px;padding:14px 18px;
border-left:3px solid var(--pink);
border-radius:0 var(--r-sm) var(--r-sm) 0;
background:rgba(255,46,154,.06);
color:var(--txt)
}
.post-corpo table{
width:100%;border-collapse:collapse;margin:0 0 18px;
font-size:14px
}
.post-corpo th,.post-corpo td{
padding:10px 12px;border:1px solid var(--line);text-align:left
}
.post-corpo th{background:var(--campo);color:var(--txt);font-weight:700}
.post-fim{
margin-top:34px;padding:22px;
border-radius:var(--r-lg);
background:linear-gradient(160deg,rgba(255,46,154,.10),var(--surface) 62%);
border:1px solid rgba(255,46,154,.22);
text-align:center
}
.post-fim p{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:var(--txt)}
.post-cta{
display:inline-flex;align-items:center;justify-content:center;
min-height:46px;padding:12px 28px;border-radius:999px;
background:linear-gradient(135deg,var(--pink),var(--pink-2) 60%,var(--pink-deep));
color:#fff!important;font:700 14.5px/1 var(--ff-body);
box-shadow:var(--shadow-pink)
}
@media (max-width:560px){
.blog-grade{grid-template-columns:minmax(0,1fr)}
.post-corpo{font-size:15px}
}
/* ==========================================================================
BLOG COMO SITE PROPRIO
O blog abre em guia separada e nao herda o cabecalho do site nem a barra
do painel: ele tem casa propria, com busca no topo e rodape curto.
========================================================================== */
body.upm-blog{
margin:0;
background:#08080C;
color:var(--txt);
font-family:var(--ff-body);
display:block
}
body.upm-blog::before,
body.upm-blog::after{content:none!important;display:none!important}
.blog-head{
position:sticky;top:0;z-index:60;
background:rgba(8,8,12,.86);
backdrop-filter:blur(18px);
border-bottom:1px solid var(--line)
}
.blog-head .wrap{display:flex;align-items:center;gap:16px;min-height:72px}
.blog-marca{display:flex;align-items:center;gap:10px;flex:none}
.blog-marca img{height:34px;width:auto;max-width:150px;object-fit:contain;display:block}
.blog-marca span{display:flex;flex-direction:column;line-height:1}
.blog-marca b{font:900 1rem/1 var(--ff-display);letter-spacing:-.03em;color:var(--txt)}
.blog-marca small{
margin-top:3px;font:800 .56rem/1 var(--ff-body);
letter-spacing:.34em;text-transform:uppercase;color:var(--pink)
}
.blog-busca{position:relative;flex:1 1 300px;max-width:480px;margin:0}
.blog-busca svg{
position:absolute;left:15px;top:50%;transform:translateY(-50%);
width:18px;height:18px;color:var(--txt-3);pointer-events:none
}
.blog-busca input{
width:100%;height:44px;padding:0 16px 0 46px;
border-radius:999px;
background:var(--campo);
border:1px solid var(--line-2);
color:var(--txt);
font:400 14px/1 var(--ff-body);
outline:none
}
.blog-busca input::placeholder{color:var(--txt-3)}
.blog-busca input:focus{border-color:var(--pink)}
.blog-head-dir{display:flex;align-items:center;gap:12px;margin-left:auto}
.blog-voltar-site{
display:inline-flex;align-items:center;gap:7px;
padding:.5rem 1rem;border-radius:999px;
border:1px solid var(--line-2);
background:rgba(255,255,255,.03);
color:var(--txt-2)!important;
font:600 .82rem/1 var(--ff-body);
white-space:nowrap
}
.blog-voltar-site:hover{border-color:var(--pink);color:#fff!important}
.blog-voltar-site svg{width:14px;height:14px}
.blog-main{min-height:60vh}
.blog-foot{
margin-top:40px;padding:26px 0;
border-top:1px solid var(--line);
background:var(--bg-2)
}
.blog-foot .wrap{
display:flex;align-items:center;justify-content:space-between;
gap:14px;flex-wrap:wrap;
font-size:.88rem;color:var(--txt-3)
}
.blog-foot nav{display:flex;gap:16px;flex-wrap:wrap}
.blog-foot nav a{color:var(--txt-2)}
.blog-foot nav a:hover{color:var(--pink)}
@media (max-width:760px){
.blog-head .wrap{flex-wrap:wrap;padding-top:12px;padding-bottom:12px;gap:10px}
.blog-busca{order:3;flex:1 1 100%;max-width:none}
.blog-voltar-site span{display:none}
}
/* --------------------------------------------------------------------------
Resumo do cartao: so a abertura da materia
A lista recebe o texto inteiro da materia. Sem isto, os subtitulos e as
listas apareciam dentro do cartao e ele virava uma parede de texto.
Aqui fica apenas o primeiro paragrafo, cortado em tres linhas.
-------------------------------------------------------------------------- */
.blog-card-resumo > *{display:none}
.blog-card-resumo > p:first-of-type{
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
margin:0;
font-size:13.5px;line-height:1.7;color:var(--txt-2)
}
.blog-card-resumo > p:first-of-type *{
display:inline;font-size:inherit!important;font-weight:400!important;color:inherit!important
}