:root{--blue:#2f6df6;--blue2:#2563eb;--blue3:#0b4faa;--purple:#7c3aed;--purple2:#3b163f;--gold:#facc15;--orange:#f97316;--ink:#071426;--ink2:#0b1f3d;--text:#0f172a;--muted:#64748b;--line:#e2e8f0;--light:#f8fafc;--white:#fff}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Inter,Arial,sans-serif;color:var(--text);background:#fff;overflow-x:hidden}.lp-container{width:min(1160px,92%);margin:0 auto}.lp-header{position:sticky;top:0;z-index:1000;background:linear-gradient(90deg,#2563eb,#2f6df6 55%,#1d4ed8);box-shadow:0 8px 28px rgba(15,23,42,.16)}.lp-nav{height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:inline-flex;align-items:center;text-decoration:none;font-size:28px;font-weight:950;letter-spacing:-1.4px;color:#fff}.brand b{color:var(--gold);margin-left:5px}.lp-nav nav{display:flex;align-items:center;gap:8px}.lp-nav nav a{color:#eaf2ff;text-decoration:none;font-size:14px;font-weight:800;padding:11px 13px;border-radius:12px;transition:.2s}.lp-nav nav a:hover{background:rgba(255,255,255,.12);color:#fff}.lp-nav .nav-cta{background:var(--gold);color:#342a00}.lp-nav .nav-cta:hover{background:#ffe15c;color:#231b00}.menu-btn{display:none;border:0;background:rgba(255,255,255,.14);color:#fff;width:46px;height:46px;border-radius:14px;font-size:23px}.hero{position:relative;overflow:hidden;color:#fff;padding:88px 0 82px;background:radial-gradient(circle at 8% 12%,rgba(124,58,237,.52),transparent 33%),radial-gradient(circle at 92% 18%,rgba(34,211,238,.22),transparent 30%),radial-gradient(circle at 56% 110%,rgba(250,204,21,.14),transparent 34%),linear-gradient(135deg,#17002b 0%,#071426 48%,#0b4faa 100%)}.hero:after{content:"";position:absolute;inset:auto -10% -110px;height:240px;background:radial-gradient(ellipse at center,rgba(47,109,246,.22),transparent 70%)}.hero-grid-bg{position:absolute;inset:0;opacity:.08;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:36px 36px}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.03fr .97fr;gap:56px;align-items:center}.eyebrow,.kicker{display:inline-flex;align-items:center;gap:9px;font-size:12px;line-height:1;font-weight:950;letter-spacing:.11em;text-transform:uppercase;color:var(--blue2)}.eyebrow{color:#fde68a;padding:8px 12px;border:1px solid rgba(250,204,21,.36);border-radius:999px;background:rgba(250,204,21,.09);margin-bottom:20px}.eyebrow span{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.14)}.hero h1{font-size:clamp(42px,5.2vw,72px);line-height:.99;letter-spacing:-3.4px;margin-bottom:22px;font-weight:950}.hero h1 em{font-style:normal;background:linear-gradient(90deg,#facc15,#fff1a6);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-lead{font-size:18px;line-height:1.65;color:#d8e4f5;font-weight:650;max-width:680px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 20px;border-radius:15px;text-decoration:none;border:0;font-size:14px;font-weight:950;cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,#facc15,#f59e0b);color:#241b00;box-shadow:0 14px 34px rgba(245,158,11,.26)}.btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08)}.trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:34px;padding-top:24px;border-top:1px solid rgba(255,255,255,.13)}.trust-row div{display:grid;gap:4px}.trust-row strong{font-size:14px;color:#fff}.trust-row span{font-size:11px;color:#aebed4;font-weight:700}.hero-showcase{position:relative}.browser-shell{position:relative;border-radius:24px;overflow:hidden;background:#f8fafc;border:1px solid rgba(255,255,255,.22);box-shadow:0 34px 90px rgba(0,0,0,.42);transform:rotate(1.2deg)}.browser-top{height:38px;background:#eef2f7;display:flex;align-items:center;gap:6px;padding:0 12px;color:#8493a9;font-size:10px}.browser-top i{width:8px;height:8px;border-radius:50%;background:#cbd5e1}.browser-top span{margin-left:auto;margin-right:auto;background:#fff;padding:5px 34px;border-radius:8px;color:#8493a9}.demo-site-head{height:50px;background:#2f6df6;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px}.mini-brand{font-weight:950}.mini-brand b{color:#facc15}.mini-menu{font-size:8px;font-weight:700;opacity:.9}.demo-event-title{text-align:center;padding:16px 10px 12px;font-weight:950;font-size:15px;letter-spacing:-.4px;color:#101827;background:linear-gradient(180deg,#fff,#f7f9ff);border-bottom:1px solid #e7ebf3}.demo-rank-head{display:flex;justify-content:space-between;align-items:flex-end;padding:16px 17px 12px;color:#0f172a}.demo-rank-head small{font-size:7px;color:#8a5a00;background:#fff7d6;border:1px solid #ffe290;padding:5px 7px;border-radius:999px;font-weight:950}.demo-rank-head h3{font-size:19px;margin-top:5px}.live-dot{font-size:7px;color:#16a34a;background:#ecfdf3;border:1px solid #bbf7d0;padding:6px 8px;border-radius:999px;font-weight:900}.candidate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:0 14px 17px}.candidate-card{position:relative;text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:8px 8px 10px;box-shadow:0 7px 15px rgba(15,23,42,.07)}.candidate-card.first{border-color:#facc15;box-shadow:0 8px 20px rgba(250,204,21,.14)}.candidate-avatar{height:102px;border-radius:12px;background:linear-gradient(145deg,#eff5ff,#dbeafe);display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:950;color:#2f6df6}.candidate-card:nth-child(2) .candidate-avatar{background:linear-gradient(145deg,#f7f1ff,#e9d5ff);color:#7c3aed}.candidate-card:nth-child(3) .candidate-avatar{background:linear-gradient(145deg,#fff8e5,#fef3c7);color:#c67d00}.place{display:inline-block;margin-top:8px;font-size:7px;font-weight:950;color:#475569;background:#f1f5f9;border-radius:999px;padding:4px 7px}.candidate-card h4{font-size:10px;margin-top:6px;color:#0f172a}.candidate-card p{font-size:7px;color:#94a3b8;margin:4px 0 7px}.candidate-card button{width:100%;border:0;border-radius:8px;background:#f97316;color:#fff;padding:7px 4px;font-size:7px;font-weight:900}.float-card{position:absolute;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.96);color:#0f172a;border:1px solid rgba(255,255,255,.8);padding:11px 13px;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.2);backdrop-filter:blur(12px)}.float-card b{display:block;font-size:10px}.float-card small{display:block;color:#64748b;font-size:8px;margin-top:2px}.float-icon{width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#eef4ff}.fc-one{left:-34px;bottom:34px}.fc-two{right:-18px;top:58px}.section{padding:86px 0}.strip{padding:0;background:#fff}.strip-grid{position:relative;z-index:5;margin-top:-28px;background:#fff;border:1px solid #e2e8f0;border-radius:22px;box-shadow:0 18px 50px rgba(15,23,42,.1);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}.strip-grid div{padding:22px 20px;border-right:1px solid #edf0f5}.strip-grid div:last-child{border:0}.strip-grid span{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:9px;background:#eef4ff;color:#2563eb;font-size:10px;font-weight:950;margin-bottom:10px}.strip-grid b{display:block;font-size:14px}.strip-grid p{color:#64748b;font-size:11px;line-height:1.5;margin-top:4px}.light{background:linear-gradient(180deg,#fff,#f8fafc)}.dark{color:#fff;background:radial-gradient(circle at 15% 0%,rgba(124,58,237,.26),transparent 32%),radial-gradient(circle at 90% 90%,rgba(47,109,246,.24),transparent 34%),linear-gradient(135deg,#020617,#071426 55%,#0b1f3d)}.section-head{max-width:720px;margin-bottom:38px}.section-head.center{text-align:center;margin-left:auto;margin-right:auto}.section-head .kicker{margin-bottom:12px}.section-head h2,.steps-copy h2,.panel-copy h2,.faq-copy h2,.band-inner h2,.contact-copy h2{font-size:clamp(32px,4vw,50px);line-height:1.05;letter-spacing:-2px;font-weight:950}.section-head p,.steps-copy>p,.panel-copy>p,.faq-copy>p,.band-inner>p,.contact-copy>p{margin-top:14px;color:#64748b;font-size:16px;line-height:1.7;font-weight:600}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.feature-card{position:relative;background:#fff;border:1px solid #e4e8ef;border-radius:22px;padding:24px;box-shadow:0 12px 32px rgba(15,23,42,.055);overflow:hidden;transition:.2s}.feature-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(15,23,42,.1);border-color:#cfdbef}.feature-no{position:absolute;right:17px;top:15px;font-size:38px;font-weight:950;color:#f1f5f9;letter-spacing:-2px}.feature-icon{position:relative;width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,#eef4ff,#f7f2ff);display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:18px}.feature-card h3{font-size:18px;line-height:1.2}.feature-card p{font-size:13px;line-height:1.65;color:#64748b;margin-top:9px}.gold{color:#facc15}.steps-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}.steps-copy{position:sticky;top:110px}.steps-copy p{color:#b8c6d8}.text-link{display:inline-block;margin-top:22px;color:#fde68a;font-weight:900;text-decoration:none}.steps-list{display:grid;gap:12px}.steps-list article{display:grid;grid-template-columns:54px 1fr;gap:16px;padding:22px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05)}.steps-list article>span{width:54px;height:54px;border-radius:17px;background:linear-gradient(135deg,#facc15,#2563eb,#7c3aed);display:flex;align-items:center;justify-content:center;font-weight:950;color:#fff}.steps-list h3{font-size:18px;margin:3px 0 7px}.steps-list p{color:#aebed4;font-size:13px;line-height:1.65}.panel-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:58px;align-items:center}.panel-mock{min-height:405px;background:#081221;border:1px solid #dbe3ef;border-radius:26px;overflow:hidden;display:grid;grid-template-columns:72px 1fr;box-shadow:0 25px 70px rgba(15,23,42,.17);transform:perspective(900px) rotateY(4deg)}.mock-sidebar{background:linear-gradient(180deg,#172456,#0b4faa);padding:17px 13px;display:flex;align-items:center;flex-direction:column;gap:16px}.mock-logo{width:39px;height:39px;border-radius:12px;background:#facc15;display:flex;align-items:center;justify-content:center;color:#2b2200;font-weight:950;font-size:11px}.mock-sidebar i{width:35px;height:9px;border-radius:999px;background:rgba(255,255,255,.16)}.mock-sidebar i:nth-of-type(2){background:rgba(250,204,21,.6)}.mock-main{background:#f6f8fc;padding:18px}.mock-top{display:flex;justify-content:space-between;color:#0f172a;font-size:12px;margin-bottom:20px}.mock-top span{color:#64748b;background:#fff;border:1px solid #e2e8f0;padding:6px 9px;border-radius:8px;font-size:8px}.mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mock-cards>div{background:#fff;border:1px solid #e4e8ef;border-radius:14px;padding:13px}.mock-cards small{display:block;color:#94a3b8;font-size:7px;font-weight:900}.mock-cards strong{display:block;font-size:22px;letter-spacing:2px;margin-top:8px;color:#0f172a}.mock-cards em{display:block;font-style:normal;color:#22a85a;font-size:7px;margin-top:5px;font-weight:800}.chart-box{background:#fff;border:1px solid #e4e8ef;border-radius:16px;margin-top:12px;padding:15px}.chart-title{font-size:10px;font-weight:900;color:#0f172a}.bars{height:185px;display:flex;align-items:flex-end;gap:8px;padding-top:15px}.bars i{flex:1;display:block;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#7c3aed,#2f6df6)}.panel-copy .kicker{margin-bottom:12px}.panel-copy ul{list-style:none;display:grid;gap:12px;margin-top:24px}.panel-copy li{padding:14px 16px;border-radius:15px;background:#fff;border:1px solid #e2e8f0;display:grid;gap:3px}.panel-copy li b{font-size:14px}.panel-copy li span{font-size:12px;line-height:1.5;color:#64748b}.purple-band{color:#fff;background:radial-gradient(circle at 10% 0%,rgba(250,204,21,.14),transparent 30%),linear-gradient(115deg,#3b163f,#1b1b75 46%,#1f67d2)}.band-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center}.band-inner>p{color:#dbeafe}.faq-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:60px;align-items:start}.faq-copy{position:sticky;top:110px}.faq-copy .kicker{margin-bottom:12px}.faq-list{display:grid;gap:10px}.faq-list details{background:#fff;border:1px solid #e2e8f0;border-radius:17px;padding:0 18px;box-shadow:0 8px 24px rgba(15,23,42,.04)}.faq-list summary{list-style:none;cursor:pointer;padding:18px 32px 18px 0;font-size:14px;font-weight:900;position:relative}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:"+";position:absolute;right:0;top:13px;width:28px;height:28px;border-radius:9px;background:#eef4ff;color:#2563eb;display:flex;align-items:center;justify-content:center;font-size:18px}.faq-list details[open] summary:after{content:"–"}.faq-list details p{padding:0 0 18px;color:#64748b;font-size:13px;line-height:1.65}.contact-section{padding:86px 0;background:radial-gradient(circle at 10% 10%,rgba(124,58,237,.3),transparent 28%),radial-gradient(circle at 90% 10%,rgba(47,109,246,.34),transparent 32%),linear-gradient(135deg,#120022,#071426 58%,#0b4faa);color:#fff}.contact-card{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center}.contact-copy>p{color:#cbd5e1}.contact-points{display:flex;flex-direction:column;gap:9px;margin-top:22px;color:#dbeafe;font-size:13px;font-weight:800}.contact-points span::first-letter{color:#facc15}.lead-form{background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.65);border-radius:24px;padding:24px;color:#0f172a;box-shadow:0 25px 70px rgba(0,0,0,.28)}.lead-form label{display:grid;gap:6px;font-size:11px;font-weight:900;color:#334155;margin-bottom:13px}.lead-form input,.lead-form textarea{width:100%;border:1px solid #dbe3ef;background:#f8fafc;border-radius:12px;padding:12px 13px;font:inherit;font-size:13px;outline:none}.lead-form input:focus,.lead-form textarea:focus{border-color:#2f6df6;box-shadow:0 0 0 3px rgba(47,109,246,.1);background:#fff}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.btn-contact{width:100%;background:linear-gradient(135deg,#facc15,#f59e0b);color:#241b00;font-size:14px}.lead-form small{display:block;text-align:center;color:#94a3b8;font-size:9px;line-height:1.5;margin-top:9px}.lp-footer{position:relative;background:linear-gradient(135deg,#3b163f,#1b1b75 50%,#1f67d2);color:#dbeafe;padding:44px 0 20px;border-top:3px solid transparent;border-image:linear-gradient(90deg,#facc15,#22d3ee,#7c3aed) 1}.footer-grid{display:grid;grid-template-columns:1.5fr .7fr .8fr;gap:30px}.footer-grid>div{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.footer-grid p{font-size:12px;line-height:1.65;max-width:350px}.footer-grid b{color:#fff;font-size:13px;margin-bottom:5px}.footer-grid a:not(.brand){text-decoration:none;color:#dbeafe;font-size:12px;line-height:1.6}.footer-brand{font-size:25px}.copyright{width:min(1160px,92%);margin:28px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);text-align:center;font-size:10px;color:#b9c9df}.whatsapp-float{position:fixed;right:20px;bottom:20px;z-index:1100;display:flex;align-items:center;gap:9px;background:#22c55e;color:#fff;text-decoration:none;border-radius:999px;padding:13px 16px;box-shadow:0 14px 35px rgba(34,197,94,.32);font-size:19px;font-weight:950}.whatsapp-float span{font-size:11px}@media(max-width:980px){.hero-grid,.panel-grid{grid-template-columns:1fr;gap:45px}.hero{padding-top:62px}.hero-showcase{max-width:620px;margin:0 auto}.steps-layout,.faq-layout{grid-template-columns:1fr;gap:34px}.steps-copy,.faq-copy{position:static}.feature-grid{grid-template-columns:repeat(2,1fr)}.band-inner,.contact-card{grid-template-columns:1fr;gap:32px}.panel-mock{transform:none}.strip-grid{grid-template-columns:repeat(2,1fr)}.strip-grid div:nth-child(2){border-right:0}.strip-grid div:nth-child(-n+2){border-bottom:1px solid #edf0f5}}@media(max-width:720px){.lp-nav{height:66px}.brand{font-size:25px}.menu-btn{display:block}.lp-nav nav{display:none;position:absolute;top:72px;left:4%;right:4%;padding:12px;flex-direction:column;align-items:stretch;background:linear-gradient(145deg,rgba(53,15,70,.98),rgba(18,28,88,.98) 55%,rgba(9,100,195,.97));border:1px solid rgba(250,204,21,.35);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.3)}.lp-nav nav.open{display:flex}.lp-nav nav a{background:rgba(255,255,255,.09)}.hero{padding:52px 0 64px}.hero h1{font-size:43px;letter-spacing:-2.3px}.hero-lead{font-size:15px}.hero-actions{display:grid}.btn{width:100%}.trust-row{grid-template-columns:1fr;gap:11px}.trust-row div{grid-template-columns:100px 1fr;align-items:center}.browser-shell{transform:none}.fc-one{left:-6px;bottom:-22px}.fc-two{right:-5px;top:53px}.float-card{padding:9px 10px}.float-card small{display:none}.strip-grid{margin-top:-20px}.strip-grid div{padding:17px 14px}.section{/* padding:62px 0; */}.feature-grid{grid-template-columns:1fr}.panel-mock{grid-template-columns:52px 1fr;min-height:320px}.mock-sidebar{padding:12px 8px}.mock-logo{width:34px;height:34px}.mock-sidebar i{width:29px}.mock-main{padding:10px}.mock-cards{gap:6px}.mock-cards>div{padding:9px}.mock-cards strong{font-size:15px}.bars{height:135px;gap:5px}.section-head h2,.steps-copy h2,.panel-copy h2,.faq-copy h2,.band-inner h2,.contact-copy h2{font-size:36px;letter-spacing:-1.5px}.form-row{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr;gap:22px}.whatsapp-float span{display:none}.whatsapp-float{width:52px;height:52px;border-radius:50%;padding:0;justify-content:center}.candidate-avatar{height:80px}.candidate-card h4{font-size:9px}.candidate-card p{display:none}}@media(max-width:480px){.hero h1{font-size:37px}.candidate-grid{gap:5px;padding:0 8px 12px}.candidate-card{padding:5px;border-radius:11px}.candidate-avatar{height:64px;border-radius:8px;font-size:28px}.candidate-card button{font-size:6px}.demo-rank-head{padding:12px 10px 8px}.fc-two{display:none}.strip-grid{grid-template-columns:1fr}.strip-grid div{border-right:0;border-bottom:1px solid #edf0f5!important}.strip-grid div:last-child{border-bottom:0!important}.panel-mock{grid-template-columns:42px 1fr}.mock-cards{grid-template-columns:1fr 1fr}.mock-cards>div:last-child{display:none}.chart-box{padding:9px}.bars{height:115px}} /* ===== AJUSTES MOBILE COMERCIAL ===== */ /* remove sobra visual da eyebrow caso exista */ .eyebrow{ display:none !important; } @media (max-width: 720px){ /* centraliza os 3 itens do bloco: 100%, PIX + Cartão, Tempo real */ .trust-row{ grid-template-columns:1fr !important; gap:12px !important; justify-items:center !important; } .trust-row div{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; padding:14px 12px !important; min-height:auto !important; } .trust-row div strong, .trust-row div span{ width:100% !important; text-align:center !important; } .trust-row div span{ margin-top:4px !important; } /* rodapé menor e melhor distribuído */ .lp-footer{ padding:32px 0 16px !important; } .footer-grid{ grid-template-columns:1fr 1fr !important; gap:18px 20px !important; align-items:start !important; } .footer-grid > div:first-child{ grid-column:1 / -1 !important; margin-bottom:4px !important; } .footer-grid > div{ gap:6px !important; } .footer-grid b{ margin-bottom:2px !important; } .footer-grid p{ margin:0 !important; max-width:none !important; } .footer-grid a:not(.brand){ line-height:1.45 !important; } .copyright{ margin-top:18px !important; padding-top:14px !important; font-size:10px !important; } } @media (max-width: 480px){ .footer-grid{ grid-template-columns:1fr 1fr !important; gap:16px !important; } .footer-grid > div:first-child{ grid-column:1 / -1 !important; } .lp-footer{ padding:28px 0 14px !important; } } /* ===== FIM AJUSTES MOBILE COMERCIAL ===== */ /* ===== AJUSTE TRUST-ROW LADO A LADO NO CELULAR ===== */ @media (max-width: 720px){ .trust-row{ display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:10px !important; align-items:stretch !important; justify-items:stretch !important; } .trust-row div{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; padding:12px 8px !important; min-height:92px !important; } .trust-row div strong{ width:100% !important; text-align:center !important; font-size:14px !important; line-height:1.2 !important; } .trust-row div span{ width:100% !important; text-align:center !important; margin-top:6px !important; font-size:11px !important; line-height:1.35 !important; } } @media (max-width: 480px){ .trust-row{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:8px !important; } .trust-row div{ padding:10px 6px !important; min-height:88px !important; } .trust-row div strong{ font-size:13px !important; } .trust-row div span{ font-size:10px !important; } } /* ===== FIM AJUSTE TRUST-ROW LADO A LADO NO CELULAR ===== */ /* ========================================================== VOTEMAIS - TEMA OFICIAL PARA ORGANIZADORES ========================================================== */ :root{ --vm-purple:#350f46; --vm-purple-2:#3b174f; --vm-navy:#121c58; --vm-blue:#102a7a; --vm-blue-2:#0964c3; --vm-blue-3:#0d74d8; --vm-yellow:#ffd33d; --vm-yellow-2:#ffc62a; --vm-cyan:#49afff; --vm-cyan-2:#4adeff; --vm-white:#ffffff; --vm-text:#eef5ff; --vm-muted:#bfd0e8; --vm-card:rgba(255,255,255,.10); --vm-card-strong:rgba(255,255,255,.14); --vm-border:rgba(255,255,255,.18); --vm-border-yellow:rgba(255,211,61,.38); } /* ========================================================== BASE ========================================================== */ html{ background:#121c58 !important; } body{ color:var(--vm-white) !important; background: radial-gradient( circle at 10% 8%, rgba(255,211,61,.12), transparent 27% ), radial-gradient( circle at 92% 12%, rgba(73,175,255,.20), transparent 32% ), linear-gradient( 135deg, var(--vm-purple) 0%, var(--vm-navy) 53%, var(--vm-blue-2) 100% ) !important; } /* ========================================================== HEADER ========================================================== */ .lp-header{ background: radial-gradient( circle at 12% 0%, rgba(255,211,61,.18), transparent 32% ), radial-gradient( circle at 92% 4%, rgba(73,175,255,.23), transparent 38% ), linear-gradient( 145deg, rgba(53,15,70,.98) 0%, rgba(18,28,88,.98) 55%, rgba(9,100,195,.97) 100% ) !important; border-bottom: 1px solid rgba(255,211,61,.28) !important; box-shadow: 0 16px 38px rgba(0,0,0,.28) !important; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); } .brand{ color:#fff !important; } .brand b{ color:var(--vm-yellow) !important; } .lp-nav nav a{ color:var(--vm-text) !important; } .lp-nav nav a:hover{ color:var(--vm-yellow) !important; } .nav-cta{ background: linear-gradient( 135deg, rgba(255,211,61,.22), rgba(255,255,255,.09) ) !important; border: 1px solid rgba(255,211,61,.42) !important; } /* ========================================================== HERO ========================================================== */ .hero{ color:#fff !important; background: radial-gradient( circle at 9% 18%, rgba(255,198,42,.19), transparent 28% ), radial-gradient( circle at 87% 12%, rgba(73,175,255,.25), transparent 35% ), linear-gradient( 135deg, #2f0b43 0%, #141958 50%, #0c6dcc 100% ) !important; border-bottom: 1px solid rgba(255,211,61,.20); } .hero-grid-bg{ opacity:.16 !important; } .hero h1{ color:#fff !important; text-shadow: 0 15px 36px rgba(0,0,0,.32) !important; } .hero h1 em{ color:var(--vm-yellow) !important; } .hero-lead{ color:var(--vm-text) !important; } .btn-primary{ background: linear-gradient( 135deg, var(--vm-yellow), var(--vm-yellow-2) ) !important; color:#171225 !important; border:2px solid #fff !important; box-shadow: 0 13px 30px rgba(0,0,0,.22) !important; } .btn-ghost{ color:#fff !important; background: linear-gradient( 135deg, rgba(255,255,255,.14), rgba(255,255,255,.07) ) !important; border: 1px solid var(--vm-border) !important; } /* ========================================================== NUMEROS HERO ========================================================== */ .trust-row{ border-color: rgba(255,255,255,.14) !important; } .trust-row strong{ color:var(--vm-yellow) !important; } .trust-row span{ color:var(--vm-text) !important; } /* ========================================================== DEMONSTRACAO ========================================================== */ .browser-shell{ background: linear-gradient( 145deg, rgba(255,255,255,.14), rgba(255,255,255,.08) ) !important; border: 1px solid rgba(255,211,61,.30) !important; box-shadow: 0 30px 75px rgba(0,0,0,.34) !important; } .browser-top{ background: rgba(15,20,67,.88) !important; color:var(--vm-muted) !important; } .demo-site-head{ background: linear-gradient( 90deg, var(--vm-purple-2), var(--vm-blue), var(--vm-blue-3) ) !important; } .demo-event-title{ background: linear-gradient( 90deg, var(--vm-purple), var(--vm-blue), var(--vm-blue-2) ) !important; color:#fff !important; } .demo-rank-head{ background: rgba(11,32,81,.94) !important; color:#fff !important; } .candidate-grid{ background: linear-gradient( 145deg, #111746, #0c3470 ) !important; } .candidate-card{ background: linear-gradient( 135deg, rgba(255,255,255,.13), rgba(255,255,255,.06) ) !important; border: 1px solid rgba(73,175,255,.42) !important; color:#fff !important; } .candidate-card.first{ border-color: rgba(255,211,61,.70) !important; } .candidate-card p{ color:var(--vm-muted) !important; } .candidate-card button{ background: linear-gradient( 135deg, var(--vm-yellow), #ff9f1c ) !important; color:#181300 !important; } /* ========================================================== CARDS FLUTUANTES ========================================================== */ .float-card{ background: linear-gradient( 135deg, rgba(40,15,68,.96), rgba(15,62,139,.96) ) !important; color:#fff !important; border: 1px solid rgba(255,211,61,.32) !important; box-shadow: 0 18px 40px rgba(0,0,0,.28) !important; } .float-card small{ color:var(--vm-muted) !important; } /* ========================================================== FAIXA 01-04 ========================================================== */ .strip{ background: linear-gradient( 135deg, #2c0d42, #151d62 54%, #0964c3 ) !important; } .strip-grid{ background: linear-gradient( 135deg, rgba(255,255,255,.13), rgba(255,255,255,.07) ) !important; border: 1px solid var(--vm-border-yellow) !important; color:#fff !important; box-shadow: 0 22px 52px rgba(0,0,0,.25) !important; } .strip-grid div{ border-color: rgba(255,255,255,.12) !important; } .strip-grid span{ color:var(--vm-yellow) !important; } .strip-grid p{ color:var(--vm-muted) !important; } /* ========================================================== TODAS AS SECOES CLARAS VIRAM VOTEMAIS ========================================================== */ .section.light{ color:#fff !important; background: radial-gradient( circle at 10% 5%, rgba(255,211,61,.07), transparent 26% ), radial-gradient( circle at 90% 20%, rgba(73,175,255,.10), transparent 30% ), linear-gradient( 145deg, #201039, #14245f 55%, #0957a9 ) !important; } .section-head h2, .panel-copy h2, .faq-copy h2{ color:#fff !important; } .section-head p, .panel-copy > p, .faq-copy > p{ color:var(--vm-muted) !important; } .kicker{ color:var(--vm-yellow) !important; } /* ========================================================== RECURSOS ========================================================== */ .feature-card{ background: linear-gradient( 135deg, rgba(255,255,255,.14), rgba(255,255,255,.07) ) !important; border: 1px solid var(--vm-border) !important; color:#fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 16px 36px rgba(0,0,0,.17) !important; } .feature-card:hover{ border-color: rgba(255,211,61,.46) !important; } .feature-no{ color: rgba(255,255,255,.10) !important; } .feature-icon{ background: linear-gradient( 135deg, rgba(255,211,61,.18), rgba(73,175,255,.17) ) !important; border: 1px solid rgba(255,211,61,.25); } .feature-card h3{ color:#fff !important; } .feature-card p{ color:var(--vm-muted) !important; } /* ========================================================== COMO FUNCIONA ========================================================== */ .section.dark{ background: radial-gradient( circle at 12% 15%, rgba(255,211,61,.10), transparent 28% ), linear-gradient( 145deg, #2b0b42, #121a59 55%, #075aa9 ) !important; color:#fff !important; } .steps-copy p, .steps-list p{ color:var(--vm-muted) !important; } .steps-list article{ background: linear-gradient( 135deg, rgba(255,255,255,.13), rgba(255,255,255,.06) ) !important; border: 1px solid var(--vm-border) !important; box-shadow: 0 13px 30px rgba(0,0,0,.15); } .steps-list article > span{ background: linear-gradient( 135deg, var(--vm-yellow), var(--vm-blue-3) ) !important; border: 1px solid rgba(255,255,255,.25); } .steps-list h3{ color:#fff !important; } /* ========================================================== PAINEL ========================================================== */ .panel-mock{ border: 1px solid rgba(255,211,61,.30) !important; box-shadow: 0 30px 70px rgba(0,0,0,.30) !important; } .panel-copy li{ background: linear-gradient( 135deg, rgba(255,255,255,.13), rgba(255,255,255,.07) ) !important; border: 1px solid var(--vm-border) !important; } .panel-copy li b{ color:#fff !important; } .panel-copy li span{ color:var(--vm-muted) !important; } /* ========================================================== FAIXA FORMATOS ========================================================== */ .purple-band{ background: radial-gradient( circle at 10% 0%, rgba(255,211,61,.15), transparent 30% ), radial-gradient( circle at 90% 0%, rgba(73,175,255,.16), transparent 32% ), linear-gradient( 110deg, var(--vm-purple), var(--vm-blue) 52%, var(--vm-blue-2) ) !important; border-top: 1px solid rgba(255,211,61,.20); border-bottom: 1px solid rgba(73,175,255,.22); } .band-inner > p{ color:var(--vm-text) !important; } /* ========================================================== FAQ ========================================================== */ .faq-list details{ background: linear-gradient( 135deg, rgba(255,255,255,.14), rgba(255,255,255,.07) ) !important; border: 1px solid var(--vm-border) !important; box-shadow: 0 12px 28px rgba(0,0,0,.14) !important; overflow:hidden; } .faq-list details[open]{ border-color: rgba(255,211,61,.42) !important; box-shadow: 0 18px 38px rgba(0,0,0,.22) !important; } .faq-list summary{ color:#fff !important; } .faq-list summary::after{ color:var(--vm-yellow) !important; background: rgba(255,211,61,.13) !important; border: 1px solid rgba(255,211,61,.30); } .faq-list details p{ color:var(--vm-muted) !important; } /* ========================================================== CONTATO ========================================================== */ .contact-section{ background: radial-gradient( circle at 12% 12%, rgba(255,211,61,.14), transparent 27% ), radial-gradient( circle at 88% 8%, rgba(73,175,255,.18), transparent 31% ), linear-gradient( 135deg, #300d45, #151b60 55%, #075ea9 ) !important; } .contact-copy > p{ color:var(--vm-muted) !important; } .lead-form{ background: linear-gradient( 145deg, rgba(255,255,255,.15), rgba(255,255,255,.08) ) !important; border: 1px solid rgba(255,211,61,.32) !important; color:#fff !important; backdrop-filter:blur(17px); -webkit-backdrop-filter:blur(17px); box-shadow: 0 30px 70px rgba(0,0,0,.30) !important; } .lead-form label{ color:#fff !important; } .lead-form input, .lead-form textarea{ background: rgba(6,20,58,.48) !important; color:#fff !important; border: 1px solid rgba(255,255,255,.18) !important; } .lead-form input::placeholder, .lead-form textarea::placeholder{ color: rgba(238,245,255,.60) !important; } .lead-form input:focus, .lead-form textarea:focus{ border-color: rgba(255,211,61,.56) !important; box-shadow: 0 0 0 3px rgba(255,211,61,.08) !important; } .lead-form small{ color:var(--vm-muted) !important; } .btn-contact{ background: linear-gradient( 135deg, var(--vm-yellow), #ff9f1c ) !important; color:#171300 !important; border:2px solid #fff; } /* ========================================================== FOOTER ========================================================== */ .lp-footer{ background: radial-gradient( circle at 10% 0%, rgba(255,211,61,.12), transparent 28% ), linear-gradient( 90deg, var(--vm-purple-2), var(--vm-blue), var(--vm-blue-3) ) !important; } /* ========================================================== ANIMACOES - ESTADO INICIAL ========================================================== */ .vm-reveal{ opacity:0; transform: translateY(46px) scale(.975); filter:blur(3px); transition: opacity .72s cubic-bezier(.16,1,.3,1), transform .72s cubic-bezier(.16,1,.3,1), filter .72s ease; } .vm-reveal.vm-visible{ opacity:1; transform:none; filter:blur(0); } /* esquerda */ .vm-reveal-left{ opacity:0; transform: translateX(-58px) scale(.975); filter:blur(3px); transition: opacity .72s cubic-bezier(.16,1,.3,1), transform .72s cubic-bezier(.16,1,.3,1), filter .72s ease; } .vm-reveal-left.vm-visible{ opacity:1; transform:none; filter:blur(0); } /* direita */ .vm-reveal-right{ opacity:0; transform: translateX(58px) scale(.975); filter:blur(3px); transition: opacity .72s cubic-bezier(.16,1,.3,1), transform .72s cubic-bezier(.16,1,.3,1), filter .72s ease; } .vm-reveal-right.vm-visible{ opacity:1; transform:none; filter:blur(0); } /* ========================================================== HOVER CARDS ========================================================== */ .feature-card, .steps-list article, .panel-copy li, .faq-list details, .strip-grid > div{ transition: transform .30s cubic-bezier(.2,.8,.2,1), border-color .30s ease, background .30s ease, box-shadow .30s ease !important; } @media(hover:hover) and (pointer:fine){ .feature-card:hover, .steps-list article:hover, .panel-copy li:hover{ transform: translateY(-7px) scale(1.012); border-color: rgba(255,211,61,.45) !important; background: radial-gradient( circle at 15% 10%, rgba(255,211,61,.14), transparent 35% ), radial-gradient( circle at 90% 10%, rgba(73,175,255,.13), transparent 36% ), linear-gradient( 135deg, rgba(255,255,255,.16), rgba(255,255,255,.08) ) !important; box-shadow: 0 24px 50px rgba(0,0,0,.25) !important; } } /* ========================================================== BOTOES ========================================================== */ .btn, .nav-cta, .whatsapp-float{ position:relative; overflow:hidden; transition: transform .22s ease, filter .22s ease, box-shadow .22s ease !important; } .btn::before, .nav-cta::before{ content:""; position:absolute; top:-60%; bottom:-60%; left:-65%; width:34%; transform:skewX(-22deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.38), transparent ); transition: left .55s ease; } .btn:hover::before, .nav-cta:hover::before{ left:125%; } .btn:hover, .nav-cta:hover{ transform:translateY(-3px); } .btn:active, .nav-cta:active{ transform: translateY(0) scale(.97); } /* ========================================================== FAQ ANIMADA ========================================================== */ .faq-list details p{ transform-origin:top; } .faq-list details.vm-faq-opening p{ animation: vmFaqIn .38s cubic-bezier(.16,1,.3,1); } .faq-list details.vm-faq-closing p{ animation: vmFaqOut .25s ease forwards; } @keyframes vmFaqIn{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:translateY(0); } } @keyframes vmFaqOut{ from{ opacity:1; transform:translateY(0); } to{ opacity:0; transform:translateY(-8px); } } /* ========================================================== MOBILE ========================================================== */ @media(max-width:720px){ body{ background: radial-gradient( circle at 12% 8%, rgba(255,198,42,.15), transparent 25% ), linear-gradient( 145deg, var(--vm-purple-2) 0%, var(--vm-blue) 58%, var(--vm-blue-3) 100% ) !important; } .lp-nav nav{ background: radial-gradient( circle at 12% 0%, rgba(255,211,61,.22), transparent 34% ), radial-gradient( circle at 92% 4%, rgba(73,175,255,.25), transparent 38% ), linear-gradient( 145deg, rgba(53,15,70,.98) 0%, rgba(18,28,88,.98) 55%, rgba(9,100,195,.97) 100% ) !important; } .lp-nav nav a{ background: linear-gradient( 135deg, rgba(255,255,255,.14), rgba(255,255,255,.07) ) !important; border: 1px solid rgba(255,255,255,.18) !important; color:#fff !important; } .vm-reveal-left, .vm-reveal-right{ transform: translateY(42px) scale(.97); } .vm-reveal-left.vm-visible, .vm-reveal-right.vm-visible{ transform:none; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media(prefers-reduced-motion:reduce){ .vm-reveal, .vm-reveal-left, .vm-reveal-right{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; } } /* ========================================================== FIM TEMA VOTEMAIS ========================================================== */ /* ========================================================== VOTEMAIS DIVULGACAO - CORRECOES FINAIS ========================================================== */ /* ========================================================== LOGO REAL DENTRO DO MOCKUP ========================================================== */ .vm-demo-brand{ display:flex !important; align-items:center !important; gap:8px !important; } .vm-demo-brand img{ display:block !important; width:34px !important; height:34px !important; object-fit:cover !important; border-radius:9px !important; box-shadow: 0 5px 14px rgba(0,0,0,.25) !important; } .vm-demo-brand span{ display:inline-flex; align-items:flex-end; color:#fff !important; font-weight:950 !important; } .vm-demo-brand b{ color:#ffd33d !important; margin-left:3px; } /* ========================================================== MOCKUP DO EVENTO APENAS NO COMPUTADOR ========================================================== */ @media(max-width:720px){ .hero-showcase{ display:none !important; } .hero-grid{ grid-template-columns:1fr !important; } .hero-copy{ max-width:760px !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } .hero-actions{ justify-content:center !important; } .trust-row{ margin-left:auto !important; margin-right:auto !important; } } /* ========================================================== BOTAO LATERAL WHATSAPP ========================================================== */ .whatsapp-float{ position:fixed !important; right:20px !important; bottom:20px !important; left:auto !important; top:auto !important; z-index:9999 !important; width:56px !important; height:56px !important; min-width:56px !important; min-height:56px !important; padding:0 !important; margin:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; background: linear-gradient( 135deg, #25d366, #16a34a ) !important; border: 1px solid rgba(255,255,255,.45) !important; color:#fff !important; box-shadow: 0 14px 34px rgba(0,0,0,.28) !important; overflow:hidden !important; text-decoration:none !important; } .whatsapp-float span{ display:none !important; } .whatsapp-float::before{ content:"✆" !important; display:block !important; font-size:25px !important; font-weight:900 !important; line-height:1 !important; color:#fff !important; } .whatsapp-float:hover{ transform: translateY(-4px) scale(1.06) !important; box-shadow: 0 20px 42px rgba(0,0,0,.34) !important; } @media(max-width:720px){ .whatsapp-float{ right:16px !important; bottom:16px !important; width:52px !important; height:52px !important; min-width:52px !important; min-height:52px !important; } } /* ========================================================== BASE DAS ANIMACOES ========================================================== */ .vm-scroll-animation{ will-change: opacity, transform, filter; } /* ========================================================== CARDS - HOVER ========================================================== */ .feature-card, .steps-list article, .panel-copy li, .faq-list details, .strip-grid > div, .lead-form{ transition: transform .30s cubic-bezier(.2,.8,.2,1), border-color .30s ease, box-shadow .30s ease, background .30s ease !important; } @media(hover:hover) and (pointer:fine){ .feature-card:hover, .steps-list article:hover, .panel-copy li:hover{ transform: translateY(-7px) scale(1.012) !important; border-color: rgba(255,211,61,.48) !important; background: radial-gradient( circle at 15% 10%, rgba(255,211,61,.15), transparent 35% ), radial-gradient( circle at 90% 10%, rgba(73,175,255,.13), transparent 36% ), linear-gradient( 135deg, rgba(255,255,255,.17), rgba(255,255,255,.08) ) !important; box-shadow: 0 24px 50px rgba(0,0,0,.27) !important; } } /* ========================================================== BOTOES ========================================================== */ .btn, .nav-cta{ position:relative !important; overflow:hidden !important; transition: transform .22s ease, filter .22s ease, box-shadow .22s ease !important; } .btn::after, .nav-cta::after{ content:""; position:absolute; top:-60%; bottom:-60%; left:-70%; width:32%; transform:skewX(-22deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.40), transparent ); transition:left .55s ease; } .btn:hover::after, .nav-cta:hover::after{ left:125%; } .btn:hover, .nav-cta:hover{ transform:translateY(-3px); } .btn:active, .nav-cta:active{ transform:scale(.97); } /* ========================================================== FAQ ========================================================== */ .faq-list details{ overflow:hidden !important; } .faq-list summary::after{ transition: transform .32s ease, background .32s ease !important; } .faq-list details[open] summary::after{ transform: rotate(180deg) scale(1.06) !important; } /* ========================================================== FIM CORRECOES ========================================================== */ /* ========================================================== MOCKUP ORIGINAL - REGRAS FINAIS ========================================================== */ @media(max-width:720px){ .hero-showcase{ display:none !important; } .hero-grid{ grid-template-columns:1fr !important; } } /* ========================================================== FIM MOCKUP ORIGINAL ========================================================== */ /* ========================================================== BROWSER TOP - CORES E URL ========================================================== */ .browser-top i{ width:8px !important; height:8px !important; border-radius:50% !important; display:inline-block !important; } /* 1º VERDE */ .browser-top i:nth-of-type(1){ background:#00f03e !important; } /* 2º AMARELO */ .browser-top i:nth-of-type(2){ background:#ffd33d !important; } /* 3º VERMELHO */ .browser-top i:nth-of-type(3){ background:#ef4444 !important; } /* URL / TEXTO CENTRAL */ .browser-top span{ margin-left:auto !important; margin-right:auto !important; padding:5px 34px !important; border-radius:8px !important; color:#ffffff !important; background:#5e5c5c !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 10px rgba(0,0,0,.16) !important; } /* ========================================================== FIM BROWSER TOP ========================================================== */ .browser-top span{ background:#5e5c5c4f !important; } /* FLOAT ICON */ .float-icon{ width:30px !important; height:30px !important; border-radius:10px !important; display:flex !important; align-items:center !important; justify-content:center !important; background:#5e5c5c6b !important; } /* ícone de pagamento confirmado = verde */ .fc-two .float-icon{ color:#22c55e !important; font-weight:950 !important; text-shadow: 0 0 8px rgba(34,197,94,.25) !important; } /* ========================================================== COLOCACOES - OURO / PRATA / BRONZE ========================================================== */ .place{ display:inline-block !important; margin-top:8px !important; font-size:7px !important; font-weight:950 !important; border-radius:999px !important; padding:4px 8px !important; border:1px solid rgba(255,255,255,.25) !important; box-shadow: 0 5px 12px rgba(0,0,0,.15) !important; } /* 1º LUGAR - OURO */ .candidate-card:nth-child(1) .place{ color:#5f4600 !important; background: linear-gradient( 135deg, #ffe880, #f5c542 ) !important; border-color:#ffd33d !important; } /* 2º LUGAR - PRATA */ .candidate-card:nth-child(2) .place{ color:#3f4a59 !important; background: linear-gradient( 135deg, #f8fafc, #cbd5e1 ) !important; border-color:#e2e8f0 !important; } /* 3º LUGAR - BRONZE */ .candidate-card:nth-child(3) .place{ color:#5a2d0c !important; background: linear-gradient( 135deg, #e7a66a, #b86b32 ) !important; border-color:#d98a4a !important; } /* ========================================================== FIM COLOCACOES ========================================================== */ .candidate-card h4{ font-size:10px !important; margin-top:6px !important; color:#ffffff !important; } /* ========================================================== RANKING DEMO - VISUAL ORIGINAL SEM ALTERAR ESTRUTURA ========================================================== */ /* bloco existente */ .demo-rank-head{ background: linear-gradient( 90deg, rgba(53,15,70,.78) 0%, rgba(18,28,88,.88) 52%, rgba(9,100,195,.72) 100% ) !important; border-top: 1px solid rgba(255,211,61,.22) !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; } /* selo TOP RANKING */ .demo-rank-head .badge, .demo-rank-head .pill{ color:#ffd33d !important; background: rgba(255,211,61,.08) !important; border: 1px solid rgba(255,211,61,.58) !important; border-radius:999px !important; font-weight:900 !important; box-shadow:none !important; } /* titulo */ .demo-rank-head h2, .demo-rank-head h3{ color:#ffffff !important; font-weight:950 !important; } /* textos auxiliares */ .demo-rank-head p{ color:#eef5ff !important; } /* status tempo real */ .demo-rank-head .online{ color:#eef5ff !important; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius:999px !important; } /* bolinha verde */ .demo-rank-head .online::before{ background:#22c55e !important; box-shadow: 0 0 0 4px rgba(34,197,94,.14), 0 0 9px rgba(34,197,94,.45) !important; } /* ========================================================== FIM RANKING DEMO ========================================================== */ /* ========================================================== RANKING DEMO - BADGES FINAIS ========================================================== */ /* TOP RANKING */ .demo-rank-head small{ font-size:7px !important; color:#ffdf4d !important; background: rgba(255,214,64,.12) !important; border: 1px solid #ffe290 !important; padding: 5px 7px !important; border-radius: 999px !important; font-weight: 950 !important; } /* ATUALIZADO EM TEMPO REAL */ .live-dot{ display:inline-flex !important; align-items:center !important; gap:7px !important; font-size:7px !important; color:#dce8ff !important; background: rgba(255,255,255,.08) !important; border: 1px solid #bbf7d0 !important; padding: 6px 8px !important; border-radius: 999px !important; font-weight: 900 !important; } /* BOLINHA VERDE PEQUENA */ .live-dot::before{ content:"" !important; width:7px !important; height:7px !important; flex: 0 0 7px !important; border-radius: 50% !important; background: #22c55e !important; box-shadow: 0 0 0 3px rgba(34,197,94,.16) !important; } /* caso exista a classe original */ .ranking-live-badge::before{ content:"" !important; width:7px !important; height:7px !important; flex: 0 0 7px !important; border-radius: 50% !important; background: #22c55e !important; box-shadow: 0 0 0 3px rgba(34,197,94,.16) !important; } /* ========================================================== FIM RANKING DEMO - BADGES ========================================================== */ /* CANDIDATE GRID - AJUSTE FINAL */ .candidate-grid{ display:grid !important; grid-template-columns: repeat(3, 1fr) !important; gap:9px !important; padding: 10px 14px 17px !important; background: linear-gradient( 90deg, rgba(53,15,70,.78) 0%, rgba(18,28,88,.88) 52%, rgba(9,100,195,.72) 100% ) !important; } /* ========================================================== BORDA ANIMADA - CANDIDATE GRID ========================================================== */ .candidate-grid{ position:relative !important; border:none !important; /* border-radius:22px !important; */ } .candidate-grid::before{ content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; background: conic-gradient( from 0deg, rgba(255,211,61,.20), #ffd33d, rgba(255,255,255,.10), rgba(73,175,255,.45), #ffd33d, rgba(255,211,61,.20) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; animation: vmCandidateBorderRotate 5s linear infinite; } @keyframes vmCandidateBorderRotate{ to{ transform:rotate(360deg); } } /* garante que o conteúdo fique acima da borda */ .candidate-grid > *{ position:relative; z-index:1; } /* ========================================================== FIM BORDA ANIMADA ========================================================== */ /* ========================================================== CORRECAO - REMOVE ANIMACAO ERRADA DO CANDIDATE GRID ========================================================== */ .candidate-grid{ position:relative !important; border: 1px solid rgba(255,211,61,.32) !important; } /* mata completamente aquela linha girando no meio */ .candidate-grid::before{ content:none !important; display:none !important; animation:none !important; background:none !important; } /* ========================================================== NEON - CARDS FLUTUANTES PAGAMENTO CONFIRMADO / ATUALIZACAO AUTOMATICA ========================================================== */ .float-card{ position:absolute !important; isolation:isolate !important; overflow:hidden !important; border: 1px solid rgba(255,211,61,.30) !important; box-shadow: 0 12px 26px rgba(0,0,0,.24), 0 0 8px rgba(73,175,255,.08) !important; } /* * camada fina somente na borda */ .float-card::before{ content:"" !important; position:absolute !important; inset:0 !important; z-index:-1 !important; padding:1px !important; border-radius:inherit !important; background: linear-gradient( 120deg, rgba(255,211,61,.18) 0%, #ffd33d 18%, #49afff 36%, rgba(255,255,255,.30) 50%, #49afff 64%, #ffd33d 82%, rgba(255,211,61,.18) 100% ) !important; background-size: 300% 300% !important; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; pointer-events:none !important; animation: vmFloatNeonBorder 4s linear infinite !important; } /* * brilho externo suave */ .float-card::after{ content:"" !important; position:absolute !important; inset:-1px !important; z-index:-2 !important; border-radius:inherit !important; pointer-events:none !important; box-shadow: 0 0 10px rgba(73,175,255,.15), 0 0 18px rgba(255,211,61,.08) !important; animation: vmFloatNeonGlow 2.4s ease-in-out infinite alternate !important; } /* luz caminhando na borda */ @keyframes vmFloatNeonBorder{ 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; } } /* respiracao leve do neon */ @keyframes vmFloatNeonGlow{ 0%{ opacity:.45; } 100%{ opacity:1; } } /* ========================================================== PAGAMENTO CONFIRMADO - TOM AZUL/VERDE ========================================================== */ .fc-two{ border-color: rgba(73,175,255,.42) !important; box-shadow: 0 12px 26px rgba(0,0,0,.24), 0 0 10px rgba(34,197,94,.12), 0 0 15px rgba(73,175,255,.10) !important; } /* ========================================================== ATUALIZACAO AUTOMATICA - TOM DOURADO/AZUL ========================================================== */ .fc-one{ border-color: rgba(255,211,61,.42) !important; box-shadow: 0 12px 26px rgba(0,0,0,.24), 0 0 10px rgba(255,211,61,.10), 0 0 15px rgba(73,175,255,.08) !important; } /* ========================================================== FIM NEON FLOAT CARDS ========================================================== */ .candidate-grid{ position:relative !important; border:none !important; /* border-radius:22px !important; */ } .candidate-grid{ position:relative !important; /* border:1px solid rgba(255,211,61,.32) !important; */ } .candidate-grid{ position:relative !important; border:none !important; /* border-radius:22px !important; */ } /* ========================================================== BOTOES HERO - ANIMACAO LOAD + HOVER ========================================================== */ .hero-actions .btn{ position:relative !important; overflow:hidden !important; } /* * classe temporaria colocada pelo JS quando a pagina carrega */ .hero-actions .btn.vm-load-button{ animation: vmButtonLoadPulse .75s cubic-bezier(.16,1,.3,1) 1 !important; } /* brilho atravessando automaticamente no carregamento */ .hero-actions .btn.vm-load-button::after{ animation: vmButtonLoadShine .90s cubic-bezier(.16,1,.3,1) 1 !important; } /* pequeno "pulso" */ @keyframes vmButtonLoadPulse{ 0%{ transform:scale(1); } 35%{ transform:scale(1.035); } 70%{ transform:scale(.992); } 100%{ transform:scale(1); } } /* faixa luminosa atravessa da esquerda para direita */ @keyframes vmButtonLoadShine{ 0%{ left:-70%; } 100%{ left:125%; } } /* hover continua funcionando normalmente */ .hero-actions .btn:hover::after{ left:125% !important; } .hero-actions .btn:hover{ transform:translateY(-3px) !important; } /* ========================================================== FIM ANIMACAO BOTOES HERO ========================================================== */ /* ========================================================== HERO METRICS - VISUAL + TYPEWRITER ========================================================== */ .trust-row{ display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:18px !important; align-items:start !important; } .trust-row > div{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:8px !important; min-width:0 !important; } .metric-title{ display:inline-flex !important; align-items:center !important; gap:9px !important; color:#ffd33d !important; font-weight:950 !important; font-size:1rem !important; line-height:1.1 !important; } .metric-icon{ width:28px !important; height:28px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border-radius:10px !important; background: linear-gradient( 135deg, rgba(255,211,61,.18), rgba(73,175,255,.16) ) !important; border: 1px solid rgba(255,255,255,.15) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 16px rgba(0,0,0,.12) !important; font-size:15px !important; line-height:1 !important; } .metric-sub{ display:block !important; color:#eef5ff !important; font-size:.95rem !important; font-weight:700 !important; line-height:1.35 !important; min-height:2.7em !important; max-width:260px !important; } .metric-sub.is-typing{ border-right:2px solid rgba(255,255,255,.42); animation:vmMetricCaret .75s step-end infinite; } @keyframes vmMetricCaret{ 50%{ border-color:transparent; } } @media(max-width:720px){ .trust-row{ grid-template-columns:1fr !important; gap:14px !important; } .trust-row > div{ align-items:flex-start !important; } .metric-title{ font-size:.98rem !important; } .metric-sub{ min-height:auto !important; max-width:none !important; font-size:.92rem !important; } } /* ========================================================== FIM HERO METRICS ========================================================== */ /* ========================================================== HERO METRICS - MOBILE CORRIGIDO DESKTOP NAO ALTERADO ========================================================== */ @media(max-width:720px){ .trust-row{ display:grid !important; grid-template-columns:1fr !important; gap:12px !important; width:100% !important; margin-top:22px !important; } .trust-row > div{ display:grid !important; grid-template-columns:38px 1fr !important; grid-template-rows:auto auto !important; column-gap:12px !important; row-gap:4px !important; align-items:center !important; width:100% !important; padding:12px 14px !important; border-radius:16px !important; background: linear-gradient( 135deg, rgba(255,255,255,.09), rgba(255,255,255,.045) ) !important; border: 1px solid rgba(255,255,255,.13) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px rgba(0,0,0,.10) !important; } .metric-title{ display:contents !important; } .metric-icon{ grid-column:1 !important; grid-row:1 / span 2 !important; width:36px !important; height:36px !important; margin:0 !important; border-radius:11px !important; font-size:16px !important; } .metric-title > span:last-child{ grid-column:2 !important; grid-row:1 !important; display:block !important; color:#ffd33d !important; font-size:.95rem !important; font-weight:950 !important; line-height:1.15 !important; text-align:left !important; } .metric-sub{ grid-column:2 !important; grid-row:2 !important; display:block !important; width:100% !important; max-width:none !important; min-height:1.3em !important; margin:0 !important; color:#eef5ff !important; font-size:.78rem !important; font-weight:650 !important; line-height:1.3 !important; text-align:left !important; } .metric-sub.is-typing{ border-right:1px solid rgba(255,255,255,.48) !important; } } /* telas muito pequenas */ @media(max-width:380px){ .trust-row > div{ grid-template-columns:34px 1fr !important; column-gap:10px !important; padding:11px 12px !important; } .metric-icon{ width:32px !important; height:32px !important; font-size:14px !important; } .metric-title > span:last-child{ font-size:.88rem !important; } .metric-sub{ font-size:.74rem !important; } } /* ========================================================== FIM HERO METRICS MOBILE ========================================================== */ /* ========================================================== HERO METRICS - MOBILE 2 COLUNAS COMPACTO ========================================================== */ @media(max-width:720px){ .trust-row{ display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:10px !important; width:100% !important; margin-top:18px !important; } .trust-row > div{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; gap:6px !important; min-height:112px !important; padding:12px 12px !important; border-radius:16px !important; background: linear-gradient( 135deg, rgba(255,255,255,.08), rgba(255,255,255,.04) ) !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 16px rgba(0,0,0,.10) !important; } /* terceiro ocupa a linha toda */ .trust-row > div:nth-child(3){ grid-column:1 / -1 !important; } .metric-title{ display:flex !important; align-items:center !important; gap:8px !important; font-size:.90rem !important; line-height:1.1 !important; margin:0 !important; } .metric-icon{ width:30px !important; height:30px !important; flex:0 0 30px !important; border-radius:9px !important; font-size:13px !important; margin:0 !important; } .metric-sub{ display:block !important; width:100% !important; max-width:none !important; min-height:auto !important; margin:0 !important; font-size:.72rem !important; font-weight:650 !important; line-height:1.25 !important; text-align:left !important; } .metric-sub.is-typing{ border-right:1px solid rgba(255,255,255,.42) !important; } } @media(max-width:420px){ .trust-row{ gap:8px !important; } .trust-row > div{ min-height:102px !important; padding:10px 10px !important; } .metric-title{ font-size:.82rem !important; } .metric-icon{ width:28px !important; height:28px !important; flex:0 0 28px !important; font-size:12px !important; } .metric-sub{ font-size:.68rem !important; line-height:1.2 !important; } } /* ========================================================== FIM HERO METRICS - MOBILE 2 COLUNAS ========================================================== */ /* ========================================================== HERO METRICS - MOBILE 3 COLUNAS ========================================================== */ @media(max-width:720px){ .trust-row{ display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:8px !important; width:100% !important; margin-top:16px !important; } .trust-row > div{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; gap:6px !important; min-height:96px !important; padding:10px 9px !important; border-radius:14px !important; background: linear-gradient( 135deg, rgba(255,255,255,.08), rgba(255,255,255,.04) ) !important; border: 1px solid rgba(255,255,255,.12) !important; } .trust-row > div:nth-child(3){ grid-column:auto !important; } .metric-title{ display:flex !important; align-items:center !important; gap:6px !important; font-size:.72rem !important; line-height:1.05 !important; margin:0 !important; } .metric-icon{ width:24px !important; height:24px !important; flex:0 0 24px !important; border-radius:8px !important; font-size:11px !important; margin:0 !important; } .metric-sub{ display:block !important; width:100% !important; max-width:none !important; min-height:auto !important; margin:0 !important; font-size:.58rem !important; font-weight:650 !important; line-height:1.18 !important; text-align:left !important; } .metric-sub.is-typing{ border-right:1px solid rgba(255,255,255,.38) !important; } } @media(max-width:420px){ .trust-row{ gap:6px !important; } .trust-row > div{ min-height:90px !important; padding:9px 8px !important; } .metric-title{ font-size:.66rem !important; } .metric-icon{ width:22px !important; height:22px !important; flex:0 0 22px !important; font-size:10px !important; } .metric-sub{ font-size:.54rem !important; line-height:1.15 !important; } } /* ========================================================== FIM HERO METRICS - MOBILE 3 COLUNAS ========================================================== */ /* ========================================================== MOBILE - 3 METRICAS NA MESMA LINHA - FORCADO ========================================================== */ @media screen and (max-width:720px){ body .hero .trust-row{ display:grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap:6px !important; width:100% !important; } body .hero .trust-row > div, body .hero .trust-row > div:nth-child(1), body .hero .trust-row > div:nth-child(2), body .hero .trust-row > div:nth-child(3){ grid-column:auto !important; grid-row:auto !important; width:auto !important; min-width:0 !important; max-width:none !important; min-height:100px !important; padding:9px 6px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; gap:6px !important; text-align:center !important; } body .hero .metric-title{ width:100% !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:5px !important; text-align:center !important; font-size:.67rem !important; line-height:1.05 !important; } body .hero .metric-icon{ width:25px !important; height:25px !important; flex:0 0 25px !important; margin:0 auto !important; font-size:11px !important; } body .hero .metric-title > span:last-child{ display:block !important; width:100% !important; text-align:center !important; font-size:.67rem !important; line-height:1.05 !important; } body .hero .metric-sub{ display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; text-align:center !important; font-size:.52rem !important; line-height:1.2 !important; overflow-wrap:anywhere !important; } } @media screen and (max-width:390px){ body .hero .trust-row{ gap:4px !important; } body .hero .trust-row > div{ padding:8px 4px !important; min-height:96px !important; } body .hero .metric-title, body .hero .metric-title > span:last-child{ font-size:.61rem !important; } body .hero .metric-sub{ font-size:.48rem !important; } } /* ========================================================== FIM MOBILE 3 METRICAS ========================================================== */ /* ========================================================== MOBILE - 3 CARDS COM ALTURA EXATAMENTE IGUAL ========================================================== */ @media screen and (max-width:720px){ body .hero .trust-row{ align-items:stretch !important; } body .hero .trust-row > div, body .hero .trust-row > div:nth-child(1), body .hero .trust-row > div:nth-child(2), body .hero .trust-row > div:nth-child(3){ height:110px !important; min-height:110px !important; max-height:110px !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; padding:8px 5px !important; } body .hero .metric-title{ min-height:42px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; gap:5px !important; } body .hero .metric-sub{ min-height:30px !important; max-height:30px !important; display:flex !important; align-items:flex-start !important; justify-content:center !important; overflow:hidden !important; } } @media screen and (max-width:390px){ body .hero .trust-row > div, body .hero .trust-row > div:nth-child(1), body .hero .trust-row > div:nth-child(2), body .hero .trust-row > div:nth-child(3){ height:104px !important; min-height:104px !important; max-height:104px !important; } } /* ========================================================== FIM ALTURA IGUAL ========================================================== */ /* ========================================================== VOTEMAIS - STRIP 01-04 DEFINITIVO ========================================================== */ /* ========================================================== DESKTOP ========================================================== */ @media (min-width:721px){ /* * A strip representa apenas a LINHA entre as duas seções. * Não cria uma terceira faixa. */ body .strip{ position:relative !important; z-index:50 !important; width:100% !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; background:transparent !important; overflow:visible !important; } /* * Mantemos o container normal e centralizado. */ body .strip > .lp-container{ position:relative !important; width:min(1160px,92%) !important; max-width:1160px !important; height:0 !important; margin:0 auto !important; padding:0 !important; transform:none !important; z-index:51 !important; } /* * Centro vertical do card exatamente sobre a divisão. */ body .strip .strip-grid{ position:absolute !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; height:104px !important; min-height:104px !important; margin:0 !important; padding:0 !important; transform:translateY(-50%) !important; display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; overflow:hidden !important; border-radius:24px !important; background: linear-gradient( 110deg, rgba(53,15,70,.97) 0%, rgba(28,37,101,.97) 52%, rgba(9,100,195,.95) 100% ) !important; border: 1px solid rgba(255,211,61,.38) !important; box-shadow: 0 20px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important; } body .strip .strip-grid > div{ position:relative !important; inset:auto !important; width:auto !important; height:104px !important; min-height:104px !important; max-height:104px !important; margin:0 !important; padding:17px 18px !important; box-sizing:border-box !important; display:grid !important; grid-template-columns: 36px minmax(0,1fr) !important; grid-template-rows: auto auto !important; column-gap:11px !important; row-gap:3px !important; align-items:center !important; opacity:1 !important; visibility:visible !important; transform:none !important; filter:none !important; background:transparent !important; border:none !important; border-right: 1px solid rgba(255,255,255,.13) !important; border-radius:0 !important; box-shadow:none !important; pointer-events:auto !important; } body .strip .strip-grid > div:last-child{ border-right:none !important; } /* número ao lado */ body .strip .strip-grid > div > span:first-child{ grid-column:1 !important; grid-row:1 / span 2 !important; width:30px !important; height:30px !important; margin:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; align-self:center !important; border-radius:10px !important; background:#f8f9ff !important; color:#ffc62a !important; font-size:10px !important; font-weight:950 !important; } body .strip .strip-grid > div b{ grid-column:2 !important; grid-row:1 !important; align-self:end !important; display:block !important; margin:0 !important; color:#fff !important; font-size:14px !important; line-height:1.15 !important; font-weight:950 !important; } body .strip .strip-grid > div p{ grid-column:2 !important; grid-row:2 !important; align-self:start !important; margin:0 !important; color:#dce8ff !important; font-size:11px !important; line-height:1.35 !important; } /* * Fundo da próxima seção começa IMEDIATAMENTE. * Só o conteúdo dela desce para não bater no card. */ body .strip + .section, body .strip + section{ margin-top:0 !important; padding-top:105px !important; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width:720px){ html, body{ width:100% !important; max-width:100% !important; overflow-x:hidden !important; } /* * Nenhum fundo e nenhuma altura artificial. */ body .strip{ position:relative !important; z-index:70 !important; width:100% !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; background:transparent !important; overflow:visible !important; } body .strip > .lp-container{ position:relative !important; width:100% !important; max-width:100% !important; height:0 !important; margin:0 !important; padding:0 !important; transform:none !important; z-index:71 !important; } /* * Deixamos espaço real dos dois lados. * 18px esquerda + 30px direita para os indicadores. */ body .strip .strip-grid{ position:absolute !important; top:0 !important; left:18px !important; right:38px !important; width:auto !important; max-width:none !important; height:102px !important; min-height:102px !important; margin:0 !important; padding:0 !important; transform:translateY(-50%) !important; overflow:hidden !important; background:transparent !important; border:none !important; border-radius:20px !important; box-shadow:none !important; box-sizing:border-box !important; } body .strip .strip-grid::before, body .strip .strip-grid::after{ content:none !important; display:none !important; } /* * Todos os cards ocupam exatamente o mesmo ponto. */ body .strip .strip-grid > div{ position:absolute !important; inset:0 !important; width:100% !important; height:102px !important; min-height:102px !important; max-height:102px !important; margin:0 !important; padding:14px 16px !important; box-sizing:border-box !important; display:grid !important; grid-template-columns: 42px minmax(0,1fr) !important; grid-template-rows: auto auto !important; column-gap:13px !important; row-gap:3px !important; align-items:center !important; border-radius:20px !important; background: linear-gradient( 135deg, rgba(53,15,70,.99) 0%, rgba(27,37,101,.99) 52%, rgba(10,93,184,.985) 100% ) !important; border: 1px solid rgba(255,211,61,.40) !important; box-shadow: 0 15px 34px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.09) !important; opacity:0 !important; visibility:hidden !important; transform:translateX(-110%) !important; pointer-events:none !important; z-index:1 !important; transition:none !important; } body .strip .strip-grid > div.vm0104-current{ opacity:1 !important; visibility:visible !important; transform:translateX(0) !important; pointer-events:auto !important; z-index:5 !important; } body .strip .strip-grid > div > span:first-child{ grid-column:1 !important; grid-row:1 / span 2 !important; width:40px !important; height:40px !important; margin:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:12px !important; background:#f8f9ff !important; color:#ffc62a !important; font-size:11px !important; font-weight:950 !important; box-shadow: 0 6px 14px rgba(0,0,0,.14) !important; } body .strip .strip-grid > div b{ grid-column:2 !important; grid-row:1 !important; align-self:end !important; display:block !important; margin:0 !important; color:#fff !important; font-size:15px !important; line-height:1.12 !important; font-weight:950 !important; } body .strip .strip-grid > div p{ grid-column:2 !important; grid-row:2 !important; align-self:start !important; margin:0 !important; color:#dce8ff !important; font-size:11px !important; line-height:1.3 !important; } /* * Indicadores verticais. */ body .strip .vm0104-dots{ position:absolute; top:0; right:17px; height:102px; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; z-index:76; pointer-events:none; } body .strip .vm0104-dot{ display:block; width:5px; height:5px; border-radius:999px; background: rgba(255,255,255,.38); transition: height .28s cubic-bezier(.16,1,.3,1), background .28s ease, box-shadow .28s ease; } /* * Etapa ativa = mais comprida. */ body .strip .vm0104-dot.is-active{ height:20px; background:#ffd33d; box-shadow: 0 0 9px rgba(255,211,61,.38); } body .strip + .section, body .strip + section{ margin-top:0 !important; padding-top:83px !important; } } @media(max-width:390px){ body .strip .strip-grid{ left:10px !important; right:31px !important; height:96px !important; min-height:96px !important; } body .strip .strip-grid > div{ height:96px !important; min-height:96px !important; max-height:96px !important; padding:12px 13px !important; grid-template-columns: 38px minmax(0,1fr) !important; column-gap:10px !important; } body .strip .strip-grid > div > span:first-child{ width:36px !important; height:36px !important; } body .strip .vm0104-dots{ right:11px; height:96px; transform:translateY(-50%); } } /* ========================================================== FIM STRIP 01-04 DEFINITIVO ========================================================== */ /* ========================================================== MOBILE - BADGE DO 01/02/03/04 MAIS SUAVE ========================================================== */ @media (max-width:720px){ body .strip .strip-grid > div > span:first-child{ background: linear-gradient( 180deg, rgba(255,255,255,.18) 0%, rgba(195,215,255,.12) 100% ) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #ffd33d !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 6px 14px rgba(0,0,0,.18) !important; } } @media (max-width:390px){ body .strip .strip-grid > div > span:first-child{ background: linear-gradient( 180deg, rgba(255,255,255,.16) 0%, rgba(195,215,255,.10) 100% ) !important; } } /* ========================================================== FIM MOBILE - BADGE DO 01/02/03/04 MAIS SUAVE ========================================================== */ /* ========================================================== STRIP 01-04 DESKTOP IGUAL AO MODELO ORIGINAL MOBILE NAO ALTERAR ========================================================== */ @media screen and (min-width:721px){ body .strip{ position:relative !important; width:100% !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; overflow:visible !important; background:transparent !important; z-index:50 !important; } /* * Container centralizado. * Em monitores grandes para em 1280px, * igual ao modelo do print. */ body .strip > .lp-container, body .strip .lp-container{ position:relative !important; width:min(1280px, calc(100% - 48px)) !important; max-width:1280px !important; height:0 !important; min-height:0 !important; margin:0 auto !important; padding:0 !important; left:auto !important; right:auto !important; top:auto !important; transform:none !important; z-index:51 !important; } body .strip .strip-grid{ position:absolute !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; max-width:100% !important; height:132px !important; min-height:132px !important; margin:0 !important; padding:0 !important; /* * centraliza o card sobre a divisão */ transform:translateY(-50%) !important; display:grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; overflow:hidden !important; border-radius:26px !important; background: linear-gradient( 110deg, rgba(53,15,70,.94) 0%, rgba(31,37,98,.95) 52%, rgba(10,103,198,.94) 100% ) !important; border: 1px solid rgba(255,211,61,.38) !important; box-shadow: 0 20px 44px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.08) !important; box-sizing:border-box !important; } /* * Cada uma das 4 etapas */ body .strip .strip-grid > div, body .strip .strip-grid > div:nth-child(1), body .strip .strip-grid > div:nth-child(2), body .strip .strip-grid > div:nth-child(3), body .strip .strip-grid > div:nth-child(4){ position:relative !important; inset:auto !important; display:block !important; width:auto !important; max-width:none !important; height:132px !important; min-height:132px !important; max-height:132px !important; margin:0 !important; padding: 22px 22px 20px !important; box-sizing:border-box !important; opacity:1 !important; visibility:visible !important; transform:none !important; filter:none !important; pointer-events:auto !important; background:transparent !important; border:none !important; border-right: 1px solid rgba(255,255,255,.13) !important; border-radius:0 !important; box-shadow:none !important; text-align:left !important; } body .strip .strip-grid > div:last-child{ border-right:none !important; } /* * 01 / 02 / 03 / 04 * VOLTA PARA CIMA DO TEXTO */ body .strip .strip-grid > div > span:first-child{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:30px !important; height:30px !important; margin: 0 0 13px 0 !important; border-radius:10px !important; background: rgba(248,249,255,.95) !important; color:#ffc62a !important; font-size:10px !important; line-height:1 !important; font-weight:950 !important; box-shadow: 0 5px 12px rgba(0,0,0,.11) !important; } /* * Título */ body .strip .strip-grid > div b, body .strip .strip-grid > div strong, body .strip .strip-grid > div h3{ display:block !important; margin: 0 0 5px 0 !important; color:#ffffff !important; font-size:15px !important; line-height:1.15 !important; font-weight:950 !important; text-align:left !important; } /* * Descrição */ body .strip .strip-grid > div p{ display:block !important; margin:0 !important; color:#dce8ff !important; font-size:12px !important; line-height:1.35 !important; font-weight:500 !important; text-align:left !important; } /* * A próxima seção começa normalmente. * Apenas afastamos o conteúdo dela para o card * não ficar por cima do título "RECURSOS". */ body .strip + .section, body .strip + section{ margin-top:0 !important; padding-top:105px !important; } } /* ========================================================== FIM DESKTOP NENHUMA REGRA MOBILE NESTE BLOCO ========================================================== */ /* ========================================================== DESKTOP - STRIP IGUAL AO PRINT DE REFERENCIA MOBILE NAO ALTERADO ========================================================== */ @media screen and (min-width:721px){ body .strip{ position:relative !important; width:100% !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; background:transparent !important; overflow:visible !important; z-index:60 !important; } /* * Zera qualquer posicionamento antigo do container. */ body .strip > *{ position:static !important; transform:none !important; } /* * O próprio strip-grid recebe a largura. * Assim não dependemos mais da estrutura do container. */ body .strip .strip-grid{ position:absolute !important; top:0 !important; left:50% !important; right:auto !important; width:1280px !important; max-width:calc(100vw - 64px) !important; height:132px !important; min-height:132px !important; max-height:132px !important; margin:0 !important; padding:0 !important; transform: translate(-50%, -50%) !important; display:grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; overflow:hidden !important; border-radius:26px !important; background: linear-gradient( 110deg, rgba(53,15,70,.94) 0%, rgba(31,37,98,.95) 52%, rgba(10,103,198,.94) 100% ) !important; border: 1px solid rgba(255,211,61,.38) !important; box-shadow: 0 20px 44px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.08) !important; box-sizing:border-box !important; z-index:61 !important; } /* * 4 partes iguais. */ body .strip .strip-grid > div, body .strip .strip-grid > div:nth-child(1), body .strip .strip-grid > div:nth-child(2), body .strip .strip-grid > div:nth-child(3), body .strip .strip-grid > div:nth-child(4){ position:relative !important; inset:auto !important; width:auto !important; min-width:0 !important; max-width:none !important; height:132px !important; min-height:132px !important; max-height:132px !important; margin:0 !important; padding: 22px 22px 20px !important; box-sizing:border-box !important; display:block !important; opacity:1 !important; visibility:visible !important; transform:none !important; filter:none !important; pointer-events:auto !important; background:transparent !important; border:none !important; border-right: 1px solid rgba(255,255,255,.13) !important; border-radius:0 !important; box-shadow:none !important; text-align:left !important; } body .strip .strip-grid > div:last-child{ border-right:none !important; } /* * 01 / 02 / 03 / 04 em cima. */ body .strip .strip-grid > div > span:first-child{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:30px !important; height:30px !important; margin: 0 0 13px 0 !important; padding:0 !important; border-radius:10px !important; background: rgba(248,249,255,.95) !important; border:none !important; color:#ffc62a !important; font-size:10px !important; line-height:1 !important; font-weight:950 !important; box-shadow: 0 5px 12px rgba(0,0,0,.11) !important; } /* * Título. */ body .strip .strip-grid > div b, body .strip .strip-grid > div strong, body .strip .strip-grid > div h3{ display:block !important; margin: 0 0 5px 0 !important; padding:0 !important; color:#fff !important; font-size:15px !important; line-height:1.15 !important; font-weight:950 !important; text-align:left !important; } /* * Descrição. */ body .strip .strip-grid > div p{ display:block !important; margin:0 !important; padding:0 !important; color:#dce8ff !important; font-size:12px !important; line-height:1.35 !important; font-weight:500 !important; text-align:left !important; } /* * Conteúdo da seção de baixo. * Fundo começa imediatamente; apenas o conteúdo desce. */ body .strip + .section, body .strip + section{ margin-top:0 !important; padding-top:105px !important; } } /* ========================================================== FIM DESKTOP PRINT EXATO ========================================================== */ /* ========================================================== DESKTOP - STRIP NUMERO AO LADO + ANIMACAO VISIVEL MOBILE NAO ALTERADO ========================================================== */ @media screen and (min-width:721px){ body .strip .strip-grid > div{ display:grid !important; grid-template-columns: 38px minmax(0,1fr) !important; grid-template-rows: auto auto !important; column-gap:12px !important; row-gap:4px !important; align-items:center !important; padding: 20px 22px !important; } /* numero ao lado */ body .strip .strip-grid > div > span:first-child{ grid-column:1 !important; grid-row:1 / span 2 !important; width:32px !important; height:32px !important; margin:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; align-self:center !important; border-radius:10px !important; } /* titulo */ body .strip .strip-grid > div b, body .strip .strip-grid > div strong, body .strip .strip-grid > div h3{ grid-column:2 !important; grid-row:1 !important; align-self:end !important; margin:0 !important; } /* descrição */ body .strip .strip-grid > div p{ grid-column:2 !important; grid-row:2 !important; align-self:start !important; margin:0 !important; } /* estado antes da animação */ body .strip .strip-grid > div.vm-desktop-reveal{ opacity:0 !important; transform: translateY(30px) scale(.97) !important; filter: blur(3px) !important; } /* estado final */ body .strip .strip-grid > div.vm-desktop-visible{ opacity:1 !important; transform: translateY(0) scale(1) !important; filter: blur(0) !important; } } /* ========================================================== FIM DESKTOP ========================================================== */ /* ========================================================== DESKTOP - NUMERO AO LADO DO TEXTO - FINAL MOBILE NAO ALTERADO ========================================================== */ @media screen and (min-width:721px){ body .strip .strip-grid > div, body .strip .strip-grid > div:nth-child(1), body .strip .strip-grid > div:nth-child(2), body .strip .strip-grid > div:nth-child(3), body .strip .strip-grid > div:nth-child(4){ display:grid !important; grid-template-columns: 38px minmax(0,1fr) !important; grid-template-rows: auto auto !important; column-gap:12px !important; row-gap:4px !important; align-items:center !important; padding:20px 22px !important; } /* 01 / 02 / 03 / 04 */ body .strip .strip-grid > div > span:first-child{ grid-column:1 !important; grid-row:1 / span 2 !important; width:32px !important; height:32px !important; margin:0 !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; align-self:center !important; border-radius:10px !important; } /* TITULO */ body .strip .strip-grid > div b, body .strip .strip-grid > div strong, body .strip .strip-grid > div h3{ grid-column:2 !important; grid-row:1 !important; display:block !important; align-self:end !important; margin:0 !important; padding:0 !important; } /* DESCRICAO */ body .strip .strip-grid > div p{ grid-column:2 !important; grid-row:2 !important; display:block !important; align-self:start !important; margin:0 !important; padding:0 !important; } } /* ========================================================== FIM DESKTOP NUMERO AO LADO ========================================================== */ /* ========================================================== DESKTOP - BADGE 01/02/03/04 IGUAL AO MOBILE ========================================================== */ @media screen and (min-width:721px){ body .strip .strip-grid > div > span:first-child{ background: linear-gradient( 180deg, rgba(255,255,255,.18) 0%, rgba(195,215,255,.12) 100% ) !important; border: 1px solid rgba(255,255,255,.14) !important; color:#ffd33d !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 6px 14px rgba(0,0,0,.18) !important; } } /* ========================================================== FIM DESKTOP BADGE ========================================================== */ @media screen and (min-width:721px){ body .strip .strip-grid > div > span:first-child{ box-shadow: inset 0 1px 0 rgb(77 77 77 / 74%), 0 6px 14px rgb(0 0 0 / 41%) !important; } } /* ========================================================== RECURSOS STACK COPIA REAL MECANICA DA PAGINA COMO-VOTAR SOMENTE MOBILE ========================================================== */ @media screen and (max-width:720px){ /* * Não deixa nenhum pai cortar o sticky. */ body #recursos, body #recursos > .lp-container, body #recursos .feature-grid{ overflow:visible !important; } body #recursos{ position:relative !important; } /* * Na página Como votar, a timeline deixa de funcionar * como grid para o empilhamento. */ body #recursos .feature-grid{ position:relative !important; display:block !important; width:100% !important; margin-top:30px !important; padding:0 !important; overflow:visible !important; transform:none !important; } /* * MESMO PRINCÍPIO DO COMO VOTAR: * * position:sticky * margin-bottom grande para gerar percurso de scroll. */ body #recursos .feature-grid > .feature-card{ position:-webkit-sticky !important; position:sticky !important; width:100% !important; margin-left:0 !important; margin-right:0 !important; /* * No Como votar mobile = 62px. */ margin-bottom:62px !important; box-sizing:border-box !important; /* * A animação geral da landing usa transform. * Sticky não pode disputar com ela. */ transform:none !important; opacity:1 !important; visibility:visible !important; /* * Mantém o visual atual do card. * NÃO estamos redesenhando os Recursos. */ transition: filter .35s ease, opacity .35s ease, box-shadow .35s ease !important; will-change: filter, opacity !important; } /* * Copiando os offsets mobile do Como votar: * * 01 76 * 02 87 * 03 98 * 04 109 * * e continuando o mesmo passo de 11px * para 05 e 06. */ body #recursos .feature-grid > .feature-card:nth-child(1){ top:76px !important; z-index:21 !important; } body #recursos .feature-grid > .feature-card:nth-child(2){ top:87px !important; z-index:22 !important; } body #recursos .feature-grid > .feature-card:nth-child(3){ top:98px !important; z-index:23 !important; } body #recursos .feature-grid > .feature-card:nth-child(4){ top:109px !important; z-index:24 !important; } body #recursos .feature-grid > .feature-card:nth-child(5){ top:120px !important; z-index:25 !important; } body #recursos .feature-grid > .feature-card:nth-child(6){ top:131px !important; z-index:26 !important; } /* * Normal: todos claros. */ body #recursos .feature-card{ filter: brightness(1) saturate(1) !important; opacity:1 !important; } /* * Exatamente como no Como votar: * só escurece depois que JS detecta sobreposição. */ body #recursos .feature-card.vm-rec-stack-behind{ filter: brightness(.56) saturate(.82) !important; opacity:.84 !important; box-shadow: 0 18px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07) !important; } body #recursos .feature-card.vm-rec-stack-behind-2{ filter: brightness(.46) saturate(.72) !important; opacity:.76 !important; } body #recursos .feature-card.vm-rec-stack-behind-3{ filter: brightness(.38) saturate(.65) !important; opacity:.68 !important; } /* * Card que está na frente fica normal/destacado. */ body #recursos .feature-card.vm-rec-stack-front{ filter: brightness(1) saturate(1) !important; opacity:1 !important; box-shadow: 0 28px 58px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12) !important; } /* * Também escurecemos o número grande 01...06, * igual ao conceito dos números da página Como votar. */ body #recursos .feature-card.vm-rec-stack-behind .feature-no{ filter:brightness(.62) !important; opacity:.82 !important; } body #recursos .feature-card.vm-rec-stack-behind-2 .feature-no{ filter:brightness(.50) !important; opacity:.72 !important; } body #recursos .feature-card.vm-rec-stack-behind-3 .feature-no{ filter:brightness(.42) !important; opacity:.62 !important; } body #recursos .feature-card.vm-rec-stack-front .feature-no{ filter:brightness(1) !important; opacity:1 !important; } /* * Neutraliza SOMENTE nos Recursos/mobile as classes * de entrada da landing page. */ body #recursos .feature-card.vm-reveal, body #recursos .feature-card.vm-reveal-left, body #recursos .feature-card.vm-reveal-right, body #recursos .feature-card.vm-visible{ transform:none !important; } } /* * Na página Como votar existe ajuste adicional <=430px. * Copiamos o mesmo passo de 10px. */ @media screen and (max-width:430px){ body #recursos .feature-grid > .feature-card:nth-child(1){ top:72px !important; } body #recursos .feature-grid > .feature-card:nth-child(2){ top:82px !important; } body #recursos .feature-grid > .feature-card:nth-child(3){ top:92px !important; } body #recursos .feature-grid > .feature-card:nth-child(4){ top:102px !important; } body #recursos .feature-grid > .feature-card:nth-child(5){ top:112px !important; } body #recursos .feature-grid > .feature-card:nth-child(6){ top:122px !important; } } /* ========================================================== RECURSOS WRAPPER STACK SOMENTE MOBILE ========================================================== */ @media screen and (max-width:720px){ /* * Cadeia externa completamente livre para sticky. */ body #recursos, body #recursos > .lp-container, body #recursos .feature-grid{ overflow:visible !important; contain:none !important; } body #recursos{ position:relative !important; } /* * O antigo grid vira a "timeline" do Como votar. */ body #recursos .feature-grid{ display:block !important; position:relative !important; width:100% !important; margin-top:30px !important; padding:0 !important; transform:none !important; } /* * ESTE é o equivalente ao .cv-step. * * Não colocamos sticky mais no feature-card. */ body #recursos .vm-resource-step{ position:-webkit-sticky !important; position:sticky !important; display:block !important; width:100% !important; margin:0 0 62px 0 !important; padding:0 !important; transform:none !important; overflow:visible !important; box-sizing:border-box !important; } body #recursos .vm-resource-step:nth-child(1){ top:72px !important; z-index:31 !important; } body #recursos .vm-resource-step:nth-child(2){ top:82px !important; z-index:32 !important; } body #recursos .vm-resource-step:nth-child(3){ top:92px !important; z-index:33 !important; } body #recursos .vm-resource-step:nth-child(4){ top:102px !important; z-index:34 !important; } body #recursos .vm-resource-step:nth-child(5){ top:112px !important; z-index:35 !important; } body #recursos .vm-resource-step:nth-child(6){ top:122px !important; z-index:36 !important; } /* * Agora o próprio feature-card volta a ser apenas * o CARD VISUAL. * * Sem sticky nele. * Sem diminuir altura. */ body #recursos .vm-resource-step > .feature-card{ position:relative !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; width:100% !important; margin:0 !important; /* * devolve altura natural que você tinha antes */ min-height:0 !important; height:auto !important; transform:none !important; opacity:1 !important; visibility:visible !important; box-sizing:border-box !important; transition: filter .35s ease, opacity .35s ease, box-shadow .35s ease, border-color .35s ease !important; } /* * Normal. */ body #recursos .vm-resource-step > .feature-card{ filter: brightness(1) saturate(1) !important; opacity:1 !important; } /* * Um card por baixo. */ body #recursos .vm-resource-step.vm-stack-behind > .feature-card{ filter: brightness(.56) saturate(.82) !important; opacity:.84 !important; box-shadow: 0 18px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07) !important; } /* * Dois níveis por baixo. */ body #recursos .vm-resource-step.vm-stack-behind-2 > .feature-card{ filter: brightness(.46) saturate(.72) !important; opacity:.76 !important; } /* * Três ou mais níveis por baixo. */ body #recursos .vm-resource-step.vm-stack-behind-3 > .feature-card{ filter: brightness(.38) saturate(.65) !important; opacity:.68 !important; } /* * Frente. */ body #recursos .vm-resource-step.vm-stack-front > .feature-card{ filter: brightness(1) saturate(1) !important; opacity:1 !important; box-shadow: 0 28px 58px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12) !important; } /* * Número grande acompanha o escurecimento. */ body #recursos .vm-stack-behind .feature-no{ filter:brightness(.62) !important; opacity:.82 !important; } body #recursos .vm-stack-behind-2 .feature-no{ filter:brightness(.50) !important; opacity:.72 !important; } body #recursos .vm-stack-behind-3 .feature-no{ filter:brightness(.40) !important; opacity:.62 !important; } body #recursos .vm-stack-front .feature-no{ filter:brightness(1) !important; } /* * A landing page pode adicionar classes de reveal no card. * Visualmente elas não podem empurrar os cards desta pilha. */ body #recursos .vm-resource-step > .feature-card.vm-reveal, body #recursos .vm-resource-step > .feature-card.vm-reveal-left, body #recursos .vm-resource-step > .feature-card.vm-reveal-right, body #recursos .vm-resource-step > .feature-card.vm-visible{ transform:none !important; } } @media screen and (max-width:430px){ body #recursos .vm-resource-step:nth-child(1){ top:68px !important; } body #recursos .vm-resource-step:nth-child(2){ top:78px !important; } body #recursos .vm-resource-step:nth-child(3){ top:88px !important; } body #recursos .vm-resource-step:nth-child(4){ top:98px !important; } body #recursos .vm-resource-step:nth-child(5){ top:108px !important; } body #recursos .vm-resource-step:nth-child(6){ top:118px !important; } } /* ========================================================== STRIP MOBILE - ROLAGEM DA PAGINA SEM BLOQUEIO ========================================================== */ @media(max-width:720px){ body .strip, body .strip .lp-container, body .strip .strip-grid, body .strip .strip-grid > div{ touch-action:pan-y !important; } } /* ========================================================== FIM STRIP MOBILE SEM BLOQUEIO ========================================================== */ /* ========================================================== VM0104 - SWIPE MANUAL SEM BLOQUEAR SCROLL VERTICAL ========================================================== */ @media(max-width:720px){ body .strip .strip-grid{ /* * pan-y: * navegador continua cuidando da rolagem vertical. * O JS pode detectar o gesto horizontal. */ touch-action:pan-y !important; -webkit-user-select:none !important; user-select:none !important; -webkit-tap-highlight-color:transparent; } body .strip .strip-grid > div{ touch-action:pan-y !important; } } /* ========================================================== FIM VM0104 SWIPE ========================================================== */ @media(max-width:720px){ body .strip .strip-grid{ touch-action:none !important; overscroll-behavior:contain !important; } body .strip .strip-grid > div{ touch-action:none !important; } } /* ========================================================== VM0104 - GESTO VERTICAL DEFINITIVO ========================================================== */ @media(max-width:720px){ body .strip .strip-grid{ /* * Se o toque começar no card, * o navegador NÃO usa esse movimento para scroll. */ touch-action:none !important; overscroll-behavior:contain !important; user-select:none !important; -webkit-user-select:none !important; -webkit-tap-highlight-color:transparent !important; } body .strip .strip-grid > div, body .strip .strip-grid > div *{ touch-action:none !important; user-select:none !important; -webkit-user-select:none !important; } } /* ========================================================== FIM VM0104 GESTO ========================================================== */ /* ========================================================== RECURSOS STACK DEFINITIVO 20260910 SOMENTE MOBILE ========================================================== */ @media screen and (max-width:720px){ /* * CORRECAO CRITICA: * * overflow-x:hidden cria contexto de overflow e pode * impedir o sticky mobile. * * clip corta horizontalmente SEM criar scroll container. */ html, body{ overflow-x:clip !important; } /* * Nenhum ancestral dos cards cria novo scroll container. */ body #recursos, body #recursos > .lp-container, body #recursos .feature-grid{ overflow:visible !important; contain:none !important; transform:none !important; } body #recursos{ position:relative !important; } /* * Equivalente à timeline do Como votar. */ body #recursos .feature-grid{ position:relative !important; display:block !important; width:100% !important; margin-top:30px !important; padding:0 !important; overflow:visible !important; } /* * OS PRÓPRIOS CARDS FICAM STICKY. * * Continuam no fluxo normal. * Ao descer, empilham. * Ao subir, voltam automaticamente. */ body #recursos .feature-grid > article.feature-card{ position:-webkit-sticky !important; position:sticky !important; left:auto !important; right:auto !important; bottom:auto !important; width:100% !important; margin: 0 0 54px 0 !important; /* * Mantém tamanho/aparência natural. */ height:auto !important; min-height:0 !important; /* * Nada pode deslocar o elemento sticky. */ transform:none !important; translate:none !important; animation:none !important; opacity:1 !important; visibility:visible !important; box-sizing:border-box !important; transition: filter .32s ease, opacity .32s ease, box-shadow .32s ease, border-color .32s ease !important; will-change: filter, opacity !important; } /* * Pequena diferença entre os tops produz * a pilha visível igual ao Como votar. */ body #recursos .feature-grid > article.feature-card:nth-child(1){ top:74px !important; z-index:41 !important; } body #recursos .feature-grid > article.feature-card:nth-child(2){ top:84px !important; z-index:42 !important; } body #recursos .feature-grid > article.feature-card:nth-child(3){ top:94px !important; z-index:43 !important; } body #recursos .feature-grid > article.feature-card:nth-child(4){ top:104px !important; z-index:44 !important; } body #recursos .feature-grid > article.feature-card:nth-child(5){ top:114px !important; z-index:45 !important; } body #recursos .feature-grid > article.feature-card:nth-child(6){ top:124px !important; z-index:46 !important; } /* * CARD NORMAL */ body #recursos .feature-card{ filter: brightness(1) saturate(1) !important; opacity:1 !important; } /* * PRIMEIRO NÍVEL ATRÁS */ body #recursos .feature-card.vm-rec-back-1{ filter: brightness(.72) saturate(.88) !important; opacity:.92 !important; box-shadow: 0 18px 38px rgba(0,0,0,.25) !important; } /* * SEGUNDO NÍVEL */ body #recursos .feature-card.vm-rec-back-2{ filter: brightness(.54) saturate(.73) !important; opacity:.82 !important; } /* * TERCEIRO OU MAIS FUNDO */ body #recursos .feature-card.vm-rec-back-3{ filter: brightness(.40) saturate(.62) !important; opacity:.72 !important; } /* * CARD DA FRENTE */ body #recursos .feature-card.vm-rec-front{ filter: brightness(1) saturate(1) !important; opacity:1 !important; border-color: rgba(255,211,61,.34) !important; box-shadow: 0 25px 52px rgba(0,0,0,.31), inset 0 1px 0 rgba(255,255,255,.10) !important; } /* * Número 01–06 acompanha a profundidade. */ body #recursos .vm-rec-back-1 .feature-no{ opacity:.075 !important; } body #recursos .vm-rec-back-2 .feature-no{ opacity:.055 !important; } body #recursos .vm-rec-back-3 .feature-no{ opacity:.035 !important; } } /* * Celulares pequenos. */ @media screen and (max-width:430px){ body #recursos .feature-grid > article.feature-card:nth-child(1){ top:68px !important; } body #recursos .feature-grid > article.feature-card:nth-child(2){ top:77px !important; } body #recursos .feature-grid > article.feature-card:nth-child(3){ top:86px !important; } body #recursos .feature-grid > article.feature-card:nth-child(4){ top:95px !important; } body #recursos .feature-grid > article.feature-card:nth-child(5){ top:104px !important; } body #recursos .feature-grid > article.feature-card:nth-child(6){ top:113px !important; } } /* ========================================================== RECURSOS STACK - FUNDO MAIS ESCURO NOS CARDS DE TRAS SOMENTE MOBILE ========================================================== */ @media(max-width:720px){ body #recursos .feature-card.vm-rec-back-1{ background: linear-gradient( 135deg, rgba(20,26,72,.94), rgba(11,45,101,.92) ) !important; border-color: rgba(255,255,255,.10) !important; } body #recursos .feature-card.vm-rec-back-2{ background: linear-gradient( 135deg, rgba(14,20,58,.96), rgba(8,35,82,.94) ) !important; border-color: rgba(255,255,255,.08) !important; } body #recursos .feature-card.vm-rec-back-3{ background: linear-gradient( 135deg, rgba(9,14,42,.98), rgba(6,27,64,.97) ) !important; border-color: rgba(255,255,255,.06) !important; } } /* ========================================================== RECURSOS STACK - BLUR NOS CARDS DE TRAS SOMENTE MOBILE ========================================================== */ @media(max-width:720px){ /* * garante que o overlay interno respeite o card */ body #recursos .feature-card{ overflow:hidden !important; } /* * camada escura suave por cima do card de trás */ body #recursos .feature-card.vm-rec-back-1::after, body #recursos .feature-card.vm-rec-back-2::after, body #recursos .feature-card.vm-rec-back-3::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:2; } body #recursos .feature-card.vm-rec-back-1::after{ background: rgba(8, 14, 34, .22) !important; } body #recursos .feature-card.vm-rec-back-2::after{ background: rgba(6, 10, 24, .30) !important; } body #recursos .feature-card.vm-rec-back-3::after{ background: rgba(4, 8, 18, .38) !important; } /* * blur real do CONTEUDO do card de trás * para não competir com o da frente */ body #recursos .feature-card.vm-rec-back-1 > *{ position:relative; z-index:1; filter: blur(1.3px) !important; } body #recursos .feature-card.vm-rec-back-2 > *{ position:relative; z-index:1; filter: blur(2.1px) !important; } body #recursos .feature-card.vm-rec-back-3 > *{ position:relative; z-index:1; filter: blur(2.9px) !important; } /* * opacidade menor nos textos/numero atrás */ body #recursos .feature-card.vm-rec-back-1 .feature-no, body #recursos .feature-card.vm-rec-back-1 h3, body #recursos .feature-card.vm-rec-back-1 p{ opacity:.45 !important; } body #recursos .feature-card.vm-rec-back-2 .feature-no, body #recursos .feature-card.vm-rec-back-2 h3, body #recursos .feature-card.vm-rec-back-2 p{ opacity:.28 !important; } body #recursos .feature-card.vm-rec-back-3 .feature-no, body #recursos .feature-card.vm-rec-back-3 h3, body #recursos .feature-card.vm-rec-back-3 p{ opacity:.16 !important; } /* * o card da frente fica sempre limpo */ body #recursos .feature-card.vm-rec-front::after{ content:none !important; } body #recursos .feature-card.vm-rec-front > *{ filter:none !important; opacity:1 !important; } } /* ========================================================== RECURSOS SUBPASTAS FINAL SOMENTE MOBILE ========================================================== */ @media screen and (max-width:720px){ /* * Mantém sticky funcionando. */ html, body{ overflow-x:clip !important; } body #recursos, body #recursos > .lp-container, body #recursos .feature-grid{ overflow:visible !important; contain:none !important; transform:none !important; } body #recursos .feature-grid{ display:block !important; position:relative !important; width:100% !important; margin-top:30px !important; padding:0 !important; overflow:visible !important; } /* * CARD BASE */ body #recursos .feature-grid > article.feature-card{ position:-webkit-sticky !important; position:sticky !important; width:100% !important; height:auto !important; min-height:0 !important; margin: 0 0 58px 0 !important; transform:none !important; translate:none !important; animation:none !important; opacity:1 !important; visibility:visible !important; overflow:hidden !important; isolation:isolate !important; transition: box-shadow .28s ease, border-color .28s ease, background .28s ease !important; } /* * PILHA ALINHADA. * * Apenas 9px entre cada "aba". */ body #recursos .feature-grid > article.feature-card:nth-child(1){ top:68px !important; z-index:41 !important; } body #recursos .feature-grid > article.feature-card:nth-child(2){ top:77px !important; z-index:42 !important; } body #recursos .feature-grid > article.feature-card:nth-child(3){ top:86px !important; z-index:43 !important; } body #recursos .feature-grid > article.feature-card:nth-child(4){ top:95px !important; z-index:44 !important; } body #recursos .feature-grid > article.feature-card:nth-child(5){ top:104px !important; z-index:45 !important; } body #recursos .feature-grid > article.feature-card:nth-child(6){ top:113px !important; z-index:46 !important; } /* * O conteúdo normal fica embaixo da película. */ body #recursos .feature-card > *{ position:relative; z-index:1; transition: opacity .25s ease, filter .25s ease !important; } /* * PELÍCULA DO CARD DE TRÁS. * * Ela cria: * - escurecimento; * - blur; * - separação visual real. */ body #recursos .feature-card.vm-rec-back::after{ content:"" !important; position:absolute !important; inset:0 !important; z-index:10 !important; pointer-events:none !important; border-radius:inherit !important; background: linear-gradient( 135deg, rgba(7,12,37,.66), rgba(7,29,70,.72) ) !important; backdrop-filter: blur(3.2px) saturate(.72) !important; -webkit-backdrop-filter: blur(3.2px) saturate(.72) !important; transition: background .25s ease, backdrop-filter .25s ease !important; } /* * PRIMEIRO CARD ATRÁS: * ainda percebemos que existe um card ali. */ body #recursos .feature-card.vm-rec-depth-1::after{ background: linear-gradient( 135deg, rgba(8,14,42,.62), rgba(7,34,78,.68) ) !important; backdrop-filter: blur(2.6px) saturate(.78) !important; -webkit-backdrop-filter: blur(2.6px) saturate(.78) !important; } /* * SEGUNDO ATRÁS. */ body #recursos .feature-card.vm-rec-depth-2::after{ background: linear-gradient( 135deg, rgba(5,10,30,.75), rgba(5,25,59,.79) ) !important; backdrop-filter: blur(3.7px) saturate(.62) !important; -webkit-backdrop-filter: blur(3.7px) saturate(.62) !important; } /* * TERCEIRO OU MAIS. */ body #recursos .feature-card.vm-rec-depth-3::after{ background: linear-gradient( 135deg, rgba(3,7,22,.84), rgba(4,19,45,.87) ) !important; backdrop-filter: blur(4.8px) saturate(.48) !important; -webkit-backdrop-filter: blur(4.8px) saturate(.48) !important; } /* * Também diminui o conteúdo atrás. * Assim texto nenhum compete com o da frente. */ body #recursos .feature-card.vm-rec-depth-1 > *{ opacity:.48 !important; filter:blur(.35px) !important; } body #recursos .feature-card.vm-rec-depth-2 > *{ opacity:.28 !important; filter:blur(.7px) !important; } body #recursos .feature-card.vm-rec-depth-3 > *{ opacity:.16 !important; filter:blur(1px) !important; } /* * CARD DA FRENTE: * sempre 100% limpo. */ body #recursos .feature-card.vm-rec-front{ border-color: rgba(255,211,61,.36) !important; box-shadow: 0 25px 52px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10) !important; } body #recursos .feature-card.vm-rec-front::after{ content:none !important; display:none !important; } body #recursos .feature-card.vm-rec-front > *{ opacity:1 !important; filter:none !important; } /* * Quando começa a sobreposição, * tira o destaque de borda do card de trás. */ body #recursos .feature-card.vm-rec-back{ border-color: rgba(255,255,255,.08) !important; box-shadow: 0 13px 28px rgba(0,0,0,.22) !important; } } /* ========================================================== FIM RECURSOS SUBPASTAS FINAL ========================================================== */ /* ========================================================== RECURSOS STACK - ESCURO MAIS FORTE + NUMERO NA DIREITA ========================================================== */ @media screen and (max-width:720px){ /* * número fixo na direita como antes */ body #recursos .feature-card{ position: relative !important; } body #recursos .feature-card .feature-no{ position: absolute !important; top: 20px !important; right: 22px !important; left: auto !important; margin: 0 !important; z-index: 1 !important; text-align: right !important; pointer-events: none !important; } /* * card de trás mais escuro */ body #recursos .feature-card.vm-rec-back{ border-color: rgba(255,255,255,.06) !important; box-shadow: 0 12px 24px rgba(0,0,0,.28) !important; } body #recursos .feature-card.vm-rec-back::after{ background: linear-gradient( 135deg, rgba(4, 8, 24, .78), rgba(5, 18, 48, .82) ) !important; backdrop-filter: blur(4px) saturate(.62) !important; -webkit-backdrop-filter: blur(4px) saturate(.62) !important; } body #recursos .feature-card.vm-rec-depth-1::after{ background: linear-gradient( 135deg, rgba(3, 8, 24, .76), rgba(5, 19, 50, .80) ) !important; backdrop-filter: blur(3.2px) saturate(.70) !important; -webkit-backdrop-filter: blur(3.2px) saturate(.70) !important; } body #recursos .feature-card.vm-rec-depth-2::after{ background: linear-gradient( 135deg, rgba(2, 6, 18, .84), rgba(4, 15, 40, .88) ) !important; backdrop-filter: blur(4.4px) saturate(.58) !important; -webkit-backdrop-filter: blur(4.4px) saturate(.58) !important; } body #recursos .feature-card.vm-rec-depth-3::after{ background: linear-gradient( 135deg, rgba(1, 4, 12, .90), rgba(3, 10, 28, .94) ) !important; backdrop-filter: blur(5.4px) saturate(.48) !important; -webkit-backdrop-filter: blur(5.4px) saturate(.48) !important; } /* * conteúdo do card de trás mais apagado */ body #recursos .feature-card.vm-rec-depth-1 > *{ opacity: .38 !important; filter: blur(.55px) !important; } body #recursos .feature-card.vm-rec-depth-2 > *{ opacity: .22 !important; filter: blur(.9px) !important; } body #recursos .feature-card.vm-rec-depth-3 > *{ opacity: .12 !important; filter: blur(1.3px) !important; } /* * mantém o número aparecendo melhor na direita */ body #recursos .feature-card.vm-rec-depth-1 .feature-no{ opacity: .13 !important; } body #recursos .feature-card.vm-rec-depth-2 .feature-no{ opacity: .10 !important; } body #recursos .feature-card.vm-rec-depth-3 .feature-no{ opacity: .08 !important; } /* * frente limpa */ body #recursos .feature-card.vm-rec-front .feature-no{ opacity: .16 !important; right: 22px !important; } body #recursos .feature-card.vm-rec-front > *{ filter: none !important; } } /* ========================================================== FIM AJUSTE ESCURO + NUMERO DIREITA ========================================================== */ /* ========================================================== RECURSOS - REFINO DEFINITIVO DA PILHA ========================================================== */ @media screen and (max-width:720px){ /* * ESPAÇAMENTO ENTRE OS CARDS * exatamente como solicitado. */ body #recursos .feature-grid > article.feature-card, body #recursos .feature-grid > .feature-card{ margin-left:0 !important; margin-right:0 !important; margin-bottom:30px !important; width:100% !important; position:-webkit-sticky !important; position:sticky !important; transform:none !important; translate:none !important; box-sizing:border-box !important; } /* * PILHA ALINHADA. * * Apenas 8px de diferença entre as abas. */ body #recursos .feature-grid > article.feature-card:nth-child(1){ top:68px !important; z-index:41 !important; } body #recursos .feature-grid > article.feature-card:nth-child(2){ top:76px !important; z-index:42 !important; } body #recursos .feature-grid > article.feature-card:nth-child(3){ top:84px !important; z-index:43 !important; } body #recursos .feature-grid > article.feature-card:nth-child(4){ top:92px !important; z-index:44 !important; } body #recursos .feature-grid > article.feature-card:nth-child(5){ top:100px !important; z-index:45 !important; } body #recursos .feature-grid > article.feature-card:nth-child(6){ top:108px !important; z-index:46 !important; } /* * NUMERO 01-06: * SEMPRE NA DIREITA. */ body #recursos .feature-card .feature-no{ position:absolute !important; top:20px !important; right:20px !important; left:auto !important; margin:0 !important; z-index:3 !important; font-size:38px !important; line-height:1 !important; text-align:right !important; color: rgba(255,255,255,.13) !important; opacity:1 !important; filter:none !important; transition: opacity .22s ease, filter .22s ease !important; } /* * MUITO IMPORTANTE: * * enquanto NÃO está atrás de outro card, * o número NÃO pode apagar. */ body #recursos .feature-card:not(.vm-rec-back) .feature-no{ opacity:1 !important; filter:none !important; color: rgba(255,255,255,.13) !important; } /* * CARD DA FRENTE: * conteúdo completamente normal. */ body #recursos .feature-card.vm-rec-front{ background: linear-gradient( 135deg, rgba(255,255,255,.14), rgba(255,255,255,.07) ) !important; filter:none !important; opacity:1 !important; border-color: rgba(255,211,61,.32) !important; box-shadow: 0 24px 50px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.10) !important; } body #recursos .feature-card.vm-rec-front::after{ content:none !important; display:none !important; } body #recursos .feature-card.vm-rec-front > *{ opacity:1 !important; filter:none !important; } /* * ========================================== * CARD QUE FICOU ATRAS * ========================================== * * Aqui o fundo fica MUITO mais forte. */ body #recursos .feature-card.vm-rec-back{ background: linear-gradient( 135deg, #090d25 0%, #081632 55%, #062044 100% ) !important; border-color: rgba(255,255,255,.07) !important; box-shadow: 0 10px 24px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.025) !important; } /* * Película escura sobre TODO o card. */ body #recursos .feature-card.vm-rec-back::after{ content:"" !important; display:block !important; position:absolute !important; inset:0 !important; z-index:20 !important; pointer-events:none !important; border-radius:inherit !important; background: rgba(3,7,22,.82) !important; backdrop-filter: blur(5px) saturate(.45) !important; -webkit-backdrop-filter: blur(5px) saturate(.45) !important; } /* * Não quero mais texto do card de trás competindo * visualmente com o card atual. * * Deixa praticamente invisível. */ body #recursos .feature-card.vm-rec-back > *{ opacity:.035 !important; filter: blur(2.5px) !important; } /* * O número do card de trás fica só como uma * referência muito suave de profundidade. */ body #recursos .feature-card.vm-rec-back .feature-no{ opacity:.07 !important; filter: blur(1.3px) !important; } /* * PRIMEIRA CAMADA ATRÁS */ body #recursos .feature-card.vm-rec-depth-1::after{ background: rgba(4,8,25,.80) !important; backdrop-filter: blur(4px) saturate(.52) !important; -webkit-backdrop-filter: blur(4px) saturate(.52) !important; } /* * SEGUNDA CAMADA ATRÁS */ body #recursos .feature-card.vm-rec-depth-2::after{ background: rgba(2,5,17,.88) !important; backdrop-filter: blur(5px) saturate(.40) !important; -webkit-backdrop-filter: blur(5px) saturate(.40) !important; } /* * TERCEIRA OU MAIS: * praticamente só sobra a aba/borda. */ body #recursos .feature-card.vm-rec-depth-3::after{ background: rgba(1,3,11,.94) !important; backdrop-filter: blur(6px) saturate(.30) !important; -webkit-backdrop-filter: blur(6px) saturate(.30) !important; } } /* * Repete os mesmos valores em <=430 * para impedir aquelas regras antigas * de 72/82/92/102... de ganharem. */ @media screen and (max-width:430px){ body #recursos .feature-grid > article.feature-card:nth-child(1), body #recursos .feature-grid > .feature-card:nth-child(1){ top:68px !important; } body #recursos .feature-grid > article.feature-card:nth-child(2), body #recursos .feature-grid > .feature-card:nth-child(2){ top:76px !important; } body #recursos .feature-grid > article.feature-card:nth-child(3), body #recursos .feature-grid > .feature-card:nth-child(3){ top:84px !important; } body #recursos .feature-grid > article.feature-card:nth-child(4), body #recursos .feature-grid > .feature-card:nth-child(4){ top:92px !important; } body #recursos .feature-grid > article.feature-card:nth-child(5), body #recursos .feature-grid > .feature-card:nth-child(5){ top:100px !important; } body #recursos .feature-grid > article.feature-card:nth-child(6), body #recursos .feature-grid > .feature-card:nth-child(6){ top:108px !important; } } /* ========================================================== FIM RECURSOS - REFINO DEFINITIVO ========================================================== */ /* ========================================================== RECURSOS - BLUR FORTE / FUNDO ESCURO SEM SUMIR CONTEUDO ========================================================== */ @media screen and (max-width:720px){ /* * Base do card de trás. * Escuro, mas sem virar uma placa quase preta. */ body #recursos .feature-card.vm-rec-back{ background: linear-gradient( 135deg, rgba(18,23,58,.96), rgba(11,37,82,.94) ) !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 12px 26px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.035) !important; } /* * Pelicula: * bem menos escura que antes, * mas com blur bem mais forte. */ body #recursos .feature-card.vm-rec-back::after{ content:"" !important; display:block !important; position:absolute !important; inset:0 !important; z-index:20 !important; pointer-events:none !important; border-radius:inherit !important; background: rgba(5,10,30,.36) !important; backdrop-filter: blur(8px) saturate(.62) brightness(.86) !important; -webkit-backdrop-filter: blur(8px) saturate(.62) brightness(.86) !important; } /* * CONTEUDO: * volta a aparecer. * * Não queremos esconder, * apenas desfocar e apagar levemente. */ body #recursos .feature-card.vm-rec-back > *{ opacity:.58 !important; filter: blur(1.4px) !important; } /* * PRIMEIRO ATRAS: * ainda bem visível. */ body #recursos .feature-card.vm-rec-depth-1::after{ background: rgba(6,12,34,.30) !important; backdrop-filter: blur(7px) saturate(.68) brightness(.90) !important; -webkit-backdrop-filter: blur(7px) saturate(.68) brightness(.90) !important; } body #recursos .feature-card.vm-rec-depth-1 > *{ opacity:.62 !important; filter:blur(1.2px) !important; } /* * SEGUNDO ATRAS. */ body #recursos .feature-card.vm-rec-depth-2::after{ background: rgba(4,9,27,.40) !important; backdrop-filter: blur(9px) saturate(.56) brightness(.82) !important; -webkit-backdrop-filter: blur(9px) saturate(.56) brightness(.82) !important; } body #recursos .feature-card.vm-rec-depth-2 > *{ opacity:.46 !important; filter:blur(1.7px) !important; } /* * TERCEIRO OU MAIS. */ body #recursos .feature-card.vm-rec-depth-3::after{ background: rgba(3,7,22,.48) !important; backdrop-filter: blur(11px) saturate(.48) brightness(.76) !important; -webkit-backdrop-filter: blur(11px) saturate(.48) brightness(.76) !important; } body #recursos .feature-card.vm-rec-depth-3 > *{ opacity:.34 !important; filter:blur(2px) !important; } /* * NUMERO: * mantém a referência visível. */ body #recursos .feature-card.vm-rec-depth-1 .feature-no{ opacity:.32 !important; filter:blur(.6px) !important; } body #recursos .feature-card.vm-rec-depth-2 .feature-no{ opacity:.24 !important; filter:blur(.9px) !important; } body #recursos .feature-card.vm-rec-depth-3 .feature-no{ opacity:.18 !important; filter:blur(1.1px) !important; } /* * FRENTE continua limpa. */ body #recursos .feature-card.vm-rec-front::after{ content:none !important; display:none !important; } body #recursos .feature-card.vm-rec-front > *{ opacity:1 !important; filter:none !important; } } /* ========================================================== FIM RECURSOS - BLUR FORTE / FUNDO SUAVE ========================================================== */ /* ========================================================== RECURSOS DESKTOP SCROLL SELECT SOMENTE COMPUTADOR ========================================================== */ @media screen and (min-width:721px){ /* * Mantém TODOS os cards visíveis. */ body #recursos .feature-grid > .feature-card{ opacity:1 !important; filter:none !important; transform:none !important; transition: opacity .55s cubic-bezier(.16,1,.3,1), filter .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1), border-color .55s ease, box-shadow .55s ease, background .55s ease !important; } /* * Quando a seleção por scroll está ativa, * os NÃO selecionados ficam discretamente apagados. * * Continua possível ler tudo. */ body #recursos.vm-desktop-selecting .feature-grid > .feature-card:not(.vm-desktop-selected){ opacity:.54 !important; filter: brightness(.70) saturate(.72) blur(.25px) !important; transform: scale(.982) !important; border-color: rgba(255,255,255,.09) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 26px rgba(0,0,0,.13) !important; } /* * CARD SELECIONADO. */ body #recursos .feature-card.vm-desktop-selected{ position:relative !important; z-index:3 !important; opacity:1 !important; filter: brightness(1.035) saturate(1.04) !important; transform: translateY(-4px) scale(1.012) !important; border-color: rgba(255,211,61,.82) !important; background: radial-gradient( circle at 8% 4%, rgba(255,211,61,.10), transparent 38% ), linear-gradient( 135deg, rgba(255,255,255,.16), rgba(255,255,255,.075) ) !important; box-shadow: 0 0 0 1px rgba(255,211,61,.12), 0 0 22px rgba(255,211,61,.13), 0 22px 48px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12) !important; } /* * Número do selecionado também ganha destaque. */ body #recursos .feature-card.vm-desktop-selected .feature-no{ color: rgba(255,211,61,.24) !important; opacity:1 !important; filter:none !important; transition: color .45s ease, opacity .45s ease !important; } /* * Ícone do selecionado. */ body #recursos .feature-card.vm-desktop-selected .feature-icon{ border-color: rgba(255,211,61,.58) !important; box-shadow: 0 0 16px rgba(255,211,61,.12), inset 0 1px 0 rgba(255,255,255,.10) !important; } /* * Pequeno brilho que percorre a borda ao mudar * para o próximo card. */ body #recursos .feature-card.vm-desktop-selected::before{ content:""; position:absolute; left:-25%; top:-2px; width:25%; height:2px; pointer-events:none; border-radius:999px; background: linear-gradient( 90deg, transparent, #ffd33d, #fff3a1, transparent ); box-shadow: 0 0 9px rgba(255,211,61,.55); animation: vmDesktopSelectedBorder 1.1s cubic-bezier(.16,1,.3,1) 1; } @keyframes vmDesktopSelectedBorder{ from{ left:-25%; opacity:.25; } 20%{ opacity:1; } to{ left:105%; opacity:0; } } /* * Evita o hover antigo mudar o card apagado. * Hover só ganha força no selecionado ou quando * não existe seleção. */ body #recursos.vm-desktop-selecting .feature-card:not(.vm-desktop-selected):hover{ transform: scale(.982) !important; border-color: rgba(255,255,255,.09) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 26px rgba(0,0,0,.13) !important; } } /* ========================================================== FIM RECURSOS DESKTOP SCROLL SELECT ========================================================== */ /* ========================================================== COMO FUNCIONA - REFINO DESKTOP BOTAO + NUMEROS DOS CARDS MOBILE NAO MEXER ========================================================== */ @media screen and (min-width: 721px){ /* * BOTAO "Conversar sobre meu evento" */ body .steps-copy .text-link{ position: relative; display: inline-flex !important; align-items: center; gap: 12px; margin-top: 28px; padding: 16px 24px; min-height: 56px; border-radius: 18px; text-decoration: none !important; font-size: 18px; font-weight: 950; letter-spacing: -.02em; color: #fff3b0 !important; border: 1px solid rgba(250, 204, 21, .38); background: linear-gradient(135deg, rgba(250, 204, 21, .16) 0%, rgba(124, 58, 237, .18) 38%, rgba(37, 99, 235, .20) 100%); box-shadow: 0 16px 36px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .10), 0 0 0 1px rgba(250, 204, 21, .08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, color .28s ease, background .28s ease; overflow: hidden; } body .steps-copy .text-link::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.10) 25%, rgba(255,255,255,.18) 40%, transparent 62%); transform: translateX(-130%); transition: transform .65s ease; pointer-events: none; } body .steps-copy .text-link::after{ content: "→"; font-size: 20px; line-height: 1; font-weight: 900; color: #facc15; transition: transform .25s ease; } body .steps-copy .text-link:hover{ transform: translateY(-3px); color: #fff7c7 !important; border-color: rgba(250, 204, 21, .58); background: linear-gradient(135deg, rgba(250, 204, 21, .22) 0%, rgba(124, 58, 237, .22) 36%, rgba(37, 99, 235, .28) 100%); box-shadow: 0 22px 46px rgba(0, 0, 0, .28), 0 0 26px rgba(250, 204, 21, .10), inset 0 1px 0 rgba(255, 255, 255, .14); } body .steps-copy .text-link:hover::before{ transform: translateX(130%); } body .steps-copy .text-link:hover::after{ transform: translateX(4px); } body .steps-copy .text-link:active{ transform: translateY(-1px) scale(.995); } /* * QUADRADO DOS NUMEROS 1 2 3 4 * Visual mais premium e alinhado com a página. */ body .steps-list article > span{ position: relative; width: 62px !important; height: 62px !important; min-width: 62px; min-height: 62px; border-radius: 18px !important; display: flex !important; align-items: center; justify-content: center; font-size: 18px; font-weight: 950; color: #fffef8 !important; border: 1px solid rgba(250, 204, 21, .34); background: radial-gradient(circle at 26% 22%, rgba(250, 204, 21, .26) 0%, rgba(250, 204, 21, .10) 24%, transparent 46%), linear-gradient(145deg, rgba(53, 15, 70, .96) 0%, rgba(29, 29, 117, .94) 56%, rgba(31, 103, 210, .94) 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px rgba(0,0,0,.22), 0 0 0 1px rgba(250, 204, 21, .06); overflow: hidden; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, filter .28s ease; } body .steps-list article > span::before{ content: ""; position: absolute; inset: 1px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); pointer-events: none; } body .steps-list article > span::after{ content: ""; position: absolute; width: 130%; height: 130%; inset: auto; left: -15%; top: -55%; background: radial-gradient(circle, rgba(250,204,21,.18) 0%, rgba(250,204,21,.06) 24%, transparent 58%); pointer-events: none; } body .steps-list article:hover > span{ transform: translateY(-2px) scale(1.03); border-color: rgba(250, 204, 21, .52); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 16px 28px rgba(0,0,0,.26), 0 0 18px rgba(250,204,21,.09); filter: saturate(1.08) brightness(1.03); } } /* ========================================================== FIM COMO FUNCIONA - REFINO DESKTOP ========================================================== */ /* ========================================================== COMO FUNCIONA - CENTRALIZADO + NUMEROS REFINADOS SOMENTE DESKTOP ========================================================== */ @media screen and (min-width:721px){ /* * PARA DE ACOMPANHAR O SCROLL. */ body .steps-copy{ position:static !important; top:auto !important; align-self:center !important; transform:none !important; } /* * Centraliza verticalmente os dois lados da seção. */ body .steps-layout{ align-items:center !important; } /* * Mantém o conteúdo da esquerda bem posicionado. */ body .steps-copy{ display:flex !important; flex-direction:column !important; justify-content:center !important; } /* * BOTÃO: * o HTML já possui a seta. * Remove a segunda seta criada pelo CSS. */ body .steps-copy .text-link::after{ content:none !important; display:none !important; } /* * NUMEROS 1 - 4 * * Sai aquele degradê amarelo/azul muito forte. * Agora usa a mesma linguagem da página. */ body .steps-list article > span{ position:relative !important; width:58px !important; height:58px !important; min-width:58px !important; min-height:58px !important; border-radius:17px !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:18px !important; font-weight:950 !important; color:#ffffff !important; background: radial-gradient( circle at 25% 18%, rgba(255,211,61,.13), transparent 38% ), linear-gradient( 145deg, rgba(53,15,70,.96) 0%, rgba(18,28,88,.97) 52%, rgba(9,100,195,.80) 100% ) !important; border: 1px solid rgba(255,211,61,.34) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 18px rgba(0,0,0,.22), 0 0 14px rgba(9,100,195,.10) !important; overflow:hidden !important; transform:none !important; transition: border-color .28s ease, box-shadow .28s ease, background .28s ease, transform .28s ease !important; } /* * Reflexo discreto. */ body .steps-list article > span::before{ content:"" !important; position:absolute !important; inset:1px !important; border-radius:15px !important; background: linear-gradient( 180deg, rgba(255,255,255,.09), rgba(255,255,255,.015) ) !important; pointer-events:none !important; } /* * Remove o efeito radial antigo exagerado. */ body .steps-list article > span::after{ content:none !important; display:none !important; } /* * Hover bem mais discreto. */ body .steps-list article:hover > span{ transform: translateY(-2px) scale(1.025) !important; border-color: rgba(255,211,61,.58) !important; background: radial-gradient( circle at 25% 18%, rgba(255,211,61,.18), transparent 38% ), linear-gradient( 145deg, rgba(59,23,79,.98) 0%, rgba(17,27,94,.98) 52%, rgba(13,116,216,.82) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 12px 24px rgba(0,0,0,.26), 0 0 18px rgba(255,211,61,.08) !important; } } /* ========================================================== FIM COMO FUNCIONA - CENTRALIZADO + NUMEROS ========================================================== */ /* ========================================================== AJUSTE FINO - COMO FUNCIONA ========================================================== */ /* evita ficar “Do” sozinho e melhora o equilíbrio do título */ .steps-copy h2{ text-wrap: balance; } @media screen and (min-width: 721px){ body .steps-copy h2{ max-width: 8.6ch !important; line-height: .98 !important; letter-spacing: -1.8px !important; } } @media screen and (max-width: 720px){ body .steps-copy h2{ max-width: 9.2ch !important; line-height: .98 !important; letter-spacing: -1.4px !important; } } /* botão mais bonito e coerente */ body .steps-copy .text-link{ display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; margin-top: 26px !important; padding: 17px 24px !important; min-height: 58px !important; border-radius: 22px !important; text-decoration: none !important; font-weight: 950 !important; font-size: 17px !important; color: #fff3b0 !important; border: 1px solid rgba(255, 211, 61, .34) !important; background: radial-gradient(circle at 18% 18%, rgba(255, 211, 61, .10), transparent 30%), linear-gradient( 135deg, rgba(62, 19, 83, .96) 0%, rgba(32, 37, 119, .96) 55%, rgba(17, 97, 191, .92) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 28px rgba(0,0,0,.22), 0 0 0 1px rgba(255, 211, 61, .05) !important; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, filter .28s ease !important; } body .steps-copy .text-link::after{ content: none !important; display: none !important; } body .steps-copy .text-link:hover{ transform: translateY(-2px) !important; border-color: rgba(255, 211, 61, .50) !important; filter: brightness(1.04) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 36px rgba(0,0,0,.26), 0 0 18px rgba(255, 211, 61, .10) !important; } @media screen and (max-width: 720px){ body .steps-copy .text-link{ width: 100% !important; } } /* fundo do numero 1 2 3 4 */ body .steps-list article > span{ position: relative !important; width: 58px !important; height: 58px !important; min-width: 58px !important; min-height: 58px !important; border-radius: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; font-weight: 950 !important; color: #ffdf63 !important; border: 1px solid rgba(255, 211, 61, .26) !important; background: radial-gradient(circle at 24% 20%, rgba(255, 211, 61, .10), transparent 32%), linear-gradient( 180deg, rgba(255,255,255,.10) 0%, rgba(195,215,255,.05) 100% ), linear-gradient( 135deg, rgba(59, 22, 95, .96) 0%, rgba(24, 33, 106, .97) 54%, rgba(14, 93, 181, .88) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.24), 0 0 0 1px rgba(255,255,255,.02) !important; overflow: hidden !important; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, filter .25s ease !important; } body .steps-list article > span::before{ content: ""; position: absolute; inset: 1px; border-radius: 16px; background: linear-gradient( 180deg, rgba(255,255,255,.06), rgba(255,255,255,.01) ); pointer-events: none; } body .steps-list article > span::after{ display: none !important; content: none !important; } body .steps-list article:hover > span{ transform: translateY(-1px) scale(1.03) !important; border-color: rgba(255, 211, 61, .44) !important; filter: brightness(1.04) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 24px rgba(0,0,0,.26), 0 0 16px rgba(255, 211, 61, .08) !important; } /* ========================================================== FIM AJUSTE FINO - COMO FUNCIONA ========================================================== */ /* ===== COMO FUNCIONA SCROLL DESKTOP ===== */ @media screen and (min-width: 981px){ body #como-funciona{ overflow: clip !important; } body #como-funciona .steps-layout{ grid-template-columns: minmax(360px, .86fr) minmax(610px, 1.14fr) !important; align-items: center !important; min-height: 650px !important; } body #como-funciona .steps-copy{ position: sticky !important; top: 115px !important; align-self: stretch !important; min-height: 520px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; max-width: 520px !important; margin: 0 !important; transform: translate3d(0,0,0); transition: transform .50s cubic-bezier(.22,1,.36,1), opacity .35s ease !important; will-change: transform, opacity; } body #como-funciona .steps-copy h2{ max-width: 10.5ch !important; line-height: .98 !important; letter-spacing: -1.8px !important; text-wrap: balance !important; margin-bottom: 18px !important; } body #como-funciona .steps-copy > p{ max-width: 510px !important; margin-top: 0 !important; } body #como-funciona .steps-copy .text-link{ width: fit-content !important; min-width: 410px !important; justify-content: center !important; } body #como-funciona .steps-list{ min-height: 520px !important; display: grid !important; align-content: center !important; gap: 16px !important; } body #como-funciona .steps-list article{ opacity: 0; transform: translate3d(145px, 12px, 0); filter: blur(10px); transition: transform .58s cubic-bezier(.22,1,.36,1), opacity .40s ease, filter .40s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease !important; will-change: transform, opacity, filter; } body #como-funciona .steps-list article:nth-child(even){ transform: translate3d(-145px, 12px, 0); } body #como-funciona .steps-list article.vm-cf-active{ border-color: rgba(255,211,61,.34) !important; box-shadow: 0 18px 38px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.06) !important; } body #como-funciona .steps-list article > span{ background: linear-gradient( 180deg, rgba(255,255,255,.18) 0%, rgba(195,215,255,.12) 100% ), linear-gradient( 135deg, rgba(76, 36, 115, .94) 0%, rgba(35, 52, 138, .96) 56%, rgba(23, 112, 205, .90) 100% ) !important; border: 1px solid rgba(255,211,61,.26) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.22) !important; } body #como-funciona .steps-list h3{ margin-top: 1px !important; } } /* ===== FIM COMO FUNCIONA SCROLL DESKTOP ===== */ /* ========================================================== COMO FUNCIONA - LAYOUT DESKTOP SEGURO NAO MEXER NO MOBILE ========================================================== */ @media screen and (min-width:981px){ /* * IMPORTANTE: * as duas colunas precisam caber DENTRO dos 1160px. */ body #como-funciona .steps-layout{ display:grid !important; grid-template-columns: minmax(0, 440px) minmax(0, 1fr) !important; align-items:center !important; width:min(1160px,92%) !important; margin-left:auto !important; margin-right:auto !important; min-height:620px !important; overflow:visible !important; } /* * COLUNA ESQUERDA */ body #como-funciona .steps-copy{ position:relative !important; top:auto !important; width:100% !important; max-width:440px !important; min-width:0 !important; min-height:500px !important; display:flex !important; flex-direction:column !important; justify-content:center !important; align-items:flex-start !important; padding:0 !important; margin:0 !important; /* * O JS ainda pode aplicar translateX aqui. * Não anulamos a animação. */ transform-origin:left center !important; box-sizing:border-box !important; } /* * TITULO: * grande, mas contido dentro da coluna. */ body #como-funciona .steps-copy h2{ display:block !important; width:100% !important; max-width:440px !important; margin: 12px 0 22px 0 !important; font-size: clamp(54px,4.4vw,68px) !important; line-height:.98 !important; letter-spacing: -2.2px !important; text-wrap:balance !important; overflow-wrap:normal !important; word-break:normal !important; box-sizing:border-box !important; } /* * TEXTO */ body #como-funciona .steps-copy > p{ width:100% !important; max-width:430px !important; margin:0 !important; font-size:16px !important; line-height:1.65 !important; color:#cbd6ec !important; } /* * BOTAO */ body #como-funciona .steps-copy .text-link{ width:auto !important; min-width:0 !important; max-width:100% !important; align-self:flex-start !important; margin-top:32px !important; padding: 0 28px !important; min-height:60px !important; white-space:nowrap !important; } /* * COLUNA DOS CARDS */ body #como-funciona .steps-list{ width:100% !important; min-width:0 !important; min-height:500px !important; display:grid !important; align-content:center !important; gap:14px !important; margin:0 !important; } /* * CARDS SEM INVADIR A COLUNA ESQUERDA */ body #como-funciona .steps-list article{ width:100% !important; max-width:none !important; min-width:0 !important; min-height:110px !important; box-sizing:border-box !important; display:grid !important; grid-template-columns: 58px minmax(0,1fr) !important; align-items:center !important; gap:18px !important; padding: 20px 24px !important; } body #como-funciona .steps-list article > div{ min-width:0 !important; } body #como-funciona .steps-list h3, body #como-funciona .steps-list p{ max-width:100% !important; } } /* ========================================================== FIM COMO FUNCIONA - LAYOUT DESKTOP SEGURO ========================================================== */ /* ========================================================== COMO FUNCIONA - TITULO SEM OVERLAP SOMENTE DESKTOP ========================================================== */ @media screen and (min-width:981px){ /* * Layout seguro: * esquerda nunca invade a direita. */ body #como-funciona .steps-layout{ grid-template-columns: minmax(0, 430px) minmax(0, 1fr) !important; } /* * Coluna da esquerda fica realmente limitada. */ body #como-funciona .steps-copy{ width:430px !important; max-width:430px !important; min-width:0 !important; box-sizing:border-box !important; } /* * TITULO * * Agora são duas linhas controladas. */ body #como-funciona .steps-copy .vm-cf-title{ display:block !important; width:100% !important; max-width:430px !important; margin: 12px 0 26px 0 !important; padding:0 !important; font-size: clamp(48px,3.6vw,56px) !important; line-height:.98 !important; letter-spacing: -1.7px !important; text-wrap:initial !important; white-space:normal !important; overflow:visible !important; } /* * Cada linha é controlada separadamente. */ body #como-funciona .steps-copy .vm-cf-title > span{ display:block !important; width:100% !important; white-space:nowrap !important; overflow:visible !important; } /* * Segunda linha ganha um pequeno respiro. */ body #como-funciona .steps-copy .vm-cf-title > span + span{ margin-top:4px !important; } /* * Texto abaixo nunca passa da coluna. */ body #como-funciona .steps-copy > p{ width:100% !important; max-width:420px !important; box-sizing:border-box !important; } /* * Botão também fica contido na coluna. */ body #como-funciona .steps-copy .text-link{ width:100% !important; max-width:400px !important; min-width:0 !important; box-sizing:border-box !important; } /* * Garante espaço real para os cards. */ body #como-funciona .steps-list{ min-width:0 !important; width:100% !important; } } /* ========================================================== FIM COMO FUNCIONA - TITULO SEM OVERLAP ========================================================== */ /* ========================================================== COMO FUNCIONA - GAP UNICO DESKTOP ESTE E O UNICO LOCAL PARA ALTERAR O GAP ========================================================== */ @media screen and (min-width:981px){ body #como-funciona .steps-layout{ /* * 981px -> ~72px * 1440px -> ~86px * 1920px -> ~115px * máximo -> 120px */ gap: clamp(72px, 6vw, 120px) !important; } } /* ========================================================== FIM COMO FUNCIONA - GAP UNICO DESKTOP ========================================================== */ /* ========================================================== COMO FUNCIONA - MOBILE 2X2 SOMENTE CELULAR ========================================================== */ @media screen and (max-width:720px){ /* * SECAO */ body #como-funciona{ overflow:hidden !important; } body #como-funciona .steps-layout{ display:block !important; width:min(94%, 520px) !important; margin-left:auto !important; margin-right:auto !important; min-height:0 !important; padding-left:0 !important; padding-right:0 !important; } /* ====================================================== TEXTO SUPERIOR ====================================================== */ body #como-funciona .steps-copy{ position:static !important; width:100% !important; max-width:none !important; min-width:0 !important; min-height:0 !important; height:auto !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; padding:0 !important; margin: 0 auto 34px auto !important; transform:none !important; opacity:1 !important; } body #como-funciona .steps-copy .kicker{ display:block !important; width:100% !important; margin: 0 auto 12px auto !important; text-align:center !important; } /* * TITULO */ body #como-funciona .steps-copy h2, body #como-funciona .steps-copy .vm-cf-title{ width:100% !important; max-width:420px !important; margin: 0 auto 18px auto !important; padding:0 !important; text-align:center !important; font-size: clamp(38px, 10vw, 48px) !important; line-height:.98 !important; letter-spacing: -1.7px !important; white-space:normal !important; text-wrap:balance !important; } /* * Caso o titulo esteja dividido em spans. */ body #como-funciona .steps-copy .vm-cf-title > span{ display:inline !important; width:auto !important; white-space:normal !important; margin:0 !important; } body #como-funciona .steps-copy .vm-cf-title > span + span::before{ content:" " !important; } /* * PARAGRAFO */ body #como-funciona .steps-copy > p{ width:100% !important; max-width:420px !important; margin: 0 auto !important; padding:0 !important; text-align:center !important; font-size:15px !important; line-height:1.65 !important; color:#cad6eb !important; } /* ====================================================== BOTAO ====================================================== */ body #como-funciona .steps-copy .text-link{ display:flex !important; width:min(100%, 420px) !important; min-width:0 !important; max-width:420px !important; min-height:58px !important; margin: 28px auto 0 auto !important; padding: 0 20px !important; align-items:center !important; justify-content:center !important; text-align:center !important; border-radius:20px !important; transform: translateY(0) scale(1) !important; transition: transform .34s cubic-bezier(.16,1,.3,1), border-color .34s ease, box-shadow .34s ease, filter .34s ease, background .34s ease !important; } /* * "HOVER" disparado pela rolagem. */ body #como-funciona .steps-copy .text-link.vm-mobile-scroll-hover{ transform: translateY(-4px) scale(1.018) !important; border-color: rgba(255,211,61,.72) !important; filter: brightness(1.09) saturate(1.08) !important; background: radial-gradient( circle at 20% 20%, rgba(255,211,61,.17), transparent 34% ), linear-gradient( 135deg, rgba(70,24,91,.98) 0%, rgba(32,40,133,.98) 54%, rgba(13,116,216,.96) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 18px 35px rgba(0,0,0,.30), 0 0 22px rgba(255,211,61,.16) !important; } /* ====================================================== CARDS 2 x 2 ====================================================== */ body #como-funciona .steps-list{ display:grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap:12px !important; width:100% !important; min-height:0 !important; margin:0 !important; padding:0 !important; align-content:normal !important; } body #como-funciona .steps-list article{ width:100% !important; min-width:0 !important; min-height:188px !important; height:100% !important; margin:0 !important; padding: 15px 14px 16px 14px !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; gap:0 !important; border-radius:20px !important; transform:none; box-sizing:border-box !important; overflow:hidden !important; } /* * NUMERO */ body #como-funciona .steps-list article > span{ width:46px !important; height:46px !important; min-width:46px !important; min-height:46px !important; margin: 0 0 13px 0 !important; border-radius:14px !important; font-size:16px !important; flex:none !important; } /* * CONTEUDO */ body #como-funciona .steps-list article > div{ width:100% !important; min-width:0 !important; display:block !important; text-align:left !important; } body #como-funciona .steps-list h3{ margin: 0 0 8px 0 !important; font-size:16px !important; line-height:1.18 !important; letter-spacing: -.25px !important; text-align:left !important; } body #como-funciona .steps-list p{ margin:0 !important; font-size:12px !important; line-height:1.45 !important; text-align:left !important; } } /* * Celulares menores: * mantém 2x2, mas compacta um pouco. */ @media screen and (max-width:430px){ body #como-funciona .steps-layout{ width:calc(100% - 18px) !important; } body #como-funciona .steps-list{ gap:9px !important; } body #como-funciona .steps-list article{ min-height:184px !important; padding: 14px 12px 15px 12px !important; border-radius:18px !important; } body #como-funciona .steps-list article > span{ width:43px !important; height:43px !important; min-width:43px !important; min-height:43px !important; margin-bottom:12px !important; } body #como-funciona .steps-list h3{ font-size:15px !important; } body #como-funciona .steps-list p{ font-size:11.5px !important; } } /* ========================================================== FIM COMO FUNCIONA - MOBILE 2X2 ========================================================== */ /* ========================================================== COMO FUNCIONA - BOTAO MOBILE MAIS COMPACTO ========================================================== */ @media screen and (max-width:720px){ body #como-funciona .steps-copy .text-link{ width:min(92%, 370px) !important; max-width:370px !important; min-height:52px !important; margin: 34px auto 28px auto !important; padding: 0 18px !important; border-radius: 18px !important; font-size: 16px !important; line-height: 1.2 !important; } } @media screen and (max-width:430px){ body #como-funciona .steps-copy .text-link{ width:88% !important; max-width:350px !important; min-height:50px !important; margin: 32px auto 26px auto !important; padding: 0 15px !important; font-size: 15px !important; } } /* ========================================================== FIM BOTAO MOBILE ========================================================== */ /* ========================================================== COMO FUNCIONA MOBILE SHINE BOTAO + CARDS SELECIONADOS ========================================================== */ @media screen and (max-width:720px){ /* ====================================================== BOTAO ====================================================== */ body #como-funciona .steps-copy .text-link{ position:relative !important; overflow:hidden !important; /* * cancela aquele efeito antigo de aumentar * conforme o scroll */ transform:none !important; filter:none !important; } /* * Faixa luminosa que atravessa o botão. */ body #como-funciona .steps-copy .text-link::before{ content:"" !important; display:block !important; position:absolute !important; top:-45% !important; left:-48% !important; width:24% !important; height:190% !important; z-index:2 !important; pointer-events:none !important; opacity:0; background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,.05) 18%, rgba(255,255,255,.38) 50%, rgba(255,211,61,.20) 68%, transparent 100% ) !important; filter: blur(3px) !important; transform: skewX(-18deg) translateX(0); } /* * Classe adicionada UMA VEZ pelo JS. */ body #como-funciona .steps-copy .text-link.vm-cf-shine-once::before{ animation: vmCfMobileShine 1.15s cubic-bezier(.2,.7,.2,1) 1 forwards !important; } @keyframes vmCfMobileShine{ 0%{ left:-48%; opacity:0; } 15%{ opacity:.92; } 72%{ opacity:.78; } 100%{ left:128%; opacity:0; } } /* ====================================================== CARDS 1-4 ====================================================== */ body #como-funciona .steps-list article{ opacity:1 !important; filter: brightness(1) saturate(1) !important; transform:none !important; border-color: rgba(255,255,255,.16) !important; transition: opacity .42s ease, filter .42s ease, border-color .42s ease, box-shadow .42s ease, background .42s ease, transform .42s cubic-bezier(.16,1,.3,1) !important; } /* * Quando a animação está ativa, * os que NÃO estão selecionados ficam apagados. */ body #como-funciona.vm-cf-mobile-selecting .steps-list article:not(.vm-cf-mobile-selected){ opacity:.47 !important; filter: brightness(.62) saturate(.65) !important; border-color: rgba(255,255,255,.07) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 7px 18px rgba(0,0,0,.10) !important; } /* * CARD ATIVO */ body #como-funciona .steps-list article.vm-cf-mobile-selected{ position:relative !important; z-index:5 !important; opacity:1 !important; filter: brightness(1.05) saturate(1.05) !important; transform: translateY(-2px) scale(1.015) !important; border-color: rgba(255,211,61,.76) !important; background: radial-gradient( circle at 12% 8%, rgba(255,211,61,.10), transparent 34% ), linear-gradient( 135deg, rgba(255,255,255,.15), rgba(255,255,255,.075) ) !important; box-shadow: 0 0 0 1px rgba(255,211,61,.09), 0 0 20px rgba(255,211,61,.08), 0 17px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12) !important; } /* * Número do card selecionado. */ body #como-funciona .steps-list article.vm-cf-mobile-selected > span{ border-color: rgba(255,211,61,.58) !important; color: #ffe45f !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(0,0,0,.20), 0 0 13px rgba(255,211,61,.09) !important; } /* * Pequena luz passando na borda do card quando seleciona. */ body #como-funciona .steps-list article.vm-cf-mobile-selected::after{ content:""; position:absolute; top:-1px; left:-35%; width:28%; height:2px; pointer-events:none; border-radius:999px; background: linear-gradient( 90deg, transparent, #ffd33d, #fff4ad, transparent ); box-shadow: 0 0 8px rgba(255,211,61,.48); animation: vmCfMobileCardLight .85s cubic-bezier(.16,1,.3,1) 1; } @keyframes vmCfMobileCardLight{ from{ left:-35%; opacity:.15; } 18%{ opacity:1; } to{ left:108%; opacity:0; } } } /* ========================================================== FIM COMO FUNCIONA MOBILE ========================================================== */ /* ========================================================== COMO FUNCIONA - SHINE MOBILE VISIVEL SOMENTE BOTAO ========================================================== */ @media screen and (max-width:720px){ body #como-funciona .steps-copy .text-link{ position:relative !important; overflow:hidden !important; isolation:isolate !important; } /* * Desliga apenas o ::before antigo do botão. * O novo brilho será um elemento real. */ body #como-funciona .steps-copy .text-link::before{ content:none !important; display:none !important; animation:none !important; } body #como-funciona .steps-copy .text-link .vm-mobile-shine-layer{ position:absolute !important; top:-55% !important; left:-42% !important; width:34% !important; height:210% !important; z-index:5 !important; pointer-events:none !important; opacity:0; border-radius:50% !important; background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,.04) 8%, rgba(255,255,255,.42) 38%, rgba(255,246,174,.70) 50%, rgba(255,255,255,.38) 63%, transparent 100% ) !important; filter: blur(4px) !important; transform: translate3d(0,0,0) skewX(-18deg); box-shadow: 0 0 24px rgba(255,255,255,.16); will-change: transform, opacity; } } /* ========================================================== FIM SHINE MOBILE VISIVEL ========================================================== */ /* ===== PAINEL MOCK DESKTOP FINAL ===== */ body #painel .mock-sidebar{ background: linear-gradient(180deg, #17306d 0%, #0b4faa 100%) !important; padding: 18px 13px !important; display: flex !important; align-items: center !important; flex-direction: column !important; gap: 16px !important; } body #painel .mock-logo{ width: 42px !important; height: 42px !important; border-radius: 13px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(135deg, rgba(250,204,21,.96), rgba(245,158,11,.96)) !important; box-shadow: 0 10px 22px rgba(245,158,11,.24) !important; overflow: hidden !important; } body #painel .mock-logo-img{ width: 28px !important; height: 28px !important; object-fit: contain !important; display: block !important; filter: drop-shadow(0 1px 1px rgba(0,0,0,.12)) !important; } body #painel .mock-sidebar i{ width: 35px !important; height: 9px !important; border-radius: 999px !important; background: rgba(255,255,255,.17) !important; } body #painel .mock-sidebar i:nth-of-type(2){ background: rgba(250,204,21,.68) !important; } body #painel .mock-main{ background: linear-gradient(180deg, #f6f8fc 0%, #eef3fb 100%) !important; padding: 18px !important; } body #painel .mock-top{ display: flex !important; justify-content: space-between !important; align-items: center !important; color: #0f172a !important; font-size: 12px !important; margin-bottom: 20px !important; } body #painel .mock-top span{ color: #64748b !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; padding: 6px 10px !important; border-radius: 999px !important; font-size: 8px !important; font-weight: 800 !important; } body #painel .mock-cards{ display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 10px !important; } body #painel .mock-cards > div{ background: rgba(255,255,255,.98) !important; border: 1px solid #e4e8ef !important; border-radius: 16px !important; padding: 13px !important; box-shadow: 0 8px 20px rgba(15,23,42,.05) !important; } body #painel .chart-box{ position: relative !important; overflow: hidden !important; background: rgba(255,255,255,.98) !important; border: 1px solid #e4e8ef !important; border-radius: 18px !important; margin-top: 12px !important; padding: 15px !important; box-shadow: 0 8px 20px rgba(15,23,42,.05) !important; } body #painel .chart-box::after{ content: "" !important; position: absolute !important; top: 24px !important; left: -26% !important; width: 34% !important; height: 74% !important; pointer-events: none !important; background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 34%, rgba(255,255,255,.30) 50%, rgba(255,255,255,0) 100% ) !important; filter: blur(14px) !important; animation: vmPainelSweep 4.6s linear infinite !important; opacity: .55 !important; } body #painel .bars{ height: 185px !important; display: flex !important; align-items: flex-end !important; gap: 8px !important; padding-top: 15px !important; } body #painel .bars i{ flex: 1 !important; display: block !important; height: var(--bar-h) !important; border-radius: 7px 7px 2px 2px !important; background: linear-gradient(180deg, #7c3aed 0%, #2f6df6 100%) !important; box-shadow: 0 10px 22px rgba(47,109,246,.20) !important; transform-origin: center bottom !important; animation: vmPainelBarPulse 2.8s ease-in-out infinite !important; will-change: transform, filter !important; } body #painel .bars i:nth-child(1){ animation-delay: .00s !important; } body #painel .bars i:nth-child(2){ animation-delay: .14s !important; } body #painel .bars i:nth-child(3){ animation-delay: .28s !important; } body #painel .bars i:nth-child(4){ animation-delay: .42s !important; } body #painel .bars i:nth-child(5){ animation-delay: .56s !important; } body #painel .bars i:nth-child(6){ animation-delay: .70s !important; } body #painel .bars i:nth-child(7){ animation-delay: .84s !important; } body #painel .bars i:nth-child(8){ animation-delay: .98s !important; } body #painel .bars i:nth-child(9){ animation-delay: 1.12s !important; } body #painel .bars i:nth-child(10){ animation-delay: 1.26s !important; } @keyframes vmPainelBarPulse{ 0%,100%{ transform: scaleY(.82); filter: brightness(.98); } 50%{ transform: scaleY(1.03); filter: brightness(1.1); } } @keyframes vmPainelSweep{ 0%{ transform: translateX(0); } 100%{ transform: translateX(360%); } } /* no celular essa imagem some */ @media screen and (max-width: 720px){ body #painel .panel-grid{ grid-template-columns: 1fr !important; gap: 0 !important; } body #painel .panel-copy{ max-width: 760px !important; margin: 0 auto !important; text-align: center !important; } body #painel .panel-copy ul{ margin: 24px auto 0 !important; max-width: 680px !important; } body #painel .panel-copy li{ text-align: left !important; } } /* ===== FIM PAINEL MOCK DESKTOP FINAL ===== */ /* ===== MOCK PAINEL ANIMADO FINAL VM ===== */ /* desktop */ @media screen and (min-width: 721px){ body #painel .mock-sidebar{ background: linear-gradient( 180deg, #16347b 0%, #1454b7 100% ) !important; padding:18px 13px !important; display:flex !important; align-items:center !important; flex-direction:column !important; gap:16px !important; } body #painel .mock-logo{ width:42px !important; height:42px !important; border-radius:13px !important; display:flex !important; align-items:center !important; justify-content:center !important; background: linear-gradient( 135deg, #ffd84f 0%, #e7ac00 100% ) !important; box-shadow: 0 10px 22px rgba(245,158,11,.24) !important; overflow:hidden !important; } body #painel .mock-logo-img{ width:28px !important; height:28px !important; object-fit:contain !important; display:block !important; filter: drop-shadow(0 1px 1px rgba(0,0,0,.14)) !important; } body #painel .mock-sidebar i{ position:relative !important; overflow:hidden !important; width:35px !important; height:9px !important; border-radius:999px !important; background: rgba(255,255,255,.16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important; animation: vmPanelSideIdle 2.8s ease-in-out infinite !important; } body #painel .mock-sidebar i::after{ content:"" !important; position:absolute !important; top:0 !important; left:-120% !important; width:60% !important; height:100% !important; background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 100% ) !important; animation: vmPanelSidebarShine 3.6s linear infinite !important; opacity:.6 !important; } body #painel .mock-sidebar i:nth-of-type(2){ background: linear-gradient( 90deg, rgba(250,204,21,.88), rgba(229,176,19,.72) ) !important; box-shadow: 0 0 0 1px rgba(250,204,21,.14), 0 0 14px rgba(250,204,21,.18) !important; animation: vmPanelSideActive 1.9s ease-in-out infinite !important; } body #painel .mock-sidebar i:nth-of-type(1){ animation-delay:.10s !important; } body #painel .mock-sidebar i:nth-of-type(3){ animation-delay:.35s !important; } body #painel .mock-sidebar i:nth-of-type(4){ animation-delay:.55s !important; } body #painel .mock-sidebar i:nth-of-type(5){ animation-delay:.75s !important; } body #painel .mock-main{ background: linear-gradient( 180deg, #f4f7fc 0%, #edf3fb 100% ) !important; padding:18px !important; } body #painel .mock-top{ display:flex !important; justify-content:space-between !important; align-items:center !important; color:#0f172a !important; font-size:12px !important; margin-bottom:20px !important; } body #painel .mock-top b{ color:#334155 !important; font-weight:900 !important; } body #painel .mock-live-pill{ position:relative !important; color:#718096 !important; background: linear-gradient( 180deg, rgba(255,255,255,.92) 0%, rgba(242,246,252,.92) 100% ) !important; border:1px solid #dce3ee !important; padding:7px 12px 7px 24px !important; border-radius:999px !important; font-size:8px !important; font-weight:850 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 8px 16px rgba(15,23,42,.05) !important; } body #painel .mock-live-pill::before{ content:"" !important; position:absolute !important; left:10px !important; top:50% !important; width:7px !important; height:7px !important; border-radius:50% !important; background:#22c55e !important; transform:translateY(-50%) !important; box-shadow: 0 0 0 0 rgba(34,197,94,.28) !important; animation: vmPanelLivePulse 1.9s ease-in-out infinite !important; } body #painel .mock-cards{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:10px !important; } body #painel .mock-cards > div{ background: linear-gradient( 180deg, rgba(255,255,255,.96) 0%, rgba(247,250,255,.96) 100% ) !important; border:1px solid #e1e7f0 !important; border-radius:16px !important; padding:13px !important; box-shadow: 0 8px 20px rgba(15,23,42,.05) !important; } body #painel .mock-cards small{ display:block !important; color:#8b9ab1 !important; font-size:7px !important; font-weight:950 !important; letter-spacing:.04em !important; } body #painel .mock-cards em{ display:block !important; font-style:normal !important; color:#22a85a !important; font-size:7px !important; margin-top:5px !important; font-weight:850 !important; } body #painel .mock-dots, body #painel .mock-rate{ display:inline-flex !important; align-items:center !important; gap:5px !important; min-height:28px !important; margin-top:8px !important; } body #painel .mock-dots i, body #painel .mock-rate i{ width:8px !important; height:8px !important; border-radius:50% !important; display:block !important; background:#0f172a !important; opacity:.22 !important; transform:translateY(0) scale(.92) !important; animation: vmPanelDotWave 1.1s ease-in-out infinite !important; } body #painel .mock-dots i:nth-child(1), body #painel .mock-rate i:nth-child(1){ animation-delay:0s !important; } body #painel .mock-dots i:nth-child(2), body #painel .mock-rate i:nth-child(2){ animation-delay:.15s !important; } body #painel .mock-dots i:nth-child(3){ animation-delay:.30s !important; } body #painel .mock-dots i:nth-child(4){ animation-delay:.45s !important; } body #painel .mock-rate span{ display:inline-block !important; font-size:22px !important; line-height:1 !important; font-weight:950 !important; color:#0f172a !important; margin-left:2px !important; transform:translateY(1px) !important; } body #painel .chart-box{ position:relative !important; overflow:hidden !important; background: linear-gradient( 180deg, rgba(255,255,255,.97) 0%, rgba(247,250,255,.97) 100% ) !important; border:1px solid #e1e7f0 !important; border-radius:18px !important; margin-top:12px !important; padding:15px !important; box-shadow: 0 8px 20px rgba(15,23,42,.05) !important; } body #painel .chart-box::after{ content:"" !important; position:absolute !important; top:18px !important; left:-26% !important; width:34% !important; height:72% !important; pointer-events:none !important; background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 30%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 100% ) !important; filter:blur(14px) !important; animation: vmPanelSweep 4.8s linear infinite !important; opacity:.55 !important; } body #painel .chart-title{ font-size:10px !important; font-weight:900 !important; color:#334155 !important; } body #painel .bars{ height:185px !important; display:flex !important; align-items:flex-end !important; gap:8px !important; padding-top:15px !important; } body #painel .bars i{ flex:1 !important; display:block !important; height:var(--bar-h) !important; border-radius:7px 7px 2px 2px !important; background: linear-gradient( 180deg, #7c3aed 0%, #396ef5 100% ) !important; box-shadow: 0 10px 22px rgba(57,110,245,.18) !important; transform-origin:center bottom !important; animation: vmPanelBarPulse 2.7s ease-in-out infinite !important; } body #painel .bars i:nth-child(1){ animation-delay:.00s !important; } body #painel .bars i:nth-child(2){ animation-delay:.12s !important; } body #painel .bars i:nth-child(3){ animation-delay:.24s !important; } body #painel .bars i:nth-child(4){ animation-delay:.36s !important; } body #painel .bars i:nth-child(5){ animation-delay:.48s !important; } body #painel .bars i:nth-child(6){ animation-delay:.60s !important; } body #painel .bars i:nth-child(7){ animation-delay:.72s !important; } body #painel .bars i:nth-child(8){ animation-delay:.84s !important; } body #painel .bars i:nth-child(9){ animation-delay:.96s !important; } body #painel .bars i:nth-child(10){ animation-delay:1.08s !important; } @keyframes vmPanelSidebarShine{ 0%{ left:-120%; } 100%{ left:160%; } } @keyframes vmPanelSideIdle{ 0%,100%{ opacity:.62; transform:scaleX(1); } 50%{ opacity:.9; transform:scaleX(1.03); } } @keyframes vmPanelSideActive{ 0%,100%{ opacity:.92; transform:scaleX(1); box-shadow: 0 0 0 1px rgba(250,204,21,.14), 0 0 10px rgba(250,204,21,.16); } 50%{ opacity:1; transform:scaleX(1.06); box-shadow: 0 0 0 1px rgba(250,204,21,.16), 0 0 18px rgba(250,204,21,.24); } } @keyframes vmPanelLivePulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.30); opacity:.9; } 70%{ box-shadow:0 0 0 7px rgba(34,197,94,0); opacity:1; } 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); opacity:.9; } } @keyframes vmPanelDotWave{ 0%,100%{ opacity:.22; transform:translateY(0) scale(.92); } 50%{ opacity:1; transform:translateY(-1px) scale(1.05); } } @keyframes vmPanelBarPulse{ 0%,100%{ transform:scaleY(.84); filter:brightness(.98); } 50%{ transform:scaleY(1.04); filter:brightness(1.1); } } @keyframes vmPanelSweep{ 0%{ transform:translateX(0); } 100%{ transform:translateX(360%); } } } /* celular = imagem some */ @media screen and (max-width: 720px){ } /* ===== FIM MOCK PAINEL ANIMADO FINAL VM ===== */ /* ========================================================== PAINEL MOCK - CORES VOTEMAIS inspirado no mock principal do topo SOMENTE DESKTOP ========================================================== */ @media screen and (min-width:721px){ /* * CASCA PRINCIPAL */ /* * MENU LATERAL */ body #painel .mock-sidebar{ background: linear-gradient( 180deg, #321044 0%, #192260 48%, #0b58b5 100% ) !important; border-right: 1px solid rgba(255,255,255,.08) !important; } /* * LOGO */ body #painel .mock-logo{ background: linear-gradient( 145deg, #3b174f 0%, #20246e 56%, #0d74d8 100% ) !important; border: 1px solid rgba(255,211,61,.50) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 18px rgba(0,0,0,.22), 0 0 16px rgba(255,211,61,.10) !important; } /* * FUNDO PRINCIPAL: * REMOVE O BRANCO */ body #painel .mock-main{ background: radial-gradient( circle at 92% 8%, rgba(73,175,255,.12), transparent 32% ), linear-gradient( 135deg, rgba(53,15,70,.96) 0%, rgba(18,28,88,.98) 52%, rgba(9,100,195,.90) 100% ) !important; } /* * CABEÇALHO */ body #painel .mock-top{ color:#eef5ff !important; } body #painel .mock-top b{ color:#ffffff !important; } /* * EVENTO DEMONSTRATIVO */ body #painel .mock-live-pill{ color:#dce8ff !important; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(187,247,208,.55) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 7px 18px rgba(0,0,0,.14) !important; } /* * CARDS DO TOPO */ body #painel .mock-cards > div{ background: linear-gradient( 145deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.07) 100% ) !important; border: 1px solid rgba(255,255,255,.16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 22px rgba(0,0,0,.14) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } body #painel .mock-cards small{ color:#aebfe0 !important; } body #painel .mock-cards em{ color:#4ade80 !important; } /* * PONTOS */ body #painel .mock-dots i, body #painel .mock-rate i{ background:#eef5ff !important; } body #painel .mock-rate span{ color:#ffffff !important; } /* * GRAFICO */ body #painel .chart-box{ background: linear-gradient( 145deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.055) 100% ) !important; border: 1px solid rgba(255,255,255,.15) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.16) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } body #painel .chart-title{ color:#eef5ff !important; } /* * BARRAS: * mesmas cores da identidade do topo */ body #painel .bars i{ background: linear-gradient( 180deg, #7c3aed 0%, #3d5ff0 48%, #0d74d8 100% ) !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: 0 8px 18px rgba(13,116,216,.20), 0 0 12px rgba(124,58,237,.10) !important; } /* * Segunda barra ganha pequeno detalhe dourado * igual ao menu do mock principal. */ body #painel .mock-sidebar i:nth-of-type(2){ background: linear-gradient( 90deg, #ffd33d, #d9ab18 ) !important; box-shadow: 0 0 10px rgba(255,211,61,.24) !important; } /* * mantém as demais barras laterais dentro da paleta */ body #painel .mock-sidebar i:not(:nth-of-type(2)){ background: rgba(73,175,255,.24) !important; } } /* * MOBILE CONTINUA SEM O MOCK */ @media screen and (max-width:720px){ } /* ========================================================== FIM PAINEL MOCK - CORES VOTEMAIS ========================================================== */ /* ===== MOCK PAINEL REFORCO FINAL VM ===== */ @media screen and (min-width:721px){ body #painel .mock-sidebar{ background: linear-gradient( 180deg, rgba(44,16,73,.96) 0%, rgba(22,34,100,.96) 48%, rgba(12,95,190,.96) 100% ) !important; border-right:1px solid rgba(255,255,255,.08) !important; } body #painel .mock-main{ background: radial-gradient( circle at 15% 15%, rgba(166,74,255,.10) 0%, transparent 30% ), radial-gradient( circle at 85% 80%, rgba(40,170,255,.10) 0%, transparent 30% ), linear-gradient( 135deg, rgba(53,15,70,.88) 0%, rgba(18,28,88,.92) 50%, rgba(9,100,195,.88) 100% ) !important; } body #painel .mock-top{ color:#eef4ff !important; } body #painel .mock-top b{ color:#ffffff !important; } body #painel .mock-live-pill{ color:#eef5ff !important; background: linear-gradient( 180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.10) 100% ) !important; border:1px solid rgba(187,247,208,.65) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px rgba(0,0,0,.18) !important; } body #painel .mock-live-pill::before{ background:#22c55e !important; box-shadow:0 0 0 0 rgba(34,197,94,.25) !important; animation: vmPanelLivePulseStrong 1.9s ease-in-out infinite !important; } body #painel .mock-cards > div{ background: linear-gradient( 145deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.07) 100% ) !important; border:1px solid rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 24px rgba(0,0,0,.18) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } body #painel .mock-cards small{ color:#b8c7df !important; } body #painel .mock-cards em{ color:#4ade80 !important; font-weight:850 !important; } body #painel .mock-dots, body #painel .mock-rate{ display:inline-flex !important; align-items:center !important; gap:6px !important; min-height:30px !important; margin-top:10px !important; } body #painel .mock-dots i, body #painel .mock-rate i{ display:block !important; width:9px !important; height:9px !important; border-radius:50% !important; background:#e7edf8 !important; opacity:.18 !important; transform:translateY(0) scale(.88) !important; box-shadow: 0 0 0 rgba(255,255,255,0) !important; animation: vmPanelDotsStrong 1.2s ease-in-out infinite !important; } body #painel .mock-dots i:nth-child(1), body #painel .mock-rate i:nth-child(1){ animation-delay:0s !important; } body #painel .mock-dots i:nth-child(2), body #painel .mock-rate i:nth-child(2){ animation-delay:.16s !important; } body #painel .mock-dots i:nth-child(3){ animation-delay:.32s !important; } body #painel .mock-dots i:nth-child(4){ animation-delay:.48s !important; } body #painel .mock-rate span{ color:#ffffff !important; font-size:24px !important; font-weight:950 !important; line-height:1 !important; margin-left:2px !important; } body #painel .chart-box{ background: linear-gradient( 145deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 100% ) !important; border:1px solid rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.20) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } body #painel .chart-title{ color:#eef5ff !important; } body #painel .bars i{ background: linear-gradient( 180deg, #8b45ff 0%, #5a63ff 38%, #2b87ff 100% ) !important; border:1px solid rgba(255,255,255,.08) !important; box-shadow: 0 10px 22px rgba(43,135,255,.18), 0 0 18px rgba(139,69,255,.12) !important; } @keyframes vmPanelDotsStrong{ 0%,100%{ opacity:.18; transform:translateY(0) scale(.88); box-shadow:0 0 0 rgba(255,255,255,0); } 50%{ opacity:1; transform:translateY(-2px) scale(1.08); box-shadow:0 0 10px rgba(255,255,255,.25); } } @keyframes vmPanelLivePulseStrong{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.30); opacity:.9; } 70%{ box-shadow:0 0 0 8px rgba(34,197,94,0); opacity:1; } 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); opacity:.9; } } } @media screen and (max-width:720px){ } /* ===== FIM MOCK PAINEL REFORCO FINAL VM ===== */ /* ===== MOCK DOTS ONDA VM ===== */ @media screen and (min-width:721px){ body #painel .mock-dots, body #painel .mock-rate{ display:inline-flex !important; align-items:center !important; gap:7px !important; min-height:18px !important; } body #painel .mock-dots i, body #painel .mock-rate i{ display:block !important; width:9px !important; height:9px !important; border-radius:50% !important; background:rgba(233,240,255,.34) !important; opacity:.28 !important; transform:translateY(0) scale(.90) !important; box-shadow:0 0 0 rgba(120,180,255,0) !important; animation: vmMockDotsWave 1.1s ease-in-out infinite !important; will-change: transform, opacity, box-shadow, background !important; } body #painel .mock-dots i:nth-child(1), body #painel .mock-rate i:nth-child(1){ animation-delay:0s !important; } body #painel .mock-dots i:nth-child(2), body #painel .mock-rate i:nth-child(2){ animation-delay:.14s !important; } body #painel .mock-dots i:nth-child(3){ animation-delay:.28s !important; } body #painel .mock-dots i:nth-child(4){ animation-delay:.42s !important; } body #painel .mock-rate span{ margin-left:4px !important; color:#ffffff !important; font-weight:950 !important; } @keyframes vmMockDotsWave{ 0%{ opacity:.24; transform:translateY(0) scale(.88); background:rgba(226,235,255,.26); box-shadow:0 0 0 rgba(74,144,255,0); } 25%{ opacity:.50; transform:translateY(-2px) scale(.96); background:rgba(214,228,255,.55); box-shadow:0 0 8px rgba(74,144,255,.10); } 50%{ opacity:1; transform:translateY(-5px) scale(1.10); background:#f3f7ff; box-shadow: 0 0 12px rgba(84,163,255,.22), 0 0 22px rgba(155,94,255,.12); } 75%{ opacity:.52; transform:translateY(-2px) scale(.98); background:rgba(214,228,255,.60); box-shadow:0 0 8px rgba(74,144,255,.10); } 100%{ opacity:.24; transform:translateY(0) scale(.88); background:rgba(226,235,255,.26); box-shadow:0 0 0 rgba(74,144,255,0); } } } /* ===== FIM MOCK DOTS ONDA VM ===== */ /* ========================================================== MOCK DOTS - CONTROLE EXCLUSIVO PELO JAVASCRIPT ========================================================== */ @media screen and (min-width:721px){ body #painel .mock-dots i, body #painel .mock-rate i{ display:block !important; width:9px !important; height:9px !important; flex:0 0 9px !important; border-radius:50% !important; /* * JS controla animação. */ animation:none !important; transition:none !important; transform:translate3d(0,0,0) scale(.9) !important; background: rgba(220,230,255,.30) !important; opacity:.30 !important; will-change: transform, opacity, background, box-shadow !important; } body #painel .mock-dots, body #painel .mock-rate{ display:inline-flex !important; align-items:center !important; gap:7px !important; } } /* ========================================================== FIM MOCK DOTS JS ========================================================== */ /* ========================================================== PAINEL - BEFORE LIMPO + DOTS MAIS LENTOS ========================================================== */ /* ========================================================== FIM PAINEL - BEFORE LIMPO + DOTS MAIS LENTOS ========================================================== */ /* ========================================================== PANEL MOCK BEFORE - UNICO ========================================================== */ @media screen and (min-width: 721px) { } /* ========================================================== FIM PANEL MOCK BEFORE - UNICO ========================================================== */ /* ========================================================== PAINEL MOCK - CONFIGURACAO FINAL UNICA ========================================================== */ @media screen and (min-width: 721px) { body #painel .panel-mock { background: linear-gradient( 135deg, #081427 0%, #0b1c40 46%, #0e58b7 100% ) !important; border: 1px solid rgba(255, 211, 61, .24) !important; box-shadow: 0 32px 72px rgb(0 0 0 / 73%), 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 0 30px rgba(14, 88, 183, .15) !important; position: relative !important; overflow: hidden !important; } body #painel .panel-mock::before { content: "" !important; position: absolute !important; inset: 14px !important; border-radius: 24px !important; pointer-events: none !important; /* border: 1px solid rgba(255, 255, 255, .04) !important; */ /* box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02), inset 0 25px 70px rgba(255, 255, 255, .02) !important; */ opacity: .9 !important; } } /* ========================================================== FIM PAINEL MOCK - CONFIGURACAO FINAL UNICA ========================================================== */ /* ========================================================== MOCK LIVE PILL = MESMO VISUAL DO LIVE-DOT ========================================================== */ @media screen and (min-width:721px){ body #painel .mock-live-pill{ display:inline-flex !important; align-items:center !important; gap:7px !important; font-size:7px !important; color:#dce8ff !important; background: rgba(255,255,255,.08) !important; border: 1px solid #bbf7d0 !important; padding: 6px 8px !important; border-radius: 999px !important; font-weight: 900 !important; box-shadow:none !important; } body #painel .mock-live-pill::before{ content:"" !important; width:7px !important; height:7px !important; flex: 0 0 7px !important; border-radius: 50% !important; background: #22c55e !important; box-shadow: 0 0 0 3px rgba(34,197,94,.16) !important; position:static !important; transform:none !important; animation: vmMockLiveSoft 1.9s ease-in-out infinite !important; } @keyframes vmMockLiveSoft{ 0%,100%{ opacity:.75; box-shadow: 0 0 0 3px rgba(34,197,94,.12); } 50%{ opacity:1; box-shadow: 0 0 0 4px rgba(34,197,94,.20), 0 0 9px rgba(34,197,94,.32); } } } /* ========================================================== FIM MOCK LIVE PILL ========================================================== */ /* ========================================================== MOCK TOP SPAN - VISUAL EXATO ========================================================== */ @media screen and (min-width:721px){ body #painel .mock-top span{ color:#dce8ff !important; background: rgba(255,255,255,.08) !important; border: 1px solid #e2e8f0 !important; padding: 6px 10px !important; border-radius: 999px !important; font-size: 8px !important; font-weight: 800 !important; box-shadow: none !important; } body #painel .mock-top span::before{ content:none !important; display:none !important; animation:none !important; } } /* ========================================================== FIM MOCK TOP SPAN ========================================================== */ /* ========================================================== VM PAINEL CARROSSEL VERTICAL - VERSAO LIMPA ========================================================== */ @media screen and (min-width:721px){ body #painel .panel-copy ul.vm-panel-carousel{ position:relative !important; display:block !important; height:310px !important; margin:30px 42px 0 0 !important; overflow:visible !important; perspective:1000px !important; isolation:isolate !important; } /* * Base dos quatro cards. */ body #painel .panel-copy ul.vm-panel-carousel > li { position: absolute !important; left: 0 !important; right: 0 !important; top: 50% !important; width: 100% !important; min-height: 86px !important; margin: 0 !important; padding: 18px 20px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 5px !important; border-radius: 18px !important; background: linear-gradient( 110deg, rgba(255,255,255,.105), rgba(255,255,255,.075) ) !important; border: 1px solid rgba(255,255,255,.17) !important; box-shadow: 0 14px 32px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.05) !important; transform-origin: center center !important; transition: transform .55s cubic-bezier(.22,.78,.25,1), opacity .48s ease, filter .48s ease, border-color .48s ease, background .48s ease, box-shadow .48s ease !important; /* will-change: transform, opacity, filter !important; */ pointer-events: none !important; } /* * CARD NA FRENTE * * IMPORTANTE: * nenhum blur aqui. */ body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-current{ z-index:30 !important; opacity:1 !important; filter:none !important; transform: translateY(-50%) translateZ(60px) scale(1) !important; border: 1px solid rgba(255,211,61,.52) !important; background: linear-gradient( 110deg, rgba(255,255,255,.16), rgba(73,175,255,.11) ) !important; box-shadow: 0 20px 45px rgba(0,0,0,.28), 0 0 0 1px rgba(255,211,61,.06) inset, 0 0 24px rgba(255,211,61,.07) !important; pointer-events:auto !important; visibility:visible !important; } /* * CARD ANTERIOR */ body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-prev { z-index: 20 !important; opacity: .53 !important; filter: blur(.25px) brightness(.76) !important; transform: translateY(calc(-50% - 92px)) translateZ(-70px) scale(.91) !important; visibility: visible !important; } /* * PRÓXIMO CARD */ body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-next{ z-index:20 !important; opacity:.53 !important; filter: blur(.25px) brightness(.76) !important; transform: translateY(calc(-50% + 92px)) translateZ(-70px) scale(.91) !important; visibility:visible !important; } /* * ACIMA FORA DA ÁREA */ body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-hidden-up{ z-index:1 !important; opacity:0 !important; filter: blur(3px) brightness(.48) !important; transform: translateY(calc(-50% - 155px)) translateZ(-150px) scale(.82) !important; visibility:hidden !important; } /* * ABAIXO FORA DA ÁREA */ body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-hidden-down{ z-index:1 !important; opacity:0 !important; filter: blur(3px) brightness(.48) !important; transform: translateY(calc(-50% + 155px)) translateZ(-150px) scale(.82) !important; visibility:hidden !important; } /* * TEXTO */ body #painel .panel-copy ul.vm-panel-carousel > li b{ color:rgba(238,245,255,.82) !important; font-size:14px !important; } body #painel .panel-copy ul.vm-panel-carousel > li span{ color:rgba(191,208,232,.72) !important; font-size:12px !important; line-height:1.5 !important; } body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-current b{ color:#ffffff !important; } body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-current span{ color:#dce8ff !important; } /* * BARRA AMARELA DO CARD ATUAL */ body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-current::before{ content:"" !important; position:absolute !important; left:-1px !important; top:20px !important; bottom:20px !important; width:3px !important; border-radius: 0 999px 999px 0 !important; background: linear-gradient( 180deg, #ffe66a, #ffc62a ) !important; box-shadow: 0 0 12px rgba(255,211,61,.28) !important; } /* * INDICADOR LATERAL */ body #painel .vm-panel-carousel-indicator{ position:absolute !important; right:-31px !important; top:50% !important; transform: translateY(-50%) !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:12px !important; z-index:60 !important; padding:8px 6px !important; } body #painel .vm-panel-carousel-indicator::before{ content:"" !important; position:absolute !important; left:50% !important; top:15px !important; bottom:15px !important; width:2px !important; transform: translateX(-50%) !important; border-radius:999px !important; background: rgba(73,175,255,.25) !important; } body #painel .vm-panel-carousel-dot{ appearance:none !important; -webkit-appearance:none !important; position:relative !important; z-index:2 !important; width:9px !important; height:9px !important; padding:0 !important; border-radius:50% !important; border: 1px solid rgba(73,175,255,.56) !important; background: #14245f !important; box-shadow: 0 0 0 3px rgba(18,28,88,.75) !important; cursor:pointer !important; transition: transform .3s ease, background .3s ease, box-shadow .3s ease !important; } body #painel .vm-panel-carousel-dot.is-active{ transform: scale(1.35) !important; background: #ffd33d !important; border-color: #ffe781 !important; box-shadow: 0 0 0 4px rgba(255,211,61,.12), 0 0 14px rgba(255,211,61,.38) !important; } } /* * CELULAR NÃO RECEBE O CARROSSEL. */ @media screen and (max-width:720px){ body #painel .vm-panel-carousel-indicator{ display:none !important; } } /* ========================================================== FIM VM PAINEL CARROSSEL VERTICAL - VERSAO LIMPA ========================================================== */ /* ===== VM PAINEL POSICOES EXATAS ===== */ @media screen and (min-width:721px){ /* * SEÇÃO PAINEL * equivalente ao que você testou no element.style */ body section#painel.section.light { padding-top:25px !important; /* padding-bottom:25px !important; */ } /* * ÁREA DOS CARDS */ body #painel .panel-copy ul.vm-panel-carousel{ position:relative !important; display:block !important; height:310px !important; margin: 0px 42px 0 0 !important; overflow:visible !important; perspective:1000px !important; isolation:isolate !important; } /* * MARCADOR LATERAL */ body #painel .vm-panel-carousel-indicator{ position:absolute !important; right:-31px !important; top:50% !important; transform: translateY(-50%) !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:12px !important; z-index:60 !important; padding: 8px 0px !important; } } /* ===== FIM VM PAINEL POSICOES EXATAS ===== */ /* ===== COMO FUNCIONA PADDING ZERO ===== */ @media screen and (min-width:981px){ body #como-funciona{ overflow:clip !important; padding-top:0px !important; padding-bottom:0px !important; } } /* ===== FIM COMO FUNCIONA PADDING ZERO ===== */ /* ===== PAINEL MOBILE SEM MOCK ===== */ @media screen and (max-width:720px){ body #painel .panel-mock{ display:none !important; } body #painel .panel-grid{ grid-template-columns:1fr !important; gap:0 !important; } body #painel .panel-copy{ width:100% !important; max-width:100% !important; margin:0 auto !important; } } /* ===== FIM PAINEL MOBILE SEM MOCK ===== */ /* ===== VM PANEL CAROUSEL MOBILE ===== */ @media screen and (max-width:720px){ body #painel .panel-copy ul.vm-panel-carousel{ position:relative !important; display:block !important; height:290px !important; margin:10px 28px 0 0 !important; overflow:visible !important; perspective:900px !important; isolation:isolate !important; } body #painel .panel-copy ul.vm-panel-carousel > li{ position:absolute !important; left:0 !important; right:0 !important; top:50% !important; width:100% !important; min-height:76px !important; margin:0 !important; padding:15px 17px !important; display:flex !important; flex-direction:column !important; justify-content:center !important; gap:4px !important; border-radius:17px !important; background: linear-gradient( 110deg, rgba(255,255,255,.11), rgba(255,255,255,.07) ) !important; border: 1px solid rgba(255,255,255,.16) !important; box-shadow: 0 12px 26px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.05) !important; transform-origin:center center !important; transition: transform .52s cubic-bezier(.22,.78,.25,1), opacity .45s ease, filter .45s ease, border-color .45s ease, background .45s ease, box-shadow .45s ease !important; pointer-events:none !important; } body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-current{ z-index:30 !important; opacity:1 !important; filter:none !important; transform: translateY(-50%) translateZ(45px) scale(1) !important; border: 1px solid rgba(255,211,61,.52) !important; background: linear-gradient( 110deg, rgba(255,255,255,.15), rgba(73,175,255,.10) ) !important; box-shadow: 0 18px 36px rgba(0,0,0,.26), 0 0 0 1px rgba(255,211,61,.05) inset, 0 0 20px rgba(255,211,61,.06) !important; pointer-events:auto !important; visibility:visible !important; } body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-prev{ z-index:20 !important; opacity:.48 !important; filter: blur(.35px) brightness(.74) !important; transform: translateY(calc(-50% - 76px)) translateZ(-55px) scale(.92) !important; visibility:visible !important; } body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-next{ z-index:20 !important; opacity:.48 !important; filter: blur(.35px) brightness(.74) !important; transform: translateY(calc(-50% + 76px)) translateZ(-55px) scale(.92) !important; visibility:visible !important; } body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-hidden-up{ z-index:1 !important; opacity:0 !important; filter: blur(3px) brightness(.50) !important; transform: translateY(calc(-50% - 128px)) translateZ(-120px) scale(.84) !important; visibility:hidden !important; } body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-hidden-down{ z-index:1 !important; opacity:0 !important; filter: blur(3px) brightness(.50) !important; transform: translateY(calc(-50% + 128px)) translateZ(-120px) scale(.84) !important; visibility:hidden !important; } body #painel .panel-copy ul.vm-panel-carousel > li b{ color:rgba(238,245,255,.82) !important; font-size:15px !important; } body #painel .panel-copy ul.vm-panel-carousel > li span{ color:rgba(191,208,232,.74) !important; font-size:12px !important; line-height:1.45 !important; } body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-current b{ color:#ffffff !important; } body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-current span{ color:#dce8ff !important; } body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-current::before{ content:"" !important; position:absolute !important; left:-1px !important; top:17px !important; bottom:17px !important; width:3px !important; border-radius: 0 999px 999px 0 !important; background: linear-gradient( 180deg, #ffe66a, #ffc62a ) !important; box-shadow: 0 0 10px rgba(255,211,61,.25) !important; } body #painel .vm-panel-carousel-indicator{ position:absolute !important; right:-25px !important; top:50% !important; transform: translateY(-50%) !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:10px !important; z-index:60 !important; padding:8px 0 !important; } body #painel .vm-panel-carousel-indicator::before{ content:"" !important; position:absolute !important; left:50% !important; top:14px !important; bottom:14px !important; width:2px !important; transform: translateX(-50%) !important; border-radius:999px !important; background: rgba(73,175,255,.24) !important; } body #painel .vm-panel-carousel-dot{ position:relative !important; z-index:2 !important; width:8px !important; height:8px !important; padding:0 !important; border-radius:50% !important; border: 1px solid rgba(73,175,255,.55) !important; background: #14245f !important; box-shadow: 0 0 0 3px rgba(18,28,88,.70) !important; } body #painel .vm-panel-carousel-dot.is-active{ transform: scale(1.30) !important; background: #ffd33d !important; border-color: #ffe781 !important; box-shadow: 0 0 0 4px rgba(255,211,61,.11), 0 0 12px rgba(255,211,61,.30) !important; } } /* ===== FIM VM PANEL CAROUSEL MOBILE ===== */ /* ========================================================== VM PAINEL CARROSSEL MOBILE - COMPACTO ========================================================== */ @media screen and (max-width:720px){ body #painel .panel-copy ul.vm-panel-carousel{ height:235px !important; width:88% !important; max-width:360px !important; margin: 8px auto 0 auto !important; perspective: 800px !important; } body #painel .panel-copy ul.vm-panel-carousel > li{ left:0 !important; right:0 !important; width:100% !important; min-height:64px !important; padding: 11px 14px !important; border-radius: 15px !important; gap: 3px !important; } /* * CARD ATUAL */ body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-current{ transform: translateY(-50%) translateZ(35px) scale(.96) !important; } /* * CARD DE CIMA */ body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-prev{ transform: translateY(calc(-50% - 62px)) translateZ(-45px) scale(.86) !important; opacity: .44 !important; } /* * CARD DE BAIXO */ body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-next{ transform: translateY(calc(-50% + 62px)) translateZ(-45px) scale(.86) !important; opacity: .44 !important; } body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-hidden-up{ transform: translateY(calc(-50% - 106px)) translateZ(-100px) scale(.78) !important; } body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-hidden-down{ transform: translateY(calc(-50% + 106px)) translateZ(-100px) scale(.78) !important; } /* * TEXTOS MENORES */ body #painel .panel-copy ul.vm-panel-carousel > li b{ font-size: 13px !important; line-height: 1.2 !important; } body #painel .panel-copy ul.vm-panel-carousel > li span{ font-size: 10.5px !important; line-height: 1.35 !important; } /* * BARRA AMARELA DO ATUAL */ body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-current::before{ top: 13px !important; bottom: 13px !important; width: 3px !important; } /* * INDICADOR MAIS PERTO E MENOR */ body #painel .vm-panel-carousel-indicator{ right: -20px !important; gap: 8px !important; padding: 6px 0 !important; } body #painel .vm-panel-carousel-dot{ width: 7px !important; height: 7px !important; } body #painel .vm-panel-carousel-dot.is-active{ transform: scale(1.25) !important; } } /* ========================================================== FIM VM PAINEL CARROSSEL MOBILE - COMPACTO ========================================================== */ /* ========================================================== VM PAINEL CARROSSEL MOBILE - COMPACTO ========================================================== */ @media screen and (max-width:720px){ body #painel .panel-copy ul.vm-panel-carousel{ height:235px !important; width:88% !important; max-width:360px !important; margin: 8px auto 0 auto !important; perspective: 800px !important; } body #painel .panel-copy ul.vm-panel-carousel > li{ left:0 !important; right:0 !important; width:100% !important; min-height:64px !important; padding: 11px 14px !important; border-radius: 15px !important; gap: 3px !important; } /* * CARD ATUAL */ body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-current{ transform: translateY(-50%) translateZ(35px) scale(.96) !important; } /* * CARD DE CIMA */ body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-prev{ transform: translateY(calc(-50% - 62px)) translateZ(-45px) scale(.86) !important; opacity: .44 !important; } /* * CARD DE BAIXO */ body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-next{ transform: translateY(calc(-50% + 62px)) translateZ(-45px) scale(.86) !important; opacity: .44 !important; } body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-hidden-up{ transform: translateY(calc(-50% - 106px)) translateZ(-100px) scale(.78) !important; } body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-hidden-down{ transform: translateY(calc(-50% + 106px)) translateZ(-100px) scale(.78) !important; } /* * TEXTOS MENORES */ body #painel .panel-copy ul.vm-panel-carousel > li b{ font-size: 13px !important; line-height: 1.2 !important; } body #painel .panel-copy ul.vm-panel-carousel > li span{ font-size: 10.5px !important; line-height: 1.35 !important; } /* * BARRA AMARELA DO ATUAL */ body #painel .panel-copy ul.vm-panel-carousel > li.vm-panel-current::before{ top: 13px !important; bottom: 13px !important; width: 3px !important; } /* * INDICADOR MAIS PERTO E MENOR */ body #painel .vm-panel-carousel-indicator{ right: -20px !important; gap: 8px !important; padding: 6px 0 !important; } body #painel .vm-panel-carousel-dot{ width: 7px !important; height: 7px !important; } body #painel .vm-panel-carousel-dot.is-active{ transform: scale(1.25) !important; } } /* ========================================================== FIM VM PAINEL CARROSSEL MOBILE - COMPACTO ========================================================== */ /* ===== VM ESPACAMENTOS SECOES FINAL ===== */ /* * RECURSOS */ body section#recursos.section.light { padding-bottom:35px !important; } /* * COMO FUNCIONA */ body section#como-funciona.section.dark { padding-top:35px !important; /* padding-bottom:25px !important; */ } /* * PAINEL / GESTÃO */ body section#painel.section.light{ padding-top:25px !important; padding-bottom:25px !important; } /* ===== FIM VM ESPACAMENTOS SECOES FINAL ===== */ /* ===== VM PAINEL PADDING FINAL EXATO ===== */ body section#painel.section.light{ padding-top:25px !important; padding-bottom:0px !important; } /* ===== FIM VM PAINEL PADDING FINAL EXATO ===== */ /* ===== FORMATOS CURSOR FINAL ===== */ body #formatos .vm-formatos-typing.is-complete .vm-formatos-caret{ opacity:0 !important; animation:none !important; } /* ===== FIM FORMATOS CURSOR FINAL ===== */ /* ===== VM FORMATOS PADDING DESKTOP 30 ===== */ @media screen and (min-width:721px){ body section#formatos.section.purple-band{ padding-top:30px !important; padding-bottom:30px !important; } } /* ===== FIM VM FORMATOS PADDING DESKTOP 30 ===== */ /* ===== VM FORMATOS TITLE DESKTOP ===== */ @media screen and (min-width:721px){ body #formatos .vm-formatos-title{ font-size:clamp(32px, 3vw, 50px) !important; } } /* ===== FIM VM FORMATOS TITLE DESKTOP ===== */ /* ===== FORMATOS MOBILE FINAL V2 ===== */ @media screen and (max-width:720px){ /* * SEÇÃO MAIS COMPACTA */ body #formatos{ padding-top:22px !important; padding-bottom:28px !important; } /* * TUDO CENTRALIZADO */ body #formatos .vm-formatos-inner{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; gap:18px !important; } body #formatos .vm-formatos-copy{ width:100% !important; display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; } /* * SUBTÍTULO MENOR */ body #formatos .kicker.gold{ font-size:10px !important; line-height:1.1 !important; letter-spacing:2px !important; margin-bottom:10px !important; text-align:center !important; } /* * TÍTULO MAIOR */ body #formatos .vm-formatos-title{ font-size:clamp(44px, 11.2vw, 58px) !important; line-height:.93 !important; letter-spacing:-2px !important; width:100% !important; max-width:430px !important; margin:0 auto !important; text-align:center !important; } /* * CARD ATRÁS DO TEXTO QUE ESCREVE */ body #formatos .vm-formatos-typing{ position:relative !important; width:92% !important; max-width:400px !important; min-height:auto !important; margin:10px auto 0 !important; padding:18px 17px !important; text-align:center !important; border-radius:18px !important; color:#eef5ff !important; background: linear-gradient( 145deg, rgba(7,15,45,.68) 0%, rgba(16,28,78,.64) 52%, rgba(7,67,142,.46) 100% ) !important; border: 1px solid rgba(255,255,255,.17) !important; box-shadow: 0 16px 32px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } body #formatos .vm-formatos-typing-text{ text-align:center !important; } /* * CURSOR */ body #formatos .vm-formatos-caret{ margin-left:3px !important; } } /* ===== FIM FORMATOS MOBILE FINAL V2 ===== */ /* ===== FORMATOS MOBILE PROFISSIONAL ===== */ @media screen and (max-width:720px){ body #formatos{ padding-top:24px !important; padding-bottom:30px !important; } body #formatos .vm-formatos-inner{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:18px !important; text-align:center !important; } /* * BLOCO SUPERIOR */ body #formatos .vm-formatos-copy{ width:100% !important; max-width:430px !important; margin:0 auto !important; display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; } /* * TEXTO AMARELO */ body #formatos .vm-formatos-copy .kicker.gold{ display:block !important; width:100% !important; margin: 0 auto 12px auto !important; font-size: 14px !important; line-height: 1.18 !important; letter-spacing: 2.3px !important; font-weight: 950 !important; color: #ffd33d !important; text-align: center !important; } /* * TITULO BRANCO */ body #formatos .vm-formatos-title{ width:100% !important; max-width: 410px !important; margin: 0 auto !important; font-size: clamp(31px, 8.7vw, 40px) !important; line-height: 1.02 !important; letter-spacing: -1.2px !important; font-weight: 950 !important; text-align: center !important; color: #ffffff !important; } /* * CARD DO TEXTO DIGITADO */ body #formatos .vm-formatos-typing{ position:relative !important; width: min(92%, 390px) !important; max-width: 390px !important; margin: 12px auto 0 auto !important; padding: 20px 18px !important; min-height: auto !important; border-radius: 20px !important; text-align: center !important; color: #eef5ff !important; background: linear-gradient( 145deg, rgba(7,15,45,.78) 0%, rgba(15,28,78,.70) 52%, rgba(7,65,139,.52) 100% ) !important; border: 1px solid rgba(180,205,255,.32) !important; box-shadow: 0 18px 38px rgba(0,0,0,.26), 0 0 0 1px rgba(255,255,255,.025) inset, inset 0 1px 0 rgba(255,255,255,.06) !important; backdrop-filter: blur(11px) !important; -webkit-backdrop-filter: blur(11px) !important; overflow: hidden !important; } /* * brilho discreto do card */ body #formatos .vm-formatos-typing::before{ content:"" !important; position:absolute !important; inset:0 !important; pointer-events:none !important; background: radial-gradient( circle at 82% 18%, rgba(73,175,255,.12), transparent 38% ) !important; opacity: .9 !important; } /* * TEXTO DO CARD: * mantém próximo do tamanho atual */ body #formatos .vm-formatos-typing-text{ position:relative !important; z-index:2 !important; display:inline !important; font-size: 18px !important; line-height: 1.65 !important; font-weight: 750 !important; color: #eef5ff !important; text-align: center !important; } body #formatos .vm-formatos-caret{ position:relative !important; z-index:2 !important; margin-left: 3px !important; } } /* ===== FIM FORMATOS MOBILE PROFISSIONAL ===== */ /* ===== VM FAQ PREMIUM ===== */ body #duvidas{ position:relative !important; overflow:hidden !important; color:#fff !important; background: radial-gradient( circle at 7% 20%, rgba(124,58,237,.20), transparent 32% ), radial-gradient( circle at 91% 18%, rgba(73,175,255,.14), transparent 34% ), linear-gradient( 135deg, #130d31 0%, #111c55 50%, #0758ad 100% ) !important; border-top: 1px solid rgba(255,211,61,.12) !important; } body #duvidas::before{ content:"" !important; position:absolute !important; inset:0 !important; pointer-events:none !important; background: radial-gradient( ellipse at 10% 55%, rgba(255,255,255,.025), transparent 42% ) !important; } /* * LAYOUT */ body #duvidas .vm-faq-layout{ position:relative !important; z-index:2 !important; display:grid !important; grid-template-columns: minmax(310px,.72fr) minmax(0,1.28fr) !important; gap: clamp(70px,7vw,130px) !important; align-items:center !important; } /* * COLUNA ESQUERDA */ body #duvidas .vm-faq-copy{ position:sticky !important; top:120px !important; } body #duvidas .vm-faq-copy .kicker{ color:#ffd33d !important; font-size:12px !important; letter-spacing: .13em !important; margin-bottom: 22px !important; font-weight: 950 !important; } body #duvidas .vm-faq-copy h2{ max-width: 470px !important; margin: 0 !important; color:#ffffff !important; font-size: clamp(50px,5vw,78px) !important; line-height: .96 !important; letter-spacing: -3px !important; font-weight: 950 !important; } body #duvidas .vm-faq-copy > p{ max-width: 450px !important; margin-top: 26px !important; color: #bfd0e8 !important; font-size: 17px !important; line-height: 1.7 !important; font-weight: 600 !important; } /* * ASSINATURA VISUAL */ body #duvidas .vm-faq-signature{ margin-top: 78px !important; display:flex !important; flex-direction:column !important; gap: 5px !important; color: rgba(220,232,255,.55) !important; font-size: 10px !important; letter-spacing: .22em !important; font-weight: 800 !important; } body #duvidas .vm-faq-signature i{ display:block !important; width:48px !important; height:3px !important; margin-bottom: 12px !important; border-radius: 999px !important; background: linear-gradient( 90deg, #ffd33d, #49afff ) !important; } /* * ÁREA DA DIREITA */ body #duvidas .vm-faq-area{ position:relative !important; padding-right: 70px !important; } /* * LISTA */ body #duvidas .vm-faq-list{ display:grid !important; gap: 14px !important; } /* * CARD BASE */ body #duvidas .vm-faq-list details{ position:relative !important; margin: 0 !important; padding: 0 !important; overflow:hidden !important; border-radius: 20px !important; border: 1px solid rgba(255,255,255,.15) !important; background: linear-gradient( 110deg, rgba(255,255,255,.095), rgba(73,175,255,.065) ) !important; box-shadow: 0 14px 30px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.045) !important; transition: border-color .35s ease, box-shadow .35s ease, background .35s ease, transform .35s ease !important; } /* * CARD ABERTO */ body #duvidas .vm-faq-list details[open]{ border: 1px solid rgba(255,211,61,.72) !important; background: linear-gradient( 110deg, rgba(255,255,255,.12), rgba(73,175,255,.09) ) !important; box-shadow: 0 20px 46px rgba(0,0,0,.20), 0 0 24px rgba(255,211,61,.06), inset 0 1px 0 rgba(255,255,255,.055) !important; transform: translateX(-3px) !important; } /* * SUMMARY */ body #duvidas .vm-faq-list summary{ position:relative !important; display:grid !important; grid-template-columns: 54px 1fr 44px !important; gap: 18px !important; align-items:center !important; min-height: 82px !important; padding: 17px 18px !important; cursor:pointer !important; list-style:none !important; } body #duvidas .vm-faq-list summary::-webkit-details-marker{ display:none !important; } /* * Remove o + antigo */ body #duvidas .vm-faq-list summary::after{ content:"+" !important; position:static !important; grid-column:3 !important; grid-row:1 !important; justify-self:end !important; width:38px !important; height:38px !important; border-radius: 12px !important; display:flex !important; align-items:center !important; justify-content:center !important; color: #ffd33d !important; background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,211,61,.28) !important; font-size: 21px !important; line-height: 1 !important; font-weight: 900 !important; transition: transform .3s ease, background .3s ease !important; } body #duvidas .vm-faq-list details[open] summary::after{ content:"−" !important; background: rgba(255,211,61,.10) !important; } /* * NÚMERO */ body #duvidas .vm-faq-number{ grid-column: 1 !important; grid-row: 1 !important; width: 50px !important; height: 50px !important; border-radius: 14px !important; display:flex !important; align-items:center !important; justify-content:center !important; color: #dce8ff !important; background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.17) !important; font-size: 14px !important; font-weight: 950 !important; } body #duvidas .vm-faq-list details[open] .vm-faq-number{ color: #ffd33d !important; border-color: rgba(255,211,61,.42) !important; background: rgba(255,211,61,.07) !important; } /* * TEXTO DO SUMMARY */ body #duvidas .vm-faq-summary-copy{ grid-column: 2 !important; grid-row: 1 !important; display:flex !important; flex-direction:column !important; gap: 7px !important; } body #duvidas .vm-faq-summary-copy small{ color: #aebfe0 !important; font-size: 9px !important; letter-spacing: .16em !important; font-weight: 900 !important; } body #duvidas .vm-faq-summary-copy strong{ color: #ffffff !important; font-size: 15px !important; line-height: 1.35 !important; font-weight: 900 !important; } /* * RESPOSTA */ body #duvidas .vm-faq-list details > p{ margin: 0 !important; padding: 0 80px 22px 90px !important; color: #bfd0e8 !important; font-size: 13px !important; line-height: 1.65 !important; font-weight: 600 !important; } /* * INDICADOR LATERAL */ body #duvidas .vm-faq-indicator{ position:absolute !important; right: 4px !important; top: 50% !important; transform: translateY(-50%) !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap: 26px !important; z-index: 5 !important; } body #duvidas .vm-faq-indicator::before{ content:"" !important; position:absolute !important; top: 12px !important; bottom: 12px !important; left: 11px !important; width: 1px !important; background: rgba(73,175,255,.36) !important; z-index: -1 !important; } body #duvidas .vm-faq-indicator span{ position:relative !important; display:flex !important; align-items:center !important; width: 44px !important; min-height: 20px !important; padding-left: 29px !important; color: rgba(191,208,232,.58) !important; font-size: 9px !important; font-weight: 850 !important; transition: color .3s ease !important; } body #duvidas .vm-faq-indicator span::before{ content:"" !important; position:absolute !important; left: 4px !important; width: 13px !important; height: 13px !important; border-radius: 50% !important; background: #14245f !important; border: 1px solid rgba(73,175,255,.55) !important; box-shadow: 0 0 0 3px rgba(18,28,88,.75) !important; transition: background .3s ease, box-shadow .3s ease, transform .3s ease !important; } body #duvidas .vm-faq-indicator span.is-active{ color: #ffd33d !important; } body #duvidas .vm-faq-indicator span.is-active::before{ background: #ffd33d !important; border-color: #ffe781 !important; transform: scale(1.18) !important; box-shadow: 0 0 0 4px rgba(255,211,61,.10), 0 0 15px rgba(255,211,61,.38) !important; } /* * TABLET / MOBILE * mantém simples e responsivo */ @media screen and (max-width:980px){ body #duvidas .vm-faq-layout{ grid-template-columns: 1fr !important; gap: 34px !important; } body #duvidas .vm-faq-copy{ position:static !important; text-align:center !important; } body #duvidas .vm-faq-copy h2, body #duvidas .vm-faq-copy > p{ margin-left:auto !important; margin-right:auto !important; } body #duvidas .vm-faq-signature{ display:none !important; } body #duvidas .vm-faq-area{ padding-right: 0 !important; } body #duvidas .vm-faq-indicator{ display:none !important; } } @media screen and (max-width:720px){ body #duvidas .vm-faq-copy h2{ font-size: 42px !important; letter-spacing: -2px !important; } body #duvidas .vm-faq-copy > p{ font-size: 14px !important; } body #duvidas .vm-faq-list summary{ grid-template-columns: 42px 1fr 36px !important; gap: 12px !important; min-height: 72px !important; padding: 14px !important; } body #duvidas .vm-faq-number{ width: 40px !important; height: 40px !important; border-radius: 12px !important; font-size: 12px !important; } body #duvidas .vm-faq-summary-copy small{ font-size: 8px !important; } body #duvidas .vm-faq-summary-copy strong{ font-size: 13px !important; } body #duvidas .vm-faq-list summary::after{ width: 34px !important; height: 34px !important; } body #duvidas .vm-faq-list details > p{ padding: 0 16px 18px 68px !important; font-size: 12px !important; } } /* ===== FIM VM FAQ PREMIUM ===== */ /* ===== VM DUVIDAS PADDING 30 ===== */ body section#duvidas.section.light{ padding-top:30px !important; padding-bottom:30px !important; } /* ===== FIM VM DUVIDAS PADDING 30 ===== */ /* ===== VM FAQ MOBILE GRID ===== */ @media screen and (max-width:720px){ body #duvidas .vm-faq-layout{ display:block !important; } body #duvidas .vm-faq-copy{ margin-bottom:24px !important; } body #duvidas .vm-faq-copy h2{ font-size:38px !important; line-height:.98 !important; text-align:center !important; } body #duvidas .vm-faq-copy > p{ max-width:360px !important; margin:14px auto 0 !important; text-align:center !important; } body #duvidas .vm-faq-area{ width:100% !important; padding:0 !important; } /* * GRADE 2 x 2 */ body #duvidas .vm-faq-list{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; } /* * ÚLTIMO CARD OCUPA A LINHA TODA */ /* * CARD FECHADO */ body #duvidas .vm-faq-list details{ min-width:0 !important; border-radius:16px !important; overflow:hidden !important; background: linear-gradient( 145deg, rgba(255,255,255,.10), rgba(73,175,255,.055) ) !important; border: 1px solid rgba(255,255,255,.16) !important; box-shadow: 0 10px 22px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.04) !important; } /* * CARD ABERTO */ body #duvidas .vm-faq-list details[open]{ border: 1px solid rgba(255,211,61,.58) !important; background: linear-gradient( 145deg, rgba(255,255,255,.15), rgba(73,175,255,.09) ) !important; box-shadow: 0 14px 28px rgba(0,0,0,.20), 0 0 18px rgba(255,211,61,.06) !important; } /* * SUMMARY MAIS COMPACTO */ body #duvidas .vm-faq-list summary{ display:grid !important; grid-template-columns: 34px 1fr 28px !important; gap:8px !important; align-items:center !important; min-height:98px !important; padding:10px !important; } /* * NUMERO */ body #duvidas .vm-faq-number{ width:32px !important; height:32px !important; border-radius:10px !important; font-size:10px !important; } /* * TEXTO */ body #duvidas .vm-faq-summary-copy{ gap:5px !important; } body #duvidas .vm-faq-summary-copy small{ font-size:7px !important; letter-spacing:.10em !important; } body #duvidas .vm-faq-summary-copy strong{ font-size:11px !important; line-height:1.25 !important; } /* * BOTÃO + / - */ body #duvidas .vm-faq-list summary::after{ width:28px !important; height:28px !important; border-radius:9px !important; font-size:17px !important; } /* * RESPOSTA */ body #duvidas .vm-faq-list details > p{ padding: 0 12px 13px 12px !important; font-size:10.5px !important; line-height:1.48 !important; text-align:left !important; } /* * QUANDO ABERTO: * ocupa largura inteira para a resposta * ter espaço e não ficar espremida. */ body #duvidas .vm-faq-list details[open]{ grid-column:1 / -1 !important; } /* * Último já é full-width naturalmente */ body #duvidas .vm-faq-list details:nth-child(5){ min-height:auto !important; } /* * Indicador lateral não precisa no mobile */ body #duvidas .vm-faq-indicator{ display:none !important; } } /* ===== FIM VM FAQ MOBILE GRID ===== */ /* ===== VM FAQ MOBILE QUINTO NORMAL ===== */ @media screen and (max-width:720px){ body #duvidas .vm-faq-list details:nth-child(5):not([open]){ grid-column:auto !important; } /* * Qualquer pergunta aberta * ocupa a largura inteira. */ body #duvidas .vm-faq-list details[open]{ grid-column:1 / -1 !important; } } /* ===== FIM VM FAQ MOBILE QUINTO NORMAL ===== */ /* ===== FAQ SEPARACAO PERGUNTA RESPOSTA ===== */ body #duvidas .vm-faq-list details[open] summary{ padding-bottom: 16px !important; margin-bottom: 16px !important; border-bottom: 1px solid rgba(255, 211, 61, .22) !important; box-shadow: inset 0 -1px 0 rgba(255,255,255,.05) !important; } body #duvidas .vm-faq-list details[open] p{ margin-top: 0 !important; padding-top: 2px !important; color: #eaf2ff !important; font-size: 15px !important; line-height: 1.65 !important; font-weight: 500 !important; opacity: 1 !important; } body #duvidas .vm-faq-list details[open] .vm-faq-summary-copy strong{ display: block !important; margin-bottom: 2px !important; } body #duvidas .vm-faq-list details[open] .vm-faq-summary-copy small{ display: inline-block !important; margin-bottom: 8px !important; color: rgba(255,255,255,.62) !important; letter-spacing: 1.5px !important; } body #duvidas .vm-faq-list details[open]{ box-shadow: 0 18px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05) !important; } /* mobile: resposta um pouco mais destacada */ @media screen and (max-width:720px){ body #duvidas .vm-faq-list details[open] summary{ padding-bottom: 14px !important; margin-bottom: 14px !important; } body #duvidas .vm-faq-list details[open] p{ font-size: 14px !important; line-height: 1.6 !important; } } /* ===== FIM FAQ SEPARACAO PERGUNTA RESPOSTA ===== */ /* ===== VM FAQ MOBILE FOCO ABERTO ===== */ @media screen and (max-width:720px){ /* * Estado normal: * grade continua igual. */ body #duvidas .vm-faq-list{ transition: min-height .35s ease, height .35s ease !important; } body #duvidas .vm-faq-list > details{ transition: opacity .32s ease, transform .38s cubic-bezier(.22,.78,.25,1), max-height .38s ease, min-height .38s ease, padding .38s ease, margin .38s ease, border-color .32s ease, box-shadow .32s ease !important; } /* * QUANDO ALGUMA PERGUNTA ESTÁ ABERTA */ body #duvidas .vm-faq-list.vm-faq-focus{ display:block !important; width:100% !important; min-height:0 !important; height:auto !important; } /* * Todas somem... */ body #duvidas .vm-faq-list.vm-faq-focus > details:not([open]){ display:none !important; } /* * ...e só a aberta fica. */ body #duvidas .vm-faq-list.vm-faq-focus > details[open]{ display:block !important; width:100% !important; max-width:100% !important; grid-column:1 / -1 !important; min-height:0 !important; height:auto !important; margin:0 !important; opacity:1 !important; transform:none !important; visibility:visible !important; } /* * CARD ABERTO MAIS BONITO */ body #duvidas .vm-faq-list.vm-faq-focus > details[open]{ border-radius:18px !important; border: 1px solid rgba(255,211,61,.62) !important; background: linear-gradient( 145deg, rgba(255,255,255,.13), rgba(73,175,255,.085) ) !important; box-shadow: 0 18px 36px rgba(0,0,0,.20), 0 0 20px rgba(255,211,61,.07), inset 0 1px 0 rgba(255,255,255,.05) !important; } /* * SUMMARY DO CARD ABERTO * deixa de usar aquela altura dos cards da grade. */ body #duvidas .vm-faq-list.vm-faq-focus > details[open] summary{ min-height:0 !important; height:auto !important; padding: 16px 14px 15px 14px !important; grid-template-columns: 38px 1fr 34px !important; gap: 10px !important; align-items:center !important; margin-bottom: 14px !important; } /* * Número um pouco mais presente */ body #duvidas .vm-faq-list.vm-faq-focus > details[open] .vm-faq-number{ width:36px !important; height:36px !important; font-size:11px !important; } /* * Pergunta aberta ganha mais espaço. */ body #duvidas .vm-faq-list.vm-faq-focus > details[open] .vm-faq-summary-copy strong{ font-size:13px !important; line-height: 1.28 !important; } body #duvidas .vm-faq-list.vm-faq-focus > details[open] .vm-faq-summary-copy small{ font-size:8px !important; } /* * RESPOSTA: * altura natural, sem buraco vazio. */ body #duvidas .vm-faq-list.vm-faq-focus > details[open] > p{ display:block !important; height:auto !important; min-height:0 !important; margin:0 !important; padding: 0 16px 17px 16px !important; font-size: 13px !important; line-height: 1.55 !important; color: #e7f0ff !important; } /* * Não deixa a área do FAQ manter altura da grade * enquanto somente uma pergunta está aparecendo. */ body #duvidas .vm-faq-area:has(.vm-faq-list.vm-faq-focus){ min-height:0 !important; height:auto !important; } } /* ===== FIM VM FAQ MOBILE FOCO ABERTO ===== */ /* ===== VM FAQ MOBILE TROCA 03 POR 05 ===== */ @media screen and (max-width:720px){ /* * Esconde a pergunta 03 original: * "O VoteMais funciona bem no celular?" */ body #duvidas .vm-faq-list > details[data-faq-index="3"]{ display:none !important; } /* * A pergunta 05 continua visível no mobile, * mas entra visualmente como terceira posição. */ body #duvidas .vm-faq-list > details[data-faq-index="5"]{ display:block !important; grid-column:auto !important; } } /* ===== FIM VM FAQ MOBILE TROCA 03 POR 05 ===== */ /* ===== VM FAQ MOBILE 05 COMO TERCEIRA ===== */ @media screen and (max-width:720px){ body #duvidas .vm-faq-list > details[data-faq-index="5"] .vm-faq-number{ font-size:0 !important; } body #duvidas .vm-faq-list > details[data-faq-index="5"] .vm-faq-number::after{ content:"03"; font-size:10px; font-weight:950; } } /* ===== FIM VM FAQ MOBILE 05 COMO TERCEIRA ===== */ /* ===== VM FAQ MOBILE ORDEM TYPING FINAL ===== */ @media screen and (max-width:720px){ /* * Esconde a antiga pergunta 03 no mobile. */ body #duvidas .vm-faq-list > details[data-faq-index="3"]{ display:none !important; } /* * Ordem visual correta no mobile: * 01, 02, 03, 04 * sendo: * 01 = index 1 * 02 = index 2 * 03 = index 4 * 04 = index 5 */ body #duvidas .vm-faq-list > details[data-faq-index="1"]{ order:1 !important; } body #duvidas .vm-faq-list > details[data-faq-index="2"]{ order:2 !important; } body #duvidas .vm-faq-list > details[data-faq-index="4"]{ order:3 !important; } body #duvidas .vm-faq-list > details[data-faq-index="5"]{ order:4 !important; } /* * Quando uma pergunta abrir, ocupa a largura toda. */ body #duvidas .vm-faq-list > details[open]{ grid-column:1 / -1 !important; } /* * Oculta as outras enquanto uma está aberta. */ body #duvidas .vm-faq-list > details.vm-faq-mobile-hidden{ display:none !important; } /* * Resposta mais separada da pergunta. */ body #duvidas .vm-faq-list > details[open] > p{ margin-top:16px !important; padding-top:14px !important; /* border-top:1px solid rgba(255,255,255,.14) !important; */ } } /* ===== FIM VM FAQ MOBILE ORDEM TYPING FINAL ===== */ /* ===== VM CONTATO PADDING 25 ===== */ body section#contato.contact-section{ padding-top:25px !important; padding-bottom:25px !important; } /* ===== FIM VM CONTATO PADDING 25 ===== */ /* ===== VM HERO BUTTON FINAL WIDTH ===== */ @media screen and (min-width:721px){ body .hero .hero-actions{ display:block !important; width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; } body .hero .hero-actions > a.btn.btn-primary{ display:flex !important; width:100% !important; max-width:100% !important; min-width:100% !important; flex:none !important; align-self:stretch !important; box-sizing:border-box !important; align-items:center !important; justify-content:center !important; margin-left:0 !important; margin-right:0 !important; text-align:center !important; white-space:nowrap !important; } } /* ===== FIM VM HERO BUTTON FINAL WIDTH ===== */ /* ===== VM CONTATO MOBILE PONTOS LINHAS ===== */ @media screen and (max-width:720px){ /* * BLOCO DOS 3 BENEFÍCIOS */ body #contato .contact-points{ width:100% !important; max-width:420px !important; margin: 26px auto 0 auto !important; display:flex !important; flex-direction:column !important; gap: 16px !important; } /* * CADA LINHA */ body #contato .contact-points > span{ position:relative !important; width:100% !important; display:flex !important; align-items:center !important; gap: 6px !important; padding: 0 !important; color: #eef5ff !important; font-size: 14px !important; line-height: 1.25 !important; font-weight: 850 !important; white-space: nowrap !important; } /* * LINHA DECORATIVA */ body #contato .contact-points > span::after{ content:"" !important; display:block !important; flex:1 1 auto !important; min-width: 28px !important; height: 2px !important; margin-left: 7px !important; border-radius: 999px !important; background: linear-gradient( 90deg, rgba(255,211,61,.90) 0%, rgba(73,175,255,.70) 70%, rgba(73,175,255,0) 100% ) !important; opacity: .75 !important; } /* * SEGUNDO ITEM INVERTIDO: * * linha primeiro * texto depois */ body #contato .contact-points > span:nth-child(2){ flex-direction: row-reverse !important; text-align: right !important; } body #contato .contact-points > span:nth-child(2)::after{ margin-left: 0 !important; margin-right: 7px !important; background: linear-gradient( 270deg, rgba(255,211,61,.90) 0%, rgba(73,175,255,.70) 70%, rgba(73,175,255,0) 100% ) !important; } /* * CHECK AMARELO MAIS NÍTIDO */ body #contato .contact-points > span{ text-shadow: 0 1px 10px rgba(0,0,0,.15) !important; } } /* ===== FIM VM CONTATO MOBILE PONTOS LINHAS ===== */ /* ===== VM CONTATO MOBILE PONTOS TRIANGULO ===== */ @media screen and (max-width:720px){ body #contato .contact-points{ width:100% !important; max-width:420px !important; margin:26px auto 0 !important; display:grid !important; grid-template-columns:1fr 1fr !important; gap:16px 12px !important; align-items:center !important; } /* * REMOVE AS LINHAS ANTIGAS */ body #contato .contact-points > span::after{ content:none !important; display:none !important; } /* * BASE */ body #contato .contact-points > span{ display:flex !important; align-items:center !important; width:auto !important; padding:0 !important; margin:0 !important; font-size:13px !important; line-height:1.25 !important; font-weight:850 !important; color:#eef5ff !important; white-space:nowrap !important; text-align:left !important; flex-direction:row !important; } /* * 1º ITEM CENTRALIZADO EM CIMA */ body #contato .contact-points > span:nth-child(1){ grid-column:1 / -1 !important; justify-self:center !important; justify-content:center !important; text-align:center !important; } /* * 2º ITEM EMBAIXO À ESQUERDA */ body #contato .contact-points > span:nth-child(2){ grid-column:1 !important; justify-self:start !important; justify-content:flex-start !important; text-align:left !important; flex-direction:row !important; } /* * 3º ITEM EMBAIXO À DIREITA */ body #contato .contact-points > span:nth-child(3){ grid-column:2 !important; justify-self:end !important; justify-content:flex-end !important; text-align:right !important; } } /* ===== FIM VM CONTATO MOBILE PONTOS TRIANGULO ===== */ /* ===== VM CONTATO MOBILE SUPORTE EM CIMA ===== */ @media screen and (max-width:720px){ body #contato .contact-points > span:nth-child(3){ grid-column:1 / -1 !important; grid-row:1 !important; justify-self:center !important; justify-content:center !important; text-align:center !important; } body #contato .contact-points > span:nth-child(1){ grid-column:1 !important; grid-row:2 !important; justify-self:start !important; justify-content:flex-start !important; text-align:left !important; } body #contato .contact-points > span:nth-child(2){ grid-column:2 !important; grid-row:2 !important; justify-self:end !important; justify-content:flex-end !important; text-align:right !important; } } /* ===== FIM VM CONTATO MOBILE SUPORTE EM CIMA ===== */ /* ===== VM CONTATO MOBILE CHECK VERDE CORRETO ===== */ @media screen and (max-width:720px){ body #contato .contact-points > span{ text-shadow:none !important; gap:5px !important; } body #contato .contact-points > span > .vm-contact-check{ display:inline-block !important; margin:0 !important; padding:0 !important; color:#22c55e !important; font-style:normal !important; font-size:15px !important; line-height:1 !important; font-weight:950 !important; text-shadow: 0 0 8px rgba(34,197,94,.26) !important; flex:0 0 auto !important; } body #contato .contact-points > span > b{ margin:0 !important; padding:0 !important; color:#eef5ff !important; font:inherit !important; font-weight:850 !important; text-shadow:none !important; } } /* ===== FIM VM CONTATO MOBILE CHECK VERDE CORRETO ===== */ /* ===== VM WHATSAPP FLOAT FINAL ===== */ body .whatsapp-float{ display:flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; background: linear-gradient( 145deg, #27d86f, #16b957 ) !important; border: 1px solid rgba(255,255,255,.58) !important; box-shadow: 0 12px 30px rgba(0,0,0,.28), 0 0 18px rgba(37,211,102,.18), inset 0 1px 0 rgba(255,255,255,.26) !important; color:#fff !important; } body .whatsapp-float .whatsapp-icon{ width:27px !important; height:27px !important; display:flex !important; align-items:center !important; justify-content:center !important; flex:0 0 27px !important; } body .whatsapp-float .whatsapp-icon svg{ display:block !important; width:100% !important; height:100% !important; fill:#ffffff !important; filter: drop-shadow( 0 1px 3px rgba(0,0,0,.16) ) !important; } body .whatsapp-float > span:last-child{ color:#ffffff !important; font-weight: 850 !important; } /* * MOBILE */ @media screen and (max-width:720px){ body .whatsapp-float{ width:58px !important; height:58px !important; padding:0 !important; border-radius:50% !important; } body .whatsapp-float .whatsapp-icon{ width:31px !important; height:31px !important; flex-basis:31px !important; } body .whatsapp-float > span:last-child{ display:none !important; } } /* ===== FIM VM WHATSAPP FLOAT FINAL ===== */ /* ===== VM WHATSAPP ICONE UNICO FINAL ===== */ body .whatsapp-float{ font-size:0 !important; } body .whatsapp-float::before, body .whatsapp-float::after{ content:none !important; display:none !important; } body .whatsapp-float .whatsapp-icon{ display:flex !important; align-items:center !important; justify-content:center !important; width:28px !important; height:28px !important; flex:0 0 28px !important; } body .whatsapp-float .whatsapp-icon::before, body .whatsapp-float .whatsapp-icon::after{ content:none !important; display:none !important; } body .whatsapp-float .whatsapp-icon svg{ display:block !important; width:28px !important; height:28px !important; fill:#ffffff !important; } body .whatsapp-float .whatsapp-label{ font-size:14px !important; color:#ffffff !important; font-weight:850 !important; } /* MOBILE: somente a logo */ @media screen and (max-width:720px){ body .whatsapp-float{ width:58px !important; height:58px !important; padding:0 !important; border-radius:50% !important; gap:0 !important; } body .whatsapp-float .whatsapp-icon{ width:30px !important; height:30px !important; flex:0 0 30px !important; } body .whatsapp-float .whatsapp-icon svg{ width:30px !important; height:30px !important; } body .whatsapp-float .whatsapp-label{ display:none !important; } } /* ===== FIM VM WHATSAPP ICONE UNICO FINAL ===== */ /* ===== WHATSAPP BEFORE SEM CONTENT ===== */ body .whatsapp-float::before{ content:none !important; } body .whatsapp-float .whatsapp-icon svg{ display:block !important; } /* ===== FIM WHATSAPP BEFORE SEM CONTENT ===== */ /* ===== VM CONTATO DESKTOP PADDING TEXTOS ===== */ @media screen and (min-width:721px){ body #contato .contact-points > span > b{ padding-left:10px !important; } } /* ===== FIM VM CONTATO DESKTOP PADDING TEXTOS ===== */ /* ========================================================== HERO - MOSTRAR MOCKUP SOMENTE QUANDO REALMENTE COUBER Mobile <= 720px permanece intacto ========================================================== */ @media screen and (min-width:721px) and (max-width:999px){ .hero-showcase{ display:none !important; } .hero-grid{ grid-template-columns:1fr !important; } .hero-copy{ max-width:760px; } } @media screen and (min-width:1000px){ .hero-showcase{ display:block !important; } }