/* ═══════════════════════════════════════════════ apresentação · tokens A paleta é a do produto (estilo.py §1), copiada e não importada: esta página é servida antes de qualquer sessão e não deve arrastar a folha de 85 KB do aplicativo só para pintar um fundo. O hero é mais escuro que o aplicativo de propósito: é uma página de produto, e o preto é o que faz a luz da aurora e o aparelho saltarem. */ :root{ --bg:#050608; --bg-2:#0B0D11; --surface:#12151C; --elevated:#191E28; --borda:#222835; --borda-sutil:#171B23; --tx1:#F2F4F8; --tx2:#A2ABBA; --tx3:#7B8595; --azul:#4D9BFF; --azul-claro:#7CB6FF; --azul-fraco:rgba(77,155,255,.12); --azul-borda:rgba(77,155,255,.35); --sobre-acento:#04101F; --ok:#3ECF8E; --alerta:#F2B457; --erro:#FF7B72; --roxo:#B79CFF; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px; --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text", "Segoe UI Variable","Segoe UI","Inter",Roboto,"Helvetica Neue", Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono","JetBrains Mono",Menlo, Consolas,monospace; /* A curva de todo movimento desta página: sai rápido, encosta devagar, nunca volta. */ --curva:cubic-bezier(.16,1,.3,1); --sombra-alta:0 40px 100px rgba(0,0,0,.6); --largura:1120px; --estreita:760px; } /* O capítulo claro: as mesmas variáveis, trocadas de valor. Tudo o que está dentro dele herda a paleta certa sem uma regra a mais. */ .ap-claro{ --bg:#F5F5F7; --bg-2:#FFFFFF; --surface:#FFFFFF; --elevated:#FFFFFF; --borda:#D2D2D7; --borda-sutil:#E6E6EA; --tx1:#1D1D1F; --tx2:#4E4E52; --tx3:#6E6E73; --azul:#0071E3; --azul-claro:#0A7CF0; --azul-fraco:rgba(0,113,227,.08); --azul-borda:rgba(0,113,227,.25); --sobre-acento:#FFFFFF; --ok:#1F9E5E; --alerta:#C97A0A; --sombra-alta:0 30px 80px rgba(0,0,0,.14); background:var(--bg);color:var(--tx1); } /* ══════════════════════════════════════════════════════════════ base */ *{box-sizing:border-box} /* O fundo no , e não só no body: entre a navegação e a primeira pintura o navegador mostra o fundo da RAIZ, e branco ali é o flash que o commit f9f4cc1 já teve de corrigir uma vez no aplicativo. */ html{background:#050608;scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--tx1); font:400 17px/1.55 var(--sans); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; } h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.06} p{margin:0} a{color:var(--azul);text-decoration:none} a:hover{color:var(--azul-claro)} :focus-visible{outline:2px solid var(--azul);outline-offset:3px;border-radius:6px} svg{display:block} ::selection{background:rgba(77,155,255,.3);color:#fff} .ap-claro ::selection{background:rgba(0,113,227,.2);color:#000} .ap-pular{ position:absolute;left:-9999px;top:0;z-index:60; background:var(--azul);color:var(--sobre-acento); padding:10px 16px;border-radius:0 0 var(--r-md) 0;font-weight:600; } .ap-pular:focus{left:0} .ap-larg{width:min(100% - 48px,var(--largura));margin-inline:auto} .ap-estreita{width:min(100% - 48px,var(--estreita));margin-inline:auto} @media (max-width:640px){.ap-larg,.ap-estreita{width:calc(100% - 32px)}} .ap-centro{text-align:center} .ap-centro .ap-h2,.ap-centro .ap-lead,.ap-centro .ap-h1,.ap-centro .ap-sub{ margin-inline:auto} /* ═════════════════════════════════════════════════════════════ topo Barra fina, como a da loja: 48 px, quase preta, desfocada. A borda nasce depois do primeiro scroll (classe `.rolou` posta pelo script). */ .ap-topo{ position:sticky;top:0;z-index:50; height:48px; background:rgba(5,6,8,.6); border-bottom:1px solid transparent; -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); transition:border-color .35s var(--curva),background .35s var(--curva); } .ap-topo.rolou{background:rgba(5,6,8,.78);border-bottom-color:rgba(255,255,255,.08)} .ap-topo-in{display:flex;align-items:center;gap:18px;height:100%} .ap-marca{display:flex;align-items:center;gap:9px;color:var(--tx1)} .ap-marca:hover{color:var(--tx1)} /* O emblema é o ÍCONE DO PRODUTO — o mesmo arquivo que pinta a aba do navegador em todas as telas internas (/estatico/favicon.png). Marca de página pública precisa ser a marca que a pessoa já viu; um segundo símbolo, desenhado só aqui, seria um segundo produto. */ .ap-logo{ width:26px;height:26px;flex:none;border-radius:7px;overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.08),0 3px 10px rgba(0,0,0,.45); transition:transform .3s var(--curva),box-shadow .3s var(--curva); } .ap-logo img{width:100%;height:100%;display:block} .ap-marca:hover .ap-logo{ transform:translateY(-1px) scale(1.05); box-shadow:0 0 0 1px rgba(255,255,255,.14),0 8px 22px rgba(0,0,0,.5); } .ap-marca-txt{display:block;line-height:1.15} .ap-marca b{display:block;font-size:14px;letter-spacing:-.01em;font-weight:640} .ap-marca-sub{ display:block;font-size:10.5px;color:var(--tx3);letter-spacing:.02em; } .ap-nav{display:flex;gap:2px;margin-left:auto;margin-right:auto} .ap-nav a{ color:var(--tx2);font-size:12.5px;padding:6px 11px;border-radius:var(--r-pill); letter-spacing:-.005em; transition:color .18s ease-out,background .18s ease-out; } .ap-nav a:hover{color:var(--tx1);background:rgba(255,255,255,.06)} .ap-espaco{flex:1} .ap-nav + .ap-espaco{display:none} /* O botão do canto superior direito: a única porta da página. */ .ap-entrar{ display:inline-flex;align-items:center;gap:7px; height:30px;padding:0 14px;border-radius:var(--r-pill); background:var(--azul);color:var(--sobre-acento); font-size:13px;font-weight:640;letter-spacing:-.01em; border:1px solid transparent; box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 4px 16px rgba(77,155,255,.28); transition:transform .18s var(--curva),box-shadow .18s var(--curva), background .18s ease-out; } .ap-entrar:hover{ color:var(--sobre-acento);background:var(--azul-claro); transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 8px 24px rgba(77,155,255,.38); } .ap-entrar:active{transform:translateY(0)} .ap-entrar svg{width:13px;height:13px} @media (max-width:900px){.ap-nav{display:none}.ap-nav + .ap-espaco{display:block}} @media (max-width:420px){.ap-marca-sub{display:none}} /* ════════════════════════════════════════════════════════════ hero */ .ap-hero{position:relative;padding:118px 0 40px;overflow:hidden;text-align:center} /* A aurora: três manchas de luz que respiram e acompanham o ponteiro (`--px/--py`, escritos pelo script). É o único ornamento do hero, e some inteiro com `prefers-reduced-motion`. */ .ap-aurora{ position:absolute;inset:-30% -10% auto;height:900px; pointer-events:none;z-index:0;filter:blur(90px);opacity:.6; transform:translate3d(calc(var(--px,0) * 26px),calc(var(--py,0) * 18px),0); transition:transform 1.2s var(--curva); } .ap-aurora i{position:absolute;display:block;border-radius:50%} .ap-aurora i:nth-child(1){ width:720px;height:560px;left:8%;top:6%; background:radial-gradient(circle,rgba(77,155,255,.55),transparent 66%); animation:ap-deriva-a 19s ease-in-out infinite alternate; } .ap-aurora i:nth-child(2){ width:560px;height:520px;right:6%;top:2%; background:radial-gradient(circle,rgba(62,207,142,.24),transparent 66%); animation:ap-deriva-b 23s ease-in-out infinite alternate; } .ap-aurora i:nth-child(3){ width:640px;height:460px;left:34%;top:30%; background:radial-gradient(circle,rgba(150,110,255,.34),transparent 70%); animation:ap-deriva-c 27s ease-in-out infinite alternate; } @keyframes ap-deriva-a{to{transform:translate3d(110px,60px,0) scale(1.14)}} @keyframes ap-deriva-b{to{transform:translate3d(-90px,80px,0) scale(1.08)}} @keyframes ap-deriva-c{to{transform:translate3d(50px,-70px,0) scale(1.16)}} /* A grade técnica por trás da luz: dá profundidade sem pesar um byte de imagem. Esmaece nas bordas com máscara. */ .ap-grade{ position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.45; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:72px 72px; -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 20%,transparent 75%); mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 20%,transparent 75%); } .ap-hero .ap-larg{position:relative;z-index:1} .ap-selo{ display:inline-flex;align-items:center;gap:9px; height:32px;padding:0 15px 0 11px;border-radius:var(--r-pill); background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1); color:var(--tx2);font-size:12.5px;letter-spacing:.01em; -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); } .ap-selo b{color:var(--tx1);font-weight:600;white-space:nowrap} @media (max-width:640px){.ap-selo-mais{display:none}} .ap-ponto{ width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none; box-shadow:0 0 0 4px rgba(62,207,142,.16); animation:ap-pulso 2.6s ease-in-out infinite; } @keyframes ap-pulso{50%{box-shadow:0 0 0 9px rgba(62,207,142,0)}} .ap-h1{ margin:28px auto 0; font-size:clamp(46px,8.2vw,104px); letter-spacing:-.05em;line-height:.98;font-weight:700; max-width:14ch; } /* Títulos e leads com as linhas equilibradas: nada de uma palavra sozinha na última linha. Onde o navegador não conhece a propriedade, ela é ignorada e o texto quebra como sempre. */ .ap-h1,.ap-h2,.ap-sub{text-wrap:balance} .ap-lead{text-wrap:pretty} .ap-brilho{ background:linear-gradient(94deg,#DDE7FF 0%,var(--azul-claro) 45%,var(--roxo) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; /* O gradiente anda devagar, como a luz da aurora atrás dele. */ background-size:200% 100%; animation:ap-brilho 9s ease-in-out infinite alternate; } @keyframes ap-brilho{to{background-position:100% 0}} .ap-sub{ margin:32px auto 0;max-width:52ch; font-size:clamp(18px,2.2vw,23px);line-height:1.45;color:var(--tx2); letter-spacing:-.012em;font-weight:440; } .ap-sub b{color:var(--tx1);font-weight:560} .ap-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;justify-content:center} .ap-btn{ display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 26px; border-radius:var(--r-pill);font-size:15.5px;font-weight:600; letter-spacing:-.01em; transition:transform .22s var(--curva),background .2s ease-out, box-shadow .22s var(--curva),border-color .2s ease-out; } .ap-btn svg{width:15px;height:15px} .ap-btn-1{ background:var(--azul);color:var(--sobre-acento);border:1px solid transparent; box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 12px 32px rgba(77,155,255,.32); } .ap-btn-1:hover{background:var(--azul-claro);color:var(--sobre-acento); transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 18px 44px rgba(77,155,255,.42)} .ap-btn-2{ background:rgba(255,255,255,.06);color:var(--tx1);border:1px solid rgba(255,255,255,.12); } .ap-btn-2:hover{background:rgba(255,255,255,.1);color:var(--tx1); border-color:rgba(255,255,255,.22);transform:translateY(-2px)} .ap-claro .ap-btn-2{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12)} .ap-claro .ap-btn-2:hover{background:rgba(0,0,0,.07);border-color:rgba(0,0,0,.22)} .ap-link{ display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:560; color:var(--azul); } .ap-link svg{width:13px;height:13px;transition:transform .2s var(--curva)} .ap-link:hover svg{transform:translateX(3px)} /* ═════════════════════════════════════════════ o aparelho do hero A janela do próprio produto — barra lateral, cabeçalho e o terminal de uma execução — em perspectiva, sobre um halo de luz. Ela se endireita conforme a página rola: o gesto de um objeto que se vira para ser lido. O texto é datilografado pelo script; sem script, aparece pronto. */ .ap-tela{ position:relative;margin:74px auto 0;max-width:1040px; perspective:1800px;text-align:left; } .ap-tela::before{ content:"";position:absolute;left:8%;right:8%;top:8%;bottom:-6%; z-index:0;pointer-events:none;filter:blur(70px);opacity:.75; background:radial-gradient(ellipse at 50% 60%,rgba(77,155,255,.42),rgba(150,110,255,.18) 50%,transparent 72%); } .ap-janela{ position:relative;z-index:1;border-radius:var(--r-xl); background:linear-gradient(180deg,rgba(22,26,34,.96),rgba(12,14,19,.98)); border:1px solid rgba(255,255,255,.1);box-shadow:var(--sombra-alta), 0 0 0 1px rgba(0,0,0,.6); overflow:hidden; transform:rotateX(var(--ap-inclina,9deg)); transform-origin:50% 0; will-change:transform; } .ap-janela-topo{ display:flex;align-items:center;gap:8px;height:44px;padding:0 16px; border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025); } .ap-bolha{width:11px;height:11px;border-radius:50%;background:#39404E} .ap-bolha:nth-child(1){background:#FF5F57} .ap-bolha:nth-child(2){background:#FEBC2E} .ap-bolha:nth-child(3){background:#28C840} .ap-url{ margin:0 auto;display:inline-flex;align-items:center;gap:7px; height:26px;padding:0 12px;border-radius:8px; background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06); font:500 12px/1 var(--mono);color:var(--tx3);letter-spacing:.01em; } .ap-url svg{width:11px;height:11px;color:var(--ok)} .ap-url b{color:var(--tx2);font-weight:500} .ap-app{display:grid;grid-template-columns:200px 1fr;min-height:340px} .ap-lateral{ border-right:1px solid rgba(255,255,255,.06);padding:14px 10px; background:rgba(0,0,0,.18);font-size:12.5px; } .ap-lateral-tit{ font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--tx3);padding:8px 10px 6px; } .ap-lateral a,.ap-lateral span.it{ display:flex;align-items:center;gap:9px;height:30px;padding:0 10px; border-radius:8px;color:var(--tx2); } .ap-lateral .it svg{width:14px;height:14px;opacity:.8} .ap-lateral .it.on{background:rgba(77,155,255,.14);color:var(--tx1)} .ap-lateral .it.on svg{color:var(--azul);opacity:1} .ap-lateral .it em{ margin-left:auto;font-style:normal;font:500 10.5px/1 var(--mono); color:var(--tx3);background:rgba(255,255,255,.06);padding:3px 6px;border-radius:6px; } .ap-conteudo{display:flex;flex-direction:column;min-width:0} .ap-conteudo-topo{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.06); } .ap-conteudo-topo h4{margin:0;font-size:14px;font-weight:600;letter-spacing:-.01em} .ap-chip{ display:inline-flex;align-items:center;height:22px;padding:0 9px; border-radius:6px;font:500 11.5px/1 var(--mono);color:var(--tx2); background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06); } .ap-chip.ok{color:var(--ok);background:rgba(62,207,142,.1);border-color:rgba(62,207,142,.22)} .ap-chip.vivo::before{ content:"";width:6px;height:6px;border-radius:50%;background:var(--ok); margin-right:6px;animation:ap-pulso 1.8s ease-in-out infinite; } .ap-conteudo-topo .ap-chip.vivo{margin-left:auto} .ap-term{ padding:18px 22px 24px;font:13px/1.8 var(--mono);flex:1; min-height:250px;white-space:pre-wrap;word-break:break-word; } .ap-term .l{display:block} .ap-term .pr{color:var(--azul)} .ap-term .ok{color:var(--ok)} .ap-term .al{color:var(--alerta)} .ap-term .er{color:var(--erro)} .ap-term .cz{color:var(--tx3)} .ap-cursor{ display:inline-block;width:8px;height:15px;vertical-align:-2px; background:var(--azul);margin-left:2px;animation:ap-pisca 1.05s steps(2) infinite; } @keyframes ap-pisca{50%{opacity:0}} @media (max-width:760px){ .ap-app{grid-template-columns:1fr} .ap-lateral{display:none} .ap-url b{display:none} .ap-term{font-size:12px;padding:14px 16px 18px} } /* ═══════════════════════════════════════════════════════════ números Sem caixas: quatro números grandes separados por fios, como a faixa de especificações de uma página de produto. */ .ap-numeros{ display:grid;grid-template-columns:repeat(4,1fr); margin:84px auto 0;max-width:980px; } .ap-num{padding:8px 16px;text-align:center;position:relative} .ap-num + .ap-num::before{ content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.14),transparent); } .ap-num b{ display:block;font-size:clamp(40px,5vw,60px);font-weight:700; letter-spacing:-.045em;line-height:1; font-variant-numeric:tabular-nums; background:linear-gradient(180deg,#fff,rgba(255,255,255,.55)); -webkit-background-clip:text;background-clip:text;color:transparent; } .ap-num span{display:block;margin-top:10px;font-size:14px;color:var(--tx3); letter-spacing:-.005em} @media (max-width:760px){ .ap-numeros{grid-template-columns:repeat(2,1fr);row-gap:32px} .ap-num:nth-child(3)::before{display:none} } /* ══════════════════════════════════════════════════════════ seções */ .ap-secao{padding:140px 0;position:relative} @media (max-width:760px){.ap-secao{padding:96px 0}} .ap-rotulo{ font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--azul);margin-bottom:18px; } .ap-h2{ font-size:clamp(34px,5vw,60px);letter-spacing:-.045em;line-height:1.04; max-width:20ch;font-weight:700; } .ap-h2 .ap-cinza{color:var(--tx3)} .ap-lead{ margin-top:24px;max-width:58ch;font-size:clamp(17px,1.6vw,21px); color:var(--tx2);line-height:1.5;letter-spacing:-.01em; } .ap-lead + .ap-lead{margin-top:16px} .ap-lead b{color:var(--tx1);font-weight:560} /* ═══════════════════════════════════════════════ o que é · quatro Uma fileira de quatro razões, cada uma com um ícone grande e uma frase: o padrão "features em linha" das páginas de produto. */ .ap-quatro{ display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:72px; text-align:left; } .ap-razao{ padding:30px 26px 32px;border-radius:var(--r-lg); background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.07); transition:transform .35s var(--curva),border-color .3s ease-out, background .3s ease-out; } .ap-razao:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.14); background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03))} .ap-razao-ico{ width:46px;height:46px;border-radius:14px;display:grid;place-items:center; background:var(--azul-fraco);color:var(--azul);border:1px solid var(--azul-borda); margin-bottom:22px; } .ap-razao-ico svg{width:22px;height:22px} .ap-razao h3{font-size:19px;letter-spacing:-.02em;font-weight:640} .ap-razao p{margin-top:9px;font-size:15px;color:var(--tx2);line-height:1.55} @media (max-width:980px){.ap-quatro{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.ap-quatro{grid-template-columns:1fr}} /* ═════════════════════════════════════════════════════ arquitetura Três nós e dois fios. O fio é um gradiente que anda: o plano vai, o resultado volta, e a credencial não atravessa nunca. */ .ap-arq{ margin-top:72px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr; align-items:center;gap:0; } .ap-no{ position:relative;padding:30px 26px 28px;border-radius:var(--r-xl); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.09);text-align:center; transition:transform .35s var(--curva),border-color .3s ease-out; } .ap-no:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.18)} .ap-no-ico{ width:60px;height:60px;border-radius:18px;margin:0 auto 18px;display:grid; place-items:center;background:var(--azul-fraco);color:var(--azul); border:1px solid var(--azul-borda); box-shadow:0 12px 30px rgba(77,155,255,.18); } .ap-no-ico svg{width:28px;height:28px} .ap-no.ok .ap-no-ico{background:rgba(62,207,142,.1);color:var(--ok); border-color:rgba(62,207,142,.3);box-shadow:0 12px 30px rgba(62,207,142,.14)} .ap-no.roxo .ap-no-ico{background:rgba(183,156,255,.1);color:var(--roxo); border-color:rgba(183,156,255,.3);box-shadow:0 12px 30px rgba(183,156,255,.14)} .ap-no h3{font-size:20px;letter-spacing:-.02em} .ap-no p{margin-top:8px;font-size:14.5px;color:var(--tx2);line-height:1.5} .ap-no small{ display:inline-block;margin-top:14px;font:500 11.5px/1 var(--mono); color:var(--tx3);letter-spacing:.04em;text-transform:uppercase; } .ap-fio{position:relative;width:150px;height:64px;flex:none} .ap-fio i{ position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px; background:linear-gradient(90deg,transparent 0,var(--azul) 30%,var(--azul-claro) 50%,var(--azul) 70%,transparent 100%); background-size:200% 100%; animation:ap-fio 1.8s linear infinite; } .ap-fio i:nth-child(2){ top:calc(50% + 10px);opacity:.5;animation-direction:reverse;animation-duration:2.6s; } @keyframes ap-fio{to{background-position:-200% 0}} .ap-fio b{ position:absolute;left:50%;top:0;transform:translate(-50%,-4px); white-space:nowrap;font:500 10px/1 var(--mono);color:var(--tx3); letter-spacing:.04em;text-transform:uppercase; } .ap-fio-cadeado{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:26px;height:26px;border-radius:50%;display:grid;place-items:center; background:var(--bg);border:1px solid var(--azul-borda);color:var(--azul); } .ap-fio-cadeado svg{width:12px;height:12px} .ap-fatos{ display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px; } .ap-fato{ padding:22px 24px;border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.025);text-align:left; } .ap-fato b{display:block;font-size:15.5px;letter-spacing:-.015em;font-weight:640} .ap-fato p{margin-top:6px;font-size:14px;color:var(--tx2);line-height:1.55} @media (max-width:900px){ .ap-arq{grid-template-columns:1fr;gap:0} .ap-fio{width:auto;height:88px;justify-self:center;width:64px} .ap-fio i{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto;margin:0 0 0 -1px; background:linear-gradient(180deg,transparent 0,var(--azul) 30%,var(--azul-claro) 50%,var(--azul) 70%,transparent 100%); background-size:100% 200%;animation-name:ap-fio-v} .ap-fio i:nth-child(2){left:calc(50% + 10px);top:0} .ap-fio b{left:auto;right:-10px;top:50%;transform:translate(100%,-50%)} .ap-fatos{grid-template-columns:1fr} } @keyframes ap-fio-v{to{background-position:0 -200%}} /* ═════════════════════════════════════════════════════ capacidades Grade "bento": seis colunas, cartões de três e de duas. O brilho segue o ponteiro: `--mx/--my` são escritos pelo script. Sem script o cartão continua um cartão — o brilho é a camada de cima. */ .ap-bento{ display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:64px; text-align:left; } .ap-cap{ position:relative;padding:28px 26px 30px;border-radius:var(--r-xl); background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); border:1px solid rgba(255,255,255,.08); overflow:hidden;isolation:isolate;grid-column:span 2; transition:transform .35s var(--curva),border-color .3s ease-out, box-shadow .35s var(--curva); } .ap-cap.g{grid-column:span 3} /* O cartão de fechamento ocupa a linha inteira, com a lista ao lado do texto — o que evita um buraco de meia linha no fim da grade. */ .ap-cap.gg{ grid-column:span 6;display:grid;grid-template-columns:1.15fr 1fr; grid-template-rows:auto auto 1fr;column-gap:56px; } .ap-cap.gg h3{font-size:24px} .ap-cap.gg ul{grid-column:2;grid-row:1/4;align-self:center;margin:0;gap:10px} .ap-cap.gg li{font-size:14.5px} .ap-cap::before{ content:"";position:absolute;inset:0;z-index:-1;opacity:0; background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%), rgba(77,155,255,.16),transparent 60%); transition:opacity .4s ease-out; } .ap-cap:hover{ transform:translateY(-4px);border-color:rgba(77,155,255,.4); box-shadow:0 24px 60px rgba(0,0,0,.45); } .ap-cap:hover::before{opacity:1} .ap-cap-ico{ width:42px;height:42px;border-radius:13px;display:grid;place-items:center; color:var(--azul);background:var(--azul-fraco);border:1px solid var(--azul-borda); margin-bottom:20px; } .ap-cap-ico svg{width:20px;height:20px} .ap-cap h3{font-size:19px;letter-spacing:-.02em;font-weight:640} .ap-cap.g h3{font-size:24px} .ap-cap p{margin-top:9px;font-size:15px;color:var(--tx2);line-height:1.55} .ap-cap ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:7px} .ap-cap li{ position:relative;padding-left:18px;font-size:13.5px;color:var(--tx3); line-height:1.5; } .ap-cap li::before{ content:"";position:absolute;left:2px;top:8px;width:5px;height:5px; border-radius:50%;background:var(--azul);opacity:.75; } @media (max-width:980px){.ap-cap,.ap-cap.g{grid-column:span 3} .ap-cap.gg{grid-column:span 6}} @media (max-width:640px){.ap-cap,.ap-cap.g,.ap-cap.gg{grid-column:span 6} .ap-cap.gg{display:block}.ap-cap.gg ul{margin-top:16px}} /* ══════════════════════════════════════════════════════ o caminho O capítulo claro. Os cinco passos de uma execução (MOTOR.md) de um lado; do outro, um palco preso ao topo que troca de cena conforme o passo em leitura. Sem script, as cinco cenas ficam empilhadas. */ .ap-fluxo{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:start; margin-top:72px;text-align:left} .ap-palco-fixo{position:sticky;top:96px} .ap-passos{display:grid;gap:0;padding-top:8px} .ap-passo{ display:grid;grid-template-columns:52px 1fr;gap:22px; padding:34px 0;border-bottom:1px solid var(--borda-sutil); min-height:180px; } .ap-passo:last-child{border-bottom:0} .ap-passo-n{ width:40px;height:40px;border-radius:50%;display:grid;place-items:center; font:600 14px/1 var(--mono);color:var(--tx3); background:var(--bg-2);border:1px solid var(--borda); transition:color .35s ease-out,background .35s ease-out, border-color .35s ease-out,box-shadow .35s var(--curva), transform .35s var(--curva); } .ap-passo h3{font-size:26px;letter-spacing:-.025em;color:var(--tx3); transition:color .35s ease-out;font-weight:640} .ap-passo p{margin-top:10px;font-size:16px;color:var(--tx3);line-height:1.55; transition:color .35s ease-out} .ap-passo.on .ap-passo-n{ color:var(--sobre-acento);background:var(--azul);border-color:var(--azul); box-shadow:0 0 0 6px rgba(0,113,227,.14);transform:scale(1.06); } .ap-passo.on h3{color:var(--tx1)} .ap-passo.on p{color:var(--tx2)} .ap-palco{ position:relative;border-radius:var(--r-xl);background:var(--surface); border:1px solid var(--borda-sutil);box-shadow:var(--sombra-alta); overflow:hidden;min-height:420px; } .ap-palco-topo{ display:flex;align-items:center;gap:8px;height:42px;padding:0 16px; border-bottom:1px solid var(--borda-sutil);background:var(--bg); } .ap-palco-topo .ap-url{background:var(--surface);border-color:var(--borda-sutil); color:var(--tx3)} .ap-palco-topo .ap-url b{color:var(--tx2)} .ap-cenas{position:relative} .ap-cena{padding:22px 22px 26px;font-size:13.5px} .ap-cena + .ap-cena{border-top:1px solid var(--borda-sutil)} .ap-cena-tit{ display:flex;align-items:center;gap:10px;margin-bottom:14px; font-size:14px;font-weight:640;letter-spacing:-.01em;color:var(--tx1); } .ap-cena-tit .ap-chip{background:var(--bg);border-color:var(--borda-sutil); color:var(--tx3)} .ap-cena-tit .ap-chip.ok{color:var(--ok);background:rgba(31,158,94,.1); border-color:rgba(31,158,94,.25)} .ap-cena-tit .ap-chip.al{color:var(--alerta);background:rgba(201,122,10,.1); border-color:rgba(201,122,10,.25)} .ap-tab{width:100%;border-collapse:collapse;font-size:13px} .ap-tab th{ text-align:left;font-weight:500;font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:var(--tx3);padding:0 8px 10px; border-bottom:1px solid var(--borda-sutil); } .ap-tab td{padding:9px 8px;border-bottom:1px solid var(--borda-sutil);color:var(--tx2)} .ap-tab td:first-child{font-family:var(--mono);color:var(--tx1);font-size:12.5px} .ap-tab tr:last-child td{border-bottom:0} .ap-led{display:inline-block;width:7px;height:7px;border-radius:50%; background:var(--ok);margin-right:7px;vertical-align:1px} .ap-led.al{background:var(--alerta)} .ap-led.cz{background:var(--borda)} .ap-etq{ display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px; font:500 11px/1 var(--mono);color:var(--tx2);background:var(--bg); border:1px solid var(--borda-sutil); } .ap-chips{display:flex;flex-wrap:wrap;gap:6px} .ap-chips .ap-etq{height:24px;padding:0 9px;font-size:11.5px} .ap-chips .ap-etq.mais{color:var(--azul);border-color:var(--azul-borda);background:var(--azul-fraco)} .ap-form{display:grid;gap:8px;margin-top:16px} .ap-campo{ display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:12px; padding:9px 12px;border-radius:10px;background:var(--bg);border:1px solid var(--borda-sutil); } .ap-campo span{font:500 12px/1 var(--mono);color:var(--tx3)} .ap-campo code{font:500 12.5px/1 var(--mono);color:var(--tx1)} .ap-campo i{font-style:normal;font-size:11px;color:var(--tx3)} .ap-campo.seg code{letter-spacing:.2em} .ap-cod{ margin:0;padding:14px 16px;border-radius:12px;background:#111318;color:#DDE3EE; font:12.5px/1.75 var(--mono);white-space:pre-wrap;word-break:break-word; border:1px solid rgba(255,255,255,.06); } .ap-cod + .ap-cod{margin-top:8px} .ap-cod .h{color:#7CB6FF} .ap-cod .v{color:#3ECF8E} .ap-cod .c{color:#7B8595} .ap-barras{display:grid;gap:10px} .ap-barra{display:grid;grid-template-columns:130px 1fr 64px;align-items:center;gap:12px; font-size:12.5px} .ap-barra span:first-child{font-family:var(--mono);color:var(--tx1)} .ap-barra i{ display:block;height:8px;border-radius:4px;background:var(--bg); border:1px solid var(--borda-sutil);overflow:hidden;position:relative; } .ap-barra i::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,100%); background:linear-gradient(90deg,var(--azul),var(--azul-claro));border-radius:4px; } .ap-barra i.al::before{background:linear-gradient(90deg,var(--alerta),#E9A64C)} .ap-barra em{font-style:normal;color:var(--tx3);text-align:right;font-family:var(--mono); font-size:11.5px} .ap-log{display:grid;gap:0;font:12.5px/1.7 var(--mono)} .ap-log div{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:6px 0; border-bottom:1px solid var(--borda-sutil);color:var(--tx2)} .ap-log div:last-child{border-bottom:0} .ap-log time{color:var(--tx3)} .ap-log b{color:var(--tx1);font-weight:500} .ap-log .ok{color:var(--ok)} .ap-log .al{color:var(--alerta)} /* Com o script a rodar, as cenas ficam sobrepostas e só a do passo aceso aparece. O crescimento das barras também é só com animação. */ .anim .ap-cenas{min-height:470px} .anim .ap-cena{ position:absolute;inset:0;opacity:0;transform:translateY(14px) scale(.985); transition:opacity .55s var(--curva),transform .65s var(--curva); pointer-events:none;border-top:0; } .anim .ap-cena.on{opacity:1;transform:none;pointer-events:auto} .anim .ap-barra i::before{width:0;transition:width 1.1s var(--curva)} .anim .ap-cena.on .ap-barra i::before{width:var(--p,100%)} .anim .ap-cena.on .ap-barra:nth-child(2) i::before{transition-delay:.15s} .anim .ap-cena.on .ap-barra:nth-child(3) i::before{transition-delay:.3s} .anim .ap-cena.on .ap-barra:nth-child(4) i::before{transition-delay:.45s} .anim .ap-cena.on .ap-barra:nth-child(5) i::before{transition-delay:.6s} /* Numa coluna só, o palco vai PRIMEIRO e — com o script a rodar — fica preso ao topo enquanto os passos rolam por baixo: a cena troca no momento em que o passo passa sob ela. Sem script, as cinco cenas empilhadas são altas demais para ficar presas: ficam estáticas. */ @media (max-width:940px){ .ap-fluxo{grid-template-columns:1fr;gap:28px} .ap-palco-fixo{position:static;order:-1} .anim .ap-palco-fixo{position:sticky;top:60px;z-index:3} .anim .ap-cenas{min-height:480px} .ap-cena{padding:16px 16px 20px;font-size:13px} .ap-passo{min-height:0;padding:24px 0} .ap-passo h3{font-size:22px} } /* ════════════════════════════════════════════════════════ vitrine Os fabricantes desfilam numa faixa; as plataformas, na outra, em sentido contrário. Duas cópias por faixa: quando a primeira termina o percurso, a segunda já está no lugar dela — é o que faz o laço não ter emenda. Para no hover e some com reduced-motion. */ .ap-desfile{ position:relative;overflow:hidden;margin-top:56px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); } .ap-desfile + .ap-desfile{margin-top:14px} .ap-faixa{display:flex;width:max-content;animation:ap-desliza 40s linear infinite} .ap-faixa.volta{animation-direction:reverse;animation-duration:52s} .ap-desfile:hover .ap-faixa{animation-play-state:paused} .ap-faixa div{display:flex;gap:12px;padding-right:12px} @keyframes ap-desliza{to{transform:translateX(-50%)}} .ap-vendor{ display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 26px; border-radius:var(--r-pill);white-space:nowrap; background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09); color:var(--tx1);font-size:18px;font-weight:600;letter-spacing:-.015em; } .ap-vendor i{ width:7px;height:7px;border-radius:50%;background:var(--azul);opacity:.8; box-shadow:0 0 12px var(--azul); } .ap-plat{ display:inline-flex;align-items:center;height:36px;padding:0 16px; border-radius:var(--r-pill);white-space:nowrap; background:transparent;border:1px solid rgba(255,255,255,.08); color:var(--tx3);font:500 13px/1 var(--mono);letter-spacing:.01em; } /* ═══════════════════════════════════════════════════════ princípios Uma lista tipográfica: chave, frase, explicação. Fios entre elas, o número acende ao passar. */ .ap-princ{margin-top:64px;border-top:1px solid rgba(255,255,255,.1);text-align:left} .ap-princ > div{ display:grid;grid-template-columns:170px 1fr 1.3fr;gap:32px;align-items:baseline; padding:34px 8px;border-bottom:1px solid rgba(255,255,255,.1); transition:background .3s ease-out,padding .3s var(--curva); } .ap-princ > div:hover{background:rgba(255,255,255,.03);padding-left:18px} .ap-princ h3{font-size:26px;letter-spacing:-.025em;font-weight:640} .ap-princ p{font-size:16px;color:var(--tx2);line-height:1.55} .ap-princ .ap-chave{ display:block;font:500 12px/1.4 var(--mono); color:var(--azul);letter-spacing:.08em;text-transform:uppercase; } @media (max-width:860px){ .ap-princ > div{grid-template-columns:1fr;gap:8px;padding:26px 4px} .ap-princ h3{font-size:22px} } /* ════════════════════════════════════════════════════════════ fecho */ .ap-fecho{position:relative;padding:170px 0 150px;text-align:center;overflow:hidden} .ap-fecho::before{ content:"";position:absolute;left:50%;top:-30%;width:1100px;height:800px; transform:translateX(-50%);pointer-events:none;z-index:0;filter:blur(110px); background:radial-gradient(circle,rgba(77,155,255,.26),rgba(150,110,255,.1) 45%,transparent 66%); } .ap-fecho .ap-larg{position:relative;z-index:1} .ap-fecho .ap-h2{margin-inline:auto;text-align:center;max-width:16ch} .ap-fecho .ap-lead{margin-inline:auto;text-align:center} .ap-fecho .ap-acoes{justify-content:center} .ap-fecho .ap-fino{margin-top:26px;font-size:14px;color:var(--tx3)} .ap-rodape{ border-top:1px solid rgba(255,255,255,.08);padding:34px 0 46px; color:var(--tx3);font-size:13px; } .ap-rodape-in{display:flex;flex-wrap:wrap;gap:18px;align-items:center} .ap-rodape .ap-espaco{flex:1} .ap-rodape a{color:var(--tx2)} .ap-rodape a:hover{color:var(--tx1)} .ap-rodape nav{display:flex;gap:18px;flex-wrap:wrap} /* ═════════════════════════════════════════════════════ movimento TUDO o que segue só existe quando o script decidiu animar (`.anim` no ). Sem JavaScript, ou com "reduzir movimento" ligado no sistema, nada aqui vale — e a página aparece inteira, de uma vez. */ .anim [data-rv]{ opacity:0;transform:translateY(26px); transition:opacity .9s var(--curva),transform .9s var(--curva); transition-delay:var(--atraso,0ms); } .anim [data-rv].vis{opacity:1;transform:none} .anim .ap-h1[data-rv]{transform:translateY(34px) scale(.98)} .anim .ap-tela{opacity:0;transform:translateY(60px); transition:opacity 1.2s var(--curva) .15s,transform 1.3s var(--curva) .15s} .anim .ap-tela.vis{opacity:1;transform:none} .anim .ap-vendor,.anim .ap-plat{transition:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .ap-aurora i,.ap-faixa,.ap-ponto,.ap-cursor,.ap-fio i,.ap-brilho, .ap-chip.vivo::before{animation:none} .ap-janela{transform:none} *{transition-duration:.01ms !important} }