/* ============================================================ POWERBIZZ.AI · PROTÓTIPO 2026 Design system: precisão Apple, linguagem B2B C-level Paleta herdada do powerbizz.ai atual (extraída do CSS em produção) ============================================================ */ :root{ /* marca (do site atual) */ --ink: #04071d; /* fundo institucional */ --ink-soft: #0a0e26; --ink-line: #1b2040; --paper: #f1eeea; /* claro da apresentação comercial */ --paper-2: #e6e2dc; --magenta: #eb5cff; --magenta-d: #c000db; --violet: #a855f7; --violet-d: #8a2be2; --text-hi: #e4ecff; --text-dim: #a3a8c6; --text-ink: #12142a; --text-ink-2: #55596f; --grad: linear-gradient(100deg, var(--magenta) 0%, var(--violet) 55%, #6c5cff 100%); --nav-h: 52px; --r: 22px; --maxw: 1340px; --ease: cubic-bezier(.22,.61,.36,1); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth; -webkit-text-size-adjust:100%} /* Rede de segurança contra arrasto horizontal. Só o com overflow-x não segura: quem rola na horizontal no mobile é o . Usamos `clip` (e não `hidden`) porque `hidden` transformaria o elemento em container de rolagem e quebraria o `position:sticky` da nav. Navegadores antigos ignoram `clip` e caem no `hidden` declarado antes. Isto é rede, não conserto: as causas reais estão corrigidas abaixo (.layer, .nav-in, .feats-2col). */ html{overflow-x:hidden; overflow-x:clip} body{ margin:0; background:var(--ink); color:var(--text-hi); font-family:var(--font); font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; overflow-x:clip; } img{max-width:100%; display:block} a{color:inherit; text-decoration:none} button{font-family:inherit} /* ---------- tipografia base (escala Apple: pouco texto, muito peso) ---------- */ .display{ font-size:clamp(2.6rem, 6.4vw, 5.4rem); line-height:1.04; letter-spacing:-.035em; font-weight:600; margin:0; } .h1{font-size:clamp(2.1rem, 4.6vw, 3.6rem); line-height:1.08; letter-spacing:-.03em; font-weight:600; margin:0} .h2{font-size:clamp(1.5rem, 2.6vw, 2.15rem); line-height:1.14; letter-spacing:-.022em; font-weight:600; margin:0} .h3{font-size:1.12rem; line-height:1.3; letter-spacing:-.012em; font-weight:600; margin:0} .lede{font-size:clamp(1.05rem, 1.5vw, 1.32rem); line-height:1.5; letter-spacing:-.01em; font-weight:400; color:var(--text-dim); margin:0} .body{font-size:.98rem; line-height:1.62; color:var(--text-dim); margin:0} .kicker{ font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--magenta); margin:0 0 18px; } /* Kicker graúdo, quase do tamanho de um h2, para a seção onde ele carrega a pergunta em si e não só rotula o bloco ("Quanto sua operação gasta hoje"). O letter-spacing cai de .22em para .08em de propósito: o valor original foi calibrado para .72rem, e mantido a 1.6rem cada letra afastaria tanto que a linha viraria uma régua e quebraria cedo demais. O respiro em cima e embaixo é o que separa: nesse tamanho ele deixa de ser etiqueta colada no título e passa a ser uma linha própria. */ .kicker-lg{ /* ~85% do .h2 (que vai a 2.15rem): grande o bastante para segurar a linha sozinho, sem competir com o título logo abaixo */ font-size:clamp(1.2rem, 2.2vw, 1.82rem); letter-spacing:.08em; line-height:1.25; margin:clamp(16px, 2.6vw, 34px) 0 clamp(20px, 2.2vw, 28px); } .grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent} /* ---------- seções ---------- */ section{position:relative} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px} .pad{padding:clamp(84px, 11vw, 150px) 0} .pad-sm{padding:clamp(56px, 7vw, 90px) 0} .paper{background:var(--paper); color:var(--text-ink)} .paper .lede,.paper .body{color:var(--text-ink-2)} .paper .kicker{color:var(--magenta-d)} /* ============================================================ ORBES DAS SEÇÕES CLARAS As seções escuras já têm o .hero-glow. As claras ficavam chapadas, então ganham duas esferas, uma no canto superior direito e outra no inferior direito, na paleta da marca (rosa, roxo, azul). Feitas com ::before e ::after do próprio
: nenhum elemento novo no HTML. SÃO OPT-IN, por a classe `orbes` junto de `paper`. Aplicar em toda seção clara ficou ruim: onde duas delas se encostam, como #agentes e #pratica na home, a esfera de baixo de uma cai colada na de cima da seguinte, e o par lido junto parece descuido, não composição. Com opt-in as esferas entram só em seções isoladas e espaçadas, e voltam a parecer decisão. A esfera é montada em camadas, e a ordem importa: primeiro o brilho especular (o ponto de luz), depois o corpo em gradiente. As sombras internas fazem o volume, escurecendo o lado oposto à luz, e a sombra externa é o bloom que sangra a cor no papel. É isso que separa uma esfera de um borrão redondo. `overflow:clip` no .paper corta o que passa da borda, então as esferas podem sangrar para fora sem criar rolagem horizontal. `clip` em vez de `hidden` para não transformar a seção em container de rolagem. ============================================================ */ /* A camada ocupa a seção inteira e recorta no retângulo dela, então as esferas podem sangrar para fora sem criar rolagem horizontal. `clip` em vez de `hidden` para não virar container de rolagem. */ .orbes-camada{ position:absolute; inset:0; z-index:0; overflow:clip; pointer-events:none; } /* o conteúdo sobe uma camada, para o texto nunca ficar sob as esferas */ .orbes > .wrap,.orbes > .tela-inner{position:relative; z-index:1} /* ---------- a esfera ---------- */ /* Esta camada é o CORPO: silhueta, sombra de contato e o brilho neon que vaza para o papel. Ela só deriva, não gira e não muda de tamanho. ORÇAMENTO DE QUADRO. A primeira versão engasgava, e por três motivos que valem ficar registrados: 1. `backdrop-filter` nas esferas. Reprocessa o fundo a CADA QUADRO, e eram quatro esferas animadas. Sobre papel chapado ele quase não mudava nada visualmente, então era custo puro: saiu. 2. Animar `scale` num elemento com sombra grande. Escala obriga a rasterizar a sombra de novo em cada tamanho, e a sombra tinha raio de 120px, o que fazia uma camada enorme. A respiração saiu e as sombras encolheram. 3. `overflow:hidden` recortando o líquido em círculo. Recorte arredondado sobre camada que gira é máscara a cada quadro. Resolvido pela forma: o líquido virou um círculo do mesmo tamanho do corpo, e girar círculo em torno do próprio centro não muda a silhueta, então não precisa de recorte nenhum. Sobra só `translate` no corpo e `rotate` no líquido, as duas compostas pela GPU sem repintura. */ .orbe{ position:absolute; border-radius:50%; will-change:translate; } .orbe-a{ width:clamp(160px, 24vw, 320px); aspect-ratio:1; right:clamp(-86px, -6.5vw, -38px); top:clamp(-104px, -8.5vw, -48px); box-shadow: 0 0 46px rgba(235,92,255,.5), /* neon curto e saturado */ 0 0 70px 6px rgba(150,92,255,.3), /* halo longo */ /* Sombra de CONTATO: deslocada para baixo e para a direita, do lado oposto à luz. É o que mais ancora a esfera no espaço, porque diz ao olho que existe uma superfície embaixo dela. */ 0 40px 60px -30px rgba(45,15,95,.55); animation:orbe-deriva-a 34s linear infinite; } .orbe-b{ width:clamp(104px, 16vw, 205px); aspect-ratio:1; right:clamp(-56px, -4.2vw, -26px); bottom:clamp(-74px, -5.6vw, -34px); box-shadow: 0 0 38px rgba(108,140,255,.5), 0 0 56px 5px rgba(120,92,255,.28), 0 30px 46px -26px rgba(30,15,85,.5); animation:orbe-deriva-b 41s linear infinite; } /* ---------- o líquido, dentro ---------- */ /* Esta é a ÚNICA camada que gira, e é um círculo do mesmo tamanho do corpo. Girar círculo em torno do próprio centro não altera a silhueta: só leva os blobs de neon a passearem por dentro do vidro. Por isso o corpo não precisa recortar nada, o que economiza uma máscara por quadro. Os blobs terminam transparentes antes da borda, então o rodapé do círculo nunca aparece como aresta dura. */ .orbe-liquido{ position:absolute; inset:0; border-radius:50%; will-change:rotate; animation:orbe-gira 82s linear infinite; } .orbe-a .orbe-liquido{ background: radial-gradient(circle at 30% 28%, rgba(255,92,240,.85) 0%, rgba(255,92,240,0) 46%), radial-gradient(circle at 68% 66%, rgba(120,92,255,.8) 0%, rgba(120,92,255,0) 48%), radial-gradient(circle at 60% 26%, rgba(64,224,255,.55) 0%, rgba(64,224,255,0) 38%), radial-gradient(circle at 36% 72%, rgba(196,64,255,.65) 0%, rgba(196,64,255,0) 44%); } .orbe-b .orbe-liquido{ background: radial-gradient(circle at 30% 30%, rgba(92,180,255,.82) 0%, rgba(92,180,255,0) 48%), radial-gradient(circle at 68% 64%, rgba(150,92,255,.78) 0%, rgba(150,92,255,0) 50%), radial-gradient(circle at 58% 26%, rgba(64,240,235,.55) 0%, rgba(64,240,235,0) 40%), radial-gradient(circle at 38% 74%, rgba(235,92,255,.55) 0%, rgba(235,92,255,0) 44%); animation-duration:104s; animation-direction:reverse; } /* ---------- a casca de vidro, por cima e PARADA ---------- */ /* Aqui mora tudo que depende da direção da luz. Fica fora do elemento que gira, senão a iluminação giraria junto e a esfera viraria adesivo. Três fenômenos, e são eles que fazem a leitura tridimensional: FRESNEL A refletividade do vidro cresce nos ângulos rasantes, então a silhueta acende num anel fino e o miolo fica limpo. É o cue mais forte de "esfera de vidro": diz que a superfície é curva e se afasta de você na borda. ESPESSURA Olhando de frente, a luz atravessa pouco vidro no centro e muito na borda, então a cor satura na direção da aresta. Repare que é o INVERSO de uma bola opaca, onde a borda escurece por sombra. Trocar esses dois é o que faz vidro parecer plástico. CÁUSTICA A esfera funciona como lente e concentra a luz num ponto difuso do lado oposto ao que ela entra, aqui embaixo à direita. Fechando, um fio claro na aresta com franja rosa de um lado e ciano do outro, imitando a dispersão da luz ao atravessar vidro curvo. */ .orbe::after{ content:""; position:absolute; inset:0; border-radius:50%; background: /* Fresnel: transparente no miolo, acende só na silhueta */ radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 62%, rgba(255,255,255,.3) 88%, rgba(255,255,255,.72) 96%, rgba(255,255,255,.15) 100%), /* cáustica: foco difuso no lado oposto à entrada da luz */ radial-gradient(circle at 66% 70%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 26%), /* espessura: cor satura na direção da borda */ radial-gradient(circle at 50% 50%, rgba(120,60,220,0) 48%, rgba(120,60,220,.2) 84%, rgba(78,36,170,.42) 100%), /* corpo do vidro, translúcido: o papel creme atravessa e clareia por dentro */ radial-gradient(circle at 38% 34%, rgba(255,255,255,.2) 0%, rgba(255,255,255,.03) 66%, rgba(255,255,255,.1) 100%); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6), /* fio da aresta */ inset 3px 3px 0 -1.5px rgba(255,140,250,.6), /* franja rosa */ inset -3px -3px 0 -1.5px rgba(120,232,255,.55), /* franja ciano */ inset 0 -26px 46px -14px rgba(70,30,150,.36); /* peso do líquido, embaixo */ } .orbe-b::after{ background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 62%, rgba(255,255,255,.3) 88%, rgba(255,255,255,.72) 96%, rgba(255,255,255,.15) 100%), radial-gradient(circle at 66% 70%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 26%), radial-gradient(circle at 50% 50%, rgba(70,80,220,0) 48%, rgba(70,80,220,.2) 84%, rgba(40,44,160,.42) 100%), radial-gradient(circle at 38% 34%, rgba(255,255,255,.2) 0%, rgba(255,255,255,.03) 66%, rgba(255,255,255,.1) 100%); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6), inset 3px 3px 0 -1.5px rgba(150,235,255,.6), inset -3px -3px 0 -1.5px rgba(235,140,255,.55), inset 0 -22px 40px -12px rgba(40,30,140,.36); } /* ---------- movimento ---------- */ /* `translate`, `rotate` e `scale` são propriedades próprias, separadas de `transform`, então rodam como animações independentes sem uma sobrescrever a outra, e as três são compostas pela GPU sem repintura. A deriva é um caminho FECHADO: o quadro final volta exatamente ao inicial, então o ciclo emenda sem solavanco e roda em `linear`, sem aceleração perceptível. Ir e voltar pelo mesmo caminho com `alternate` trava e inverte a cada ponta, que era o problema da primeira versão. Como deriva, giro e respiração têm durações que não são múltiplas entre si, as três só coincidem depois de muitos minutos, e o movimento nunca parece repetir. */ @keyframes orbe-gira{ from{rotate:0deg} to {rotate:360deg} } @keyframes orbe-deriva-a{ 0% {translate:0 0} 25% {translate:-17px 11px} 50% {translate:-23px 29px} 75% {translate:-7px 21px} 100%{translate:0 0} } @keyframes orbe-deriva-b{ 0% {translate:0 0} 25% {translate:-14px -9px} 50% {translate:-19px -24px} 75% {translate:-5px -17px} 100%{translate:0 0} } /* seções distantes não podem pulsar em uníssono, senão a página inteira "respira" junto e o efeito fica mecânico */ .orbes:nth-of-type(even) .orbe-a{animation-duration:39s; animation-delay:-11s} .orbes:nth-of-type(even) .orbe-b{animation-duration:36s; animation-delay:-17s} .orbes:nth-of-type(even) .orbe-liquido{animation-delay:-30s} /* Trava contra colisão: se um dia duas seções com orbes ficarem vizinhas, a segunda perde as esferas em vez de empilhar com a primeira. */ .orbes + .orbes .orbes-camada{display:none} @media (prefers-reduced-motion:reduce){ .orbe,.orbe-liquido{animation:none} } /* ---------- modo leve (html.fx-leve) ---------- Marcado pela sonda de quadros do site.js quando a máquina rasteriza por software, sem GPU. Só o decorativo sai; nada funcional muda. As esferas ficam PARADAS mas continuam lá: estáticas, elas são pintadas uma única vez e depois não custam nada por quadro. As sombras de neon encolhem porque blur grande é caro até para pintar uma vez em software. O marquee de clientes deixa de rolar e cai no mesmo layout que ele já usa em prefers-reduced-motion: todos os nomes visíveis, em linhas. */ html.fx-leve .orbe, html.fx-leve .orbe-liquido{animation:none} html.fx-leve .orbe{will-change:auto} html.fx-leve .orbe-liquido{will-change:auto} html.fx-leve .orbe-a{box-shadow:0 0 24px rgba(235,92,255,.4), 0 20px 34px -22px rgba(45,15,95,.5)} html.fx-leve .orbe-b{box-shadow:0 0 20px rgba(108,140,255,.4), 0 16px 28px -18px rgba(30,15,85,.46)} html.fx-leve .marquee-track{animation:none; flex-wrap:wrap; width:auto; justify-content:center} html.fx-leve .live i{animation:none} .center{text-align:center} .mw-760{max-width:760px} .mw-860{max-width:860px} .mx-auto{margin-left:auto; margin-right:auto} /* ---------- navegação (vidro, estilo Apple) ---------- */ .announce{ background:#0b0e24; color:var(--text-dim); font-size:.79rem; letter-spacing:-.005em; text-align:center; padding:9px 16px; border-bottom:1px solid rgba(255,255,255,.05); } .announce b{color:var(--text-hi); font-weight:600} .announce a{color:var(--magenta); font-weight:500} /* z-index acima da Bella (120): com 100, o botão flutuante do WhatsApp ficava por cima do menu mobile aberto. */ nav{ position:sticky; top:0; z-index:130; height:var(--nav-h); background:rgba(4,7,29,.72); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(255,255,255,.07); } .nav-in{max-width:var(--maxw); margin:0 auto; height:100%; padding:0 22px; display:flex; align-items:center; gap:10px; justify-content:space-between; min-width:0} .logo{display:flex; align-items:center; gap:7px; flex:0 0 auto} .nav-links{display:flex; gap:0; list-style:none; margin:0; padding:0; flex:0 1 auto} .nav-links a{ font-size:.74rem; color:var(--text-dim); padding:7px 7px; border-radius:8px; white-space:nowrap; transition:color .2s var(--ease), background .2s var(--ease); } .nav-links a:hover{color:#fff; background:rgba(255,255,255,.06)} .nav-cta{ font-size:.79rem; font-weight:500; padding:7px 15px; border-radius:100px; background:var(--grad); color:#fff; white-space:nowrap; flex:0 0 auto; transition:transform .2s var(--ease), box-shadow .2s var(--ease); } .nav-cta:hover{transform:translateY(-1px); box-shadow:0 6px 22px rgba(235,92,255,.35)} .nav-burger{display:none; background:none; border:0; color:var(--text-hi); font-size:1.1rem; cursor:pointer} /* ---------- seletor de idioma: um botão só, com dropdown ---------- */ .lang-has-sub{margin-left:4px; padding-left:10px; border-left:1px solid rgba(255,255,255,.12)} .lang-trigger{ font:inherit; font-size:.74rem; font-weight:600; letter-spacing:.02em; color:var(--text-dim); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:6px 10px; cursor:pointer; white-space:nowrap; transition:color .2s var(--ease), background .2s var(--ease); } .lang-trigger i{font-style:normal; opacity:.6; font-size:.72rem; margin-left:1px} .lang-trigger:hover{color:#fff; background:rgba(255,255,255,.1)} .lang-sub{min-width:150px} .lang-sub a[aria-current="true"]{color:var(--magenta); background:rgba(235,92,255,.1)} /* ---------- botões ---------- */ .btn{ display:inline-flex; align-items:center; gap:8px; justify-content:center; font-size:.95rem; font-weight:500; letter-spacing:-.01em; padding:13px 26px; border-radius:100px; border:1px solid transparent; cursor:pointer; transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease); } .btn-primary{background:var(--grad); color:#fff; box-shadow:0 8px 30px rgba(168,85,247,.28)} .btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 40px rgba(235,92,255,.4)} .btn-ghost{border-color:rgba(228,236,255,.25); color:var(--text-hi); background:transparent} .btn-ghost:hover{background:rgba(255,255,255,.08); transform:translateY(-2px)} .paper .btn-ghost{border-color:rgba(18,20,42,.22); color:var(--text-ink)} .paper .btn-ghost:hover{background:rgba(18,20,42,.06)} .link-arrow{ display:inline-flex; align-items:center; gap:5px; color:var(--magenta); font-size:.95rem; font-weight:500; letter-spacing:-.01em; } .paper .link-arrow{color:var(--magenta-d)} .link-arrow span{transition:transform .22s var(--ease); display:inline-block} .link-arrow:hover span{transform:translateX(4px)} .btn-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center} /* ---------- animação de entrada ---------- */ .rv{opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .85s var(--ease)} .rv.in{opacity:1; transform:none} .rv-d1{transition-delay:.08s} .rv-d2{transition-delay:.16s} .rv-d3{transition-delay:.24s} .rv-d4{transition-delay:.32s} .rv-d5{transition-delay:.4s} .rv-d6{transition-delay:.48s} @media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} html{scroll-behavior:auto} } /* ============================ HERO ============================ */ .hero{ min-height:calc(100svh - var(--nav-h)); display:flex; align-items:center; padding:clamp(60px,9vw,110px) 0 clamp(40px,6vw,70px); overflow:hidden; } .hero-bg{position:absolute; inset:0; overflow:hidden; pointer-events:none} .hero-glow{ position:absolute; width:min(1100px,120vw); height:min(1100px,120vw); right:-24%; top:-46%; background:radial-gradient(circle at center, rgba(192,0,219,.34) 0%, rgba(138,43,226,.16) 38%, transparent 66%); filter:blur(28px); } .hero-dots{ position:absolute; inset:0; background-image:radial-gradient(rgba(235,92,255,.5) 1px, transparent 1px); background-size:26px 26px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 88% 8%, #000 0%, transparent 70%); mask-image:radial-gradient(ellipse 70% 60% at 88% 8%, #000 0%, transparent 70%); opacity:.55; } .hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,64px); align-items:center; } .hero h1{margin-bottom:22px} .hero .lede{max-width:520px; margin-bottom:34px} .hero-meta{display:flex; gap:26px; margin-top:40px; flex-wrap:wrap} .hero-meta div{border-left:2px solid rgba(235,92,255,.5); padding-left:12px} .hero-meta strong{display:block; font-size:1.32rem; font-weight:600; letter-spacing:-.03em} .hero-meta span{font-size:.76rem; color:var(--text-dim); line-height:1.35; display:block; max-width:150px} /* painel operacional (mock) */ .panel{ position:relative; border-radius:var(--r); padding:20px; background:linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.11); box-shadow:0 40px 90px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.09); backdrop-filter:blur(14px); } .panel-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px} .panel-title{font-size:.8rem; font-weight:600; letter-spacing:-.01em} .live{display:flex; align-items:center; gap:6px; font-size:.68rem; color:#59f0b0; letter-spacing:.06em} .live i{width:6px; height:6px; border-radius:50%; background:#59f0b0; animation:pulse 1.8s infinite} @keyframes pulse{0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(89,240,176,.5)} 50%{opacity:.55; box-shadow:0 0 0 6px rgba(89,240,176,0)}} .agent-row{ display:grid; grid-template-columns:26px 1fr auto; gap:11px; align-items:center; padding:11px 12px; border-radius:13px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); margin-bottom:8px; transition:background .3s var(--ease), transform .3s var(--ease); } .agent-row:hover{background:rgba(235,92,255,.09); transform:translateX(3px)} .av{ width:26px; height:26px; border-radius:50%; background:var(--grad); display:grid; place-items:center; font-size:.66rem; font-weight:600; color:#fff; } .agent-name{font-size:.82rem; font-weight:500; letter-spacing:-.01em} .agent-role{font-size:.68rem; color:var(--text-dim)} .agent-kpi{font-size:.72rem; font-weight:600; color:#59f0b0; font-variant-numeric:tabular-nums} .panel-foot{ margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; font-size:.68rem; color:var(--text-dim); } .bar{height:3px; border-radius:3px; background:rgba(255,255,255,.09); margin-top:10px; overflow:hidden} .bar i{display:block; height:100%; width:0; background:var(--grad); border-radius:3px; transition:width 2.2s var(--ease)} /* ---------- faixa de credibilidade ---------- */ .trust{border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); background:#03050f} .trust-in{display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; padding:26px 0} .trust p{font-size:.75rem; color:var(--text-dim); letter-spacing:.1em; text-transform:uppercase; margin:0} .trust ul{display:flex; gap:28px; list-style:none; margin:0; padding:0; flex-wrap:wrap} .trust li{font-size:.86rem; color:var(--text-dim); font-weight:500; letter-spacing:-.01em; opacity:.85} /* ============================ DOR ============================ */ .quotes{display:grid; gap:12px; margin-top:46px} .quote{ background:#fff; border-radius:16px; padding:20px 24px; font-size:1.02rem; letter-spacing:-.015em; color:var(--text-ink); border:1px solid rgba(18,20,42,.07); box-shadow:0 1px 2px rgba(18,20,42,.04); position:relative; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .quote::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grad)} .quote:hover{transform:translateX(5px); box-shadow:0 14px 34px -18px rgba(18,20,42,.35)} .quote-punch{ margin-top:34px; font-size:clamp(1.1rem,1.9vw,1.42rem); font-weight:600; letter-spacing:-.022em; line-height:1.35; max-width:820px; } /* ============================ BENTO 4 LINHAS ============================ */ .bento{display:grid; grid-template-columns:repeat(12,1fr); gap:14px; margin-top:54px} .card{ position:relative; border-radius:var(--r); padding:30px; background:linear-gradient(165deg, rgba(255,255,255,.065), rgba(255,255,255,.018)); border:1px solid rgba(255,255,255,.1); overflow:hidden; transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } .card:hover{transform:translateY(-4px); border-color:rgba(235,92,255,.42); box-shadow:0 30px 60px -34px rgba(235,92,255,.5)} .card .num{ font-size:.7rem; letter-spacing:.2em; color:var(--magenta); font-weight:600; margin-bottom:14px; display:block; } .card h3{margin:0 0 10px; font-size:1.28rem; letter-spacing:-.025em; font-weight:600} .card p{font-size:.93rem; line-height:1.58; color:var(--text-dim); margin:0} .card ul{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:7px} .card ul li{ font-size:.74rem; padding:5px 11px; border-radius:100px; background:rgba(235,92,255,.11); border:1px solid rgba(235,92,255,.22); color:#f0c9ff; } .c-6{grid-column:span 6} .c-4{grid-column:span 4} .c-3{grid-column:span 3} .c-8{grid-column:span 8} .c-12{grid-column:span 12} .c-5{grid-column:span 5} .c-7{grid-column:span 7} /* fundação */ .foundation{ grid-column:span 12; border-radius:var(--r); padding:clamp(26px,3.4vw,38px); background:linear-gradient(120deg, rgba(235,92,255,.16), rgba(108,92,255,.1)); border:1px solid rgba(235,92,255,.3); } .foundation-head{display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:26px} .foundation-copy{flex:1 1 380px; min-width:0} .foundation-tag{margin:0 0 8px; font-size:1.08rem; font-weight:600; letter-spacing:-.018em; color:var(--text-hi)} .foundation-desc{margin:0; color:var(--text-dim); font-size:.94rem; line-height:1.6; max-width:640px} .foundation .layers{display:flex; flex-wrap:wrap; gap:8px} /* Sem `white-space:nowrap`: pílulas de texto longo ("Multimodelo, sem prender você a um fornecedor") não cabiam em 375px e empurravam a página inteira, criando o arrasto horizontal. Como .layers é flex-wrap, cada pílula ainda ocupa a largura do próprio conteúdo quando ele cabe (desktop fica idêntico); quando não cabe, o texto quebra em vez de vazar. O max-width é o teto. */ .layer{ font-size:.76rem; padding:8px 15px; border-radius:100px; background:rgba(4,7,29,.5); border:1px solid rgba(255,255,255,.14); letter-spacing:.02em; color:var(--text-hi); max-width:100%; overflow-wrap:anywhere; } /* ============================ AGENTES (scroll horizontal) ============================ */ .rail-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap} .rail{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:40px 24px 30px; margin:0 -24px; scrollbar-width:none; } .rail::-webkit-scrollbar{display:none} .rail-card{ flex:0 0 clamp(258px, 30vw, 320px); scroll-snap-align:center; border-radius:var(--r); padding:26px; min-height:290px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(170deg, #0d1130, #070a1e); border:1px solid rgba(255,255,255,.1); transition:transform .4s var(--ease), border-color .4s var(--ease); } .rail-card:hover{transform:translateY(-5px); border-color:rgba(235,92,255,.45)} .rail-card .role{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--magenta); font-weight:600} .rail-card h3{margin:12px 0 10px; font-size:1.3rem; letter-spacing:-.028em} .rail-card p{font-size:.9rem; line-height:1.55; color:var(--text-dim); margin:0} .rail-metric{ margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,.09); font-size:.78rem; color:var(--text-hi); } .rail-metric b{color:var(--magenta); font-weight:600} .rail-nav{display:flex; gap:8px} .rail-btn{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:transparent; color:var(--text-hi); cursor:pointer; font-size:.9rem; transition:background .2s var(--ease), transform .2s var(--ease); } .rail-btn:hover{background:rgba(255,255,255,.1); transform:scale(1.06)} /* no toque, 34px é pequeno demais para as setas do carrossel de agentes */ @media (max-width:620px){ .rail-btn{width:44px; height:44px; font-size:1rem} } /* ============================ ANTES E DEPOIS ============================ */ .tbl{width:100%; border-collapse:collapse; margin-top:44px; font-size:1.05rem} .tbl thead th{ text-align:left; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--text-ink-2); padding:0 18px 14px; } .tbl tbody tr{border-top:1px solid rgba(18,20,42,.1); transition:background .25s var(--ease)} .tbl tbody tr:hover{background:rgba(235,92,255,.06)} .tbl td{padding:18px; vertical-align:top; line-height:1.45} .tbl td:first-child{font-weight:600; letter-spacing:-.015em; width:22%} .tbl td.hoje{color:var(--text-ink-2); width:38%} .tbl td.pbz{color:var(--magenta-d); font-weight:500} /* ============================ GOVERNANÇA ============================ */ .gov{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,66px); align-items:start} .gov-cols{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:8px} .gov-cols h4{font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--magenta); margin:0 0 16px; font-weight:600} .gov-cols ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px} .gov-cols li{font-size:.88rem; line-height:1.45; color:var(--text-dim); display:flex; gap:9px; align-items:flex-start} .gov-cols li::before{content:"✓"; color:var(--magenta); font-size:.78rem; margin-top:2px; flex:0 0 auto} .gov-visual{ border-radius:var(--r); padding:28px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.1); } .flow-step{display:grid; grid-template-columns:28px 1fr; gap:14px; padding:14px 0; position:relative} .flow-step:not(:last-child)::after{ content:""; position:absolute; left:13px; top:42px; bottom:-4px; width:1px; background:rgba(235,92,255,.35); } .flow-dot{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:.68rem; font-weight:600; background:rgba(235,92,255,.15); border:1px solid rgba(235,92,255,.45); color:#f3c8ff; } .flow-step b{display:block; font-size:.88rem; font-weight:600; letter-spacing:-.015em; margin-bottom:3px} .flow-step span{font-size:.8rem; color:var(--text-dim); line-height:1.45} .gov-note{ margin-top:22px; font-size:.85rem; color:var(--text-hi); background:rgba(235,92,255,.1); border:1px solid rgba(235,92,255,.28); border-radius:14px; padding:14px 16px; line-height:1.5; } /* ============================ RESULTADOS ============================ */ .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:52px} .stat{ border-radius:var(--r); padding:30px 26px; background:linear-gradient(170deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.1); } .stat b{ display:block; font-size:clamp(2.4rem,4.4vw,3.3rem); font-weight:600; letter-spacing:-.045em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums; line-height:1; } .stat span{display:block; margin-top:14px; font-size:.86rem; color:var(--text-dim); line-height:1.45} .stat-note{ margin-top:16px; border-radius:var(--r); padding:22px 26px; font-size:.93rem; line-height:1.6; color:var(--text-dim); border:1px solid rgba(235,92,255,.3); background:rgba(235,92,255,.06); } /* ============================ JORNADA ============================ */ .journey{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:52px} .step{ border-radius:18px; padding:26px 22px; background:#fff; border:1px solid rgba(18,20,42,.08); transition:transform .35s var(--ease), box-shadow .35s var(--ease); } .step:hover{transform:translateY(-5px); box-shadow:0 26px 50px -30px rgba(18,20,42,.45)} .step .n{ width:38px; height:38px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-size:.82rem; font-weight:600; margin-bottom:18px; } .step h3{font-size:1rem; letter-spacing:-.02em; margin:0 0 8px} .step p{font-size:.83rem; line-height:1.5; color:var(--text-ink-2); margin:0} .gate{ margin-top:26px; font-size:1rem; font-weight:600; letter-spacing:-.02em; color:var(--magenta-d); } /* ============================ INDÚSTRIAS ============================ */ .inds{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:50px} .ind{ border-radius:var(--r); padding:28px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(170deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); transition:transform .35s var(--ease), border-color .35s var(--ease); } .ind:hover{transform:translateY(-4px); border-color:rgba(235,92,255,.4)} .ind h3{font-size:1.06rem; letter-spacing:-.02em; margin:0 0 12px; color:var(--magenta)} .ind p{font-size:.88rem; line-height:1.55; color:var(--text-dim); margin:0} .inds-note{margin-top:24px; font-size:.82rem; color:var(--text-dim); font-style:italic} /* ============================ CTA FINAL ============================ */ .cta{ position:relative; overflow:hidden; background:linear-gradient(150deg,#06091f 0%, #120a30 50%, #1a0a2e 100%); } .cta-dots{ position:absolute; inset:0; opacity:.5; background-image:radial-gradient(rgba(235,92,255,.55) 1px, transparent 1px); background-size:24px 24px; -webkit-mask-image:radial-gradient(ellipse 60% 70% at 85% 15%, #000, transparent 70%); mask-image:radial-gradient(ellipse 60% 70% at 85% 15%, #000, transparent 70%); } .cta-in{position:relative; z-index:2} .lines{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:44px 0 40px} .line-opt{ border-radius:16px; padding:20px; text-align:left; cursor:pointer; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.12); transition:all .3s var(--ease); color:inherit; display:block; width:100%; } .line-opt:hover,.line-opt.sel{background:rgba(235,92,255,.14); border-color:var(--magenta); transform:translateY(-3px)} .line-opt b{display:block; font-size:.95rem; letter-spacing:-.02em; margin-bottom:5px} .line-opt span{font-size:.78rem; color:var(--text-dim); line-height:1.4} /* ---------- rodapé ---------- */ footer{background:#02040d; border-top:1px solid rgba(255,255,255,.07); padding:56px 0 34px; font-size:.82rem} .foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1fr; gap:28px} .foot-grid h5{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-hi); margin:0 0 14px; font-weight:600} .foot-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px} .foot-grid a{color:var(--text-dim); transition:color .2s var(--ease)} .foot-grid a:hover{color:var(--magenta)} .foot-bottom{ margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.07); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--text-dim); font-size:.75rem; } /* ---------- responsivo ---------- */ @media (max-width:960px){ .hero-grid{grid-template-columns:1fr} .panel{margin-top:12px} .gov{grid-template-columns:1fr} .stats{grid-template-columns:repeat(2,1fr)} .journey{grid-template-columns:repeat(2,1fr)} .inds{grid-template-columns:repeat(2,1fr)} .lines{grid-template-columns:repeat(2,1fr)} .c-6,.c-4,.c-3,.c-5,.c-7{grid-column:span 12} .foot-grid{grid-template-columns:1fr 1fr} .nav-links{display:none} .nav-burger{display:block} .lang-has-sub{border-left:0; margin-left:0; padding-left:0; padding-top:10px; margin-top:8px; border-top:1px solid rgba(255,255,255,.1)} } /* o menu completo espreme demais por volta de 1024px (ex.: tablet em modo paisagem) — some um pouco antes, pra sempre sobrar respiro. */ @media (max-width:1040px){ .nav-links{display:none} .nav-burger{display:block} } /* ============================================================ MENU MOBILE Antes o painel era montado com style inline pelo JS. Três defeitos graves vinham disso: 1. o inline sobrevivia ao fechar, então `display:none` continuava no elemento e, ao girar o aparelho ou voltar para largura de desktop, vencia o CSS e a navegação inteira sumia; 2. `max-height:calc(100vh - 52px)` não descontava a barra .announce, então o painel terminava 49px abaixo da tela com a página no topo; 3. `100vh` no mobile é a viewport GRANDE (com a barra do navegador recolhida), o que piora o corte no aparelho real. Agora o estado é uma classe e todo o visual mora aqui. O painel é position:absolute ancorado no