/* UP Design 2.0 — estilo global */ @font-face{font-family:"Sora";src:url(../fonts/Sora-VariableFont_wght.ttf) format("truetype");font-weight:100 800;font-style:normal;font-display:swap} :root{ --offwhite:#F5F6F8;--white:#FFFFFF;--navy:#142440;--navy-2:#1C3157;--navy-3:#0E1A30;--tech:#2E26E6;--orange:#FF692E;--green:#D7F75B;--graphite:#202633; --orange-ink:#B8400F;--green-ink:#4F6B00;--ink:#142440;--muted:#4A5568;--line:#D7DBE3;--line-strong:#6B7588;--surface:#F5F6F8;--raised:#FFFFFF; --font-d:"Sora","Space Grotesk",system-ui,sans-serif;--font-s:"Inter","Manrope",system-ui,sans-serif; --r-sm:6px;--r-md:14px;--r-lg:28px;--pill:999px; --shadow-card:0 1px 2px rgba(20,36,64,.06),0 8px 24px rgba(20,36,64,.08);--shadow-lift:0 18px 48px rgba(20,36,64,.18); --glow-o:0 0 32px rgba(255,105,46,.45);--glow-g:0 0 24px rgba(215,247,91,.55); --ease:cubic-bezier(.2,.8,.2,1);--ease-io:cubic-bezier(.65,0,.35,1); --wrap:1240px;--gut:clamp(20px,4vw,40px);--sec:clamp(72px,10vw,128px); --hdr:76px; } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;font:400 17px/1.65 var(--font-s);color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased;overflow-x:hidden} img,svg,video{max-width:100%;display:block} a{color:inherit} button{font:inherit;color:inherit} h1,h2,h3,h4{font-family:var(--font-d);line-height:1.08;letter-spacing:-.02em;margin:0;font-weight:700} p{margin:0 0 1em} .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--orange);color:var(--navy);padding:10px 16px;border-radius:var(--pill);font-weight:700;transition:top .2s} .skip:focus{top:12px} :focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px} .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)} .navy{--surface:#142440;--raised:#1C3157;--ink:#F5F6F8;--muted:#A9B4C8;--line:#2E4570;--line-strong:#8A97B0;--orange-ink:#FF692E;--green-ink:#D7F75B;background:var(--surface);color:var(--ink)} .light{background:var(--surface);color:var(--ink)} .white{--surface:#FFFFFF;--raised:#F5F6F8;background:#fff;color:var(--ink)} section{position:relative} .sec{padding:var(--sec) 0;position:relative;overflow:hidden} .sec--tight{padding:calc(var(--sec)*.6) 0} /* Tipografia ------------------------------------------------------- */ .eyebrow{display:inline-flex;align-items:center;gap:12px;font:700 13px/16px var(--font-s);letter-spacing:.16em;text-transform:uppercase;color:var(--orange-ink);margin-bottom:18px} .eyebrow::before{content:"";width:30px;height:2px;border-radius:2px;background:var(--green);box-shadow:var(--glow-g)} .display{font-size:clamp(46px,8.2vw,112px);line-height:.94;font-weight:800;letter-spacing:-.035em} .h1{font-size:clamp(40px,6vw,76px);line-height:.98;font-weight:800;letter-spacing:-.03em} .h2{font-size:clamp(32px,4.4vw,56px);line-height:1.03;font-weight:800;letter-spacing:-.028em} .h3{font-size:clamp(22px,2.2vw,28px);line-height:1.2;font-weight:700} .lead{font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:var(--muted);max-width:62ch} .muted{color:var(--muted)} .center{text-align:center}.center .lead{margin-left:auto;margin-right:auto} .sec-head{max-width:820px;margin-bottom:clamp(40px,6vw,72px)} .sec-head.center{margin-left:auto;margin-right:auto} .sec-head .lead{margin-top:22px} .num-tag{font:800 14px/1 var(--font-d);letter-spacing:.06em;color:var(--orange-ink)} .green-t{color:var(--green-ink)}.orange-t{color:var(--orange-ink)} /* Pincelada marca-texto */ .mk{position:relative;display:inline-block;z-index:0;white-space:nowrap} .mk>svg{position:absolute;left:-.12em;width:calc(100% + .24em);height:.78em;bottom:-.06em;z-index:-1;overflow:visible;clip-path:inset(0 100% 0 0)} .mk .b{fill:var(--orange)} .mk .t{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400} .in .mk>svg,.mk.in>svg{animation:reveal 1.1s var(--ease-io) .35s forwards} .in .mk .t,.mk.in .t{animation:draw 1.2s var(--ease-io) 1.1s forwards} .mk--under>svg{height:.32em;bottom:-.14em} @keyframes reveal{to{clip-path:inset(0 0 0 0)}} @keyframes draw{to{stroke-dashoffset:0}} /* Botões ----------------------------------------------------------- */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:var(--pill);border:0;font:600 16px/1 var(--font-s);text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;transition:transform .25s var(--ease),box-shadow .25s,background .25s,color .25s;white-space:nowrap} .btn svg{width:18px;height:18px;flex:none;transition:transform .3s var(--ease)} .btn:hover svg{transform:translateX(4px)} .btn:active{transform:scale(.97)} .btn--o{background:var(--orange);color:var(--navy);box-shadow:0 8px 22px rgba(255,105,46,.32)} .btn--o::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s ease} .btn--o:hover{box-shadow:var(--glow-o);transform:translateY(-2px)} .btn--o:hover::after{transform:translateX(120%)} .btn--s{background:var(--ink);color:var(--surface)} .btn--s:hover{transform:translateY(-2px)} .btn--g{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)} .btn--g:hover{box-shadow:inset 0 0 0 1.5px var(--ink)} .btn--sm{min-height:42px;padding:0 20px;font-size:14px} .btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px} .pulse{animation:btnpulse 2.8s ease-in-out 2.4s infinite} @keyframes btnpulse{0%,100%{box-shadow:0 8px 22px rgba(255,105,46,.32)}50%{box-shadow:0 8px 22px rgba(255,105,46,.32),0 0 0 10px rgba(255,105,46,.0),0 0 34px rgba(255,105,46,.55)}} .link{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;color:var(--ink);border-bottom:2px solid var(--orange);padding-bottom:2px;transition:gap .3s var(--ease)} .link:hover{gap:14px} .link svg{width:16px;height:16px} /* Header ----------------------------------------------------------- */ .progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:120;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--orange),var(--green))} .hdr{position:fixed;inset:0 0 auto;z-index:100;height:var(--hdr);transition:background .35s,box-shadow .35s,transform .35s var(--ease)} .hdr .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px} .hdr.scrolled{background:rgba(245,246,248,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 rgba(20,36,64,.08)} .hdr.hide{transform:translateY(-100%)} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none} .brand svg{height:50px;width:auto} .brand .u{fill:var(--navy)}.brand .p{fill:var(--orange)}.brand .l{fill:var(--navy)} .hdr--dark:not(.scrolled) .brand .u,.hdr--dark:not(.scrolled) .brand .l{fill:#fff} .hdr--dark:not(.scrolled) .nav>ul>li>a,.hdr--dark:not(.scrolled) .nav>ul>li>button,.hdr--dark:not(.scrolled) .burger{color:#fff} .nav>ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0} .nav>ul>li{position:relative} .nav>ul>li>a,.nav>ul>li>button{display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:var(--pill);font:600 15px/1 var(--font-s);text-decoration:none;color:var(--navy);background:none;border:0;cursor:pointer;position:relative;transition:color .2s} .nav>ul>li>a::after,.nav>ul>li>button::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)} .nav>ul>li>a:hover::after,.nav>ul>li>button:hover::after,.nav>ul>li>a[aria-current]::after,.nav>ul>li.cur>button::after{transform:scaleX(1)} .nav .chev{width:14px;height:14px;transition:transform .3s} .nav li.open .chev{transform:rotate(180deg)} .drop{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px);min-width:260px;background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-lift);padding:10px;opacity:0;visibility:hidden;transition:.28s var(--ease);border:1px solid #E6E9EF} .drop--mega{width:min(760px,90vw);display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:14px} .nav li.open .drop{opacity:1;visibility:visible;transform:translate(-50%,0)} .drop a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:10px;text-decoration:none;color:var(--navy);transition:background .2s} .drop a:hover,.drop a[aria-current]{background:var(--offwhite)} .drop a b{font:700 15px/1.3 var(--font-d);display:flex;align-items:center;gap:8px} .drop a b i{width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none} .drop a:nth-child(3n+2) b i{background:var(--green)}.drop a:nth-child(3n) b i{background:var(--tech)} .drop a span{font-size:13px;line-height:1.4;color:#4A5568} .hdr-cta{margin-left:10px} .burger{display:none;width:48px;height:48px;border-radius:50%;border:0;background:none;cursor:pointer;color:var(--navy);position:relative} .burger span{position:absolute;left:13px;right:13px;height:2px;background:currentColor;border-radius:2px;transition:.35s var(--ease)} .burger span:nth-child(1){top:18px}.burger span:nth-child(2){top:24px}.burger span:nth-child(3){top:30px} .menu-open .burger span:nth-child(1){top:24px;transform:rotate(45deg)} .menu-open .burger span:nth-child(2){opacity:0;transform:scaleX(0)} .menu-open .burger span:nth-child(3){top:24px;transform:rotate(-45deg)} .mnav{position:fixed;inset:0;z-index:99;background:var(--navy);color:#fff;padding:calc(var(--hdr) + 20px) var(--gut) 40px;overflow-y:auto;clip-path:circle(0% at calc(100% - 44px) 38px);transition:clip-path .6s var(--ease-io);visibility:hidden} .menu-open .mnav{clip-path:circle(150% at calc(100% - 44px) 38px);visibility:visible} .menu-open .hdr{background:transparent!important;box-shadow:none!important;backdrop-filter:none} .menu-open .hdr .brand .u,.menu-open .hdr .brand .l,.menu-open .burger{fill:#fff;color:#fff} .mnav ul{list-style:none;margin:0;padding:0} .mnav>ul>li{border-bottom:1px solid rgba(255,255,255,.1);opacity:0;transform:translateY(16px);transition:.5s var(--ease)} .menu-open .mnav>ul>li{opacity:1;transform:none} .mnav>ul>li>a,.mnav summary{display:flex;justify-content:space-between;align-items:center;padding:16px 0;font:700 26px/1.2 var(--font-d);text-decoration:none;color:#fff;cursor:pointer;list-style:none} .mnav summary::-webkit-details-marker{display:none} .mnav details ul{padding:0 0 14px} .mnav details a{display:block;padding:9px 0;font-size:17px;color:#C9D2E3;text-decoration:none} .mnav .btn{margin-top:28px;width:100%} /* Hero ------------------------------------------------------------- */ .hero{min-height:100svh;padding:calc(var(--hdr) + 40px) 0 80px;display:flex;align-items:center;position:relative;overflow:hidden} .hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:center} .hero-title .w{display:inline-block;opacity:0;transform:translateY(.6em) rotate(2deg);filter:blur(6px);transition:opacity .7s var(--ease),transform .9s var(--ease),filter .7s} .hero.go .hero-title .w{opacity:1;transform:none;filter:none} .hero-sub{opacity:0;transform:translateY(20px);transition:1s var(--ease) 1.2s} .hero.go .hero-sub,.hero.go .hero-fade{opacity:1;transform:none} .hero-fade{opacity:0;transform:translateY(20px);transition:1s var(--ease) 1.45s} .hero-art{position:absolute;inset:0;z-index:1;pointer-events:none} .hero-stroke{position:absolute;left:-6%;width:112%;top:54%;height:auto} .hero-stroke .b1{fill:var(--orange);clip-path:inset(0 100% 0 0)} .hero-stroke .b2{fill:var(--green);clip-path:inset(0 0 0 100%)} .hero.go .hero-stroke .b1{animation:reveal 1.4s var(--ease-io) .5s forwards} .hero.go .hero-stroke .b2{animation:revealr 1.2s var(--ease-io) 1.1s forwards} @keyframes revealr{to{clip-path:inset(0 0 0 0)}} .shape{position:absolute;border-radius:var(--r-lg);opacity:0;transform:scale(.6) rotate(-8deg);transition:1.1s var(--ease)} .hero.go .shape{opacity:1;transform:none} .shape--navy{background:var(--navy)}.shape--tech{background:var(--tech)}.shape--o{background:var(--orange)}.shape--g{background:var(--green)} .shape--ring{border:2px solid var(--tech);background:none;border-radius:50%} .spark{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:var(--glow-g);animation:spark 3s ease-in-out infinite} @keyframes spark{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}} .grid-bg{position:absolute;inset:0;background-image:radial-gradient(rgba(46,38,230,.22) 1.2px,transparent 1.3px);background-size:28px 28px;mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 65%);-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 65%)} .hero-logo{justify-self:center;width:min(300px,70%)} .scroll-cue{position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font:600 12px/1 var(--font-s);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none} .scroll-cue i{width:2px;height:38px;border-radius:2px;background:linear-gradient(var(--orange),transparent);animation:cue 2s ease-in-out infinite;transform-origin:top} @keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}} /* Logo animado */ .logo-anim .u,.logo-anim .p,.logo-anim .l path{stroke-width:2.2;stroke-linejoin:round;fill-opacity:0} .logo-anim .u{stroke:var(--navy);fill:var(--navy)} .logo-anim .p{stroke:var(--orange);fill:var(--orange)} .logo-anim .l path{fill:var(--navy);stroke:none;opacity:0;transform:translateY(14px) scale(.8);transform-box:fill-box;transform-origin:center} .navy .logo-anim .u{stroke:#fff;fill:#fff}.navy .logo-anim .l path{fill:#fff} .logo-anim.go .u,.logo-anim.go .p{animation:lstroke 1.5s var(--ease-io) forwards,lfill .7s ease forwards} .logo-anim.go .u{animation-delay:.15s,1.1s} .logo-anim.go .p{animation-delay:.45s,1.35s} .logo-anim.go .l path{animation:lpop .6s var(--ease) forwards} .logo-anim .glint{fill:var(--green);opacity:0} .logo-anim.go .glint{animation:glint 2.6s ease-in-out 2.2s infinite} @keyframes lstroke{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes lfill{to{fill-opacity:1}} @keyframes lpop{to{opacity:1;transform:none}} @keyframes glint{0%,100%{opacity:.2}50%{opacity:1}} /* Marquee ---------------------------------------------------------- */ .marquee{overflow:hidden;padding:26px 0;border-block:1px solid var(--line);background:var(--surface)} .marquee .track{display:flex;gap:48px;width:max-content;animation:mq 40s linear infinite} .marquee:hover .track{animation-play-state:paused} .marquee span{display:inline-flex;align-items:center;gap:48px;font:800 clamp(24px,3vw,40px)/1 var(--font-d);letter-spacing:-.02em;white-space:nowrap;color:var(--ink)} .marquee span::after{content:"";width:14px;height:14px;border-radius:50%;background:var(--orange)} .marquee span:nth-child(even)::after{background:var(--green)} .marquee span:nth-child(3n)::after{background:var(--tech)} @keyframes mq{to{transform:translateX(-50%)}} /* Grids & cards ---------------------------------------------------- */ .grid{display:grid;gap:24px} .g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))} .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center} .split--top{align-items:start} .card{position:relative;display:flex;flex-direction:column;gap:14px;padding:30px;border-radius:var(--r-md);background:var(--raised);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-card);overflow:hidden;text-decoration:none;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s} a.card:hover,.card.hov:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)} .card h3{font-size:22px;line-height:1.2} .card p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6} .card .more{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--font-s);color:var(--ink)} .card .more svg{width:16px;height:16px;transition:transform .3s var(--ease)} a.card:hover .more svg{transform:translateX(5px)} .card .swash{position:absolute;right:-34px;top:-34px;width:160px;height:160px;pointer-events:none} .card .swash path{fill:none;stroke:var(--orange);stroke-width:10;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--ease-io)} .card .swash circle{fill:var(--green);opacity:0;transition:opacity .4s .35s;filter:drop-shadow(0 0 6px var(--green))} a.card:hover .swash path{stroke-dashoffset:0} a.card:hover .swash circle{opacity:1} .ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--surface);color:var(--ink);flex:none;transition:transform .4s var(--ease),background .4s} .ico svg{width:26px;height:26px} a.card:hover .ico{transform:rotate(-6deg) scale(1.06);background:var(--orange);color:var(--navy)} .navy .card{box-shadow:none} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} .chip{display:inline-flex;align-items:center;padding:6px 12px;border-radius:var(--pill);font:600 12.5px/1.2 var(--font-s);background:var(--surface);color:var(--muted);border:1px solid var(--line)} /* Pilares */ .pillars{counter-reset:p} .pillar{padding:34px 28px 30px;border-top:2px solid var(--line);position:relative} .pillar::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--orange);transition:width 1.2s var(--ease-io)} .pillar:nth-child(2)::before{background:var(--green)}.pillar:nth-child(3)::before{background:var(--tech)} .in .pillar::before,.pillar.in::before{width:100%} .pillar .n{font:800 56px/1 var(--font-d);letter-spacing:-.04em;color:var(--ink);opacity:.14;margin-bottom:18px} .pillar h3{font-size:23px;margin-bottom:12px} .pillar p{color:var(--muted);font-size:16px;margin:0} /* Lista com check */ .ticks{list-style:none;padding:0;margin:0;display:grid;gap:14px} .ticks li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;line-height:1.55} .ticks li::before{content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23142440' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat} .ticks.cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px} /* Destaque (frase) */ .quote-band{padding:clamp(80px,12vw,150px) 0;position:relative;overflow:hidden} .quote-band blockquote{margin:0;font:800 clamp(34px,5.6vw,78px)/1 var(--font-d);letter-spacing:-.035em;max-width:16ch;position:relative;z-index:2} .quote-band .big-stroke{position:absolute;right:-10%;top:10%;width:70%;opacity:.95;z-index:1} .quote-band .big-stroke path{fill:var(--orange);clip-path:inset(0 100% 0 0)} .quote-band.in .big-stroke path{animation:reveal 1.6s var(--ease-io) .2s forwards} /* Números */ .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px} .stat{padding:30px 26px;border-radius:var(--r-md);background:var(--raised);border:1px solid var(--line)} .stat .v{font:800 clamp(48px,5vw,68px)/1 var(--font-d);letter-spacing:-.04em;font-variant-numeric:tabular-nums} .stat .v em{font-style:normal;color:var(--green-ink)} .stat .l{margin-top:10px;font-weight:600;color:var(--muted);font-size:15px;line-height:1.45} .stat .bar{height:6px;border-radius:6px;background:var(--line);margin-top:18px;overflow:hidden} .stat .bar i{display:block;height:100%;width:var(--p,80%);background:linear-gradient(90deg,var(--tech),var(--green));transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease) .2s;border-radius:inherit} .in .stat .bar i,.stat.in .bar i{transform:scaleX(1)} .stat--pending .v{font-size:36px;color:var(--muted)} .tag-pending{display:inline-block;font:700 11px/1 var(--font-s);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:var(--pill);border:1px solid var(--line-strong);color:var(--muted);margin-bottom:14px} /* Logos */ .logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px} .logo-tile{position:relative;aspect-ratio:3/2;border-radius:var(--r-md);background:#fff;border:1px solid #E3E7EE;display:grid;place-items:center;padding:16%;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s;text-decoration:none} .logo-tile img{width:100%;height:100%;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.78;transition:filter .4s,opacity .4s,transform .4s var(--ease)} .logo-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)} .logo-tile:hover img{filter:none;opacity:1;transform:scale(1.04)} .logo-tile.dark{background:var(--navy);border-color:var(--navy)} .logo-tile.cover{padding:0}.logo-tile.cover img{object-fit:cover;filter:none;opacity:1} .logo-tile.cover:hover img{transform:scale(1.06)} .navy .logo-tile{border-color:rgba(255,255,255,.08)} .logo-tile .nm{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font:600 12px/1.2 var(--font-s);color:#fff;background:linear-gradient(transparent,rgba(14,26,48,.85));opacity:0;transform:translateY(6px);transition:.3s} .logo-tile:hover .nm,.logo-tile:focus-visible .nm{opacity:1;transform:none} /* Projetos */ .filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px} .filters button{border:1px solid var(--line);background:var(--raised);color:var(--ink);padding:11px 18px;border-radius:var(--pill);font:600 14px/1 var(--font-s);cursor:pointer;transition:.25s var(--ease)} .filters button:hover{border-color:var(--ink)} .filters button[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)} .subfilters{display:flex;flex-wrap:wrap;gap:8px;margin:-18px 0 32px;padding:14px;border-radius:var(--r-md);background:var(--raised);border:1px dashed var(--line-strong)} .subfilters[hidden]{display:none} .subfilters button{border:0;background:var(--surface);padding:9px 14px;border-radius:var(--pill);font:600 13px/1 var(--font-s);cursor:pointer;color:var(--ink)} .subfilters button[aria-pressed="true"]{background:var(--orange);color:var(--navy)} .proj-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .proj{display:flex;flex-direction:column;border-radius:var(--r-md);background:var(--raised);border:1px solid var(--line);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s,opacity .35s;text-decoration:none;color:var(--ink)} .proj:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)} .proj .lg{aspect-ratio:16/10;display:grid;place-items:center;padding:12% 16%;background:#fff;border-bottom:1px solid var(--line)} .proj .lg.dark{background:var(--navy)} .proj .lg.cover{padding:0}.proj .lg.cover img{width:100%;height:100%;object-fit:cover} .proj .lg img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease)} .proj:hover .lg img{transform:scale(1.05)} .proj .lg .ph{font:800 22px/1.1 var(--font-d);text-align:center;color:var(--navy);letter-spacing:-.02em} .proj .bd{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1} .proj h3{font-size:17px;line-height:1.25} .proj .seg{font:700 11.5px/1.2 var(--font-s);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-ink)} .proj .sv{font-size:13.5px;color:var(--muted);line-height:1.45} .proj .ext{margin-top:auto;padding-top:6px;font:600 13px/1 var(--font-s);display:inline-flex;gap:6px;align-items:center} .proj .ext svg{width:14px;height:14px} .proj.hide{display:none} .proj.pop{animation:pop .5s var(--ease) both} @keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}} .count-note{font-size:14px;color:var(--muted);margin:-14px 0 24px} /* Timeline */ .tl{position:relative;padding-left:44px;max-width:860px} .tl::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--line)} .tl .fill{position:absolute;left:11px;top:8px;width:2px;height:0;background:linear-gradient(var(--orange),var(--green));box-shadow:0 0 12px rgba(215,247,91,.5)} .tl-item{position:relative;padding:0 0 46px} .tl-item::before{content:"";position:absolute;left:-41px;top:6px;width:20px;height:20px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);transition:.5s var(--ease)} .tl-item.in::before{border-color:var(--orange);background:var(--orange);box-shadow:var(--glow-o)} .tl-item .when{font:700 13px/1 var(--font-s);letter-spacing:.12em;text-transform:uppercase;color:var(--orange-ink);margin-bottom:10px} .tl-item h3{font-size:24px;margin-bottom:10px} .tl-item p{color:var(--muted);margin:0;max-width:62ch} /* Equipe */ .team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px} .person{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px} .person .ph{width:min(190px,100%);aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid var(--line);box-shadow:0 0 0 7px var(--surface),0 0 0 8px var(--line);background:var(--raised);display:grid;place-items:center;font:800 46px/1 var(--font-d);color:var(--muted);position:relative} .person .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .person:hover .ph img{transform:scale(1.07)} .person .ph::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid transparent;border-top-color:var(--orange);border-right-color:var(--green);opacity:0;transition:opacity .4s,transform 1.2s var(--ease)} .person:hover .ph::after{opacity:1;transform:rotate(180deg)} .person .nm{font:700 20px/1.2 var(--font-d)} .person .rl{font-size:15px;color:var(--muted);margin-top:-8px} .person .pending{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} /* CTA band */ .cta{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:clamp(48px,7vw,96px);background:var(--navy);color:#fff;isolation:isolate} .cta h2{max-width:15ch;color:#fff} .cta p{color:#C9D2E3;max-width:52ch;margin-top:20px;font-size:19px} .cta .cta-stroke{position:absolute;right:-6%;bottom:-12%;width:62%;z-index:-1} .cta .cta-stroke path{fill:var(--orange);clip-path:inset(0 100% 0 0)} .cta .cta-stroke path+path{fill:var(--green)} .cta.in .cta-stroke path{animation:reveal 1.5s var(--ease-io) .2s forwards} .cta.in .cta-stroke path+path{animation-delay:.8s} .cta .btn--g{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)} .cta .btn--g:hover{box-shadow:inset 0 0 0 1.5px #fff} /* Page hero */ .phero{padding:calc(var(--hdr) + clamp(56px,9vw,120px)) 0 clamp(56px,8vw,100px);position:relative;overflow:hidden} .phero .crumbs{font-size:13.5px;color:var(--muted);margin-bottom:26px;display:flex;gap:8px;flex-wrap:wrap} .phero .crumbs a{text-decoration:none}.phero .crumbs a:hover{color:var(--ink)} .phero h1{max-width:18ch} .phero .lead{margin-top:28px} .phero-art{position:absolute;right:-4%;top:18%;width:min(560px,48%);z-index:0;pointer-events:none} .phero .wrap{position:relative;z-index:2} .phero-art .b{fill:var(--orange);clip-path:inset(0 100% 0 0);animation:reveal 1.5s var(--ease-io) .4s forwards} .phero-art .g{fill:none;stroke:var(--green);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:lstroke 1.6s var(--ease-io) 1s forwards;filter:drop-shadow(0 0 8px rgba(215,247,91,.7))} .phero-art .r{fill:none;stroke:var(--tech);stroke-width:2} .phero-art .d{fill:var(--green);animation:spark 3s ease-in-out infinite} /* Steps (método) */ .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:s;border-top:1px solid var(--line)} .step{padding:30px 24px 30px 0;border-bottom:1px solid var(--line);position:relative} .step .n{font:800 15px/1 var(--font-d);color:var(--orange-ink);margin-bottom:14px;display:flex;align-items:center;gap:10px} .step .n::after{content:"";flex:1;height:1px;background:var(--line);margin-right:-24px} .step h3{font-size:20px;margin-bottom:8px} .step p{font-size:15px;color:var(--muted);margin:0} /* Segmentos */ .segs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} .seg-card{padding:34px;border-radius:var(--r-lg);background:var(--raised);border:1px solid var(--line);position:relative;overflow:hidden} .seg-card h3{font-size:26px;margin-bottom:12px;display:flex;align-items:center;gap:14px} .seg-card h3 i{width:14px;height:14px;border-radius:50%;background:var(--orange);box-shadow:var(--glow-o)} .seg-card:nth-child(2) h3 i{background:var(--green);box-shadow:var(--glow-g)} .seg-card:nth-child(3) h3 i{background:var(--tech)} .seg-card p{color:var(--muted);margin:0} /* Fontes de dados (IA) */ .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} .fact{padding:32px;border-radius:var(--r-md);background:var(--raised);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px} .fact .v{font:800 clamp(52px,5.4vw,76px)/1 var(--font-d);letter-spacing:-.04em} .fact .v em{font-style:normal;color:var(--green-ink)} .fact p{margin:0;font-size:16px;line-height:1.55} .fact cite{font-style:normal;font-size:13px;color:var(--muted);line-height:1.5;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)} .fact cite a{color:var(--muted)} /* Rede animada IA */ .net{width:100%;height:auto} .net line{stroke:var(--tech);stroke-width:1.4;opacity:.55;stroke-dasharray:1;stroke-dashoffset:1} .in .net line,.net.in line{animation:lstroke 1.4s var(--ease-io) forwards} .net circle{fill:var(--tech)} .net circle.g{fill:var(--green);filter:drop-shadow(0 0 6px rgba(215,247,91,.9));animation:spark 2.6s ease-in-out infinite} .net circle.o{fill:var(--orange)} .navy .net circle{fill:#5B86D1} .navy .net circle.g{fill:var(--green)}.navy .net circle.o{fill:var(--orange)} /* Painel tráfego */ .panel{border-radius:var(--r-lg);background:var(--raised);border:1px solid var(--line);padding:clamp(22px,3vw,36px)} .panel-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px} .kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .kpi{padding:20px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)} .kpi .k{font:700 12px/1 var(--font-s);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .kpi .v{font:800 34px/1 var(--font-d);margin:12px 0 6px;font-variant-numeric:tabular-nums;color:var(--muted)} .kpi small{font-size:12.5px;color:var(--muted)} .chart{margin-top:22px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);padding:18px} .chart svg{width:100%;height:auto} .chart .ln{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px rgba(215,247,91,.5))} .chart .ar{fill:url(#ga);opacity:0;transition:opacity 1s .8s} .chart .br{fill:var(--tech);transform:scaleY(0);transform-box:fill-box;transform-origin:bottom;transition:transform 1s var(--ease)} .chart .gl{stroke:var(--line);stroke-width:1} .in .chart .ln,.chart.in .ln{animation:lstroke 2s var(--ease-io) .2s forwards} .in .chart .ar,.chart.in .ar{opacity:.5} .in .chart .br,.chart.in .br{transform:scaleY(1)} .chart-note{font-size:12.5px;color:var(--muted);margin-top:10px} /* Mockups ---------------------------------------------------------- */ .mock-label{display:inline-flex;gap:8px;align-items:center;font:700 11px/1 var(--font-s);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 10px;border-radius:var(--pill);background:var(--surface);border:1px solid var(--line)} .showcase{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px} .sc{grid-column:span 6;border-radius:var(--r-lg);background:var(--raised);border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;gap:20px;overflow:hidden;position:relative;transition:transform .5s var(--ease),box-shadow .5s} .sc:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)} .sc--w{grid-column:span 12}.sc--7{grid-column:span 7}.sc--5{grid-column:span 5}.sc--4{grid-column:span 4}.sc--8{grid-column:span 8} .sc-stage{position:relative;border-radius:18px;background:linear-gradient(160deg,#EEF1F6,#E3E8F1);min-height:280px;display:grid;place-items:center;padding:26px;overflow:hidden} .navy .sc-stage{background:linear-gradient(160deg,#1F3760,#162a4b)} .sc-stage.dk{background:linear-gradient(160deg,#142440,#0E1A30)} .sc h3{font-size:22px} .sc p{margin:6px 0 0;color:var(--muted);font-size:15.5px} .sc .chips{margin-top:12px} /* browser */ .browser{width:100%;max-width:640px;border-radius:12px;background:#fff;box-shadow:0 30px 60px -20px rgba(20,36,64,.35);overflow:hidden;transform:perspective(1200px) rotateX(4deg);transition:transform .6s var(--ease)} .sc:hover .browser{transform:perspective(1200px) rotateX(0)} .browser .bar{height:30px;background:#EEF0F4;display:flex;align-items:center;gap:6px;padding:0 12px} .browser .bar i{width:9px;height:9px;border-radius:50%;background:#CDD3DD} .browser .bar i:first-child{background:#FF8A65}.browser .bar i:nth-child(2){background:#FFD54F}.browser .bar i:nth-child(3){background:#81C784} .browser .bar span{margin-left:12px;flex:1;height:16px;border-radius:8px;background:#fff;font-size:9px;line-height:16px;padding-left:8px;color:#8C96A8} .bsite{display:grid;grid-template-columns:1.2fr 1fr;min-height:240px} .bsite .l{padding:26px;display:flex;flex-direction:column;gap:10px;justify-content:center} .bsite .l b{font:800 24px/1.05 var(--font-d);color:var(--navy);letter-spacing:-.02em} .bsite .r{background:var(--navy);position:relative;overflow:hidden} .bar-s{height:7px;border-radius:4px;background:#E3E7EE} .pill-s{width:96px;height:26px;border-radius:13px;background:var(--orange);margin-top:6px} .phone{width:170px;aspect-ratio:9/19;border-radius:28px;background:#0E1A30;padding:8px;box-shadow:0 30px 60px -20px rgba(20,36,64,.45);position:relative;flex:none} .phone .scr{width:100%;height:100%;border-radius:21px;background:#fff;overflow:hidden;position:relative;display:flex;flex-direction:column} .phone .notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:54px;height:14px;border-radius:8px;background:#0E1A30;z-index:3} .phones{display:flex;gap:18px;align-items:flex-end;justify-content:center} .phones .phone:nth-child(2){transform:translateY(-20px)} .app-top{background:var(--navy);color:#fff;padding:30px 12px 14px;font:700 12px/1.2 var(--font-d)} .app-top small{display:block;font:500 9px/1.3 var(--font-s);color:#A9B4C8;margin-bottom:4px} .app-body{padding:10px;display:flex;flex-direction:column;gap:8px;flex:1;background:#F5F6F8} .slot{display:flex;align-items:center;gap:8px;background:#fff;border-radius:10px;padding:8px;font-size:9px;color:var(--navy);font-weight:600} .slot i{width:22px;height:22px;border-radius:7px;background:var(--surface);flex:none} .slot.on{background:var(--orange);color:var(--navy)} .slot.on i{background:rgba(255,255,255,.5)} .app-tab{display:flex;justify-content:space-around;padding:8px 0 10px;background:#fff;border-top:1px solid #E3E7EE} .app-tab i{width:16px;height:16px;border-radius:5px;background:#D7DBE3}.app-tab i:first-child{background:var(--orange)} /* dashboard */ .dash{width:100%;max-width:680px;border-radius:14px;background:#0E1A30;color:#fff;display:grid;grid-template-columns:120px 1fr;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);font-size:10px} .dash .side{background:#142440;padding:14px 10px;display:flex;flex-direction:column;gap:8px} .dash .side b{font:800 12px/1 var(--font-d);margin-bottom:8px;color:#fff} .dash .side span{height:22px;border-radius:7px;background:rgba(255,255,255,.06);display:flex;align-items:center;padding-left:8px;color:#A9B4C8} .dash .side span.on{background:rgba(255,105,46,.18);color:var(--orange)} .dash .main{padding:14px;display:grid;gap:10px} .dash .row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .dash .tile{background:#1C3157;border-radius:10px;padding:10px} .dash .tile small{color:#A9B4C8;display:block;font-size:8.5px;text-transform:uppercase;letter-spacing:.08em} .dash .tile b{font:800 18px/1.3 var(--font-d);display:block} .dash .tile b.g{color:var(--green)}.dash .tile b.o{color:var(--orange)} .dash svg{width:100%;height:auto} /* controle (kanban/tabela) */ .ctrl{width:100%;max-width:640px;background:#fff;border-radius:14px;box-shadow:0 30px 60px -20px rgba(20,36,64,.3);padding:14px;font-size:10px;color:var(--navy)} .ctrl .th,.ctrl .tr{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:8px;align-items:center;padding:8px 6px;border-bottom:1px solid #EEF0F4} .ctrl .th{font-weight:700;color:#6B7588;text-transform:uppercase;letter-spacing:.06em;font-size:8.5px} .ctrl .tr b{font-weight:600} .st{display:inline-block;padding:3px 8px;border-radius:10px;font-weight:700;font-size:8.5px} .st.ok{background:rgba(215,247,91,.18);color:#4F6B00}.st.wip{background:rgba(255,105,46,.16);color:#B8400F}.st.nx{background:rgba(46,38,230,.12);color:#2E26E6} .prog{height:6px;border-radius:4px;background:#EEF0F4;overflow:hidden}.prog i{display:block;height:100%;background:var(--tech);border-radius:inherit} /* mapa de dados */ .flow{width:100%;max-width:660px} .flow .nd rect{fill:#fff;stroke:#D7DBE3;rx:12} .flow .nd.o rect{fill:var(--orange);stroke:none}.flow .nd.g rect{fill:var(--green);stroke:none}.flow .nd.n rect{fill:var(--navy);stroke:none} .flow text{font:600 11px var(--font-s);fill:var(--navy)} .flow .nd.n text{fill:#fff} .flow .ed{fill:none;stroke:var(--tech);stroke-width:1.6;stroke-dasharray:5 5;animation:dash 1.2s linear infinite} @keyframes dash{to{stroke-dashoffset:-20}} .flow .dot{fill:var(--green);filter:drop-shadow(0 0 4px var(--green))} /* email */ .mail{width:100%;max-width:360px;background:#fff;border-radius:14px;box-shadow:0 30px 60px -20px rgba(20,36,64,.35);overflow:hidden;font-size:10px;color:var(--navy)} .mail .hd{padding:10px 14px;border-bottom:1px solid #EEF0F4;display:flex;justify-content:space-between;color:#6B7588} .mail .hero-m{background:var(--navy);color:#fff;padding:22px 18px;position:relative;overflow:hidden} .mail .hero-m b{font:800 18px/1.1 var(--font-d);display:block;max-width:12ch;position:relative;z-index:1} .mail .hero-m svg{position:absolute;right:-20px;bottom:-10px;width:70%} .mail .bd{padding:14px 18px;display:grid;gap:8px} .mail .btnm{justify-self:start;background:var(--orange);color:var(--navy);font-weight:700;padding:8px 14px;border-radius:14px} .send{position:absolute;right:20px;top:20px;display:flex;flex-direction:column;gap:6px} .send span{background:#fff;border-radius:10px;padding:6px 10px;font:600 10px/1.2 var(--font-s);color:var(--navy);box-shadow:var(--shadow-card);display:flex;gap:6px;align-items:center;animation:floaty 4s ease-in-out infinite} .send span:nth-child(2){animation-delay:.6s}.send span:nth-child(3){animation-delay:1.2s} .send span i{width:7px;height:7px;border-radius:50%;background:var(--green)} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} /* slides */ .deck{position:relative;width:100%;max-width:560px;aspect-ratio:16/10} .deck .sl{position:absolute;inset:0;border-radius:12px;background:#fff;box-shadow:0 20px 50px -20px rgba(20,36,64,.4);overflow:hidden;transition:transform .6s var(--ease)} .deck .sl:nth-child(1){transform:translate(-8%,8%) rotate(-5deg) scale(.86);background:var(--offwhite)} .deck .sl:nth-child(2){transform:translate(8%,4%) rotate(4deg) scale(.9);background:var(--tech)} .sc:hover .deck .sl:nth-child(1){transform:translate(-14%,10%) rotate(-8deg) scale(.86)} .sc:hover .deck .sl:nth-child(2){transform:translate(14%,4%) rotate(7deg) scale(.9)} .deck .sl.f{display:grid;grid-template-columns:1fr 1fr;background:var(--navy);color:#fff} .deck .sl.f .t{padding:8%;display:flex;flex-direction:column;justify-content:center;gap:10px} .deck .sl.f b{font:800 clamp(16px,2.2vw,26px)/1 var(--font-d);letter-spacing:-.02em} .deck .sl.f small{color:#A9B4C8;font-size:10px} .deck .sl.f .v{position:relative} /* social */ .feed{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding-top:26px;background:#fff} .feed i{aspect-ratio:1;display:block;position:relative;overflow:hidden} .feed i:nth-child(1){background:var(--navy)}.feed i:nth-child(2){background:var(--orange)}.feed i:nth-child(3){background:#EEF1F6} .feed i:nth-child(4){background:#EEF1F6}.feed i:nth-child(5){background:var(--tech)}.feed i:nth-child(6){background:var(--navy)} .feed i:nth-child(7){background:var(--green)}.feed i:nth-child(8){background:var(--navy)}.feed i:nth-child(9){background:var(--orange)} .feed i::after{content:"";position:absolute;left:18%;right:18%;top:40%;height:12%;border-radius:4px;background:rgba(255,255,255,.65)} .feed i:nth-child(3)::after,.feed i:nth-child(4)::after{background:var(--navy);opacity:.3} .post{width:200px;background:#fff;border-radius:16px;box-shadow:0 30px 60px -20px rgba(20,36,64,.35);overflow:hidden;font-size:9px} .post .ph-h{display:flex;gap:6px;align-items:center;padding:8px;font-weight:700;color:var(--navy)} .post .ph-h i{width:18px;height:18px;border-radius:50%;background:var(--orange)} .post .img{aspect-ratio:4/5;background:var(--navy);position:relative;overflow:hidden;padding:16px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end} .post .img b{font:800 17px/1.05 var(--font-d);position:relative;z-index:1} .post .img svg{position:absolute;left:-10%;top:30%;width:120%} .post .act{display:flex;gap:8px;padding:8px}.post .act i{width:14px;height:14px;border-radius:4px;background:#D7DBE3} /* vídeo */ .video{width:100%;max-width:640px;border-radius:14px;background:#0E1A30;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)} .video .vw{aspect-ratio:16/8;position:relative;background:radial-gradient(circle at 30% 40%,#2E26E6,#142440 60%);overflow:hidden} .video .vw .play{position:absolute;left:50%;top:50%;width:62px;height:62px;border-radius:50%;background:var(--orange);transform:translate(-50%,-50%);display:grid;place-items:center;box-shadow:var(--glow-o);animation:btnpulse 2.4s infinite} .video .vw .play::after{content:"";border-left:18px solid var(--navy);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px} .video .vw .rec{position:absolute;left:14px;top:12px;font:700 10px/1 var(--font-s);color:#fff;display:flex;gap:6px;align-items:center} .video .vw .rec i{width:8px;height:8px;border-radius:50%;background:#FF5252;animation:spark 1.2s infinite} .video .tl2{padding:10px 12px;display:grid;gap:6px} .video .trk{height:16px;border-radius:5px;display:flex;gap:3px} .video .trk i{height:100%;border-radius:4px;display:block} .video .trk.a i{background:var(--tech)}.video .trk.b i{background:var(--orange)}.video .trk.c i{background:rgba(215,247,91,.6)} .video .head{position:relative;height:0} .video .head::after{content:"";position:absolute;top:-60px;height:66px;width:2px;background:#fff;left:20%;animation:scrub 6s linear infinite} @keyframes scrub{to{left:92%}} /* foto */ .cam{position:relative;width:100%;max-width:560px;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#1C3157,#142440)} .cam .fr{position:absolute;inset:12%;border:1.5px solid rgba(255,255,255,.5)} .cam .fr::before,.cam .fr::after{content:"";position:absolute;background:rgba(255,255,255,.25)} .cam .fr::before{left:33.3%;right:33.3%;top:0;bottom:0;border-left:1px solid rgba(255,255,255,.25);border-right:1px solid rgba(255,255,255,.25);background:none} .cam .fr::after{top:33.3%;bottom:33.3%;left:0;right:0;border-top:1px solid rgba(255,255,255,.25);border-bottom:1px solid rgba(255,255,255,.25);background:none} .cam .fc{position:absolute;left:50%;top:46%;width:70px;height:70px;transform:translate(-50%,-50%);border:2px solid var(--green);border-radius:6px;box-shadow:var(--glow-g);animation:focus 3s var(--ease) infinite} @keyframes focus{0%,100%{transform:translate(-50%,-50%) scale(1.25);opacity:.4}40%,70%{transform:translate(-50%,-50%) scale(1);opacity:1}} .cam .info{position:absolute;left:14px;bottom:12px;right:14px;display:flex;justify-content:space-between;font:600 10px/1 var(--font-s);color:#fff;letter-spacing:.06em} .cam .light{position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(rgba(255,105,46,.55),transparent 70%);left:60%;top:-10%;filter:blur(8px)} .cam .flash{position:absolute;inset:0;background:#fff;opacity:0;animation:flash 6s infinite} @keyframes flash{0%,88%,100%{opacity:0}90%{opacity:.8}} /* Contato */ .form{display:grid;gap:16px} .form .two{display:grid;grid-template-columns:1fr 1fr;gap:16px} .field{display:flex;flex-direction:column;gap:8px} .field label{font:600 14px/1.2 var(--font-s)} .field input,.field select,.field textarea{font:400 16px/1.4 var(--font-s);color:var(--navy);background:#fff;border:1.5px solid var(--line-strong);border-radius:12px;padding:14px 16px;transition:border-color .2s,box-shadow .2s;width:100%} .field textarea{min-height:140px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 4px rgba(215,247,91,.35)} .form .note{font-size:13px;color:var(--muted)} .form-ok{display:none;padding:18px;border-radius:12px;background:rgba(215,247,91,.14);border:1px solid rgba(0,128,74,.4);color:var(--navy);font-weight:600} .contact-list{list-style:none;padding:0;margin:0;display:grid;gap:18px} .contact-list li{display:flex;gap:16px;align-items:flex-start} .contact-list .ico{background:rgba(255,255,255,.08);color:var(--orange)} .contact-list b{display:block;font:700 13px/1 var(--font-s);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .contact-list a{text-decoration:none;font-size:18px;font-weight:600} .contact-list a:hover{color:var(--orange)} /* Footer ----------------------------------------------------------- */ .ftr{background:var(--navy-3);color:#C9D2E3;padding:clamp(64px,8vw,96px) 0 32px;position:relative;overflow:hidden} .ftr .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px} .ftr .brand svg{height:84px} .ftr .brand .u,.ftr .brand .l{fill:#fff} .ftr h4{font:700 13px/1 var(--font-s);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:18px} .ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .ftr a{text-decoration:none;color:#C9D2E3;font-size:15px;transition:color .2s} .ftr a:hover{color:var(--orange)} .ftr .sig{font:800 clamp(28px,4vw,48px)/1 var(--font-d);letter-spacing:-.03em;color:#fff;margin-top:22px;max-width:14ch} .ftr .sig span{color:var(--orange)} .ftr .bottom{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:#8A97B0} .ftr .social{display:flex;gap:10px;margin-top:22px} .ftr .social a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);transition:background .3s,transform .3s var(--ease)} .ftr .social a:hover{background:var(--orange);color:var(--navy);transform:translateY(-3px)} .ftr .social svg{width:18px;height:18px} .ftr-stroke{position:absolute;right:-8%;top:-30px;width:46%;opacity:.9;pointer-events:none} .ftr-stroke path{fill:none;stroke:var(--green);stroke-width:2;opacity:.5} /* WhatsApp flutuante */ .wa{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;align-items:center;gap:10px;height:60px;padding:0 6px 0 6px;border-radius:var(--pill);background:#25D366;color:#0E1A30;text-decoration:none;box-shadow:0 12px 30px rgba(20,36,64,.3);transition:transform .3s var(--ease),padding .4s var(--ease);font:700 15px/1 var(--font-s)} .wa .i{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;flex:none} .wa .i svg{width:26px;height:26px;color:#1DA851} .wa .t{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .5s var(--ease)} .wa:hover .t,.wa.peek .t{max-width:200px;padding-right:14px} .wa:hover{transform:translateY(-3px)} .wa::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:waping 2.6s infinite} @keyframes waping{70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}} /* Reveal ----------------------------------------------------------- */ .rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform 1s var(--ease)} .rv.l{transform:translateX(-48px)}.rv.r{transform:translateX(48px)}.rv.s{transform:scale(.94)} .rv.in{opacity:1;transform:none} .st-1{transition-delay:.08s}.st-2{transition-delay:.16s}.st-3{transition-delay:.24s}.st-4{transition-delay:.32s}.st-5{transition-delay:.4s}.st-6{transition-delay:.48s} .ttl-rv{overflow:hidden;display:block} .ttl-rv>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)} .in .ttl-rv>span,.ttl-rv.in>span{transform:none} [data-par]{will-change:transform} body.leaving main{opacity:0;transform:translateY(-10px);transition:opacity .3s,transform .3s} main{animation:pagein .6s var(--ease) both} @keyframes pagein{from{opacity:0;transform:translateY(12px)}} /* Responsivo ------------------------------------------------------- */ @media (max-width:1100px){ .logos{grid-template-columns:repeat(4,minmax(0,1fr))} .proj-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .stats{grid-template-columns:repeat(2,minmax(0,1fr))} .steps{grid-template-columns:repeat(2,minmax(0,1fr))} .ftr .top{grid-template-columns:1fr 1fr} .sc--7,.sc--5,.sc--4,.sc--8{grid-column:span 6} } @media (max-width:960px){ .nav,.hdr-cta{display:none} .burger{display:block} .hero .wrap{grid-template-columns:1fr} .hero-logo{display:none} .split{grid-template-columns:1fr} .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))} .facts{grid-template-columns:1fr 1fr} .team{grid-template-columns:repeat(2,minmax(0,1fr))} .sc,.sc--7,.sc--5,.sc--4,.sc--8{grid-column:span 12} .phero-art{opacity:.35;width:70%;top:auto;bottom:0} } @media (max-width:640px){ :root{--hdr:68px} body{font-size:16px} .g2,.g3,.g4,.segs,.facts,.kpis{grid-template-columns:1fr} .logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .proj-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .proj .bd{padding:12px} .proj .sv{display:none} .stats{grid-template-columns:1fr 1fr;gap:12px} .stat{padding:20px 16px} .steps{grid-template-columns:1fr} .ticks.cols{grid-template-columns:1fr} .team{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px} .person .nm{font-size:16px}.person .rl{font-size:13px} .form .two{grid-template-columns:1fr} .ftr .top{grid-template-columns:1fr} .btns .btn{width:100%} .wa{right:14px;bottom:14px} .sc{padding:18px}.sc-stage{padding:16px;min-height:220px} .phones .phone{width:130px}.phones .phone:nth-child(3){display:none} .dash{grid-template-columns:1fr}.dash .side{display:none} .bsite{grid-template-columns:1fr}.bsite .r{display:none} .marquee span{gap:28px}.marquee .track{gap:28px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important} .rv,.hero-title .w,.hero-sub,.hero-fade,.shape{opacity:1!important;transform:none!important;filter:none!important} .marquee .track{animation:none} } /* Scroll story: celular fixo com feed rolando ------------------------ */ .story{position:relative} .story .stk{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden} .story .stk .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center} .story-steps{position:relative;min-height:260px} .story-step{position:absolute;inset:0 0 auto;opacity:0;transform:translateY(30px);transition:opacity .6s var(--ease),transform .7s var(--ease);pointer-events:none} .story-step.on{opacity:1;transform:none;pointer-events:auto} .story-step .num-tag{display:block;margin-bottom:14px} .story-step h3{font-size:clamp(26px,3vw,40px);line-height:1.05;letter-spacing:-.025em;margin-bottom:14px} .story-step p{color:var(--muted);font-size:17px;max-width:40ch} .story-dots{display:flex;gap:8px;margin-top:22px} .story-dots i{width:28px;height:4px;border-radius:4px;background:var(--line);transition:background .4s,width .4s} .story-dots i.on{background:var(--orange);width:44px} .bigphone{width:clamp(250px,24vw,320px);aspect-ratio:9/19.3;border-radius:46px;background:#0B1528;padding:11px;box-shadow:0 50px 100px -30px rgba(14,26,48,.6),inset 0 0 0 2px #26365a;position:relative;flex:none} .bigphone::before{content:"";position:absolute;right:-3px;top:22%;width:4px;height:64px;border-radius:3px;background:#26365a} .bigphone .scr{width:100%;height:100%;border-radius:36px;overflow:hidden;background:#fff;position:relative} .bigphone .island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:92px;height:26px;border-radius:16px;background:#0B1528;z-index:5} .bp-status{position:absolute;inset:0 0 auto;height:44px;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:6px 22px 0;font:700 11px/1 var(--font-s);color:var(--navy);background:linear-gradient(#fff 60%,rgba(255,255,255,0))} .bp-feed{position:absolute;left:0;right:0;top:0;will-change:transform} .bp-feed .ig-hd{height:88px;padding:48px 14px 0;display:flex;justify-content:space-between;align-items:center;font:800 15px/1 var(--font-d);color:var(--navy)} .bp-feed .ig-hd i{display:flex;gap:10px}.bp-feed .ig-hd i b{width:18px;height:18px;border-radius:6px;border:2px solid var(--navy)} .stories{display:flex;gap:10px;padding:6px 12px 12px;overflow:hidden} .stories span{width:54px;height:54px;border-radius:50%;flex:none;padding:2.5px;background:conic-gradient(var(--orange),var(--green),var(--tech),var(--orange))} .stories span i{display:block;width:100%;height:100%;border-radius:50%;border:2.5px solid #fff;background:#E3E8F1} .stories span:nth-child(2) i{background:var(--navy)}.stories span:nth-child(3) i{background:var(--orange)}.stories span:nth-child(4) i{background:var(--tech)} .igp{border-top:1px solid #EEF0F4} .igp .h{display:flex;align-items:center;gap:8px;padding:10px 12px;font:700 11.5px/1 var(--font-s);color:var(--navy)} .igp .h i{width:26px;height:26px;border-radius:50%;background:var(--navy);display:grid;place-items:center} .igp .h i::after{content:"";width:12px;height:12px;border-radius:3px;background:var(--orange)} .igp .h small{display:block;font-weight:500;color:#6B7588;font-size:10px;margin-top:3px} .igp .m{aspect-ratio:4/5;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;color:#fff} .igp .m b{font:800 22px/1.02 var(--font-d);letter-spacing:-.02em;position:relative;z-index:2;max-width:11ch} .igp .m small{position:relative;z-index:2;font:600 10.5px/1.3 var(--font-s);opacity:.85;margin-top:8px;letter-spacing:.04em;text-transform:uppercase} .igp .m svg{position:absolute;z-index:1} .igp .m.n{background:var(--navy)}.igp .m.o{background:var(--orange);color:var(--navy)}.igp .m.t{background:var(--tech)}.igp .m.w{background:#EEF1F6;color:var(--navy)}.igp .m.g{background:#0E1A30} .igp .a{display:flex;gap:14px;padding:10px 12px 4px} .igp .a i{width:20px;height:20px;border-radius:6px;border:2px solid var(--navy)} .igp .a i.lk{border:0;background:var(--orange);clip-path:path("M10 18 L2.5 10.5 A4.6 4.6 0 0 1 10 4 A4.6 4.6 0 0 1 17.5 10.5 Z");border-radius:0} .igp .c{padding:2px 12px 14px;font-size:11px;color:var(--navy)} .igp .c b{font-weight:700} .igp .m .dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:3} .igp .m .dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5)}.igp .m .dots i:first-child{background:#fff} .igp .m .bars{display:flex;align-items:flex-end;gap:6px;height:70px;position:relative;z-index:2;margin-bottom:12px} .igp .m .bars i{flex:1;border-radius:4px 4px 0 0;background:var(--green);box-shadow:var(--glow-g)} .notif{position:absolute;left:10px;right:10px;top:-90px;z-index:6;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-radius:18px;padding:10px 12px;display:flex;gap:10px;align-items:center;box-shadow:0 12px 30px rgba(14,26,48,.25);font-size:10.5px;color:var(--navy);transition:top .6s var(--ease)} .notif.on{top:48px} .notif i{width:30px;height:30px;border-radius:9px;background:var(--orange);flex:none;display:grid;place-items:center;font:800 13px/1 var(--font-d);color:var(--navy)} .notif b{display:block;font-size:11px;margin-bottom:2px} .float-metrics{position:relative;height:100%;min-height:300px} .fm{position:absolute;background:var(--raised);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow-card);min-width:170px;opacity:0;transform:translateY(20px) scale(.95);transition:.6s var(--ease)} .fm.on{opacity:1;transform:none} .fm small{display:block;font:700 10.5px/1 var(--font-s);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .fm b{font:800 24px/1 var(--font-d);display:flex;align-items:center;gap:8px} .fm b i{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:var(--glow-g)} .fm .spark-l{width:100%;height:28px;margin-top:8px} .fm .spark-l path{fill:none;stroke:var(--green);stroke-width:2.2;stroke-linecap:round} .fm:nth-child(1){top:4%;left:0}.fm:nth-child(2){top:36%;right:0}.fm:nth-child(3){bottom:6%;left:8%} .fm-note{position:absolute;bottom:-28px;left:0;font-size:11.5px;color:var(--muted)} /* Reels em loop */ .reel{position:absolute;inset:0;display:flex;flex-direction:column;animation:reel 12s var(--ease-io) infinite} .reel>div{flex:none;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:22px 16px 60px;color:#fff;overflow:hidden} .reel>div:nth-child(1){background:radial-gradient(circle at 70% 25%,#2E26E6,#142440 70%)} .reel>div:nth-child(2){background:radial-gradient(circle at 30% 30%,#FF8A5B,#FF692E 60%,#B8400F)} .reel>div:nth-child(3){background:radial-gradient(circle at 60% 30%,#1C3157,#0E1A30 70%)} .reel>div:nth-child(4){background:radial-gradient(circle at 70% 25%,#2E26E6,#142440 70%)} .reel b{font:800 24px/1.02 var(--font-d);max-width:10ch;position:relative;z-index:2} .reel small{font-size:10.5px;opacity:.85;margin-top:8px;position:relative;z-index:2} .reel .side{position:absolute;right:12px;bottom:70px;display:flex;flex-direction:column;gap:14px;z-index:2} .reel .side i{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.22);backdrop-filter:blur(6px)} .reel .ring{position:absolute;width:220px;height:220px;border-radius:50%;border:2px solid rgba(255,255,255,.25);top:12%;left:50%;transform:translateX(-50%);animation:spin 10s linear infinite} .reel .ring::after{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:var(--glow-g)} @keyframes spin{to{transform:translateX(-50%) rotate(360deg)}} @keyframes reel{0%,20%{transform:translateY(0)}25%,45%{transform:translateY(-100%)}50%,70%{transform:translateY(-200%)}75%,100%{transform:translateY(-300%)}} .reel-prog{position:absolute;top:50px;left:12px;right:12px;display:flex;gap:4px;z-index:4} .reel-prog i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden;position:relative} .reel-prog i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;animation:rp 12s linear infinite} .reel-prog i:nth-child(2)::after{animation-name:rp2}.reel-prog i:nth-child(3)::after{animation-name:rp3} @keyframes rp{0%{transform:scaleX(0)}25%,100%{transform:scaleX(1)}} @keyframes rp2{0%,25%{transform:scaleX(0)}50%,100%{transform:scaleX(1)}} @keyframes rp3{0%,50%{transform:scaleX(0)}75%,100%{transform:scaleX(1)}} .reel-heart{position:absolute;right:22px;bottom:150px;z-index:3;width:22px;height:22px;background:var(--orange);clip-path:path("M11 20 L2.7 11.6 A5 5 0 0 1 11 4.4 A5 5 0 0 1 19.3 11.6 Z");animation:heart 3s ease-out infinite;opacity:0} .reel-heart:nth-of-type(2){animation-delay:1s;right:30px}.reel-heart:nth-of-type(3){animation-delay:2s;right:18px;background:var(--green)} @keyframes heart{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-120px) scale(1.1) rotate(-12deg)}} .trio{display:flex;justify-content:center;align-items:center;gap:clamp(12px,3vw,36px);perspective:1400px} .trio .bigphone{transition:transform 1s var(--ease)} .trio .bigphone:nth-child(1){transform:rotateY(18deg) translateZ(-80px) scale(.86)} .trio .bigphone:nth-child(3){transform:rotateY(-18deg) translateZ(-80px) scale(.86)} .trio:hover .bigphone:nth-child(1){transform:rotateY(8deg) translateZ(-40px) scale(.9)} .trio:hover .bigphone:nth-child(3){transform:rotateY(-8deg) translateZ(-40px) scale(.9)} .auto-feed{animation:autofeed 18s var(--ease-io) infinite} @keyframes autofeed{0%,12%{transform:translateY(0)}22%,37%{transform:translateY(-30%)}47%,62%{transform:translateY(-58%)}72%,87%{transform:translateY(-30%)}97%,100%{transform:translateY(0)}} @media (max-width:960px){ .story .stk{position:relative;height:auto;padding:var(--sec) 0} .story{height:auto!important} .story .stk .wrap{grid-template-columns:1fr;justify-items:center;text-align:left} .story-steps{min-height:0;width:100%} .story-step{position:relative;opacity:1;transform:none;margin-bottom:28px;pointer-events:auto} .story-dots,.float-metrics{display:none} .story .bp-feed{animation:autofeed 18s var(--ease-io) infinite} .trio .bigphone:nth-child(1),.trio .bigphone:nth-child(3){display:none} } @media (prefers-reduced-motion:reduce){.reel,.auto-feed{animation:none!important}} /* Tráfego: crescimento guiado pela rolagem --------------------------- */ .growth .stk .wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} .gchart{position:relative;border-radius:var(--r-lg);background:var(--raised);border:1px solid var(--line);padding:clamp(18px,2.4vw,30px);box-shadow:var(--shadow-card)} .gchart svg{width:100%;height:auto;overflow:visible} .gchart .gl{stroke:var(--line);stroke-width:1} .gchart .curve{fill:none;stroke:url(#gline);stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(215,247,91,.45))} .gchart .area{fill:url(#garea)} .gchart .ph-band{fill:var(--surface)} .gchart .ph-lbl{font:700 11px var(--font-s);letter-spacing:.08em;text-transform:uppercase;fill:var(--muted)} .gchart .head{fill:var(--green);filter:drop-shadow(0 0 10px var(--green))} .gchart .arrow{opacity:0;transition:opacity .4s} .gchart .arrow path{fill:var(--orange)} .gchart .arrow.g path{fill:var(--green)} .gchart .arrow.on{opacity:1;animation:arrowup 1.6s var(--ease) infinite} @keyframes arrowup{0%{transform:translateY(14px);opacity:0}30%{opacity:1}100%{transform:translateY(-26px);opacity:0}} .gchart .bar2{fill:var(--tech);opacity:.85;transform-box:fill-box;transform-origin:bottom} .gchart .axis{font:600 11px var(--font-s);fill:var(--muted)} .thermo{display:flex;align-items:center;gap:14px;margin-top:20px} .thermo .tb{flex:1;height:12px;border-radius:12px;background:var(--line);overflow:hidden;position:relative} .thermo .tb i{position:absolute;inset:0;background:linear-gradient(90deg,#2E26E6,#D7F75B 50%,#FF692E);transform-origin:left;transform:scaleX(var(--t,0))} .thermo b{font:700 13px/1 var(--font-s);min-width:118px;text-align:right} .thermo small{font:700 11px/1 var(--font-s);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .gnote{font-size:12.5px;color:var(--muted);margin-top:12px} .phase-pill{display:inline-flex;align-items:center;gap:8px;font:700 12px/1 var(--font-s);letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-radius:var(--pill);background:var(--surface);border:1px solid var(--line);margin-bottom:16px} .phase-pill i{width:10px;height:10px;border-radius:50%;background:var(--tech)} .story-step:nth-child(2) .phase-pill i{background:var(--green);box-shadow:var(--glow-g)} .story-step:nth-child(3) .phase-pill i{background:var(--orange);box-shadow:var(--glow-o)} .story-step:nth-child(4) .phase-pill i{background:var(--orange);box-shadow:var(--glow-o)} .duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px} .duo div{padding:14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:14px;line-height:1.45} .duo b{display:block;font:700 11px/1 var(--font-s);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;color:var(--orange-ink)} .duo div+div b{color:var(--green-ink)} @media (max-width:960px){.growth .stk .wrap{grid-template-columns:1fr}.growth .gchart{width:100%}} /* ================================================================ LINGUAGEM 2.0 (referência): blocos, faixas, padrões e cards ================================================================ */ :root{--lilac:#C9B8FF;--lime:#D7F75B} /* destaque de palavra: bloco inclinado */ .mk{position:relative;display:inline-block;z-index:0;white-space:nowrap;padding:0 .12em;margin:0 -.04em;color:#142440} .mk>svg{display:none} .mk::before{content:"";position:absolute;inset:.1em -.02em .02em;background:var(--lime);border-radius:.16em;z-index:-1;transform:rotate(-2.2deg) scaleX(0);transform-origin:left center;transition:transform .9s var(--ease-io) .25s} .in .mk::before,.mk.in::before{transform:rotate(-2.2deg) scaleX(1)} .mk--o::before{background:var(--orange)} .mk--l::before{background:var(--lilac)} .mk--b{color:#fff}.mk--b::before{background:var(--tech)} /* padrões */ .pat-dots{background-image:radial-gradient(circle,rgba(20,36,64,.9) 2.2px,transparent 2.6px);background-size:18px 18px} .pat-check{background-image:conic-gradient(rgba(20,36,64,.9) 25%,transparent 0 50%,rgba(20,36,64,.9) 0 75%,transparent 0);background-size:26px 26px} .pat-stripe{background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.9) 0 7px,transparent 7px 18px)} .pat-wave{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cpath d='M0 10c5-8 15-8 20 0s15 8 20 0' fill='none' stroke='%23142440' stroke-width='3'/%3E%3C/svg%3E");background-size:40px 20px} .pat-rings{background-image:radial-gradient(circle,transparent 7px,rgba(20,36,64,.85) 7.5px 9.5px,transparent 10px);background-size:30px 30px} /* faixas diagonais */ .tickers{position:relative;height:clamp(150px,17vw,230px);overflow:hidden;background:var(--surface)} .ticker{position:absolute;left:-6%;width:112%;padding:clamp(12px,1.4vw,18px) 0;top:16%;transform:rotate(-3.2deg);background:var(--lime);color:#142440;box-shadow:0 12px 30px rgba(20,36,64,.12);z-index:2} .ticker.b{top:46%;transform:rotate(2.6deg);background:var(--tech);color:#fff;z-index:1} .ticker .track{display:flex;width:max-content;animation:mq 34s linear infinite} .ticker.b .track{animation-direction:reverse;animation-duration:42s} .ticker span{display:inline-flex;align-items:center;gap:clamp(22px,3vw,44px);padding-right:clamp(22px,3vw,44px);font:800 clamp(22px,3vw,40px)/1 var(--font-d);text-transform:uppercase;letter-spacing:-.015em;white-space:nowrap} .ticker span::after{content:"";width:.62em;height:.62em;background:currentColor;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)} .ticker.b span:nth-child(odd)::after{background:var(--lime)} .ticker span:nth-child(3n)::after{background:var(--orange)} /* selo giratório */ .sticker{width:clamp(110px,11vw,150px);aspect-ratio:1;position:absolute;z-index:4;animation:rot 16s linear infinite} .sticker svg{width:100%;height:100%;overflow:visible} .sticker .bg{fill:var(--orange)} .sticker text{font:800 15.5px var(--font-d);letter-spacing:2.6px;fill:#142440} .sticker .st{fill:#142440} .sticker.lime .bg{fill:var(--lime)} .sticker.blue .bg{fill:var(--tech)}.sticker.blue text,.sticker.blue .st{fill:#fff} @keyframes rot{to{transform:rotate(360deg)}} /* hero em colagem */ .hero{background:var(--surface)} .hero .grid-bg{opacity:.7} .collage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(500px,100%);justify-self:end} .cl{position:relative;border-radius:28px;overflow:hidden;opacity:0;transform:translateY(40px) scale(.92) rotate(-2deg);transition:opacity .9s var(--ease),transform 1.1s var(--ease)} .hero.go .cl{opacity:1;transform:none} .cl--photo{grid-row:span 2;background:var(--lime);min-height:clamp(320px,34vw,440px)} .cl--photo .pat{position:absolute;inset:0;opacity:.35} .cl--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;transition:transform 1.2s var(--ease)} .cl--photo:hover img{transform:scale(1.04)} .cl--photo .cap{position:absolute;left:12px;bottom:12px;right:12px;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);font:600 12.5px/1.3 var(--font-s);color:#142440} .cl--photo .cap b{display:block;font:800 15px/1.1 var(--font-d)} .cl--logo{background:#142440;aspect-ratio:1;display:grid;place-items:center;padding:16%} .cl--logo svg{height:100%;width:auto} .cl--num{background:var(--tech);color:#fff;aspect-ratio:1;padding:18px;display:flex;flex-direction:column;justify-content:space-between} .cl--num b{font:800 clamp(52px,6vw,78px)/.9 var(--font-d);letter-spacing:-.05em} .cl--num b sup{font-size:.45em;vertical-align:top;color:var(--lime)} .cl--num .pat{position:absolute;right:-20px;top:-20px;width:90px;height:90px;border-radius:50%;background-color:var(--lime);opacity:1} .collage .sticker{left:-48px;bottom:-30px} .hero-chip{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:var(--pill);background:#fff;border:1px solid var(--line);font:600 13.5px/1 var(--font-s);margin-bottom:22px;box-shadow:var(--shadow-card)} .hero-chip i{width:28px;height:28px;border-radius:50%;background:var(--lime);display:grid;place-items:center} .hero-chip i svg{width:14px;height:14px;fill:#142440} /* arte das páginas internas */ .phero-art{position:absolute;right:max(-40px,calc((100vw - var(--wrap))/2 - 60px));top:calc(var(--hdr) + 40px);width:min(440px,40vw);aspect-ratio:1;z-index:0;pointer-events:none} .phero-art svg{display:none} .pa{position:absolute;display:block;opacity:0;transform:scale(.6) rotate(-10deg);animation:paIn 1s var(--ease) forwards} .pa-lime{left:8%;top:12%;width:46%;aspect-ratio:1;border-radius:32px;background-color:var(--lime);animation-delay:.2s} .pa-orange{right:4%;top:2%;width:34%;aspect-ratio:1;border-radius:50%;background:var(--orange);animation-delay:.35s} .pa-blue{right:10%;bottom:6%;width:48%;aspect-ratio:1;border-radius:50% 50% 0 0;background-color:var(--tech);animation-delay:.5s} .pa-ring{left:2%;bottom:4%;width:30%;aspect-ratio:1;border-radius:50%;border:3px solid #142440;animation-delay:.65s} .pa-star{left:48%;top:44%;width:14%;aspect-ratio:1;animation-delay:.8s} .pa-star svg{display:block!important;width:100%;height:100%;fill:#142440;animation:rot 12s linear infinite} .navy .pa-ring{border-color:#fff}.navy .pa-star svg{fill:var(--lime)} @keyframes paIn{to{opacity:1;transform:none}} /* CTA */ .cta-stroke{display:none} .cta-art{position:absolute;right:0;top:0;bottom:0;width:46%;z-index:-1;pointer-events:none} .ca{position:absolute;display:block;transform:scale(0);transition:transform 1s var(--ease)} .cta.in .ca{transform:none} .ca-lime{right:6%;top:-14%;width:52%;aspect-ratio:1;border-radius:50%;background-color:var(--lime);transition-delay:.1s} .ca-orange{right:44%;bottom:-18%;width:34%;aspect-ratio:1;border-radius:36px;background:var(--orange);transition-delay:.25s} .ca-blue{right:-6%;bottom:-10%;width:38%;aspect-ratio:1;border-radius:50% 50% 0 0;background-color:var(--tech);transition-delay:.4s} .cta .ca-blue.pat-check{background-image:conic-gradient(rgba(255,255,255,.25) 25%,transparent 0 50%,rgba(255,255,255,.25) 0 75%,transparent 0)} @media (max-width:760px){.cta-art{opacity:.35;width:100%}} /* cards: estrela no canto em vez do traço */ .card .swash{position:absolute;right:18px;top:18px;width:30px;height:30px;transform:scale(0) rotate(-90deg);transition:transform .6s var(--ease)} .card .swash svg{width:100%;height:100%;fill:var(--orange)} a.card:hover .swash{transform:scale(1) rotate(0)} a.card:hover{border-color:var(--ink)} a.card:hover .ico{background:var(--lime);color:#142440} .card:nth-child(3n+2) .ico{background:color-mix(in srgb,var(--lilac) 45%,var(--surface))} .card:nth-child(3n) .ico{background:color-mix(in srgb,var(--lime) 40%,var(--surface))} /* blocos de cor coloridos (cards de destaque) */ .blk{border-radius:var(--r-lg);padding:clamp(28px,3.4vw,44px);position:relative;overflow:hidden;isolation:isolate} .blk--lime{background:var(--lime);color:#142440}.blk--blue{background:var(--tech);color:#fff}.blk--orange{background:var(--orange);color:#142440}.blk--lilac{background:var(--lilac);color:#142440}.blk--navy{background:#142440;color:#fff} .blk .pat{position:absolute;z-index:-1;opacity:.5} .blk h3{font-size:clamp(24px,2.4vw,32px);line-height:1.05;letter-spacing:-.02em;margin-bottom:12px} .blk p{margin:0;opacity:.9} .blk--blue p,.blk--navy p{color:#DCD9FF} /* números grandes estilo referência */ .bignums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .bignum{border-radius:var(--r-lg);padding:28px;min-height:200px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden} .bignum b{font:800 clamp(56px,6.4vw,92px)/.9 var(--font-d);letter-spacing:-.05em} .bignum b sup{font-size:.42em;vertical-align:top} /* quote band sem onda */ .quote-band .big-stroke{display:none} .quote-band .qart{position:absolute;right:4%;top:50%;transform:translateY(-50%);width:min(380px,32vw);aspect-ratio:1;z-index:1} /* rodapé */ .ftr-stroke{display:none} .ftr .sig span{color:var(--lime)} /* marquee antigo vira faixa */ .marquee{display:none} @media (max-width:960px){ .collage{justify-self:stretch;width:100%;max-width:520px;margin:20px auto 0} .collage .sticker{left:auto;right:-10px;bottom:-34px} .bignums{grid-template-columns:1fr} .quote-band .qart{opacity:.25} } /* Letícia */ .lc-hero .wrap.split{align-items:center} .lc-photo{position:relative;justify-self:center;width:min(400px,100%);aspect-ratio:4/5} .lc-photo .lc-bg{position:absolute;inset:8% -6% -4% 8%;border-radius:36px;background-color:var(--lime)} .lc-photo img{position:relative;width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:32px;box-shadow:var(--shadow-lift)} .lc-photo .sticker{left:-40px;bottom:30px} .prose p{color:var(--muted);font-size:17px;line-height:1.7} .prose p:first-child{color:var(--ink);font-size:19px} .gal{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:16px;align-items:stretch} .gal-it{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:3/4;background:#EDE7DF;position:relative} .gal-it:nth-child(even){transform:translateY(28px)} .gal-it img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:transform 1s var(--ease)} .gal-it:hover img{transform:scale(1.05)} .gal-it.rv.in:nth-child(even){transform:translateY(28px)} @media (max-width:760px){.gal{grid-template-columns:1fr 1fr}.lc-photo .sticker{left:auto;right:-14px;bottom:-20px}} @media (max-width:960px){.phero-art{width:46vw;right:-12vw;top:calc(var(--hdr) + 10px);opacity:.28}} .dk-band .h2{color:#fff} /* ajustes hero */ .cl--logo .logo-anim .u{stroke:#fff;fill:#fff} .cl--logo .logo-anim .l path{fill:#fff} .cl--num>span:last-child{font:600 13px/1.3 var(--font-s);color:#DCD9FF} .cl--num b span{font:inherit;color:inherit} .collage .sticker{left:auto;right:-34px;bottom:-46px} .sc-stage .logo-anim .u{stroke:#fff;fill:#fff}.sc-stage.dk .logo-anim .l path,.sc-stage .logo-anim .l path{fill:#fff} .sc-stage:not(.dk) .logo-anim .u{stroke:#142440;fill:#142440}.sc-stage:not(.dk) .logo-anim .l path{fill:#142440} .bignum>span{font:600 15px/1.4 var(--font-s);max-width:24ch} .bignum b span{font:inherit} .logo-tile img{position:absolute;inset:16%;width:68%;height:68%} .logo-tile.cover img{inset:0;width:100%;height:100%} .logo-tile.dark img{filter:grayscale(.2);opacity:.95} .proj .lg{position:relative} .proj .lg img{position:absolute;inset:14% 16%;width:68%;height:72%} .proj .lg.cover img{inset:0;width:100%;height:100%} .blk .pat{opacity:.28} .collage .sticker{right:-40px;bottom:-78px} .mnav .chev{width:22px;height:22px;flex:none;transition:transform .3s} .mnav details[open] .chev{transform:rotate(180deg)} @media (max-width:960px){ .scroll-cue{display:none} .collage .sticker{right:-4px;bottom:-34px;width:92px} .hero{min-height:auto;padding-bottom:70px} } /* cabeçalho sobre topo azul: textos brancos parado, barra clara ao rolar */ .hdr--dark:not(.scrolled) .nav>ul>li>a,.hdr--dark:not(.scrolled) .nav>ul>li>button{color:#fff} .hdr--dark:not(.scrolled) .brand .u,.hdr--dark:not(.scrolled) .brand .l{fill:#fff} .hdr--dark:not(.scrolled) .burger{color:#fff} .hdr--dark:not(.scrolled) .nav>ul>li>a::after,.hdr--dark:not(.scrolled) .nav>ul>li>button::after{background:var(--lime)} .drop a{color:#142440} html{scroll-behavior:auto} /* logos de clientes sempre em preto e branco */ .logo-tile img,.logo-tile:hover img,.logo-tile.cover img,.logo-tile.dark img,.proj .lg img{filter:grayscale(1) contrast(1.08)!important;opacity:1} .logo-tile:not(.dark):not(.cover) img{opacity:.85} .logo-tile:hover img{opacity:1} .proj .lg .ph{font:800 20px/1.1 var(--font-d);color:#142440;letter-spacing:-.02em;text-transform:none} .split .logos{grid-template-columns:repeat(3,minmax(0,1fr))} /* Hero: celular com redes, notícias e crescimento */ .cl--phone{display:grid;place-items:center;background:var(--lime);overflow:hidden} .cl--phone .pat{opacity:.22} .hp{position:relative;width:min(82%,230px);aspect-ratio:9/18.5;border-radius:34px;background:#0B1528;padding:8px;box-shadow:0 30px 60px -18px rgba(14,26,48,.55),inset 0 0 0 2px #26365a;transform:rotate(-4deg);animation:hpfloat 6s ease-in-out infinite} @keyframes hpfloat{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-8px)}} .hp-island{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:62px;height:18px;border-radius:12px;background:#0B1528;z-index:6} .hp-scr{position:relative;width:100%;height:100%;border-radius:27px;overflow:hidden;background:#F5F6F8;font-family:var(--font-s);color:#142440} .hp-bar{position:absolute;inset:0 0 auto;height:34px;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:6px 16px 0;font:700 9px/1 var(--font-s);background:linear-gradient(#F5F6F8 65%,rgba(245,246,248,0))} .hp-notif{position:absolute;left:7px;right:7px;top:-70px;z-index:5;display:flex;gap:8px;align-items:center;padding:8px 9px;border-radius:14px;background:rgba(255,255,255,.97);box-shadow:0 10px 24px rgba(14,26,48,.22);font-size:8.5px;line-height:1.3;animation:hpnotif 7s var(--ease) 2.2s infinite} .hp-notif i{flex:none;width:24px;height:24px;border-radius:8px;background:var(--orange);display:grid;place-items:center} .hp-notif i svg{width:12px;height:12px;fill:#142440} .hp-notif b{display:block;font-size:9px} @keyframes hpnotif{0%{top:-70px}8%,40%{top:34px}48%,100%{top:-70px}} .hp-feed{position:absolute;left:0;right:0;top:36px;padding:0 9px;display:flex;flex-direction:column;gap:9px;animation:hpscroll 14s var(--ease-io) 3s infinite} @keyframes hpscroll{0%,22%{transform:translateY(0)}32%,58%{transform:translateY(-118px)}68%,92%{transform:translateY(-236px)}100%{transform:translateY(0)}} .hp-kpi{background:#142440;color:#fff;border-radius:16px;padding:11px 11px 9px} .hp-kpi small{font:700 7.5px/1 var(--font-s);letter-spacing:.1em;text-transform:uppercase;color:#A9B4C8} .hp-num{display:flex;align-items:center;gap:6px;margin:5px 0 4px} .hp-num b{font:800 30px/1 var(--font-d);letter-spacing:-.04em} .hp-up{width:22px;height:22px;border-radius:50%;background:var(--lime);display:grid;place-items:center;animation:hpup 1.6s var(--ease) infinite} .hp-up svg{width:13px;height:13px;fill:#142440} @keyframes hpup{0%,100%{transform:translateY(2px)}50%{transform:translateY(-4px)}} .hp-chart{width:100%;height:58px;overflow:visible} .hp-bars rect{fill:#2E26E6;opacity:.75;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);animation:hpbar .9s var(--ease) forwards} .hp-bars rect:nth-child(1){animation-delay:1.2s}.hp-bars rect:nth-child(2){animation-delay:1.3s}.hp-bars rect:nth-child(3){animation-delay:1.4s}.hp-bars rect:nth-child(4){animation-delay:1.5s}.hp-bars rect:nth-child(5){animation-delay:1.6s}.hp-bars rect:nth-child(6){animation-delay:1.7s}.hp-bars rect:nth-child(7){animation-delay:1.8s}.hp-bars rect:nth-child(8){animation-delay:1.9s} @keyframes hpbar{to{transform:scaleY(1)}} .hp-area{fill:url(#hpg);opacity:0;animation:hpfade 1s ease 2.4s forwards} .hp-line{fill:none;stroke:var(--lime);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:lstroke 1.8s var(--ease-io) 1.4s forwards} .hp-dot{fill:var(--lime);opacity:0;animation:hpfade .4s ease 3.1s forwards,spark 2s ease-in-out 3.5s infinite;transform-box:fill-box;transform-origin:center} @keyframes hpfade{to{opacity:1}} .hp-mini{display:flex;gap:10px;margin-top:6px;font:600 8px/1 var(--font-s);color:#C9D2E3} .hp-mini i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;vertical-align:middle} .hp-mini i.o{background:var(--orange)}.hp-mini i.g{background:var(--lime)} .hp-mini em{font-style:normal;color:var(--lime)} .hp-news{position:relative;background:#fff;border-radius:14px;padding:10px 54px 10px 10px;border:1px solid #E3E7EE;min-height:74px} .hp-tag{display:inline-block;font:700 7px/1 var(--font-s);letter-spacing:.1em;text-transform:uppercase;padding:4px 6px;border-radius:6px;background:var(--lilac);margin-bottom:6px} .hp-news b{display:block;font:700 9.5px/1.25 var(--font-d)} .hp-ln{display:block;height:5px;width:70%;border-radius:3px;background:#E3E7EE;margin-top:6px} .hp-th{position:absolute;right:9px;top:10px;width:38px;height:54px;border-radius:9px;background:var(--orange);overflow:hidden} .hp-th::after{content:"";position:absolute;left:8px;bottom:8px;width:20px;height:20px;border-radius:50%;background:var(--lime)} .hp-post{background:#fff;border-radius:14px;overflow:hidden;border:1px solid #E3E7EE} .hp-ph{display:flex;align-items:center;gap:6px;padding:7px 8px;font:700 8.5px/1 var(--font-s)} .hp-ph i{width:16px;height:16px;border-radius:50%;background:conic-gradient(var(--orange),var(--lime),var(--tech),var(--orange))} .hp-img{position:relative;aspect-ratio:1;background:#2E26E6;color:#fff;padding:12px;display:flex;align-items:flex-end;overflow:hidden} .hp-img b{font:800 15px/1.05 var(--font-d);max-width:9ch;position:relative;z-index:1} .hp-star{position:absolute;right:-14px;top:-14px;width:84px;height:84px;animation:rot 10s linear infinite} .hp-star svg{width:100%;height:100%;fill:var(--lime)} .hp-act{display:flex;gap:8px;padding:7px 8px} .hp-act i{width:13px;height:13px;border-radius:4px;border:1.6px solid #142440} .hp-heart{width:14px;height:14px;background:var(--orange);clip-path:path("M7 13 L1.6 7.6 A3.2 3.2 0 0 1 7 2.8 A3.2 3.2 0 0 1 12.4 7.6 Z");animation:hpheart 2.4s ease-in-out infinite} @keyframes hpheart{0%,100%{transform:scale(1)}12%{transform:scale(1.35)}24%{transform:scale(1)}} @media (prefers-reduced-motion:reduce){.hp,.hp-feed,.hp-notif{animation:none!important}.hp-notif{top:34px}} .cl--phone{padding:6% 0} .hp{height:100%;max-height:430px;width:auto;max-width:84%} .collage .sticker{right:auto;left:-44px;bottom:-40px} @media (max-width:960px){.cl--phone{min-height:400px}.collage .sticker{left:-6px;bottom:-30px}} /* Branding: entregáveis animados */ .dlv{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px} .dv{display:flex;flex-direction:column;gap:12px} .dv h3{font-size:16px;line-height:1.25} .dv-stage{position:relative;aspect-ratio:1;border-radius:22px;overflow:hidden;display:grid;place-items:center;transition:transform .5s var(--ease),box-shadow .5s} .dv:hover .dv-stage{transform:translateY(-6px) rotate(-1deg);box-shadow:var(--shadow-lift)} .dv--lime{background:var(--lime)}.dv--navy{background:#142440}.dv--lilac{background:var(--lilac)}.dv--blue{background:var(--tech)}.dv--orange{background:var(--orange)}.dv--white{background:#EEF1F6} .dv-stage>div{position:relative;width:70%;height:70%} /* 1 construção de marca */ .dv-build .g1,.dv-build .g2{position:absolute;inset:0;border:1px dashed rgba(20,36,64,.35)} .dv-build .g2{inset:25%;border-radius:50%} .dv-build .c1{position:absolute;left:10%;top:10%;width:56%;height:56%;border-radius:50%;background:#142440;animation:dvc 4s var(--ease) infinite} .dv-build .sq{position:absolute;right:8%;bottom:8%;width:42%;height:42%;border-radius:22%;background:var(--orange);mix-blend-mode:multiply;animation:dvs 4s var(--ease) infinite} .dv-build .st{position:absolute;left:44%;top:40%;width:20%;animation:dvst 4s var(--ease) infinite} .dv-build .st svg{fill:#fff} @keyframes dvc{0%,10%{transform:scale(0)}35%,85%{transform:scale(1)}100%{transform:scale(0)}} @keyframes dvs{0%,25%{transform:translate(40%,40%) scale(0)}50%,85%{transform:none}100%{transform:scale(0)}} @keyframes dvst{0%,45%{transform:scale(0) rotate(-90deg)}65%,85%{transform:none}100%{transform:scale(0)}} /* 2 identidade */ .dv-id{display:flex;flex-direction:column;justify-content:center;gap:10px;color:#fff} .dv-id .sw{display:flex;gap:6px} .dv-id .sw i{flex:1;height:34px;border-radius:8px;transform:translateY(20px);opacity:0;animation:dvsw 4s var(--ease) infinite} .dv-id .sw i:nth-child(1){background:var(--lime)}.dv-id .sw i:nth-child(2){background:var(--orange);animation-delay:.15s}.dv-id .sw i:nth-child(3){background:var(--tech);animation-delay:.3s}.dv-id .sw i:nth-child(4){background:var(--lilac);animation-delay:.45s} @keyframes dvsw{0%{transform:translateY(20px);opacity:0}15%,80%{transform:none;opacity:1}100%{transform:translateY(-10px);opacity:0}} .dv-id b{font:800 54px/1 var(--font-d);letter-spacing:-.04em;animation:dvaa 4s ease infinite} @keyframes dvaa{0%,20%{font-weight:300;opacity:.3}40%,85%{font-weight:800;opacity:1}100%{opacity:.3}} .dv-id .ln{height:6px;border-radius:3px;background:rgba(255,255,255,.3);width:90%}.dv-id .ln.s{width:60%} /* 3 rebranding */ .dv-re{display:grid;place-items:center} .dv-re span{position:absolute;font:700 26px/1 var(--font-d)} .dv-re .old{font-family:Georgia,serif;font-weight:400;color:#6B7588;font-style:italic;animation:dvold 4s var(--ease) infinite} .dv-re .new{color:#142440;font-weight:800;letter-spacing:-.03em;padding:4px 10px;border-radius:8px;background:var(--lime);animation:dvnew 4s var(--ease) infinite} .dv-re .bar{position:absolute;left:0;top:0;bottom:0;width:4px;background:#142440;border-radius:2px;animation:dvbar 4s var(--ease) infinite} @keyframes dvold{0%,30%{clip-path:inset(0 0 0 0)}55%,100%{clip-path:inset(0 0 0 100%)}} @keyframes dvnew{0%,30%{clip-path:inset(0 100% 0 0)}55%,90%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0);opacity:0}} @keyframes dvbar{0%,30%{left:0}55%,100%{left:100%}} /* 4 manual */ .dv-book{perspective:500px} .dv-book .cv,.dv-book .pg{position:absolute;left:30%;top:10%;width:58%;height:80%;border-radius:4px 10px 10px 4px;transform-origin:left center} .dv-book .pg{background:#fff} .dv-book .p1{animation:dvflip 4.5s var(--ease) infinite}.dv-book .p2{animation:dvflip 4.5s var(--ease) .3s infinite;background:#F5F6F8}.dv-book .p3{animation:dvflip 4.5s var(--ease) .6s infinite;background:var(--lime)} .dv-book .cv{background:#142440;color:#fff;padding:12px;display:flex;flex-direction:column;justify-content:space-between;animation:dvflip 4.5s var(--ease) .9s infinite;box-shadow:0 10px 24px rgba(0,0,0,.25)} .dv-book .cv b{font:800 14px/1 var(--font-d)}.dv-book .cv i{width:30px;height:30px;border-radius:50%;background:var(--orange)} @keyframes dvflip{0%,15%{transform:rotateY(0)}45%,70%{transform:rotateY(-150deg)}95%,100%{transform:rotateY(0)}} /* 5 posicionamento */ .dv-target .r{position:absolute;border-radius:50%;inset:0;background:#fff} .dv-target .r2{inset:18%;background:#142440}.dv-target .r3{inset:36%;background:var(--lime)} .dv-target .ar{position:absolute;left:50%;top:50%;width:62%;height:4px;background:#142440;transform-origin:left center;border-radius:2px;animation:dvar 3.5s var(--ease) infinite} .dv-target .ar::before{content:"";position:absolute;left:-2px;top:-5px;border-right:12px solid #142440;border-top:7px solid transparent;border-bottom:7px solid transparent;transform:translateX(-8px)} .dv-target .ar::after{content:"";position:absolute;right:-4px;top:-8px;width:14px;height:20px;background:#142440;clip-path:polygon(0 50%,100% 0,70% 50%,100% 100%)} @keyframes dvar{0%{transform:translate(160%,-160%) rotate(-40deg);opacity:0}30%{opacity:1}45%,85%{transform:translate(0,0) rotate(-40deg)}50%{transform:translate(0,0) rotate(-36deg)}55%{transform:translate(0,0) rotate(-40deg)}100%{opacity:0;transform:translate(0,0) rotate(-40deg)}} /* 6 estratégia */ .dv-chat{display:flex;flex-direction:column;justify-content:center;gap:8px} .dv-chat .b{align-self:flex-start;padding:8px 12px;border-radius:14px 14px 14px 4px;background:#fff;font:600 11.5px/1.2 var(--font-s);color:#142440;box-shadow:0 6px 14px rgba(20,36,64,.1);opacity:0;transform:translateY(10px) scale(.9);animation:dvb 5s var(--ease) infinite} .dv-chat .b2{align-self:flex-end;border-radius:14px 14px 4px 14px;background:var(--tech);color:#fff;animation-delay:.5s} .dv-chat .b3{background:var(--lime);animation-delay:1s} @keyframes dvb{0%{opacity:0;transform:translateY(10px) scale(.9)}12%,80%{opacity:1;transform:none}95%,100%{opacity:0}} /* 7 institucional */ .dv-stat .lh{position:absolute;left:8%;top:4%;width:58%;height:84%;background:#fff;border-radius:6px;box-shadow:0 10px 22px rgba(20,36,64,.18);padding:14% 12%;display:flex;flex-direction:column;gap:8px;animation:dvlh 5s var(--ease) infinite} .dv-stat .lh i{height:5px;border-radius:3px;background:#D7DBE3}.dv-stat .lh i:first-child{width:40%;height:10px;background:#142440} .dv-stat .bc{position:absolute;right:2%;bottom:6%;width:56%;aspect-ratio:1.7;background:#142440;border-radius:6px;box-shadow:0 12px 24px rgba(20,36,64,.3);animation:dvbc 5s var(--ease) infinite;display:grid;place-items:center} .dv-stat .bc i{width:30%;aspect-ratio:1;border-radius:50%;background:var(--orange)} @keyframes dvlh{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(-2deg) translateY(-4px)}} @keyframes dvbc{0%,100%{transform:rotate(8deg) translate(10px,6px)}50%{transform:rotate(2deg)}} /* 8 comercial */ .dv-bag .bd{position:absolute;left:18%;right:18%;top:28%;bottom:4%;background:var(--orange);border-radius:6px 6px 14px 14px;display:grid;place-items:center;animation:dvbag 3s ease-in-out infinite} .dv-bag .bd i{width:38%;animation:rot 8s linear infinite}.dv-bag .bd i svg{fill:#142440} .dv-bag .hd{position:absolute;left:34%;right:34%;top:10%;height:26%;border:5px solid var(--orange);border-bottom:0;border-radius:40px 40px 0 0;animation:dvbag 3s ease-in-out infinite} .dv-bag .tag{position:absolute;right:4%;top:26%;padding:5px 8px;border-radius:8px;background:var(--lime);color:#142440;font:800 11px/1 var(--font-d);transform:rotate(12deg);animation:dvtag 3s ease-in-out infinite} @keyframes dvbag{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes dvtag{0%,100%{transform:rotate(12deg)}50%{transform:rotate(-4deg) scale(1.08)}} /* 9 materiais */ .dv-mat .ps{position:absolute;left:4%;top:4%;width:56%;height:84%;background:#142440;border-radius:6px;padding:12%;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;animation:dvlh 5s var(--ease) infinite} .dv-mat .ps i{height:6px;border-radius:3px;background:#fff}.dv-mat .ps i:first-child{height:28px;width:28px;border-radius:50%;background:var(--lime);margin-bottom:auto} .dv-mat .ph{position:absolute;right:4%;bottom:2%;width:38%;height:76%;background:#0B1528;border-radius:12px;padding:5px;display:flex;flex-direction:column;gap:4px;animation:dvbc 5s var(--ease) infinite} .dv-mat .ph i{flex:1;border-radius:6px;background:var(--lilac)}.dv-mat .ph i:nth-child(2){background:var(--lime)}.dv-mat .ph i:nth-child(3){background:#fff} /* 10 logo animado em loop */ .dv-logo{display:grid;place-items:center} .dv-logo svg{height:100%;width:auto} .dv-logo .logo-anim .u{stroke:#fff;fill:#fff}.dv-logo .logo-anim .l path{fill:#fff} .logo-anim.loop.go .u,.logo-anim.loop.go .p{animation:lloop 5s var(--ease-io) infinite} .logo-anim.loop.go .p{animation-delay:.3s} @keyframes lloop{0%{stroke-dashoffset:1;fill-opacity:0}35%{stroke-dashoffset:0;fill-opacity:0}50%,85%{stroke-dashoffset:0;fill-opacity:1}100%{stroke-dashoffset:0;fill-opacity:0}} @media (max-width:1100px){.dlv{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:640px){.dlv{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.dv h3{font-size:14px}} @media (prefers-reduced-motion:reduce){.dv-stage *{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}} .dv-book .cv,.dv-book .pg{backface-visibility:hidden} /* ===== Páginas estratégicas (branding / comunicação) ===== */ .br-art{position:relative;display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:auto auto;gap:14px;width:min(480px,100%);justify-self:end} .br-tile{border-radius:28px;position:relative;overflow:hidden;display:grid;place-items:center} .br-tile.t1{grid-row:span 2;background:#142440;min-height:340px;padding:18%} .br-tile.t1 .pat{position:absolute;inset:0;opacity:.12;background-image:radial-gradient(circle,#fff 2px,transparent 2.4px);background-size:18px 18px} .br-tile.t1 svg{height:100%;width:auto;position:relative} .br-tile.t1 .logo-anim .u,.br-tile.t1 .logo-anim .l path{stroke:#fff;fill:#fff} .br-tile.t2{background:var(--lime);aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:20px;color:#142440} .br-tile.t2 b{font:800 64px/1 var(--font-d);letter-spacing:-.04em} .br-tile.t2 span{font:600 12px/1 var(--font-s);margin-top:6px} .br-tile.t3{background:#fff;border:1px solid var(--line);aspect-ratio:1;display:flex;gap:6px;padding:18px;align-items:stretch} .br-tile.t3 i{flex:1;border-radius:10px;animation:dvsw 5s var(--ease) infinite} .br-tile.t3 i:nth-child(1){background:#142440}.br-tile.t3 i:nth-child(2){background:var(--orange);animation-delay:.15s}.br-tile.t3 i:nth-child(3){background:var(--lime);animation-delay:.3s}.br-tile.t3 i:nth-child(4){background:var(--tech);animation-delay:.45s}.br-tile.t3 i:nth-child(5){background:var(--lilac);animation-delay:.6s} .br-tile.t4{position:absolute;right:-18px;top:-22px;width:64px;height:64px;background:var(--orange);border-radius:50%;padding:16px} .br-tile.t4 svg{fill:#142440;width:100%;height:100%;animation:rot 9s linear infinite} .br-art .sticker{left:-40px;bottom:-34px} .vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px} .vs>div{border-radius:20px;padding:22px} .vs b{display:block;font:700 15px/1.25 var(--font-d);margin-bottom:12px} .vs ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px} .vs li{display:flex;gap:10px;align-items:flex-start} .vs-a{background:#EEF1F6;color:#4A5568}.vs-a li::before{content:"×";font-weight:800;color:#B8400F} .vs-b{background:#142440;color:#fff}.vs-b li::before{content:"✓";font-weight:800;color:var(--lime)} .chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .chain span{padding:12px 20px;border-radius:999px;background:#fff;border:1.5px solid #142440;font:700 15px/1 var(--font-d)} .chain span:nth-child(1){background:var(--lime);border-color:var(--lime)}.chain span:nth-child(5){background:var(--orange);border-color:var(--orange)}.chain span:nth-child(9){background:#142440;color:#fff} .chain i{width:28px;height:2px;background:#142440;position:relative} .chain i::after{content:"";position:absolute;right:-2px;top:-4px;border-left:7px solid #142440;border-top:5px solid transparent;border-bottom:5px solid transparent} .bc-card h3{font-size:19px} .cmp{display:grid;grid-template-columns:1fr auto 1.3fr;gap:24px;align-items:stretch} .cmp-a,.cmp-b{border-radius:24px;padding:30px} .cmp-a{background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.25)} .cmp-b{background:var(--lime);color:#142440} .cmp-t{display:block;font:700 12px/1 var(--font-s);letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;opacity:.85} .cmp ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .cmp-a li{color:#A9B4C8;text-decoration:line-through;text-decoration-color:rgba(255,105,46,.8);text-decoration-thickness:2px;font-size:16px} .cmp-b ul{grid-template-columns:1fr 1fr;gap:10px 18px} .cmp-b li{font:600 15px/1.35 var(--font-s);display:flex;gap:8px} .cmp-b li::before{content:"";flex:none;width:8px;height:8px;margin-top:6px;border-radius:2px;background:#142440;transform:rotate(45deg)} .cmp-arrow{display:grid;place-items:center;color:var(--lime)} .cmp-arrow svg{width:42px;height:42px;animation:hpup 2s var(--ease) infinite;transform:rotate(-90deg)} .cmp-q,.ia-q{margin:56px 0 0;font:800 clamp(26px,3.4vw,44px)/1.1 var(--font-d);letter-spacing:-.025em;max-width:24ch} .light-q{color:#142440} .sticky-col{position:sticky;top:calc(var(--hdr) + 30px)} .mods{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px} .mod{padding:10px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font:600 14px/1.2 var(--font-s);transition:background .3s,transform .3s var(--ease)} .mod:hover{background:var(--lime);transform:translateY(-3px)} .signs{display:grid;gap:12px} .sign{display:flex;gap:14px;align-items:center;padding:18px 20px;border-radius:18px;background:var(--raised);border:1.5px solid var(--line);cursor:pointer;font-size:16px;transition:background .3s,border-color .3s,transform .3s var(--ease)} .sign:hover{border-color:#142440;transform:translateX(4px)} .sign input{position:absolute;opacity:0;pointer-events:none} .sign .bx{flex:none;width:26px;height:26px;border-radius:8px;border:2px solid #142440;display:grid;place-items:center;transition:.3s} .sign input:checked~.bx{background:var(--lime);border-color:var(--lime)} .sign input:checked~.bx::after{content:"";width:12px;height:7px;border-left:2.5px solid #142440;border-bottom:2.5px solid #142440;transform:rotate(-45deg) translate(1px,-1px)} .sign:has(input:checked){background:#142440;color:#fff;border-color:#142440} .sign input:focus-visible~.bx{outline:2px solid var(--orange);outline-offset:3px} .sign-count{font:800 22px/1.2 var(--font-d);margin-top:24px;min-height:1.2em} .sign-count em{font-style:normal;background:var(--lime);padding:2px 10px;border-radius:8px;color:#142440} .integ{position:relative;aspect-ratio:1;width:min(460px,100%);justify-self:center} .integ span{position:absolute;left:50%;top:50%;padding:10px 14px;border-radius:999px;background:#fff;border:1.5px solid #142440;font:700 13px/1 var(--font-s);white-space:nowrap;transform:translate(-50%,-50%) rotate(calc(var(--i)*51.4deg)) translateY(-185px) rotate(calc(var(--i)*-51.4deg));transition:background .3s} .integ span:hover{background:var(--lime)} .integ span:nth-child(3n+1){background:var(--lime);border-color:var(--lime)} .integ::before{content:"";position:absolute;inset:10%;border-radius:50%;border:2px dashed rgba(20,36,64,.25);animation:rot 40s linear infinite} .integ-c{position:absolute;left:50%;top:50%;width:38%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#142440;display:grid;place-items:center;padding:9%} .integ-c svg{height:100%;width:auto}.integ-c .u,.integ-c .l path{fill:#fff}.integ-c .p{fill:var(--orange)} .cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .case{border-radius:24px;background:var(--raised);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s} .case:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)} .case-lg{aspect-ratio:16/10;display:grid;place-items:center;background:#fff;padding:12% 18%;border-bottom:1px solid var(--line)} .case-lg img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1)} .case-lg.dk{background:#142440} .case-up{height:100%;display:grid;place-items:center}.case-up svg{height:100%;width:auto}.case-up .u,.case-up .l path{fill:#fff}.case-up .p{fill:var(--orange)} .case-bd{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1} .case-bd .seg{font:700 11.5px/1.2 var(--font-s);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-ink)} .case-bd h3{font-size:22px} .cf b{display:block;font:700 11px/1 var(--font-s);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px} .cf p{margin:0;font-size:14.5px;line-height:1.5} .tbd{color:var(--muted);font-style:italic} .case-bd .link{margin-top:auto;align-self:flex-start} .faq{display:grid;gap:12px} .faq-it{border-radius:18px;background:var(--raised);border:1.5px solid var(--line);transition:border-color .3s,background .3s} .faq-it[open]{border-color:#142440;background:#fff} .faq-it summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px} .faq-it summary::-webkit-details-marker{display:none} .faq-it h3{font-size:17px;line-height:1.3} .faq-it .pm{flex:none;width:30px;height:30px;border-radius:50%;background:var(--lime);position:relative;transition:transform .4s var(--ease),background .3s} .faq-it .pm::before,.faq-it .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:#142440;transform:translate(-50%,-50%)} .faq-it .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .4s var(--ease)} .faq-it[open] .pm{transform:rotate(180deg);background:var(--orange)} .faq-it[open] .pm::after{transform:translate(-50%,-50%) rotate(0)} .faq-it p{margin:0;padding:0 22px 22px;color:var(--muted);font-size:16px;line-height:1.65} @media (max-width:960px){ .br-art{justify-self:stretch;margin-top:20px}.br-tile.t1{min-height:260px} .cmp{grid-template-columns:1fr}.cmp-arrow svg{transform:rotate(0)} .cmp-b ul{grid-template-columns:1fr} .sticky-col{position:static} .cases{grid-template-columns:1fr} .integ span{font-size:11px;transform:translate(-50%,-50%) rotate(calc(var(--i)*51.4deg)) translateY(-38vw) rotate(calc(var(--i)*-51.4deg))} .vs{grid-template-columns:1fr} } .g4 .blk h3{font-size:clamp(19px,1.55vw,23px);overflow-wrap:break-word;hyphens:auto} .g4 .blk{padding:26px 22px} /* ===== Página de Sites ===== */ .ms{max-width:none;transform:none!important} .ms-vp{position:relative;height:260px;overflow:hidden;background:var(--ms-bg)} .ms-page{animation:msscroll 14s var(--ease-io) infinite;color:var(--ms-fg)} @keyframes msscroll{0%,12%{transform:translateY(0)}45%,58%{transform:translateY(-38%)}88%,100%{transform:translateY(0)}} .ms-nav{display:flex;align-items:center;gap:10px;padding:10px 14px;font:600 8px/1 var(--font-s);opacity:.85} .ms-nav b{width:46px;height:12px;border-radius:4px;background:var(--ms-ac);margin-right:auto} .ms-hero{padding:22px 16px 26px;display:flex;flex-direction:column;gap:10px;align-items:flex-start} .ms-hero b{font:800 20px/1.05 var(--font-d);letter-spacing:-.02em;max-width:14ch} .ms-btn{display:block;width:84px;height:20px;border-radius:10px;background:var(--ms-ac)} .ms-row,.ms-cards,.ms-grid,.ms-logos,.ms-proof,.ms-cal,.ms-menu,.ms-areas,.ms-count,.ms-faq{display:grid;gap:8px;padding:10px 16px} .ms-row{grid-template-columns:repeat(3,1fr)}.ms-row i{height:46px;border-radius:8px;background:color-mix(in srgb,var(--ms-fg) 10%,transparent)} .ms-cards{grid-template-columns:repeat(3,1fr)}.ms-cards i{height:64px;border-radius:10px;background:color-mix(in srgb,var(--ms-ac) 70%,transparent)} .ms-grid{grid-template-columns:repeat(3,1fr)}.ms-grid i{aspect-ratio:1;border-radius:8px;background:color-mix(in srgb,var(--ms-fg) 12%,transparent)} .ms-grid i:nth-child(2n){background:color-mix(in srgb,var(--ms-ac) 55%,transparent)} .ms-logos{grid-template-columns:repeat(5,1fr)}.ms-logos i{height:14px;border-radius:4px;background:color-mix(in srgb,var(--ms-fg) 18%,transparent)} .ms-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 16px;align-items:center} .ms-split .img{height:76px;border-radius:10px;background:var(--ms-ac);opacity:.85} .ms-t{display:block;height:10px;width:80%;border-radius:4px;background:var(--ms-fg);opacity:.75;margin-bottom:8px} .ms-l{display:block;height:5px;border-radius:3px;background:var(--ms-fg);opacity:.25;margin-bottom:5px}.ms-l.s{width:60%} .ms-proof{grid-template-columns:repeat(3,1fr)}.ms-proof i{height:30px;border-radius:15px;background:color-mix(in srgb,var(--ms-fg) 15%,transparent)} .ms-price{margin:8px 16px;padding:14px;border-radius:12px;background:var(--ms-ac);color:#142440;display:flex;justify-content:space-between;align-items:center;font:800 12px/1 var(--font-d)} .ms-price .ms-btn{background:#142440} .ms-faq i{height:16px;border-radius:6px;background:color-mix(in srgb,var(--ms-fg) 12%,transparent)} .ms-cal{grid-template-columns:repeat(7,1fr)}.ms-cal i{aspect-ratio:1;border-radius:6px;background:color-mix(in srgb,var(--ms-fg) 10%,transparent)}.ms-cal i.on{background:var(--ms-ac)} .ms-menu{grid-template-columns:1fr 1fr}.ms-menu i{height:28px;border-radius:6px;border:1px solid color-mix(in srgb,var(--ms-fg) 25%,transparent)} .ms-areas{grid-template-columns:repeat(4,1fr)}.ms-areas span{font:600 7px/1 var(--font-s);padding:6px 4px;border:1px solid var(--ms-ac);border-radius:4px;text-align:center;color:var(--ms-ac)} .ms-count{grid-template-columns:repeat(3,1fr)}.ms-count b{font:800 20px/1 var(--font-d);text-align:center;padding:10px 0;border-radius:8px;background:#142440;color:#fff} .ms-foot{height:60px;margin-top:14px;background:color-mix(in srgb,var(--ms-fg) 8%,transparent)} /* composição de dispositivos */ .devices{position:relative;width:min(560px,100%);aspect-ratio:1.15;justify-self:end} .devices .dv-desk{position:absolute;left:0;top:4%;width:86%} .devices .dv-desk .ms-vp{height:300px} .devices .dv-tab{position:absolute;right:0;bottom:2%;width:38%;aspect-ratio:3/4;border-radius:20px;background:#0B1528;padding:8px;box-shadow:0 30px 60px -20px rgba(14,26,48,.45);animation:hpfloat 7s ease-in-out infinite} .devices .dv-ph{position:absolute;left:8%;bottom:-2%;width:22%;aspect-ratio:9/19;border-radius:22px;background:#0B1528;padding:6px;box-shadow:0 30px 60px -20px rgba(14,26,48,.5);animation:hpfloat 6s ease-in-out .8s infinite} .ms-only{width:100%;height:100%;border-radius:14px;overflow:hidden} .dv-ph .ms-only{border-radius:16px} .ms-only .browser{height:100%;border-radius:0;box-shadow:none} .ms-only .bar{display:none} .ms-only .ms-vp{height:100%} .devices .sticker{right:-20px;top:-30px} /* sites reais */ .rs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px} .rs{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:12px} .rs .browser{transform:none;max-width:none;box-shadow:0 18px 40px -18px rgba(20,36,64,.35);transition:transform .5s var(--ease),box-shadow .5s} .rs:hover .browser{transform:translateY(-8px);box-shadow:var(--shadow-lift)} .rs-vp{aspect-ratio:16/11;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:10% 14%;position:relative;overflow:hidden} .rs-vp.dk{background:#142440} .rs-vp img{max-width:72%;max-height:44%;object-fit:contain;filter:grayscale(1);margin-bottom:6px} .rs-name{font:800 16px/1.15 var(--font-d);text-align:center;color:#142440} .rs-l{width:70%;height:5px;border-radius:3px;background:#E3E7EE}.rs-l.s{width:46%} .rs-vp.dk .rs-l{background:rgba(255,255,255,.15)} .rs-b{width:60px;height:14px;border-radius:7px;background:var(--orange);margin-top:4px} .rs-vp::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);transform:translateX(-100%);transition:transform .9s ease} .rs:hover .rs-vp::after{transform:translateX(100%)} .rs-bd .seg{font:700 11px/1.2 var(--font-s);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-ink)} .rs-bd h3{font-size:17px;margin:4px 0 6px} .rs-go{display:inline-flex;gap:6px;align-items:center;font:600 13px/1 var(--font-s);border-bottom:2px solid var(--orange);padding-bottom:2px} .rs-go svg{width:14px;height:14px} /* tipos */ .kinds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px} .kind{display:flex;flex-direction:column;gap:10px} .kind-stage{border-radius:22px;padding:18px;background:linear-gradient(160deg,#EEF1F6,#E3E8F1);transition:transform .5s var(--ease)} .kind:nth-child(4n+2) .kind-stage{background:var(--lime)}.kind:nth-child(4n+3) .kind-stage{background:var(--lilac)}.kind:nth-child(4n+4) .kind-stage{background:#142440} .kind:hover .kind-stage{transform:translateY(-6px) rotate(-.6deg)} .kind .browser{box-shadow:0 16px 30px -14px rgba(14,26,48,.45)} .kind .ms-vp{height:200px} .kind h3{font-size:18px;margin-top:6px} .kind p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5} /* página de vendas no celular */ .bp-feed.sp{padding-top:44px;font-family:var(--font-s);color:#142440} .sp-hero{background:#2E26E6;color:#fff;padding:26px 16px 22px;display:flex;flex-direction:column;gap:10px} .sp-hero small{font:700 9px/1 var(--font-s);letter-spacing:.12em;text-transform:uppercase;color:var(--lime)} .sp-hero b{font:800 24px/1.02 var(--font-d);letter-spacing:-.02em} .sp-hero span{font-size:11px;color:#DCD9FF;line-height:1.4} .sp-btn{display:inline-block;align-self:flex-start;font-style:normal;font:700 11px/1 var(--font-s);padding:11px 14px;border-radius:999px;background:var(--lime);color:#142440;box-shadow:0 6px 14px rgba(0,0,0,.2)} .sp-proof{padding:16px;text-align:center;font-size:10px;color:#4A5568} .sp-proof div{display:flex;gap:6px;justify-content:center;margin:8px 0}.sp-proof i{width:44px;height:14px;border-radius:4px;background:#D7DBE3} .sp-stars{color:var(--orange);font-size:14px;letter-spacing:2px} .sp-block{padding:18px 16px;display:flex;flex-direction:column;gap:8px} .sp-block small{font:700 9px/1 var(--font-s);letter-spacing:.12em;text-transform:uppercase;color:#B8400F} .sp-block b{font:800 17px/1.1 var(--font-d)} .sp-block .ln{height:6px;border-radius:3px;background:#E3E7EE}.sp-block .ln.s{width:60%} .sp-block.dk{background:#142440;color:#fff}.sp-block.dk small{color:var(--lime)}.sp-block.dk .ln{background:rgba(255,255,255,.2)} .sp-ben{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px} .sp-ben i{font-style:normal;font:600 10.5px/1.25 var(--font-s);padding:12px 10px;border-radius:12px;background:var(--lilac)} .sp-ben i:nth-child(2n){background:var(--lime)} .sp-price{margin:6px 16px;padding:18px;border-radius:16px;background:var(--orange);display:flex;flex-direction:column;gap:8px} .sp-price small{font:700 9px/1 var(--font-s);letter-spacing:.1em;text-transform:uppercase} .sp-price b{font:800 24px/1 var(--font-d)} .sp-price .sp-btn{background:#142440;color:#fff} .sp-faq{padding:16px;display:grid;gap:6px}.sp-faq span{font:600 11px/1 var(--font-s);padding:12px;border-radius:10px;border:1px solid #D7DBE3;display:flex;justify-content:space-between}.sp-faq span::after{content:"+";color:#B8400F} .sp-final{margin:10px 16px 30px;padding:22px 16px;border-radius:16px;background:#142440;color:#fff;display:flex;flex-direction:column;gap:12px} .sp-final b{font:800 18px/1.1 var(--font-d)} /* demos de animação */ .anim-demos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .ad h3{font-size:18px;margin:14px 0 6px;color:#fff}.ad p{margin:0;color:#A9B4C8;font-size:14.5px} .ad-st{aspect-ratio:4/3;border-radius:20px;background:#1C3157;display:grid;place-items:center;overflow:hidden;position:relative} .ad-rev{display:flex;flex-direction:column;gap:8px;width:60%} .ad-rev i{height:12px;border-radius:6px;background:var(--lime);animation:adrev 3.2s var(--ease) infinite} .ad-rev i:nth-child(2){width:80%;animation-delay:.2s;background:#fff}.ad-rev i:nth-child(3){width:55%;animation-delay:.4s;background:var(--orange)} @keyframes adrev{0%{opacity:0;transform:translateY(16px)}25%,75%{opacity:1;transform:none}100%{opacity:0}} .ad-btn{padding:14px 22px;border-radius:999px;background:var(--orange);color:#142440;font:700 14px/1 var(--font-s);animation:adbtn 2.6s var(--ease) infinite} @keyframes adbtn{0%,60%,100%{transform:none;box-shadow:0 6px 16px rgba(255,105,46,.3)}70%{transform:scale(.94)}80%{transform:translateY(-3px);box-shadow:var(--glow-o)}} .ad-par{position:relative;width:70%;height:70%} .ad-par i{position:absolute;border-radius:16px} .ad-par i:nth-child(1){inset:10% 30% 30% 0;background:var(--tech);animation:adp 4s ease-in-out infinite} .ad-par i:nth-child(2){inset:30% 10% 10% 30%;background:var(--lilac);animation:adp 4s ease-in-out .3s infinite reverse} .ad-par i:nth-child(3){width:34%;aspect-ratio:1;right:0;top:0;border-radius:50%;background:var(--lime);animation:adp 3s ease-in-out .6s infinite} @keyframes adp{0%,100%{transform:translateY(-8px)}50%{transform:translateY(8px)}} .ad-num{font:800 56px/1 var(--font-d);color:var(--lime);letter-spacing:-.04em}.ad-num sup{font-size:.35em;color:#A9B4C8} @media (max-width:1100px){.rs-grid,.kinds,.anim-demos{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:960px){.devices{justify-self:stretch;margin-top:30px}} @media (max-width:640px){.rs-grid{grid-template-columns:1fr 1fr;gap:14px}.kinds{grid-template-columns:1fr}.anim-demos{grid-template-columns:1fr 1fr}.devices .dv-desk .ms-vp{height:200px}} @media (prefers-reduced-motion:reduce){.ms-page{animation:none!important}} /* ===== Mini mockups (vx) ===== */ .dv p{margin:-4px 0 0;font-size:14px;color:var(--muted);line-height:1.45} .dv--white .vx-li,.dv-stage .vx-li{background:#fff} .vx-li{border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:6px;box-shadow:0 10px 24px rgba(20,36,64,.18);color:#142440;animation:dvlh 6s var(--ease) infinite} .vx-li .h{display:flex;gap:6px;align-items:center}.vx-li .h i{width:20px;height:20px;border-radius:50%;background:#0A66C2}.vx-li .h b{display:block;width:60px;height:6px;border-radius:3px;background:#142440}.vx-li .h s{display:block;width:40px;height:4px;border-radius:2px;background:#D7DBE3;margin-top:3px} .vx-li .l{height:4px;border-radius:2px;background:#E3E7EE}.vx-li .l.s{width:60%} .vx-li .img{height:44%;border-radius:8px;background:#0A66C2;color:#fff;display:flex;align-items:flex-end;padding:8px;font:800 11px/1.1 var(--font-d)} .vx-li .re{display:flex;align-items:center;gap:2px;font-size:10px}.vx-li .re em{font-style:normal;animation:heart 3s ease-out infinite;opacity:1}.vx-li .re em:nth-child(2){animation-delay:.4s}.vx-li .re em:nth-child(3){animation-delay:.8s}.vx-li .re span{margin-left:4px;font-weight:700;color:#4A5568} .vx-ig{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px;border-radius:16px;background:#fff;box-shadow:0 10px 24px rgba(20,36,64,.2)} .vx-ig i{aspect-ratio:1;border-radius:4px;animation:vxig 6s var(--ease) infinite} .vx-ig i:nth-child(1){background:#142440}.vx-ig i:nth-child(2){background:var(--orange);animation-delay:.2s}.vx-ig i:nth-child(3){background:var(--lime);animation-delay:.4s}.vx-ig i:nth-child(4){background:var(--lilac);animation-delay:.6s}.vx-ig i:nth-child(5){background:var(--tech);animation-delay:.8s}.vx-ig i:nth-child(6){background:#142440;animation-delay:1s}.vx-ig i:nth-child(7){background:var(--lime);animation-delay:1.2s}.vx-ig i:nth-child(8){background:#EEF1F6;animation-delay:1.4s}.vx-ig i:nth-child(9){background:var(--orange);animation-delay:1.6s} @keyframes vxig{0%{transform:scale(0)}10%,85%{transform:scale(1)}100%{transform:scale(0)}} .vx-kb{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;height:auto} .vx-kb>div{background:rgba(255,255,255,.9);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:5px;min-height:110px} .vx-kb b{font:700 7.5px/1 var(--font-s);text-transform:uppercase;letter-spacing:.06em;color:#142440} .vx-kb i{height:24px;border-radius:6px;background:var(--lilac)}.vx-kb>div:nth-child(2) i{background:var(--orange)}.vx-kb>div:nth-child(3) i{background:var(--lime)} .vx-kb i.mv{background:var(--tech);animation:vxkb 4s var(--ease) infinite} @keyframes vxkb{0%,20%{transform:translateX(0)}50%,70%{transform:translateX(108%)}95%,100%{transform:translateX(216%)}} .vx-cal{background:#fff;border-radius:14px;padding:10px;box-shadow:0 10px 24px rgba(20,36,64,.18);color:#142440} .vx-cal b{display:block;font:800 11px/1 var(--font-d);margin-bottom:8px} .vx-cal>div{display:grid;grid-template-columns:repeat(7,1fr);gap:3px} .vx-cal i{aspect-ratio:1;border-radius:4px;background:#EEF1F6;position:relative} .vx-cal i.o::after,.vx-cal i.g::after,.vx-cal i.b::after{content:"";position:absolute;inset:25%;border-radius:50%;animation:vxdot 4s var(--ease) infinite} .vx-cal i.o::after{background:var(--orange)}.vx-cal i.g::after{background:#9BC21F;animation-delay:.5s}.vx-cal i.b::after{background:var(--tech);animation-delay:1s} @keyframes vxdot{0%{transform:scale(0)}15%,85%{transform:scale(1)}100%{transform:scale(0)}} .vx-cal.sm>div{grid-template-columns:repeat(7,1fr)} .vx-cal .ok{display:block;margin-top:8px;font:700 9px/1 var(--font-s);color:#4F6B00;animation:vxdot 4s var(--ease) 1s infinite} .vx-car{overflow:hidden;border-radius:14px} .vx-car .tr{display:flex;width:300%;animation:vxcar 7s var(--ease-io) infinite} .vx-car span{flex:1;aspect-ratio:4/5;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;font:800 12px/1.1 var(--font-d)} .vx-car span b{font-size:22px;opacity:.5} .vx-car .c1{background:#142440;color:#fff}.vx-car .c2{background:var(--lime);color:#142440}.vx-car .c3{background:var(--orange);color:#142440} @keyframes vxcar{0%,25%{transform:translateX(0)}33%,58%{transform:translateX(-33.33%)}66%,92%{transform:translateX(-66.66%)}100%{transform:translateX(0)}} .vx-car .dt{display:flex;gap:4px;justify-content:center;margin-top:6px}.vx-car .dt i{width:5px;height:5px;border-radius:50%;background:rgba(20,36,64,.3)} .vx-doc{background:#fff;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:5px;box-shadow:0 10px 24px rgba(20,36,64,.2);color:#142440;font-size:8.5px} .vx-doc b{font:800 9px/1 var(--font-d)} .vx-doc .tg{font:700 7.5px/1 var(--font-s);letter-spacing:.06em;color:#B8400F;margin-top:3px} .vx-doc .ty{font:600 9px/1.2 var(--font-s);overflow:hidden;white-space:nowrap;border-right:2px solid #142440;width:0;animation:vxtype 4s steps(16) infinite} @keyframes vxtype{0%{width:0}50%,85%{width:100%}100%{width:0}} .vx-doc .l{height:4px;border-radius:2px;background:#E3E7EE}.vx-doc .l.s{width:60%} .vx-vid{position:relative} .vx-vid .v{aspect-ratio:16/10;border-radius:10px;background:radial-gradient(circle at 30% 30%,#2E26E6,#142440);display:grid;place-items:center} .vx-vid .pl{width:30px;height:30px;border-radius:50%;background:var(--orange);display:grid;place-items:center;box-shadow:var(--glow-o)} .vx-vid .pl::after{content:"";border-left:10px solid #142440;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px} .vx-vid .t{display:flex;gap:3px;margin-top:6px}.vx-vid .t i{height:10px;border-radius:3px;flex:1;background:var(--tech)}.vx-vid .t i:nth-child(2){background:var(--orange)}.vx-vid .t i:nth-child(3){background:var(--lime)} .vx-vid .hd{position:absolute;bottom:-2px;left:0;width:2px;height:20px;background:#fff;animation:scrub 4s linear infinite} .dv--white .vx-vid .hd,.dv--lime .vx-vid .hd,.dv--lilac .vx-vid .hd{background:#142440} .vx-rep{background:#fff;border-radius:12px;padding:10px;color:#142440;box-shadow:0 10px 24px rgba(20,36,64,.2)} .vx-rep b{font:800 10px/1 var(--font-d)} .vx-rep .bars{display:flex;align-items:flex-end;gap:5px;height:60px;margin:10px 0} .vx-rep .bars i{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:var(--tech);transform-origin:bottom;animation:vxbar 4s var(--ease) infinite} .vx-rep .bars i:last-child{background:var(--orange)} @keyframes vxbar{0%{transform:scaleY(0)}30%,85%{transform:scaleY(1)}100%{transform:scaleY(0)}} .vx-rep .l{display:block;height:4px;border-radius:2px;background:#E3E7EE;margin-top:4px}.vx-rep .l.s{width:60%} .vx-deck{position:relative;height:70%;align-self:center} .vx-deck span{position:absolute;inset:0;border-radius:8px} .vx-deck .s1{background:var(--lilac);transform:rotate(-8deg) translate(-10px,6px);animation:dvlh 5s ease-in-out infinite} .vx-deck .s2{background:var(--orange);transform:rotate(5deg) translate(8px,0)} .vx-deck .s3{background:#142440;color:#fff;padding:12px;display:flex;flex-direction:column;justify-content:space-between;animation:dvbc 5s var(--ease) infinite} .vx-deck .s3 b{font:800 14px/1 var(--font-d)}.vx-deck .s3 i{width:40%;height:6px;border-radius:3px;background:var(--lime)} .vx-seo{background:#fff;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px;box-shadow:0 10px 24px rgba(20,36,64,.2)} .vx-seo .q{font:600 9px/1 var(--font-s);padding:7px 10px;border-radius:999px;border:1px solid #D7DBE3;color:#142440} .vx-seo .r{height:16px;border-radius:6px;background:#EEF1F6} .vx-seo .me{background:var(--lime);display:flex;align-items:center;padding-left:8px;font:700 9px/1 var(--font-s);color:#142440;order:2;animation:vxseo 5s var(--ease) infinite} @keyframes vxseo{0%,20%{order:4;transform:translateY(44px)}50%,90%{transform:translateY(-22px)}100%{transform:translateY(-22px)}} .vx-up{position:relative;background:rgba(255,255,255,.08);border-radius:12px} .vx-up svg{width:100%;height:100%} .vx-up path{fill:none;stroke:var(--lime);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:lloop 4s var(--ease-io) infinite} .dv--lime .vx-up path,.dv--white .vx-up path,.dv--lilac .vx-up path{stroke:#142440} .vx-up .ar{position:absolute;right:4%;top:-4%;font-size:20px;color:var(--orange);animation:hpup 1.4s var(--ease) infinite} .vx-site{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 10px 24px rgba(20,36,64,.25)} .vx-site .bar{height:14px;background:#EEF0F4;display:flex;gap:3px;align-items:center;padding:0 6px}.vx-site .bar i{width:5px;height:5px;border-radius:50%;background:#CDD3DD} .vx-site .pg{padding:10px;display:flex;flex-direction:column;gap:5px;animation:dvlh 6s ease-in-out infinite} .vx-site .pg b{height:10px;width:70%;border-radius:3px;background:#142440}.vx-site .pg span{height:4px;border-radius:2px;background:#E3E7EE}.vx-site .pg span.s{width:60%} .vx-site .pg>i{width:50px;height:12px;border-radius:6px;background:var(--orange)} .vx-site .pg div{display:flex;gap:4px}.vx-site .pg em{flex:1;height:30px;border-radius:5px;background:var(--lilac)} .vx-app{display:grid;place-items:center} .vx-app .ph{width:48%;aspect-ratio:9/18;border-radius:14px;background:#0B1528;padding:5px;display:flex;flex-direction:column;gap:4px;box-shadow:0 12px 26px rgba(0,0,0,.3)} .vx-app .ph i{flex:1;border-radius:6px;background:#fff}.vx-app .ph i.on{background:var(--orange);animation:dvbag 2.4s ease-in-out infinite} .vx-cam{position:relative;border-radius:12px;background:linear-gradient(135deg,#1C3157,#142440);overflow:hidden} .vx-cam .fr{position:absolute;inset:14%;border:1px solid rgba(255,255,255,.5)} .vx-cam .fc{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid var(--lime);border-radius:4px;animation:focus 3s var(--ease) infinite} .vx-cam .fl{position:absolute;inset:0;background:#fff;opacity:0;animation:flash 4s infinite} .vx-net{position:relative} .vx-net i{position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;border-radius:50%;background:var(--lime);box-shadow:var(--glow-g);animation:spark 2.4s ease-in-out var(--d) infinite} .vx-net::before{content:"";position:absolute;inset:10%;border:1.5px dashed rgba(255,255,255,.35);border-radius:50%;animation:rot 20s linear infinite} .dv--lime .vx-net i,.dv--white .vx-net i{background:#142440}.dv--lime .vx-net::before,.dv--white .vx-net::before,.dv--lilac .vx-net::before{border-color:rgba(20,36,64,.3)} .vx-law{background:#fff;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;box-shadow:0 10px 24px rgba(20,36,64,.2);color:#142440} .vx-law .sc{font-size:26px;line-height:1;animation:dvbag 3s ease-in-out infinite} .vx-law .l{height:5px;border-radius:3px;background:#E3E7EE}.vx-law .l.s{width:60%} .vx-law .tag{align-self:flex-start;font:700 8px/1 var(--font-s);padding:5px 8px;border-radius:6px;background:var(--lime)} .vx-evt{background:#142440;color:#fff;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px} .vx-evt b{font:800 14px/1 var(--font-d)}.vx-evt div{display:flex;gap:4px}.vx-evt span{flex:1;text-align:center;padding:8px 0;border-radius:6px;background:var(--tech);font:800 14px/1 var(--font-d)} .vx-evt i{font-style:normal;align-self:flex-start;font:700 9px/1 var(--font-s);padding:7px 10px;border-radius:999px;background:var(--lime);color:#142440;animation:adbtn 2.6s var(--ease) infinite} .vx-news{background:#fff;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;color:#142440;box-shadow:0 10px 24px rgba(20,36,64,.2)} .vx-news b{font:800 9px/1 var(--font-s);letter-spacing:.14em;color:#B8400F}.vx-news .hl{font:800 13px/1.1 var(--font-d)}.vx-news .l{height:4px;border-radius:2px;background:#E3E7EE}.vx-news .l.s{width:60%} .vx-ppl{display:flex;align-items:center;justify-content:center} .vx-ppl i{width:38%;aspect-ratio:1;border-radius:50%;border:3px solid currentColor;margin-left:-12%;animation:dvbag 3s ease-in-out infinite} .vx-ppl i:nth-child(1){background:var(--orange);margin-left:0}.vx-ppl i:nth-child(2){background:var(--lime);animation-delay:.3s}.vx-ppl i:nth-child(3){background:var(--lilac);animation-delay:.6s} .vx-ppl span{font:800 22px/1 var(--font-d);margin-left:6px} .dv--navy .vx-ppl,.dv--blue .vx-ppl{color:#fff} .dv-stage>div.vx-cal,.dv-stage>div.vx-li,.dv-stage>div.vx-doc,.dv-stage>div.vx-rep,.dv-stage>div.vx-seo,.dv-stage>div.vx-law,.dv-stage>div.vx-news,.dv-stage>div.vx-evt,.dv-stage>div.vx-site,.dv-stage>div.vx-ig{height:auto} .dv-stage>div.vx-car{height:auto;width:62%} /* layout geral: menu sempre visível e conteúdo mais largo */ :root{--wrap:1400px;--gut:clamp(20px,3.2vw,48px)} .hdr.hide{transform:none} .vx-car{box-shadow:0 12px 28px rgba(20,36,64,.3);border:3px solid #fff;background:#fff} /* ===== Marketing jurídico ===== */ .jur-art{position:relative;justify-self:end;width:min(560px,100%)} .jur-art .sticker{left:-30px;bottom:-40px} .lid{position:relative;padding-bottom:40px} .lid-site{max-width:none;transform:none!important;box-shadow:0 26px 50px -20px rgba(0,0,0,.5)} .lid-vp{background:var(--l-bg);color:var(--l-fg);min-height:240px} .lid-nav{display:flex;gap:12px;align-items:center;padding:12px 16px;font:500 8.5px/1 var(--font-s);opacity:.9;border-bottom:1px solid color-mix(in srgb,var(--l-fg) 15%,transparent)} .lid-nav b{font:700 12px/1 var(--l-ff);margin-right:auto;letter-spacing:.02em} .lid-hero{padding:26px 18px 18px;display:flex;flex-direction:column;gap:10px} .lid-hero small{font:600 8.5px/1 var(--font-s);letter-spacing:.14em;text-transform:uppercase;color:var(--l-ac)} .lid-hero h4{margin:0;font:600 24px/1.1 var(--l-ff);max-width:15ch;letter-spacing:-.01em} .lid-hero i{width:90px;height:22px;border-radius:2px;border:1px solid var(--l-ac)} .lid-areas{display:flex;gap:6px;padding:0 18px 18px;flex-wrap:wrap} .lid-areas span{font:500 8px/1 var(--font-s);padding:6px 9px;border:1px solid color-mix(in srgb,var(--l-fg) 30%,transparent);border-radius:2px} .lid-ph{position:absolute;right:-12px;bottom:0;width:150px;animation:hpfloat 7s ease-in-out infinite} .lid-ph .scr{background:var(--l-bg)} .lid-post{aspect-ratio:4/5;margin-top:26px;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;color:var(--l-fg);border-bottom:3px solid var(--l-ac)} .lid-post small,.lid-li small{font:600 7px/1 var(--font-s);letter-spacing:.12em;text-transform:uppercase;color:var(--l-ac)} .lid-post b{font:600 14px/1.15 var(--l-ff)} .lid-sw{font:600 7.5px/1 var(--font-s);opacity:.6;animation:adbtn 3s infinite} .lid-li{background:#fff;margin:8px;border-radius:8px;padding:9px;display:flex;flex-direction:column;gap:5px;color:#142440} .lid-li small{color:#0A66C2}.lid-li b{font:700 9.5px/1.25 var(--font-s)} .lids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px} .lid-wrap h3{color:#fff;font-size:20px;margin-top:14px}.lid-wrap p{color:#A9B4C8;font-size:15px;margin:6px 0 0} .lid-wrap .lid-ph{width:118px} .lid-wrap .lid-vp{min-height:200px}.lid-wrap .lid-hero h4{font-size:19px} /* citações */ .jq{text-align:center} .jq .eyebrow{justify-content:center} .jq-stage{position:relative;min-height:clamp(260px,26vw,320px);display:grid} .jq-it{grid-area:1/1;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;opacity:0;animation:jq 24s var(--ease) infinite;animation-delay:calc(var(--i)*6s)} .jq-it blockquote{margin:0;font:600 clamp(26px,3.4vw,46px)/1.15 Georgia,'Times New Roman',serif;font-style:italic;letter-spacing:-.01em;max-width:24ch;color:#142440} .jq-it figcaption b{display:block;font:800 16px/1 var(--font-d)} .jq-it figcaption span{display:block;font-size:14px;color:var(--muted);margin-top:6px} .jq-it figcaption{padding:10px 18px;border-radius:999px;background:var(--lime)} .jq-it figcaption span{color:#142440;opacity:.75} @keyframes jq{0%{opacity:0;transform:translateY(20px)}4%,22%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-12px)}} .jq-dots{display:flex;gap:8px;justify-content:center;margin-top:20px} .jq-dots i{width:30px;height:4px;border-radius:4px;background:var(--line);position:relative;overflow:hidden} .jq-dots i::after{content:"";position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:left;animation:jqd 24s linear infinite} .jq-dots i:nth-child(2)::after{animation-delay:6s}.jq-dots i:nth-child(3)::after{animation-delay:12s}.jq-dots i:nth-child(4)::after{animation-delay:18s} @keyframes jqd{0%{transform:scaleX(0)}25%{transform:scaleX(1)}25.1%,100%{transform:scaleX(0)}} /* áreas */ .areas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px} .area{display:flex;flex-direction:column;gap:12px;padding:20px 16px;border-radius:18px;background:var(--raised);border:1.5px solid var(--line);transition:transform .4s var(--ease),background .3s,border-color .3s} .area b{font:700 15px/1.2 var(--font-d)} .area:hover{transform:translateY(-5px);background:#142440;color:#fff;border-color:#142440} .area:hover .ico{background:var(--lime);color:#142440} .area:nth-child(6n+1) .ico{background:color-mix(in srgb,var(--lime) 45%,#fff)}.area:nth-child(6n+3) .ico{background:color-mix(in srgb,var(--lilac) 50%,#fff)}.area:nth-child(6n+5) .ico{background:color-mix(in srgb,var(--orange) 30%,#fff)} /* OAB */ .oab{display:grid;grid-template-columns:1fr 1fr;gap:20px} .oab-c{border-radius:24px;padding:30px} .oab-c.ok{background:var(--lime);color:#142440}.oab-c.no{background:#142440;color:#fff} .oab-t{display:inline-flex;align-items:center;gap:10px;font:800 13px/1 var(--font-s);letter-spacing:.12em;text-transform:uppercase;margin-bottom:20px} .oab-c.ok .oab-t::before{content:"✓";width:26px;height:26px;border-radius:50%;background:#142440;color:var(--lime);display:grid;place-items:center} .oab-c.no .oab-t::before{content:"✕";width:26px;height:26px;border-radius:50%;background:var(--orange);color:#142440;display:grid;place-items:center} .oab-c ul{list-style:none;margin:0;padding:0;display:grid;gap:14px} .oab-c li b{display:block;font:700 16px/1.2 var(--font-d);margin-bottom:3px} .oab-c li span{font-size:14.5px;line-height:1.5;opacity:.85} .oab-how{margin-top:22px;border-radius:24px;padding:28px;background:var(--raised);border:1px solid var(--line)} .oab-how h3{font-size:20px;margin-bottom:16px} .oab-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} .oab-steps span{padding:16px;border-radius:16px;background:var(--surface);font-size:14px;line-height:1.4;font-weight:600} .oab-steps b{display:block;font:800 22px/1 var(--font-d);color:var(--orange-ink);margin-bottom:8px} /* tradução */ .trs{display:grid;gap:16px} .tr-it{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center} .tr-a,.tr-b{border-radius:20px;padding:22px} .tr-a{background:#EEF1F6}.tr-a p{font:400 15px/1.55 Georgia,serif;color:#4A5568;margin:0;font-style:italic} .tr-b{background:#fff;border:2px solid #142440}.tr-b p{font:600 17px/1.45 var(--font-s);margin:0;color:#142440} .tr-a small,.tr-b small{display:inline-block;font:700 11px/1 var(--font-s);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;padding:5px 9px;border-radius:6px} .tr-a small{background:#D7DBE3;color:#4A5568}.tr-b small{background:var(--lime);color:#142440} .tr-ar{width:52px;height:52px;border-radius:50%;background:var(--orange);display:grid;place-items:center;color:#142440} .tr-ar svg{width:22px;height:22px;animation:hpup 2s var(--ease) infinite;transform:none} @keyframes trx{0%,100%{transform:translateX(-3px)}50%{transform:translateX(4px)}} .tr-ar svg{animation:trx 1.6s ease-in-out infinite} @media (max-width:1100px){.areas{grid-template-columns:repeat(3,minmax(0,1fr))}.oab-steps{grid-template-columns:1fr 1fr}.lids{grid-template-columns:1fr}} @media (max-width:960px){.jur-art{justify-self:stretch;margin-top:20px}.oab{grid-template-columns:1fr}.tr-it{grid-template-columns:1fr}.tr-ar{justify-self:center;transform:rotate(90deg)}} @media (max-width:640px){.areas{grid-template-columns:1fr 1fr}.lid-ph{width:110px}.oab-steps{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){.jq-it{animation:none;opacity:0}.jq-it:first-child{opacity:1}} /* ===== Jurídico: escopo em abas ===== */ .tabs{display:grid;grid-template-columns:300px 1fr;gap:28px;margin-top:40px;align-items:start} .tab-l{display:flex;flex-direction:column;gap:6px;position:sticky;top:calc(var(--hdr) + 20px)} .tab-l button{display:flex;align-items:center;gap:14px;text-align:left;padding:12px 16px;border-radius:14px;border:1px solid transparent;background:transparent;cursor:pointer;font:600 15px/1.25 var(--font-s);color:var(--muted);transition:background .3s,color .3s,border-color .3s} .tab-l button b{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);font:800 13px/1 var(--font-d);color:var(--navy)} .tab-l button:hover{color:var(--ink);background:#fff} .tab-l button[aria-selected="true"]{background:var(--navy);color:#fff} .tab-l button[aria-selected="true"] b{background:var(--green);border-color:var(--green)} .tab-l button[data-tab="4"]:not([aria-selected="true"]) b{background:var(--green);border-color:var(--green)} .tab-c{background:#fff;border-radius:var(--r-lg);border:1px solid var(--line);padding:clamp(24px,3vw,44px);min-height:520px} .tab-p{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center;animation:tabIn .5s var(--ease)} .tab-p[hidden]{display:none} @keyframes tabIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .tp-l{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--tech);color:#fff;font:800 20px/1 var(--font-d);margin-bottom:16px} .tab-p h3{font-size:clamp(24px,2.4vw,32px);margin-bottom:20px} .tab-p .mods{gap:8px}.tab-p .mod{font-size:13px;padding:8px 13px;background:var(--offwhite)} .tp-vis{display:grid;place-items:center;min-height:360px;background:linear-gradient(135deg,#EEF0FF,#F5F6F8);border-radius:22px;padding:24px;overflow:hidden} .tp-vis .browser{max-width:100%} @media (max-width:980px){.tabs{grid-template-columns:1fr}.tab-l{position:static;flex-direction:row;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}.tab-l button{flex:none;white-space:nowrap;padding:10px 14px}.tab-p{grid-template-columns:1fr}.tp-vis{min-height:300px}} /* ===== Jurídico: galeria de mockups ===== */ .jg{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px} .jg-it{margin:0;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;min-height:330px} .jg-st{flex:1;display:grid;place-items:center;padding:26px 20px;overflow:hidden} .jg-it figcaption{padding:14px 18px;font:700 14px/1.3 var(--font-d);border-top:1px solid rgba(20,36,64,.08)} .jg-w,.jg-w2{grid-column:span 1;background:#fff}.jg-w2{grid-column:span 2} .jg-l{background:#EEF0FF}.jg-li{background:var(--green)}.jg-li figcaption{color:var(--navy)} .jg-n{background:var(--navy)}.jg-n figcaption{color:#fff;border-color:rgba(255,255,255,.1)} .jg-b{background:var(--tech);grid-column:span 2}.jg-b figcaption{color:#fff;border-color:rgba(255,255,255,.15)} .jg-o{background:#FFE3D6} .jg .browser{transform:none;max-width:100%} .jg .phone{width:150px} @media (max-width:1080px){.jg{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.jg{grid-template-columns:1fr}.jg-w2,.jg-b{grid-column:span 1}} /* ===== Jurídico: cases ===== */ .jcs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px} .jc{display:grid;grid-template-columns:140px 1fr;gap:22px;padding:24px;border-radius:22px;background:var(--offwhite);border:1px solid var(--line);align-items:start;transition:transform .4s var(--ease),box-shadow .4s} .jc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)} .jc-lg{aspect-ratio:1;border-radius:16px;background:#fff;display:grid;place-items:center;padding:18px;border:1px solid var(--line)} .jc-lg img{max-height:100%;object-fit:contain;filter:grayscale(1) contrast(1.1)} .jc .seg{font:700 11.5px/1.2 var(--font-s);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-ink)} .jc h3{font-size:21px;margin:8px 0 10px} .jc p{font-size:15px;color:var(--muted)} .jc .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px} .jc .chip{background:#fff} .jc--special{grid-column:1/-1;grid-template-columns:200px 1fr;background:var(--navy);color:#fff;border-color:var(--navy)} .jc--special .seg{color:var(--green)}.jc--special p{color:#C9D2E3}.jc--special .chip{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18)} .jc--special .link{color:var(--green)} .jc-work{grid-column:1/-1;position:relative;border-radius:16px;overflow:hidden;max-height:340px} .jc-work img{width:100%;height:100%;object-fit:cover;object-position:top} .jc-work span{position:absolute;left:12px;top:12px;background:var(--green);color:var(--navy);font:700 11px/1 var(--font-s);padding:7px 10px;border-radius:99px;letter-spacing:.06em;text-transform:uppercase} @media (max-width:900px){.jcs{grid-template-columns:1fr}.jc,.jc--special{grid-template-columns:90px 1fr}} /* ===== Jurídico: diferencial ===== */ .needs{display:flex;flex-wrap:wrap;gap:12px;margin:40px 0 46px} .needs span{padding:14px 22px;border-radius:99px;border:1px solid rgba(255,255,255,.2);font:700 clamp(16px,1.6vw,21px)/1.2 var(--font-d);color:#fff;transition:background .3s,color .3s} .needs span:nth-child(3n+1){background:var(--green);color:var(--navy);border-color:var(--green)} .needs span:nth-child(5n+2){background:var(--tech);border-color:var(--tech)} .needs span:last-child{background:var(--orange);color:var(--navy);border-color:var(--orange)} /* ===== Mockups jurídicos ===== */ .ipf{--l-bg:#14213D;--l-ac:#C9A86A} .ipf .scr{font-family:var(--font-s);color:#14213D;padding-top:30px} .ip-hd{font-size:9px;padding:0 10px 6px} .ip-top{display:flex;align-items:center;gap:8px;padding:0 10px} .ip-av{width:38px;height:38px;border-radius:50%;background:var(--l-bg);display:grid;place-items:center;flex:none;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--l-ac)} .ip-av svg{width:16px;height:16px;fill:var(--l-ac)} .ip-n{display:flex;gap:6px;flex:1;justify-content:space-around} .ip-n span{display:flex;flex-direction:column;align-items:center;font-size:6.5px;color:#677} .ip-n b{font-size:9px;color:#14213D} .ip-bio{padding:6px 10px;display:flex;flex-direction:column;font-size:6.8px;line-height:1.4;color:#556} .ip-bio b{font-size:7.8px;color:#14213D} .ip-hl{display:flex;gap:5px;padding:2px 10px 7px} .ip-hl span{flex:1;font-size:5.6px;text-align:center;padding-top:22px;position:relative;color:#556} .ip-hl span::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:19px;height:19px;border-radius:50%;border:1.5px solid var(--l-ac);background:var(--l-bg)} .ip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;flex:1} .ip-grid i{aspect-ratio:4/5;background:var(--l-bg);position:relative} .ip-grid i.c1{background:var(--l-ac)}.ip-grid i.c2{background:#F2EEE6}.ip-grid i.c3{background:#2B3A5C} .ip-grid i::after{content:"";position:absolute;left:18%;right:18%;top:40%;height:3px;border-radius:2px;background:currentColor;opacity:.35;color:#fff;box-shadow:0 6px 0 currentColor} .ip-grid i.c2::after{color:#14213D} .ip-real{background-size:cover!important;background-position:center!important} .ip-real::after{display:none} .lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;max-width:300px} .lgrid span{aspect-ratio:4/5;border-radius:6px;padding:9px;display:flex;flex-direction:column;justify-content:space-between;background:#14213D;color:#fff;animation:lgIn .6s var(--ease) both} .lgrid span:nth-child(n){animation-delay:calc(var(--i,0)*80ms)} .lgrid .g1{background:#C9A86A;color:#14213D}.lgrid .g2{background:#fff;color:#14213D;border:1px solid #DDE1EA} .lgrid small{font:700 6.5px/1 var(--font-s);letter-spacing:.08em;text-transform:uppercase;opacity:.7} .lgrid b{font:700 9.5px/1.15 var(--font-d)} @keyframes lgIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}} .lcar{width:100%;max-width:240px;aspect-ratio:4/5;overflow:hidden;border-radius:12px;box-shadow:0 20px 40px -18px rgba(0,0,0,.5)} .lcar .tr{display:flex;width:400%;height:100%;animation:lcar 12s infinite var(--ease-io)} .lcar .tr>span{width:25%;height:100%;padding:20px;display:flex;flex-direction:column;gap:10px;background:#F2EEE6;color:#14213D} .lcar .s1{background:#14213D!important;color:#fff!important;justify-content:flex-end} .lcar .s4{background:#C9A86A!important;justify-content:flex-end} .lcar small{font:700 8px/1 var(--font-s);letter-spacing:.1em;text-transform:uppercase;opacity:.75} .lcar b{font:700 17px/1.15 var(--font-d)} .lcar i{font-style:normal;font-size:9px;opacity:.7} .lcar em{display:block;height:5px;border-radius:3px;background:#14213D;opacity:.2}.lcar em.s{width:60%} @keyframes lcar{0%,20%{transform:none}25%,45%{transform:translateX(-25%)}50%,70%{transform:translateX(-50%)}75%,95%{transform:translateX(-75%)}100%{transform:none}} .jarea .ja-vp{padding:14px;font-family:var(--font-s);color:#14213D;background:#FBFAF7} .ja-bc{font-size:8px;color:#8890A0;margin-bottom:10px} .ja-body{display:grid;grid-template-columns:1.6fr 1fr;gap:14px} .ja-body b{display:block;font:700 15px/1.2 var(--font-d);margin-bottom:8px} .ja-body aside b{font-size:9px;margin:6px 0} .jarea .l{display:block;height:5px;border-radius:3px;background:#DCD8CE;margin-bottom:5px}.jarea .l.s{width:60%} .ja-list{display:flex;flex-direction:column;gap:5px;margin-top:10px} .ja-list i{font-style:normal;font-size:8.5px;padding:6px 8px;border-left:2px solid #C9A86A;background:#fff} .jarea aside{background:#fff;border-radius:8px;padding:8px} .jarea .av{display:inline-block;width:22px;height:22px;border-radius:50%;background:#14213D;margin-right:4px} .jevt .je-vp{background:#0E1A30;color:#fff;font-family:var(--font-s)} .je-kv{padding:22px 18px;background:radial-gradient(circle at 85% 20%,#2E26E6,transparent 60%);display:flex;flex-direction:column;gap:8px;align-items:flex-start} .je-kv small{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--green)} .je-kv b{font:800 22px/1.05 var(--font-d);max-width:14ch} .je-cd{display:flex;gap:6px}.je-cd span{background:rgba(255,255,255,.1);border-radius:6px;padding:5px 8px;font:800 14px/1 var(--font-d);text-align:center} .je-cd em{display:block;font:500 6.5px/1.4 var(--font-s);font-style:normal;opacity:.7} .je-kv i{font-style:normal;background:var(--green);color:var(--navy);font:700 9px/1 var(--font-s);padding:7px 12px;border-radius:99px;animation:pulse 2s infinite} .je-sp{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 18px 16px} .je-sp span{aspect-ratio:1;border-radius:50%;background:linear-gradient(#2B3A5C,#14213D);border:1.5px solid rgba(255,255,255,.15)} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(215,247,91,.6)}50%{box-shadow:0 0 0 8px rgba(215,247,91,0)}} .book3d{perspective:900px;padding:10px} .bk{position:relative;width:150px;height:210px;transform-style:preserve-3d;transform:rotateY(-28deg);animation:bkRot 7s ease-in-out infinite} .bk-front{position:absolute;inset:0;background:var(--b);color:#fff;padding:18px 14px;display:flex;flex-direction:column;gap:8px;border-radius:2px 6px 6px 2px;transform:translateZ(14px);box-shadow:inset 4px 0 8px rgba(0,0,0,.3)} .bk-front small{font:700 6.5px/1.3 var(--font-s);letter-spacing:.1em;text-transform:uppercase;color:var(--a)} .bk-front b{font:700 17px/1.1 Georgia,serif;margin-top:auto} .bk-line{width:40px;height:2px;background:var(--a)} .bk-front em{font:italic 9px/1 Georgia,serif;opacity:.85} .bk-spine{position:absolute;left:0;top:0;width:28px;height:100%;background:var(--b);filter:brightness(.75);transform:rotateY(-90deg) translateZ(0);transform-origin:left;display:grid;place-items:center} .bk-spine b{writing-mode:vertical-rl;transform:rotate(180deg);font:700 7px/1 var(--font-s);color:var(--a);white-space:nowrap;overflow:hidden;max-height:90%} .bk-pages{position:absolute;right:0;top:3px;width:26px;height:calc(100% - 6px);background:repeating-linear-gradient(90deg,#fff 0 1px,#E8E4DA 1px 2px);transform:rotateY(90deg) translateZ(-12px);transform-origin:right} .bk::after{content:"";position:absolute;left:10%;right:-10%;bottom:-18px;height:14px;background:radial-gradient(rgba(0,0,0,.35),transparent 70%);transform:translateZ(-30px)} @keyframes bkRot{0%,100%{transform:rotateY(-28deg)}50%{transform:rotateY(-12deg) translateY(-6px)}} .ebk{position:relative;width:180px;height:230px} .ebk>span,.ebk .p1{position:absolute;width:150px;height:200px;border-radius:6px;box-shadow:0 12px 30px -12px rgba(0,0,0,.4)} .ebk .p3{left:30px;top:0;background:#C9A86A;transform:rotate(8deg)} .ebk .p2{left:15px;top:10px;background:#2B3A5C;transform:rotate(3deg)} .ebk .p1{left:0;top:24px;background:#fff;padding:16px;display:flex;flex-direction:column;gap:6px;color:#14213D;font-family:var(--font-s);transition:transform .5s var(--ease)} .ebk:hover .p1{transform:translate(-6px,-6px) rotate(-3deg)} .ebk small{font:700 7px/1 var(--font-s);letter-spacing:.1em;text-transform:uppercase;color:var(--tech)} .ebk b{font:800 15px/1.1 var(--font-d);margin-bottom:6px} .ebk .l{height:4px;border-radius:2px;background:#E3E6EC}.ebk .l.s{width:60%} .ebk .toc{margin-top:auto;display:flex;flex-direction:column;gap:3px}.ebk .toc i{font-style:normal;font-size:7.5px;border-bottom:1px dotted #CCD;padding-bottom:2px} .lsl{position:relative;width:100%;max-width:280px;aspect-ratio:16/12} .lsl>div{position:absolute;width:82%;aspect-ratio:16/9;border-radius:8px;padding:14px;font-family:var(--font-s);box-shadow:0 18px 36px -16px rgba(0,0,0,.5)} .sl-a{left:0;top:0;background:var(--tech);color:#fff;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;animation:slA 6s ease-in-out infinite} .sl-a small{font:700 7px/1 var(--font-s);letter-spacing:.1em;text-transform:uppercase;color:var(--green)} .sl-a b{font:800 14px/1.1 var(--font-d);max-width:15ch} .sl-n{position:absolute;right:12px;top:6px;font:800 34px/1 var(--font-d);color:rgba(255,255,255,.2)} .sl-b{right:0;bottom:0;background:#fff;color:#14213D;display:flex;flex-direction:column;gap:5px} .sl-b b{font:700 9px/1 var(--font-d)}.sl-b .l{height:4px;border-radius:2px;background:#E3E6EC}.sl-b .l.s{width:60%} @keyframes slA{0%,100%{transform:none}50%{transform:translate(-4px,-6px) rotate(-2deg)}} .cng{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:auto auto;gap:8px;width:100%;max-width:300px;font-family:var(--font-s)} .cng .kv{grid-row:span 2;background:var(--navy);color:#fff;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;min-height:200px} .cng .kv small{font:700 7px/1 var(--font-s);letter-spacing:.12em;text-transform:uppercase;color:var(--green)} .cng .kv b{font:800 20px/1 var(--font-d);margin-top:auto;position:relative;z-index:1} .cng .kv em{font:800 13px/1 var(--font-d);font-style:normal;color:var(--green);position:relative;z-index:1} .cng .pt{position:absolute;right:-20px;top:-20px;width:110px;height:110px;border-radius:50%;background:var(--tech);box-shadow:0 0 0 18px rgba(46,38,230,.35);animation:spin 14s linear infinite} .cng .cred{background:#fff;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:3px;color:var(--navy);position:relative} .cng .cred .h{height:16px;border-radius:5px;background:var(--green);margin:-2px -2px 6px} .cng .cred b{font:700 9px/1.1 var(--font-d)}.cng .cred small{font-size:7px;color:#667} .cng .qr{position:absolute;right:8px;bottom:8px;width:20px;height:20px;background:repeating-conic-gradient(#14213D 0 25%,#fff 0 50%) 0 0/6px 6px} .cng .spk{background:var(--orange);border-radius:10px;padding:10px;color:var(--navy);display:flex;flex-direction:column;gap:2px} .cng .spk .av{width:26px;height:26px;border-radius:50%;background:var(--navy);margin-bottom:4px} .cng .spk b{font:700 9px/1 var(--font-d)}.cng .spk small{font-size:7px} @keyframes spin{to{transform:rotate(360deg)}} .binv .scr{background:#14213D} .bi-in{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px 12px;text-align:center;color:#fff;font-family:var(--font-s)} .bi-in small{font:700 7px/1 var(--font-s);letter-spacing:.14em;text-transform:uppercase;color:#C9A86A} .bi-in b{font:400 15px/1.1 Georgia,serif} .bi-bk{width:56px;height:76px;background:#C9A86A;border-radius:2px 5px 5px 2px;box-shadow:-4px 0 0 #9C7F4C,0 12px 20px -8px rgba(0,0,0,.6);margin:8px 0;animation:slA 5s ease-in-out infinite} .bi-in span{font-size:8px;opacity:.8}.bi-in em{font:700 10px/1 var(--font-d);font-style:normal} .bi-in i{font-style:normal;margin-top:8px;border:1px solid #C9A86A;color:#C9A86A;padding:6px 10px;border-radius:99px;font-size:7.5px;font-weight:700} .pvid .scr{background:#0E1A30} .pv-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,#2B3A5C,#0E1A30 70%)} .pv-sil{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:110px;height:150px;background:radial-gradient(circle at 50% 22%,#46577A 0 26px,transparent 27px),radial-gradient(ellipse at 50% 100%,#46577A 0 55px,transparent 56px)} .pv-cap{position:absolute;left:10px;right:10px;top:40px;font:800 12px/1.2 var(--font-d);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)} .pv-lt{position:absolute;left:10px;bottom:30px;background:var(--green);color:var(--navy);padding:5px 8px;border-radius:4px;display:flex;flex-direction:column;font-family:var(--font-s);animation:ltIn 4s var(--ease) infinite} .pv-lt b{font:700 8.5px/1.2 var(--font-d)}.pv-lt span{font-size:6.5px} .pv-prog{position:absolute;left:10px;right:10px;bottom:16px;height:2.5px;background:rgba(255,255,255,.25);border-radius:2px;overflow:hidden} .pv-prog i{display:block;height:100%;background:#fff;animation:prog 8s linear infinite} @keyframes ltIn{0%{transform:translateX(-120%)}12%,85%{transform:none}100%{transform:translateX(-120%)}} @keyframes prog{from{width:0}to{width:100%}} .crs .cr-vp{display:grid;grid-template-columns:1.6fr 1fr;gap:10px;padding:12px;background:#F5F6F8;font-family:var(--font-s)} .cr-play{aspect-ratio:16/10;border-radius:8px;background:linear-gradient(135deg,var(--navy),var(--tech));position:relative;display:grid;place-items:center} .cr-play .pl{width:34px;height:34px;border-radius:50%;background:var(--green);clip-path:none;position:relative} .cr-play .pl::after{content:"";position:absolute;left:13px;top:10px;border-left:11px solid var(--navy);border-top:7px solid transparent;border-bottom:7px solid transparent} .cr-bar{position:absolute;left:10px;right:10px;bottom:9px;height:3px;background:rgba(255,255,255,.25);border-radius:2px} .cr-bar i{display:block;height:100%;width:40%;background:var(--green);border-radius:2px;animation:prog 9s linear infinite} .crs aside{background:#fff;border-radius:8px;padding:9px;display:flex;flex-direction:column;gap:4px;color:var(--navy)} .crs aside b{font:700 9px/1 var(--font-d);margin-bottom:3px} .crs aside span{font-size:7.5px;padding:4px 6px;border-radius:4px;color:#667} .crs aside .done{color:var(--navy)}.crs aside .done::before{content:"✓ ";color:var(--green-ink);font-weight:700} .crs aside .on{background:var(--green);color:var(--navy);font-weight:700} .cr-pr{height:4px;border-radius:2px;background:#E3E6EC;margin-top:auto}.cr-pr i{display:block;height:100%;width:65%;background:var(--tech);border-radius:2px} .crs aside small{font-size:6.5px;color:#667} @media (prefers-reduced-motion:reduce){.lcar .tr,.bk,.sl-a,.pv-lt,.pv-prog i,.cr-bar i,.cng .pt,.bi-bk,.je-kv i{animation:none}} /* ===== Sites: expertise e entregas ao vivo ===== */ .xp{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:26px} .xp-it{padding:16px 18px;border-radius:16px;background:var(--offwhite);border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;transition:background .3s,transform .3s var(--ease)} .xp-it:hover{background:var(--green);transform:translateY(-3px)} .xp-it b{font:700 17px/1.2 var(--font-d)}.xp-it span{font-size:14px;color:var(--muted)} .xp-it:hover span{color:var(--navy)} .lvs{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:44px} .lv.big{grid-column:1/-1} .lv .browser{max-width:none;transform:none} .lv-vp{position:relative;height:420px;overflow:hidden;background:#EEF0F4} .lv.big .lv-vp{height:clamp(420px,52vw,640px)} .lv-vp iframe{position:absolute;left:0;top:0;width:1280px;border:0;transform-origin:0 0;background:#fff;opacity:0;transition:opacity .6s} .lv-vp.on iframe{opacity:1} .lv-ph{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:6px;color:var(--navy)} .lv-ph b{font:800 22px/1.1 var(--font-d)}.lv-ph small{color:var(--muted)} .lv--static iframe{pointer-events:none} .lv-lock,.lv-hint{position:absolute;left:14px;bottom:14px;z-index:2;font:700 11px/1 var(--font-s);letter-spacing:.06em;text-transform:uppercase;padding:9px 12px;border-radius:99px} .lv-lock{background:var(--navy);color:var(--green)} .lv-hint{background:var(--green);color:var(--navy);pointer-events:none;transition:opacity .4s} .lv-vp:hover .lv-hint{opacity:0} .lv--static .lv-vp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(transparent,rgba(20,36,64,.55));pointer-events:none} .lv-bd{padding:18px 4px 0} .lv-bd .seg{font:700 11.5px/1.2 var(--font-s);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-ink)} .lv-bd h3{font-size:22px;margin:6px 0 8px}.lv-bd p{color:var(--muted);font-size:15.5px;max-width:60ch} @media (max-width:900px){.lvs{grid-template-columns:1fr}.xp{grid-template-columns:1fr}.lv-vp{height:360px}} .tp-dv{width:min(300px,100%)} .jg{grid-auto-flow:dense} .jg-li2{grid-column:span 2;background:var(--green)}.jg-li2 figcaption{color:var(--navy)} .jg-n2{grid-column:span 2;background:var(--navy)}.jg-n2 figcaption{color:#fff;border-color:rgba(255,255,255,.1)} .jg-l .tp-dv{width:200px} @media (max-width:620px){.jg-li2,.jg-n2{grid-column:span 1}} .jcs{align-items:start} .jc--work{grid-column:1/-1;grid-template-columns:140px 1fr 1.1fr} .jc--work .jc-work{grid-column:auto;max-height:300px;height:100%} @media (max-width:900px){.jc--work{grid-template-columns:90px 1fr}.jc--work .jc-work{grid-column:1/-1}} .jc-lg.dk{background:#141414;border-color:#141414} @media (max-width:600px){.lv-vp,.lv.big .lv-vp{height:520px}} .lc-pb{margin:32px 0 0;max-width:420px;border-radius:var(--r-lg);overflow:hidden} .lc-pb img{width:100%;height:auto} .lc-pop{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);transform:rotate(-2deg);transition:transform .6s var(--ease)} .lc-pop:hover{transform:rotate(0) scale(1.02)} .lc-pop img{width:100%;height:auto} @media (max-width:900px){.lc-pb{max-width:100%}} .rds{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:44px} .rd{grid-column:span 2;position:relative;display:flex;flex-direction:column;gap:8px;padding:28px;border-radius:var(--r-lg);text-decoration:none;min-height:280px;transition:transform .4s var(--ease),box-shadow .4s;overflow:hidden} .rd:nth-child(-n+2){grid-column:span 3;min-height:320px} a.rd:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)} .rd-n{font:800 clamp(56px,6vw,88px)/1 var(--font-d);opacity:.18;margin-bottom:auto} .rd .seg{font:700 11.5px/1.2 var(--font-s);letter-spacing:.08em;text-transform:uppercase} .rd h3{font-size:clamp(22px,2.2vw,30px)} .rd p{font-size:15px;opacity:.85;margin:0;max-width:44ch} .rd-go{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font:700 14px/1 var(--font-s)} .rd-go svg{width:16px;height:16px} .rd--lime{background:var(--green);color:var(--navy)} .rd--navy{background:var(--navy);color:#fff}.rd--navy .seg{color:var(--green)} .rd--blue{background:var(--tech);color:#fff}.rd--blue .seg{color:var(--green)} .rd--lilac{background:#C9B8FF;color:var(--navy)} .rd--orange{background:var(--orange);color:var(--navy)} @media (max-width:900px){.rds{grid-template-columns:1fr}.rd,.rd:nth-child(-n+2){grid-column:auto;min-height:220px}} .lc-bio .wrap{position:relative;z-index:1} @media (max-width:900px){.lc-wm{width:90vw;left:auto;right:-20%;opacity:.05}} /* ===== Letícia: números ===== */ .lc-nums{padding:clamp(48px,6vw,80px) 0} .lcn{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .lcn-it{padding:26px;border-radius:var(--r-lg);background:var(--offwhite);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px;transition:transform .5s var(--ease),background .4s} .lcn-it:hover{transform:translateY(-6px) rotate(-1deg);background:var(--green)} .lcn-it b{font:800 clamp(44px,5vw,72px)/1 var(--font-d);letter-spacing:-.04em;color:var(--navy)} .lcn-it b sup{font-size:.45em;color:var(--orange)} .lcn-it span{font-weight:600;color:var(--muted)}.lcn-it:hover span{color:var(--navy)} @media (max-width:900px){.lcn{grid-template-columns:repeat(2,1fr)}} /* ===== Reel horizontal guiado pela rolagem ===== */ .lc-reel{height:320vh;position:relative} .lc-reel-in{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:34px} .lc-reel-hd .muted{max-width:56ch;margin-top:12px} .lc-track{display:flex;gap:22px;padding-left:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));will-change:transform;transform:translate3d(var(--tx,0),0,0)} .rc{flex:none;width:clamp(260px,26vw,360px);margin:0;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;transform:rotate(var(--rr,0deg));transition:transform .6s var(--ease)} .rc:nth-child(odd){--rr:-1.5deg}.rc:nth-child(even){--rr:1.5deg;margin-top:40px} .rc:hover{transform:rotate(0) translateY(-8px)} .rc-st{height:clamp(300px,42vh,400px);display:grid;place-items:center;padding:22px;overflow:hidden} .rc-st .browser{transform:none;max-width:100%}.rc-st .phone{width:150px} .rc figcaption{padding:14px 18px;font:700 16px/1.2 var(--font-d);display:flex;gap:12px;align-items:center} .rc figcaption span{font:800 13px/1 var(--font-d);opacity:.55} .rc--lime{background:var(--green);color:var(--navy)}.rc--lilac{background:#C9B8FF;color:var(--navy)} .rc--white{background:#fff;color:var(--navy)}.rc--blue{background:var(--tech);color:#fff}.rc--orange{background:var(--orange);color:var(--navy)} @media (max-width:900px){.lc-reel{height:auto}.lc-reel-in{position:static;height:auto;padding:var(--sec) 0}.lc-track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:20px;transform:none!important;padding-right:var(--gut)}.rc{scroll-snap-align:start;width:78vw}.rc:nth-child(even){margin-top:0}} /* ===== Blocos com visual animado ===== */ .lc-blks .blk{display:grid;grid-template-columns:1fr 150px;column-gap:24px;align-items:start;transition:transform .5s var(--ease),box-shadow .5s} .lc-blks .blk>h3,.lc-blks .blk>p{grid-column:1} .lc-blks .blk-vis{grid-column:2;grid-row:1/span 2;width:150px;aspect-ratio:1;border-radius:20px;background:rgba(255,255,255,.18);position:relative;display:grid;place-items:center} .lc-blks .blk-vis>div{position:relative;width:72%;height:72%} .lc-blks .blk-vis>div.vx-news,.lc-blks .blk-vis>div.vx-doc{height:auto} .lc-blks .blk:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)} @media (max-width:620px){.lc-blks .blk{grid-template-columns:1fr}.lc-blks .blk-vis{grid-column:1;grid-row:auto;margin-bottom:18px;width:120px}} /* movimento extra */ .lc-photo img{animation:lcFloat 7s ease-in-out infinite} @keyframes lcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .lc-pop{will-change:transform} /* ===================================================================== FX: ícones flutuantes, linhas de movimento e interações ===================================================================== */ .fx{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden} .sec,.phero{isolation:isolate} .sec>.wrap,.phero>.wrap,.sec>.lc-reel-in{position:relative;z-index:1} .fx-i{position:absolute;width:var(--s,58px);height:var(--s,58px);border-radius:var(--rad,18px);display:grid;place-items:center; background:var(--bg);color:var(--fg);box-shadow:0 14px 30px -14px rgba(20,36,64,.35); transform:translate3d(calc(var(--px,0px) * var(--d,1)),calc(var(--py,0px) * var(--d,1) + var(--sy,0px) * var(--d,1)),0);transition:transform .9s cubic-bezier(.2,.8,.2,1)} .fx-i>b{display:grid;place-items:center;width:100%;height:100%;animation:fxFloat var(--t,7s) ease-in-out infinite;animation-delay:var(--dl,0s)} .fx-i svg{width:46%;height:46%;animation:fxSpin var(--rt,14s) linear infinite;animation-direction:var(--dir,normal)} .fx-i.o{border:2px solid var(--fg)} .fx-i.c{border-radius:50%} @keyframes fxFloat{0%,100%{transform:translateY(0) rotate(0)}33%{transform:translateY(-16px) rotate(6deg)}66%{transform:translateY(8px) rotate(-5deg)}} @keyframes fxSpin{to{transform:rotate(360deg)}} .fx-i.nospin svg{animation:fxWob 4s ease-in-out infinite} @keyframes fxWob{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}} /* órbita: anel com ponto viajando */ .fx-orb{position:absolute;width:var(--s,180px);aspect-ratio:1;border-radius:50%;border:1.5px dashed var(--fg);opacity:.35;animation:fxSpin var(--rt,22s) linear infinite} .fx-orb::after{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--dot);box-shadow:0 0 14px var(--dot)} /* linhas de movimento: traços que correm */ .fx-ln{position:absolute;height:2px;width:var(--w,220px);border-radius:2px;overflow:hidden;opacity:.6;transform:rotate(var(--a,0deg))} .fx-ln::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--fg) 40%,var(--dot) 60%,transparent);transform:translateX(-100%);animation:fxRun var(--t,3.2s) cubic-bezier(.6,0,.3,1) infinite;animation-delay:var(--dl,0s)} @keyframes fxRun{to{transform:translateX(100%)}} /* circuito: linha em L que se desenha */ .fx-cir{position:absolute;width:var(--w,160px);height:var(--h,90px);overflow:visible} .fx-cir path{fill:none;stroke:var(--fg);stroke-width:1.6;stroke-dasharray:6 8;animation:fxDash 6s linear infinite;opacity:.5} .fx-cir circle{fill:var(--dot)} @keyframes fxDash{to{stroke-dashoffset:-140}} /* paletas por fundo */ .fx{--fg:#142440;--dot:#FF692E} .navy .fx,.blue .fx{--fg:#D7F75B;--dot:#FF692E} @media (max-width:900px){.fx-i,.fx-cir{display:none}.fx-ln{opacity:.35}} @media (prefers-reduced-motion:reduce){.fx-i>b,.fx-i svg,.fx-orb,.fx-ln::before,.fx-cir path{animation:none}} /* ícones dos cards: flutuam e giram */ .card .ico,.svc .ico{animation:icoBob 4.5s ease-in-out infinite} .card:nth-child(2n) .ico{animation-delay:-1.5s}.card:nth-child(3n) .ico{animation-delay:-3s} .card .ico svg{transition:transform .8s var(--ease)} .card:hover .ico{background:var(--green);color:var(--navy)} .card:hover .ico svg{transform:rotate(360deg) scale(1.15)} @keyframes icoBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-6deg)}} /* cartões interativos: inclinação 3D + luz que segue o mouse */ [data-tilt]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform .5s var(--ease),box-shadow .5s;will-change:transform} [data-tilt].tilting{transition:transform .08s linear,box-shadow .3s} [data-tilt]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(215,247,91,.28),transparent 45%);opacity:0;transition:opacity .4s;z-index:2} [data-tilt]:hover::after{opacity:1} .navy [data-tilt]::after,.blk--navy[data-tilt]::after,.blk--blue[data-tilt]::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(215,247,91,.22),transparent 45%)} /* cursor personalizado */ .ux-cur,.ux-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate3d(var(--x,-100px),var(--y,-100px),0)} .ux-cur{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid var(--orange);transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,border-color .3s;mix-blend-mode:normal} .ux-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:var(--orange)} .ux-cur.hov{width:74px;height:74px;margin:-37px 0 0 -37px;background:rgba(215,247,91,.25);border-color:var(--green)} .ux-cur.down{width:26px;height:26px;margin:-13px 0 0 -13px} .ux-cur span{position:absolute;inset:0;display:grid;place-items:center;font:700 10px/1 var(--font-s);letter-spacing:.08em;text-transform:uppercase;color:var(--navy);opacity:0;transition:opacity .2s} .ux-cur.hov span{opacity:1} @media (hover:none),(pointer:coarse){.ux-cur,.ux-dot{display:none}} /* botões magnéticos + ripple */ .btn{position:relative;overflow:hidden;transform:translate3d(var(--bx,0),var(--by,0),0);transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .3s} .btn .rp{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:rp .7s ease-out forwards;pointer-events:none} @keyframes rp{to{transform:scale(4);opacity:0}} /* sublinhado animado em links */ .link{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .4s var(--ease)} .link:hover{background-size:100% 2px} /* linha de progresso das seções: eyebrow cresce */ .eyebrow::before{transition:width .9s var(--ease)} .in .eyebrow::before,.eyebrow.in::before,.rv.in.eyebrow::before{width:44px} /* ===== Fotografia: caso Sebastian ===== */ .ph-hd{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:28px} .ph-f{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px} .ph-f button{padding:10px 18px;border-radius:99px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font:600 14px/1 var(--font-s);cursor:pointer;transition:background .3s,color .3s} .ph-f button[aria-pressed="true"]{background:var(--green);color:var(--navy);border-color:var(--green)} .ph-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;grid-auto-flow:dense;gap:12px} .ph-t{margin:0;position:relative;border-radius:18px;overflow:hidden;background:#0E1A30;transition:opacity .4s,transform .5s var(--ease)} .ph-t--tall{grid-row:span 2} .ph-t img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s} .ph-t:hover img{transform:scale(1.08)} .ph-t figcaption{position:absolute;left:10px;bottom:10px;background:rgba(14,26,48,.78);backdrop-filter:blur(6px);color:#fff;font:600 12.5px/1 var(--font-s);padding:8px 11px;border-radius:99px;transform:translateY(8px);opacity:0;transition:.4s var(--ease)} .ph-t:hover figcaption{transform:none;opacity:1} .ph-t.off{display:none} @media (max-width:900px){.ph-hd{grid-template-columns:1fr}.ph-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}.ph-t figcaption{opacity:1;transform:none}} /* demonstração de recorte */ .ph-crop{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1;max-width:520px} .ph-crop img{width:100%;height:100%;object-fit:cover} .ph-crop .cf{position:absolute;left:50%;top:50%;border:2.5px solid var(--green);border-radius:6px;box-shadow:0 0 0 9999px rgba(14,26,48,.45);transform:translate(-50%,-50%);opacity:0;animation:cf 9s infinite;background:url(../img/work/sebastian/paella-frutos-mar.jpg) center/cover;background-attachment:local} .ph-crop .cf em{position:absolute;top:-30px;left:0;font:700 12px/1 var(--font-s);font-style:normal;background:var(--green);color:var(--navy);padding:6px 9px;border-radius:99px;white-space:nowrap} .ph-crop .cf-1{width:64%;aspect-ratio:4/5} .ph-crop .cf-2{width:72%;aspect-ratio:1;animation-delay:3s} .ph-crop .cf-3{width:44%;aspect-ratio:9/16;animation-delay:6s} .ph-crop .cf{background:none} @keyframes cf{0%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}6%,30%{opacity:1;transform:translate(-50%,-50%) scale(1)}36%,100%{opacity:0;transform:translate(-50%,-50%) scale(.96)}} /* ===== Órbita de ícones dos serviços ===== */ .sh-orbit{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center} .orbit{position:relative;width:min(300px,30vw);aspect-ratio:1;flex:none} .ob-r{position:absolute;inset:0;border-radius:50%;border:1.5px dashed var(--line-strong);opacity:.5;animation:fxSpin 40s linear infinite} .ob-r.r2{inset:22%;border-style:solid;border-color:var(--line);animation-direction:reverse;animation-duration:26s} .ob-c{position:absolute;inset:36%;border-radius:50%;background:var(--green);display:grid;place-items:center;animation:obPulse 3s ease-in-out infinite;box-shadow:0 0 0 0 rgba(215,247,91,.6)} .ob-c svg{width:46%;height:46%;fill:var(--navy);animation:fxSpin 8s linear infinite} @keyframes obPulse{0%,100%{box-shadow:0 0 0 0 rgba(215,247,91,.55)}50%{box-shadow:0 0 0 16px rgba(215,247,91,0)}} .ob-t{position:absolute;inset:0;animation:fxSpin 30s linear infinite} .orbit:hover .ob-t,.orbit:hover .ob-i b{animation-play-state:paused} .ob-i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;transform:rotate(var(--a)) translateY(calc(min(300px,30vw) / -2)) rotate(calc(var(--a) * -1))} .ob-i b{display:grid;place-items:center;width:100%;height:100%;border-radius:16px;background:#fff;color:var(--navy);box-shadow:0 10px 24px -10px rgba(20,36,64,.4);animation:fxSpin 30s linear infinite reverse} .ob-i:nth-child(4n+1) b{background:var(--green)}.ob-i:nth-child(4n+2) b{background:var(--tech);color:#fff}.ob-i:nth-child(4n+3) b{background:var(--orange)}.ob-i:nth-child(4n) b{background:#C9B8FF} .ob-i svg{width:24px;height:24px} @media (max-width:900px){.sh-orbit{grid-template-columns:1fr}.orbit{width:240px;margin:10px auto 0}.ob-i{transform:rotate(var(--a)) translateY(-120px) rotate(calc(var(--a) * -1));width:42px;height:42px;margin:-21px}} @media (prefers-reduced-motion:reduce){.ob-r,.ob-t,.ob-i b,.ob-c,.ob-c svg{animation:none}} /* ===================================================================== REVISÃO MOBILE ===================================================================== */ .g5{grid-template-columns:repeat(5,minmax(0,1fr))} @media (max-width:1100px){.g5{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:640px){.g5{grid-template-columns:repeat(2,minmax(0,1fr))}} h1,h2,h3{overflow-wrap:break-word;hyphens:auto} @media (max-width:640px){ .btn{white-space:normal;text-align:center;line-height:1.2;padding:14px 22px;min-height:50px} .btns{flex-wrap:wrap}.btns .btn{flex:1 1 100%} .dash{grid-template-columns:1fr}.dash .side{display:none}.dash .tile b{font-size:14px}.dash .row{gap:6px} .crs .cr-vp{grid-template-columns:1fr} .cng{max-width:100%}.cng .kv b{font-size:16px} .integ{aspect-ratio:auto;width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding-top:150px} .integ::before{display:none} .integ span{position:static;transform:none!important;white-space:normal;font-size:13px} .integ-c{top:0;transform:translateX(-50%);width:130px;padding:28px} .card,.blk{min-width:0} .blk .pat{display:none} .grid.g5 .card{padding:18px!important}.grid.g5 .card h3{font-size:15px!important} } @media (max-width:420px){ .h1{font-size:clamp(30px,9vw,40px)} .display{font-size:clamp(46px,14vw,60px)} .h2{font-size:clamp(28px,8.4vw,36px)} .mk{white-space:normal} } @media (max-width:640px){ .wa{right:14px;bottom:14px;height:54px}.wa .i{width:42px;height:42px} .wa.peek .t{max-width:0;padding-right:0} .lc-blks .blk{grid-template-columns:1fr} }