/* ========================================================================== Sistemas Inovadores — camada "futuro" (animações + ecossistema + planos) Tudo aqui é progressivo: sem JS o site continua igual; com prefers-reduced-motion as animações são desligadas. ========================================================================== */ /* ---------- fundo de rede neural (canvas criado por future.js) ---------- */ #fx-net{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.7; -webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.55) 55%,rgba(0,0,0,.35) 100%); mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.55) 55%,rgba(0,0,0,.35) 100%)} body>main,body>footer{position:relative;z-index:1} /* ---------- barra de progresso de leitura ---------- */ #fx-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none; transform-origin:0 50%;transform:scaleX(var(--p,0)); background:linear-gradient(90deg,#22d3ee,#818cf8,#34d399);box-shadow:0 0 12px rgba(34,211,238,.6)} /* ---------- texto em gradiente animado ---------- */ .gradient-text{background-image:linear-gradient(90deg,#67e8f9,#7dd3fc,#a5b4fc,#c4b5fd,#67e8f9); background-size:220% auto;animation:fxShimmer 7s linear infinite} @keyframes fxShimmer{to{background-position:220% center}} /* ---------- revelação ao rolar ---------- */ .fx-js .fx-r{opacity:0;transform:translate3d(0,26px,0) scale(.985);filter:blur(4px); transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),filter .7s ease var(--d,0ms)} .fx-js .fx-r.is-in{opacity:1;transform:none;filter:none} /* ---------- brilho que segue o cursor nos cards ---------- */ .fx-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0; transition:opacity .35s ease; background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(103,232,249,.10),transparent 45%)} .fx-spot:hover::after{opacity:1} .fx-spot{transition:border-color .3s ease,transform .3s ease} .fx-spot:hover{border-color:rgba(103,232,249,.22)} /* pulso de status */ .fx-dot{position:relative} .fx-dot::before{content:"";position:absolute;inset:-4px;border-radius:999px;background:currentColor;opacity:.35;animation:fxPing 2.2s cubic-bezier(0,0,.2,1) infinite} @keyframes fxPing{75%,100%{transform:scale(2.2);opacity:0}} /* ========================================================================== ECOSSISTEMA ========================================================================== */ .eco{display:grid;gap:22px} @media(min-width:1024px){.eco{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:start}} .eco-stage{position:relative;border-radius:28px;padding:22px 14px 26px;overflow:hidden; background:radial-gradient(circle at 50% 30%,rgba(34,211,238,.09),transparent 55%),linear-gradient(180deg,rgba(12,20,42,.85),rgba(5,8,22,.9)); border:1px solid rgba(255,255,255,.08)} .eco-stage::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:26px 26px;-webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%);mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%)} @media(min-width:640px){.eco-stage{padding:30px 26px 34px}} .eco-layer{position:relative;z-index:1;text-align:center} .eco-label{display:block;margin-bottom:10px;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#64748b} .eco-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .eco-node{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:9px 13px;border-radius:14px; border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);color:#e2e8f0;font-size:13px;font-weight:600; cursor:pointer;transition:transform .25s ease,border-color .25s ease,background-color .25s ease,box-shadow .25s ease} .eco-node svg{width:16px;height:16px;flex:none} .eco-node:hover,.eco-node:focus-visible,.eco-node.is-active{transform:translateY(-2px);border-color:rgba(103,232,249,.45); background:rgba(34,211,238,.08);box-shadow:0 0 0 1px rgba(103,232,249,.12),0 10px 30px -10px rgba(34,211,238,.45)} .eco-node--agent svg{color:#a5b4fc} .eco-node--res svg{color:#67e8f9} .eco-node--prod svg{color:#6ee7b7} .eco-node--dev svg{color:#fcd34d} .eco-row--res .eco-node,.eco-row--prod .eco-node{flex:1 1 calc(50% - 8px);justify-content:center} @media(min-width:640px){.eco-row--res .eco-node{flex:0 1 auto;min-width:120px}.eco-row--prod .eco-node{flex:0 1 auto;min-width:130px}} /* núcleo ZP Nexus */ .eco-core{position:relative;z-index:1;display:block;width:100%;margin:0 auto;max-width:520px;color:inherit;font:inherit;padding:20px 18px;border-radius:24px;text-align:center;cursor:pointer; border:1px solid rgba(103,232,249,.35); background:radial-gradient(circle at 50% 0,rgba(34,211,238,.18),transparent 65%),linear-gradient(180deg,rgba(14,26,52,.95),rgba(8,14,32,.95)); box-shadow:0 0 0 1px rgba(34,211,238,.08),0 0 60px -12px rgba(34,211,238,.45);transition:box-shadow .3s ease,transform .3s ease} .eco-core:hover,.eco-core:focus-visible,.eco-core.is-active{box-shadow:0 0 0 1px rgba(34,211,238,.25),0 0 80px -8px rgba(34,211,238,.6);transform:translateY(-2px)} .eco-core__ring{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1px; background:conic-gradient(from var(--a,0deg),transparent 0 70%,rgba(103,232,249,.9) 80%,rgba(129,140,248,.9) 88%,transparent 95%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; animation:fxSpin 5s linear infinite} @property --a{syntax:"";inherits:false;initial-value:0deg} @keyframes fxSpin{to{--a:360deg}} .eco-core__title{display:flex;align-items:center;justify-content:center;gap:10px;font-family:"Space Grotesk",Inter,sans-serif;font-size:22px;font-weight:700;color:#fff} .eco-core__title svg{width:22px;height:22px;color:#67e8f9} .eco-core__sub{margin-top:2px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#67e8f9} .eco-pillars{margin-top:14px;display:grid;grid-template-columns:repeat(2,1fr);gap:6px} @media(min-width:520px){.eco-pillars{grid-template-columns:repeat(4,1fr)}} .eco-pillar{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 6px;border-radius:12px;background:rgba(255,255,255,.04);font-size:11.5px;color:#cbd5e1} .eco-pillar svg{width:16px;height:16px;color:#a5f3fc} .eco-pillar.is-scan{animation:fxScan 5.6s ease-in-out infinite} .eco-pillar:nth-child(2).is-scan{animation-delay:1.4s}.eco-pillar:nth-child(3).is-scan{animation-delay:2.8s}.eco-pillar:nth-child(4).is-scan{animation-delay:4.2s} @keyframes fxScan{0%,18%,100%{background:rgba(255,255,255,.04);color:#cbd5e1}6%,12%{background:rgba(34,211,238,.16);color:#fff}} /* conectores com pulsos de dados */ .eco-link{position:relative;z-index:1;height:36px;margin:6px auto;width:2px; background:linear-gradient(180deg,rgba(103,232,249,.05),rgba(103,232,249,.35),rgba(103,232,249,.05))} .eco-link::before,.eco-link::after{content:"";position:absolute;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%; top:0;background:#a5f3fc;box-shadow:0 0 10px 2px rgba(103,232,249,.8);animation:fxFlow 1.8s linear infinite;opacity:0;will-change:transform,opacity} .eco-link::after{animation-delay:.9s} .eco-link--up::before,.eco-link--up::after{animation-name:fxFlowUp} .eco-link--mint::before,.eco-link--mint::after{background:#a7f3d0;box-shadow:0 0 10px 2px rgba(52,211,153,.7)} @keyframes fxFlow{0%{transform:translate3d(0,-4px,0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate3d(0,34px,0);opacity:0}} @keyframes fxFlowUp{0%{transform:translate3d(0,34px,0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate3d(0,-4px,0);opacity:0}} .eco-bus{position:relative;z-index:1;height:2px;margin:0 auto;width:78%;overflow:hidden; background:linear-gradient(90deg,transparent,rgba(103,232,249,.35),transparent)} .eco-bus::after{content:"";position:absolute;top:0;left:0;width:30%;height:100%;background:linear-gradient(90deg,transparent,#a5f3fc,transparent);animation:fxBus 2.6s ease-in-out infinite;will-change:transform} @keyframes fxBus{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(334%,0,0)}} /* painel de detalhes */ .eco-side{display:grid;gap:12px} @media(min-width:1024px){.eco-side{position:sticky;top:92px}} .eco-panel{min-height:190px;padding:22px;border-radius:24px;border:1px solid rgba(103,232,249,.18); background:linear-gradient(180deg,rgba(34,211,238,.07),rgba(255,255,255,.02))} .eco-panel__tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(34,211,238,.1);color:#67e8f9;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .eco-panel__title{margin-top:12px;font-family:"Space Grotesk",Inter,sans-serif;font-size:22px;font-weight:600;color:#fff} .eco-panel__text{margin-top:8px;font-size:14px;line-height:1.65;color:#94a3b8} .eco-panel__text,.eco-panel__title{transition:opacity .25s ease,transform .25s ease} .eco-panel.is-swap .eco-panel__text,.eco-panel.is-swap .eco-panel__title{opacity:0;transform:translateY(6px)} .eco-panel__hint{margin-top:14px;font-size:11px;color:#475569} .eco-radar{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:22px;border:1px dashed rgba(165,180,252,.28);background:rgba(129,140,248,.05);cursor:pointer;text-align:left;width:100%;color:inherit} .eco-radar:hover,.eco-radar.is-active{border-color:rgba(165,180,252,.55);background:rgba(129,140,248,.09)} .eco-radar__icon{position:relative;flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(129,140,248,.12);color:#c7d2fe} .eco-radar__icon svg{width:22px;height:22px} .eco-radar__icon::after{content:"";position:absolute;inset:0;border-radius:50%; background:conic-gradient(from 0deg,rgba(165,180,252,.55),transparent 28%);animation:fxRadar 2.8s linear infinite} @keyframes fxRadar{to{transform:rotate(360deg)}} .eco-principle{padding:18px;border-radius:22px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);font-size:13.5px;line-height:1.6;color:#cbd5e1} .eco-principle strong{color:#fff} /* ========================================================================== PLANOS ========================================================================== */ .plans{display:grid;gap:14px} @media(min-width:900px){.plans{grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}} .plan{position:relative;display:flex;flex-direction:column;padding:24px;border-radius:26px;border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));overflow:hidden} .plan--featured{border-color:rgba(103,232,249,.4);background:radial-gradient(circle at 50% 0,rgba(34,211,238,.16),transparent 60%),linear-gradient(180deg,rgba(14,26,52,.95),rgba(8,14,32,.95)); box-shadow:0 30px 80px -30px rgba(34,211,238,.45)} @media(min-width:900px){.plan--featured{transform:translateY(-10px)}} .plan__badge{position:absolute;top:18px;right:18px;padding:4px 10px;border-radius:999px;background:#fff;color:#0f172a;font-size:10px;font-weight:700;letter-spacing:.06em} .plan__level{display:flex;gap:4px;margin-bottom:14px} .plan__level span{width:22px;height:4px;border-radius:4px;background:rgba(255,255,255,.1)} .plan__level span.on{background:linear-gradient(90deg,#22d3ee,#818cf8)} .plan__name{font-family:"Space Grotesk",Inter,sans-serif;font-size:26px;font-weight:700;color:#fff} .plan__verb{margin-top:4px;font-size:14px;font-weight:600;color:#67e8f9} .plan__desc{margin-top:10px;font-size:13.5px;line-height:1.6;color:#94a3b8} .plan ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:9px} .plan li{display:flex;gap:9px;font-size:13.5px;line-height:1.45;color:#cbd5e1} .plan li svg{width:16px;height:16px;flex:none;margin-top:1px;color:#34d399} .plan__cta{margin-top:auto;padding-top:22px} .plan__cta a{display:flex;min-height:46px;align-items:center;justify-content:center;gap:8px;border-radius:13px;font-size:14px;font-weight:600; border:1px solid rgba(255,255,255,.12);color:#fff;transition:background-color .2s ease} .plan__cta a:hover{background:rgba(255,255,255,.06)} .plan--featured .plan__cta a{background:#fff;color:#0f172a;border-color:#fff} .plan--featured .plan__cta a:hover{background:#cffafe} .plans-org{margin-top:18px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding:20px;border-radius:22px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025)} @media(min-width:900px){.plans-org{flex-direction:row;align-items:center;justify-content:space-between}} .plans-org p{font-size:14px;line-height:1.6;color:#cbd5e1;max-width:640px} .plans-org p strong{color:#fff} .plans-surfaces{display:flex;flex-wrap:wrap;gap:6px} .plans-surfaces span{padding:6px 11px;border-radius:999px;border:1px solid rgba(165,180,252,.22);background:rgba(129,140,248,.07);font-size:12px;color:#c7d2fe} /* ---------- movimento reduzido ---------- */ @media (prefers-reduced-motion:reduce){ #fx-net{display:none} .gradient-text,.eco-core__ring,.eco-link::before,.eco-link::after,.eco-bus::after,.eco-radar__icon::after,.eco-pillar.is-scan,.fx-dot::before{animation:none!important} .eco-link::before,.eco-link::after{display:none} .fx-js .fx-r{opacity:1;transform:none;filter:none;transition:none} } /* ========================================================================== MARCO MOBILE (28/09/2026) — celular é o acesso principal (>80%) ========================================================================== */ @media (max-width:639px){ /* legibilidade: nada abaixo de ~11,5px */ .section-kicker{font-size:11.5px!important;letter-spacing:.14em!important} main .text-\[9px\],main .text-\[10px\]{font-size:11.5px!important} main .text-\[11px\]{font-size:12px!important} .eco-label{font-size:11px} /* iOS não dá zoom ao focar campo com 16px+ */ input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important} /* alvos de toque */ main a.inline-flex:not([class*="min-h-"]){min-height:44px} .si-consent-actions button{min-height:44px} footer{font-size:13px!important} footer .flex-wrap{column-gap:18px!important;row-gap:0!important} footer a{display:inline-flex;align-items:center;min-height:44px} /* desempenho: sem desfoque de fundo nos cards e na entrada */ .glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important} .fx-js .fx-r{filter:none;transform:translate3d(0,16px,0)} /* carrosséis deslizáveis (classe aplicada pelo future.js só no celular) */ .m-snap{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px!important; margin-left:-16px;margin-right:-16px;padding:6px 16px 12px;scroll-padding-left:16px;scrollbar-width:none;overscroll-behavior-x:contain} .m-snap::-webkit-scrollbar{display:none} .m-snap>*{flex:0 0 84%!important;max-width:330px;scroll-snap-align:start;margin:0!important} .plans.m-snap>*{flex-basis:86%!important} .plan--featured{transform:none!important} .m-dots{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:4px} .m-dots span{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.18);transition:width .25s ease,background-color .25s ease} .m-dots span.on{width:22px;background:#67e8f9} .m-hint{display:block;margin-top:6px;text-align:center;font-size:12px;color:#64748b} } @media (min-width:640px){.m-dots,.m-hint{display:none}} /* desempenho: animações contínuas só quando a seção está na tela */ #ecossistema:not(.is-live) *,#ecossistema:not(.is-live) *::before,#ecossistema:not(.is-live) *::after{animation-play-state:paused!important} @media (max-width:639px){ .gradient-text{animation:none} .eco-core__ring{animation-duration:8s} } /* Marco Mobile #2: no celular o vídeo de 1 minuto (logo abaixo) mostra o produto melhor que o card ilustrativo */ @media (max-width:639px){.hero-visual{display:none}} /* Marco Mobile #2: menu em duas colunas — cabe inteiro até no iPhone SE */ @media (max-width:1023px){ #mobileMenu nav{grid-template-columns:1fr 1fr!important;gap:6px!important} #mobileMenu .mobile-link{display:flex;align-items:center;min-height:46px;margin:0!important;font-size:14px; background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)} #mobileMenu .mobile-link[aria-current="page"]{border-color:rgba(103,232,249,.35);color:#ecfeff;background:rgba(34,211,238,.08)} #mobileMenu .mobile-link.bg-white{grid-column:1/-1;justify-content:center;margin-top:6px!important;background:#fff;border-color:#fff} } /* Safari/iOS: