/* Inter Tight e JetBrains Mono, variaveis: um arquivo cobre a faixa de peso. Auto-hospedadas — o template original puxava do CDN do Google, e CDN de terceiro recebe o IP de quem visita. */ /* O build envelopa em para servir WebP com fallback. Sem `display:contents` o vira o item de flex/grid no lugar da , e toda regra de tamanho escrita para `img` passaria a valer num filho em vez do item. Com `contents` a caixa some da arvore e a segue sendo o item. */ /* ---- o filme do cluster ---- Substituiu o rack desenhado em CSS e o modelo 3D. Os dois eram substitutos de uma coisa que a ALL MAX TEM: as quatro maquinas, etiquetadas, no escritorio. Tendo a filmagem propria, o substituto perde a razao de existir. 4s em loop, sem audio, 720x1000, 577 KB, e so carrega ao entrar na tela. */ .clFilme{position:relative;border-radius:14px;overflow:hidden; background:#0e0e12;border:1px solid rgba(255,255,255,.09)} .clFilmeVid{display:block;width:100%;height:auto;aspect-ratio:720/1000} .clFilmeSelo{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px; padding:7px 12px;border-radius:100px;background:rgba(10,10,12,.62); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700; letter-spacing:.11em;text-transform:uppercase;color:rgba(245,245,243,.9)} .clFilmeSelo i{width:6px;height:6px;border-radius:50%;background:#3DDC97;flex:none} @media (prefers-reduced-motion:no-preference){ .clFilmeSelo i{animation:clPulso 2.4s ease-out infinite} } /* a lista fica so para leitor de tela e para o caso de o video nao vir */ .clRack--texto{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---- canvas da cena 3D ---- Fixo e em tela cheia, mas NAO desenha em tela cheia: o modulo usa viewport+scissor para pintar so dentro do retangulo de cada ancora. Por isso um renderer atende os dois momentos sem que o canvas cubra a pagina. z-index 6 e escolhido, nao chutado: acima do conteudo das secoes (o maior la e 5) e abaixo do cabecalho sticky (60) e da barra fixa de baixo (70). `pointer-events:none` porque o canvas nao deve roubar clique nenhum. */ #cena3d{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none; opacity:0;transition:opacity .6s var(--e)} .tem3d #cena3d{opacity:1} /* Quando a cena sobe, o rack em CSS e a imagem das teclas somem — mas com `opacity`, nao com `display:none`. Duas razoes: a caixa precisa continuar ocupando o espaco, porque e o retangulo DELA que diz ao renderer onde pintar; e o texto continua na arvore de acessibilidade, entao quem usa leitor de tela ouve as quatro maquinas e as cinco teclas do mesmo jeito. */ @media (prefers-reduced-motion:reduce){ #cena3d{transition:none} } picture{display:contents} /* E `display:contents` que cria a necessidade desta segunda linha: ao dissolver a caixa do , ele promove os DOIS filhos — e — a itens do flex/grid do pai. O nao desenha nada, mas como item ele consome um `gap`: a logo do cabecalho andava 26px para a direita e o cartao da plataforma ganhava 20px de altura. `display:none` tira o do fluxo sem afetar a escolha do formato, que acontece no parser e nao no CSS. */ picture>source{display:none} @font-face{font-family:'Inter Tight';src:url('../fontes/inter-tight-variavel.83d548cd73.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'JetBrains Mono';src:url('../fontes/jetbrains-mono-500.2c32b9b3ee.woff2') format('woff2'); font-weight:100 800;font-style:normal;font-display:swap} /* Lora Italic (SIL OFL), 22,7 KB — vinda do build antigo em site/, que a usava no "Governamos cada ação". Arquivo ESTATICO de peso 400: por isso o h1 que a usa declara font-weight:400. Pedir 700 faria o navegador falsear o negrito, e falso negrito em serifa italica engrossa a haste e suja a junta. */ @font-face{font-family:'Lora';src:url('../fontes/lora-italico.e93da94dec.woff2') format('woff2'); font-weight:400;font-style:italic;font-display:swap} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --verde:#1B9E4B; --ok:#61CE70; --warn:#F59E0B; --bad:#EF4444; --papel:#F7F5F2; --papel2:#FFFFFF; --tinta:#141312; --corpo:rgba(20,19,18,.66); /* --fraco era .40 e dava 2,55:1 sobre o papel: reprovava AA em 12 usos, todos com texto (rotulo de secao, legenda de cliente, data, chip). Em .60 da 4,73:1 no papel e 4,87:1 no card branco, e continua sendo visivelmente o tom mais discreto da escala. Um token, 12 correcoes. */ --fraco:rgba(20,19,18,.60); --fio:rgba(20,19,18,.12); /* ALL MAX — a cor de acento tem DOIS valores porque a pagina tem secao clara e escura, e nenhum violeta unico passa em AA nas duas. claro #5B49F5 sobre --papel = 5,19:1 AA (branco sobre ele = 5,65:1 AA) escuro #885EFE sobre --escuro = 4,34:1 so titulo 24px+ O laranja original dava 3,28:1 sobre o papel: reprovava. */ --fogo:#5B49F5; --fogo-escuro:#4A38E0; /* hover e estado ativo no claro — 6,58:1 */ --fogo-cheio:#4A38E0; /* fundo de elemento com texto BRANCO — 7,16:1 em qualquer superficie */ --fogo-claro:#9370FF; /* mesmo token, redefinido dentro do escuro — 5,12:1 no pior fundo */ --escuro:#16171A; --vDobra:clamp(72px,9vw,130px); --gut:clamp(40px,7vw,150px); --e:cubic-bezier(.2,.7,.3,1); } /* ============================================================ ALL MAX — acento por superficie A pagina mistura painel claro e painel escuro, e nenhum violeta unico passa em AA nos dois. Entao --fogo tem valor por contexto: superficie clara #5B49F5 sobre #F7F5F2 = 5,19:1 AA superficie escura #9370FF sobre #0B0B0D = 5,12:1 AA Os 60 usos de var(--fogo) seguem valendo sem edicao pontual. As listas abaixo saem da varredura de background solido do proprio CSS, nao de heuristica — por isso o reset explicito das ilhas claras que vivem dentro de painel escuro. ============================================================ */ /* escuro */ body, footer, .faixa, .fr, .tela, .qpage, .notch, .entPainel, .secProb, .secPreco, .pv.escuro, .quemFoto, .pxDir, .pxEsq, .fone, .foneIlha, .foneTela, .mockJanela, .mockNav, .zap, .zapDigitando, [data-superficie="escura"]{ --fogo: var(--fogo-claro); } /* claro — inclusive as ilhas claras dentro de painel escuro */ .box, .cli, .pill, .prop, .pFile, .fqQ, .ticket, .qcard, .entLista, .pv:not(.escuro), .bolhaTu, [data-superficie="clara"]{ --fogo: #5B49F5; } html{scroll-behavior:auto} body{background:#0B0B0D;color:var(--corpo);font-family:'Inter Tight',sans-serif; font-size:18px;font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased; overflow-x:hidden} h1,h2,h3,h4{color:var(--tinta);font-weight:700;letter-spacing:-.042em;line-height:1.0;text-wrap:balance} p{text-wrap:pretty} img{max-width:100%;display:block} a{color:inherit} .w{max-width:1920px;margin:0 auto;padding:0 var(--gut)} .wn{max-width:1920px;margin:0 auto;padding:0 var(--gut)} section{padding:var(--vDobra) 0;margin:0 8px 8px;border-radius:28px;background:var(--papel);overflow:hidden} section.faixa{border:1px solid rgba(255,255,255,.05)} html,body{overflow-x:clip} .tlLb,.agChip,.tlTopo>*,.tlGrid3>*{min-width:0} @media(max-width:720px){ :root{--vDobra:64px} /* mobile sem caixas: conteúdo direto no fundo, largura total */ section{padding:var(--vDobra) 0;margin:0;border-radius:0} .secProb{padding:var(--vDobra) 0} :root{--gut:20px;--vDobra:64px} .qpage{padding:0} .qgrid{gap:0} .qcard{border-radius:0} .qvideo{border-radius:0;outline:none} .entSec{margin:0} .entPainel{border-radius:0;outline:none} .entLista{border-radius:0} .ent{padding:var(--vDobra) 20px} .entLista,.ent{margin:0} .probFoto{border-radius:0;outline:none;margin:0 -20px} .flut{border-radius:14px 14px 0 0} .flut.esconde{transform:translateY(140%) !important} } .lb{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--fraco);display:block;margin-bottom:26px} .lb.fg{color:var(--fogo)} .d1{font-size:clamp(38px,5.6vw,76px)} .d2{font-size:clamp(30px,4vw,54px)} .d3{font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.2} .lead{font-size:22px;line-height:1.5;max-width:620px;font-weight:300;text-wrap:pretty} .txt p{font-size:18px;margin-bottom:22px;max-width:620px} .txt p:last-child{margin-bottom:0} strong{color:var(--tinta);font-weight:500} em.fg{font-style:normal;color:var(--fogo)} /* revelar */ .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--e),transform .8s var(--e)} .rv.on{opacity:1;transform:none} /* botão terminal */ .term{position:relative;display:inline-flex;align-items:center;height:66px;border-radius:16px; background:linear-gradient(180deg,#9B78FF 0%,#5B49F5 46%,#3D2BC4 100%); border:none;cursor:pointer;padding:0 24px 0 40px;min-width:min(400px,100%);max-width:100%;text-decoration:none;box-sizing:border-box; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -10px 18px rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.16), 0 0 0 6px rgba(91,73,245,.14),0 14px 30px rgba(91,73,245,.30); transition:transform .3s var(--e),box-shadow .3s var(--e),filter .3s var(--e)} .term::before{content:"";position:absolute;inset:2px;border-radius:14px;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.1) 30%,rgba(255,255,255,0) 52%), radial-gradient(120% 90% at 20% -20%,rgba(255,255,255,.25),transparent 55%)} .term>*{position:relative;z-index:1;pointer-events:none} .term{-webkit-tap-highlight-color:transparent;touch-action:manipulation} @media(hover:hover){ .term:hover{transform:translateY(-2px); background:linear-gradient(180deg,#9B78FF 0%,#5B49F5 46%,#3D2BC4 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -10px 18px rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.16), 0 0 0 6px rgba(255,58,36,.13),0 14px 30px rgba(255,58,36,.32)} .term:hover .st{color:#DE2812} } .term .meio{flex:1;display:flex;align-items:center;justify-content:center} .term .tx{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700; letter-spacing:.10em;text-transform:uppercase;color:#fff;white-space:pre;min-width:calc(26ch + 2.6em);text-align:center} .term .tx i{font-style:normal;transition:color .1s linear} .term .tx i.sol{color:#7C1608} .term .tx i.risco{text-decoration:line-through;text-decoration-thickness:2px;opacity:.8} .term .cur{margin-left:6px;width:10px;height:16px;background:#fff;animation:pisca 1s steps(1) infinite} .term .st{flex:none;width:36px;height:36px;border-radius:10px;background:#fff;display:grid;place-items:center;color:#12813B;margin-left:14px;transition:transform .4s var(--e)} .term .st svg{display:block} @media(hover:hover){.term:hover .st{transform:translate(4px,-4px)}} @keyframes pisca{50%{opacity:.15}} @media(max-width:820px){ .term,.qcard .term,.flut .term,.pxDir .term{min-width:0!important;width:100%!important;max-width:100%!important; padding:0 16px 0 20px;height:60px;box-sizing:border-box} .flut .term{height:52px;padding:0 14px 0 18px} .qcard .term{height:64px} .term .tx{min-width:0;font-size:12px;letter-spacing:.06em;white-space:nowrap} .term .meio{min-width:0;flex:1;overflow:hidden} .qcard .term .tx{font-size:13px} .qcard .term .st{font-size:18px} } .sob{font-size:14px;color:var(--fraco);margin-top:18px} /* topo */ .top{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(247,245,242,.88); backdrop-filter:blur(16px);border-bottom:1px solid var(--fio)} .top .in{width:100%;padding:0 32px;height:64px;display:flex;align-items:center;justify-content:space-between} .top .dt{font-size:16px;color:var(--fraco)} .top .dt b{color:var(--tinta);font-weight:600} .topb{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;background:var(--tinta);color:#fff;padding:14px 24px;border-radius:14px; text-decoration:none;transition:background .3s var(--e)} .topb:hover{background:var(--fogo-escuro);color:#fff} @media(max-width:720px){.top .dt{display:none}.top .in{justify-content:flex-end;padding:0 24px}} /* barrinha notch: colada embaixo, cor invertida conforme o fundo */ .flut.esconde{transform:translate(-50%,140%) !important;opacity:0 !important;pointer-events:none} .flut{--nbg:#000000;--ntr:rgba(255,255,255,.16);--ntxc:rgba(245,245,243,.6);--ntxb:#F5F5F3; position:fixed;left:50%;bottom:0;z-index:70;display:flex;align-items:center;gap:22px; background:var(--nbg);border:1px solid rgba(255,255,255,.14);border-bottom:none; border-radius:22px 22px 0 0;padding:12px 28px 14px 12px; box-shadow:0 -14px 44px rgba(0,0,0,.22);opacity:0; transform:translate(-50%,120%) scale(.92); transition:transform .6s cubic-bezier(.34,1.3,.35,1),opacity .35s var(--e)} .flut.on{transform:translate(-50%,0) scale(1);opacity:1} .flut::before{content:"";position:absolute;bottom:0;left:-26px;width:26px;height:26px; background:radial-gradient(circle at 0 0, transparent 25.5px, var(--nbg) 26px)} .flut::after{content:"";position:absolute;bottom:0;right:-26px;width:26px;height:26px; background:radial-gradient(circle at 100% 0, transparent 25.5px, var(--nbg) 26px)} .flut .term{height:54px;min-width:340px;border-radius:14px;padding:0 20px 0 28px} .flut .term .tx{font-size:12px} .flut .fbar{width:100%;height:8px;border-radius:100px;background:var(--ntr);margin-bottom:7px;position:relative} .flut .ftx{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.05em; text-transform:uppercase;color:var(--ntxc);display:block;white-space:nowrap} .flut .ftx b{color:var(--ntxb)} @media(max-width:640px){ .flut{left:8px;right:8px;transform:translateY(130%);flex-direction:column;align-items:stretch; gap:8px;padding:10px 12px 12px;border-radius:18px 18px 0 0;max-width:none} .flut.on{transform:translateY(0)} .flut::before,.flut::after{display:none} .flut .term{min-width:0;width:100%;height:50px;padding:0 14px 0 18px} .flut .term .tx{min-width:0;font-size:12px} .flut .fbar{width:100%} .flut .ftx{text-align:center;font-size:10px;white-space:nowrap} } /* entrada estagiada do hero: CSS puro, zero custo */ @keyframes entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .qcard .qtopo{animation:entra .55s var(--e) .05s both} .qcard h1{animation:entra .6s var(--e) .14s both} .qcard .qfrase{animation:entra .6s var(--e) .19s both} .qcard .lead{animation:entra .6s var(--e) .24s both} .qcard .ctaCol{animation:entra .6s var(--e) .34s both} .qtick{animation:entra .6s var(--e) .46s both} .qcard .notch{animation:entra .6s var(--e) .54s both} .qcol{animation:entra .7s var(--e) .2s both} @media (prefers-reduced-motion: reduce){ .qcard .qtopo,.qcard h1,.qcard .qfrase,.qcard .lead,.qcard .ctaCol,.qtick,.qcard .notch,.qcol{animation:none} } /* hero estrutura quantum: split, card branco à esquerda + vídeo à direita */ .qpage{background:#0B0B0D;padding:8px} .qgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:8px;min-height:calc(100vh - 16px)} .qcol{display:flex;flex-direction:column;gap:8px;min-height:0} .qcard{background:#F5F4F1;border-radius:28px 28px 0 28px;position:relative;overflow:hidden;display:flex;align-items:stretch} .qcard::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:radial-gradient(rgba(20,19,18,.16) 1.2px,transparent 1.5px); background-size:26px 26px; -webkit-mask-image:radial-gradient(125% 95% at 30% 40%,transparent 26%,#000 62%); mask-image:radial-gradient(125% 95% at 30% 40%,transparent 26%,#000 62%)} .qcard .in{position:relative;z-index:1} .qcard .in{width:100%;padding:110px clamp(40px,7vw,150px) 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start} .qcard .in>*{max-width:100%} .qvideo{position:relative;border-radius:24px;overflow:hidden;flex:1;min-height:0;outline:2px solid #0B0B0D;outline-offset:-2px} .qvideo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 40%;filter:grayscale(1) contrast(1.07) brightness(1.03)} .qvideo::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.26; mix-blend-mode:screen;background:url("../images/svg/fractal-noise.1ad0e47f9a.svg")} .qchip{z-index:2} .qbandtop{background:rgba(16,16,18,.42);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2); border:1px solid rgba(255,255,255,.14);border-radius:24px;display:flex;align-items:stretch; gap:0;padding:0;flex:none;position:relative;overflow:hidden} .qbandtop::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5; mix-blend-mode:overlay;background:url("../images/svg/fractal-noise.1ad0e47f9a.svg")} .qbandtop b{position:relative;z-index:1} .qvideo .qbandtop{position:absolute;left:14px;right:14px;top:14px;z-index:2;border-radius:18px} /* Numero em cima, rotulo embaixo, divisoria entre as tres. Antes numero e rotulo eram irmaos na MESMA linha, entao a quebra caia em lugar arbitrario ("+360 PROJETOS / ENTREGUES") e as tres colunas ficavam com larguras desiguais. Agora cada uma e coluna de largura igual e o rotulo quebra onde o
manda. */ .qbandtop b{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:5px; align-items:flex-start;justify-content:center;padding:15px 18px; font-family:'JetBrains Mono',monospace;font-weight:700} .qbandtop b + b{border-left:1px solid rgba(255,255,255,.14)} .qbandtop b strong{font-size:19px;line-height:1;letter-spacing:.02em; color:var(--fogo);font-weight:700} .qbandtop b span{font-size:10.5px;line-height:1.35;letter-spacing:.13em; text-transform:uppercase;color:rgba(245,245,243,.72)} @media(max-width:520px){ .qbandtop b{padding:12px 12px} .qbandtop b strong{font-size:16px} .qbandtop b span{font-size:9.5px;letter-spacing:.1em} } @media(max-width:1020px){.qgrid{grid-template-columns:1fr;min-height:0}.qcard .in{padding:56px 28px 0}.qvideo{min-height:420px}.qtopo{position:static;margin:0 0 32px}} /* entalhe no canto do card, pegada quantum */ .notch{position:absolute;right:0;bottom:0;z-index:5;background:#0B0B0D;display:flex;align-items:center;gap:16px; padding:18px 26px 14px 24px;border-top-left-radius:28px;text-decoration:none; transition:padding-bottom .3s var(--e)} .notch::before{content:"";position:absolute;bottom:0;left:-48px;width:48px;height:48px; background:radial-gradient(circle at 0 0, transparent 47.5px, #0B0B0D 48px)} .notch::after{content:"";position:absolute;right:0;top:-48px;width:48px;height:48px; background:radial-gradient(circle at 0 0, transparent 47.5px, #0B0B0D 48px)} .notch .avs{display:flex} .notch .avs img{width:38px;height:38px;border-radius:12px;margin-left:-10px;object-fit:cover;display:block} .notch .avs img:first-child{margin-left:0} .notch .avs i{width:38px;height:38px;border-radius:12px;margin-left:-10px; display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700; color:#0B0B0D;font-style:normal} .notch .avs i:first-child{margin-left:0} .notch .avs i:nth-child(1){background:#F6E3CB} .notch .avs i:nth-child(2){background:#CFE0F4} .notch .avs i:nth-child(3){background:#EAF2B6} .notch .avs i:nth-child(4){background:#E3DCF4} .notch .avs i:nth-child(5){background:var(--fogo-cheio);color:#fff} .notch .ntx{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:#F5F5F3;line-height:1.5} .notch .ntx small{display:block;font-size:10px;color:rgba(245,245,243,.45);letter-spacing:.12em} @media(max-width:720px){.notch{display:none}} .qtopo{position:absolute;top:34px;left:clamp(40px,7vw,150px);right:clamp(40px,7vw,150px); display:flex;align-items:center;gap:26px;flex-wrap:wrap;z-index:3} .qlogo{height:42px;width:auto;opacity:.92;transition:opacity .25s var(--e)} /* A logo do hero leva a home, como ja levava nas paginas internas (.legalMarca). `display:flex` no nao e enfeite: como item de flex do .qtopo o seria blockificado e a dentro dele viraria conteudo INLINE, ganhando embaixo o vao da linha de texto. Sao ~5px que quebrariam o `align-items:center` do .qtopo e desalinhariam a logo do selo ao lado. */ .qlogoLink{display:flex;border-radius:8px} .qlogoLink:hover .qlogo{opacity:1} .qlogoLink:focus-visible{outline:3px solid var(--fogo);outline-offset:6px} @media(prefers-reduced-motion:reduce){.qlogo{transition:none}} .qtopo .qlb{margin:0} .qcard h1{margin-top:auto} .ctaCol{display:flex;flex-direction:column;align-items:stretch;align-self:flex-start} .ctaCol .term{align-self:stretch} @media(max-width:820px){.ctaCol,.ctaCol .term{width:100%}} .qlb{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.15em; text-transform:uppercase;color:var(--tinta);display:flex;align-items:center;gap:10px;margin-bottom:24px} .qlb i{width:10px;height:10px;border:2px solid var(--fogo);border-radius:50%;display:block} .qlb span{color:var(--fraco)} .qcard h1{margin-bottom:6px;max-width:16em;font-size:clamp(34px,3.6vw,92px);line-height:1.06; /* violeta so aqui, na superficie clara do card: --fogo nesta superficie e #5B49F5, que da 5,1:1 sobre o papel. Titulo grande, entao passa AA com folga — mas nao herdaria isso no fundo escuro. */ color:var(--fogo); /* Lora Italic. O tracking -.042em do h1 global e calibrado para a Inter Tight; numa serifa italica ele encosta as letras. Volta pra zero. */ font-family:'Lora',Georgia,'Times New Roman',serif; font-style:italic;font-weight:400;letter-spacing:0} .qcard .qfrase{margin:11px 0 clamp(20px,1.7vw,34px);max-width:22em; font-size:clamp(19px,1.8vw,34px);line-height:1.14;font-weight:700; letter-spacing:-.035em;color:var(--tinta);text-wrap:balance} .qFog{margin-right:.26em} /* "🚀agora" vem sem espaco na copy do Alex */ .qcard .lead{margin-bottom:clamp(28px,2.2vw,56px);font-size:clamp(18px,1.35vw,30px);max-width:30em} .qtick{margin-top:auto;width:100%;align-self:stretch;height:76px;display:flex;align-items:center;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 calc(100% - 520px),transparent calc(100% - 330px)); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 calc(100% - 520px),transparent calc(100% - 330px))} @media(max-width:720px){.qtick{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}} .qtick .fita{display:flex;width:max-content;animation:fitaRola 26s linear infinite} .qtick .grupo{display:flex;gap:34px;padding-right:34px;white-space:nowrap} @keyframes fitaRola{to{transform:translateX(-50%)}} .qtick b{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--fraco);flex:none} .qtick b em{font-style:normal;color:var(--fogo);margin-right:34px} .qband{max-width:1196px;margin:0 auto;display:flex;align-items:center;justify-content:space-between; gap:24px;padding:20px 32px;flex-wrap:wrap} .qband b{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:rgba(245,245,243,.55)} .qband b strong{color:#F5F5F3;font-weight:700} .qchip{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:12px; background:rgba(16,16,18,.42);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2); border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px 18px;overflow:hidden} .qchip::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5; mix-blend-mode:overlay; background:url("../images/svg/fractal-noise.1ad0e47f9a.svg")} .qchip i{width:8px;height:8px;border-radius:50%;background:var(--fogo);display:block;animation:pisca 1.4s steps(1) infinite} .qchip b{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:#F5F5F3} .qchip b small{display:block;font-size:10px;color:rgba(245,245,243,.5);letter-spacing:.1em;margin-top:3px} @media(max-width:720px){.qcard .in{padding:72px 24px 0}.qband{padding:18px 24px}.qchip{left:16px;bottom:16px}} /* telas grandes: elementos acompanham */ @media(min-width:1800px){ .qcard .term{height:82px;min-width:430px;border-radius:18px} .qcard .term .tx{font-size:18px} .qcard .term .st{font-size:22px} .qlb{font-size:14px} .qtick b{font-size:14px} .qcard .barra{height:10px} .qcard .loteline{white-space:nowrap} .notch .ntx{font-size:14px} .notch .avs i{width:46px;height:46px;font-size:16px;border-radius:14px} .notch .avs img{width:46px;height:46px;border-radius:14px} .qchip b{font-size:14px} .qbandtop b{font-size:14px} .qtick{height:96px} .qlogo{height:52px} .qtopo{top:46px} } /* hero */ .hero{padding:0 0 96px;position:relative} .hero .d1{margin-bottom:32px;max-width:15em} .hero .lead{margin-bottom:46px} .pill{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace; font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; border:1px solid var(--fio);border-radius:100px;padding:10px 18px;color:var(--tinta);margin-bottom:36px;background:#fff} .pill i{width:6px;height:6px;border-radius:50%;background:var(--fogo);display:block} .duo{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} .duo.inv>div:first-child{order:2} @media(max-width:940px){.duo{grid-template-columns:1fr;gap:48px}.duo.inv>div:first-child{order:0}} /* números */ .cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:48px; margin-top:80px;padding-top:44px;border-top:1px solid var(--fio)} .cf b{display:block;font-size:58px;font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--tinta);margin-bottom:12px} .cf span{font-size:16px;line-height:1.4;display:block;max-width:14em} /* citação */ .aspa{font-size:clamp(24px,2.8vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1.24; color:var(--tinta);padding-left:30px;border-left:2px solid var(--fogo)} /* tela escura */ .tela{background:var(--escuro);border-radius:20px;overflow:hidden;box-shadow:0 40px 90px rgba(20,19,18,.20)} .tela .bar{display:flex;align-items:center;gap:8px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08)} .tela .bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);display:block} .tela .bar span{margin-left:10px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,243,.38)} .tela .in2{padding:20px} .card{padding:18px 20px;border-radius:14px;background:rgba(255,255,255,.05);margin-bottom:10px} .telaVid{padding:0;overflow:hidden} .teclasVid video{width:100%;display:block;border-radius:18px} .telaVid video{width:100%;display:block;border-radius:inherit} .mQ{text-transform:uppercase} .mCur{width:8px;height:15px;background:var(--fogo);animation:pisca 1s steps(1) infinite} .mIr{margin-left:auto;background:var(--fogo);color:#171717;font-size:11px;font-weight:700;letter-spacing:.12em; padding:6px 12px;border-radius:8px} .card:last-child{margin-bottom:0} .card .h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px} .card b{font-size:16px;font-weight:600;color:#F5F5F3;letter-spacing:-.02em;line-height:1.25;display:block} .card .end{font-size:14px;color:rgba(245,245,243,.38);margin-top:4px} .card .sc{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:var(--fogo);line-height:1;text-align:right} .card .sc em{display:block;font-style:normal;font-size:10px;letter-spacing:.14em;color:rgba(245,245,243,.32);margin-top:6px} .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px} .tg{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.10em; text-transform:uppercase;padding:6px 10px;border-radius:100px;border:1px solid rgba(255,255,255,.16); color:rgba(245,245,243,.50)} .tg.al{color:var(--fogo);border-color:rgba(255,58,36,.48)} /* whatsapp */ .zap{background:#0B141A;border-radius:20px;padding:22px;box-shadow:0 40px 90px rgba(20,19,18,.20)} .zap.zapVid{background:none;padding:0;box-shadow:none;border-radius:18px;overflow:hidden} .zap.zapVid video{width:100%;display:block} .bolha{background:#005C4B;border-radius:14px 14px 4px 14px;padding:16px 18px;margin-left:auto;max-width:90%} .bolha p{font-size:16px;color:#E9EDEF;margin-bottom:12px;line-height:1.5;font-weight:400} .bolha p:last-of-type{margin-bottom:0} .bolha .hr{text-align:right;font-size:12px;color:rgba(233,237,239,.5);margin-top:8px} /* quem está do outro lado */ .quemGrid{display:grid;grid-template-columns:minmax(320px,.92fr) 1.3fr;gap:clamp(44px,5vw,96px);align-items:stretch} .quemFoto{border-radius:24px;background:#0C0C0E;min-height:520px} .quemFoto img{border-radius:24px} /* O retrato sentado e 894x1494 e o gesto (maos unidas) vive no terco central. `20%` cortava as maos no rodape do quadro. */ .quemFoto img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block; filter:grayscale(1) contrast(1.07)} .quemTx .txt p{max-width:36em;font-size:17px} .qmFg{color:var(--fogo);font-style:normal} .quemFoto{position:relative} .qmMira{position:absolute;width:34px;height:34px;border:3px solid var(--fogo);opacity:0;transition:opacity .5s var(--e) .35s,transform .7s var(--e) .35s} .qmMira.a{top:16px;left:16px;border-right:0;border-bottom:0;transform:translate(-14px,-14px)} .qmMira.b{top:16px;right:16px;border-left:0;border-bottom:0;transform:translate(14px,-14px)} .qmMira.c{bottom:16px;left:16px;border-right:0;border-top:0;transform:translate(-14px,14px)} .qmMira.d{bottom:16px;right:16px;border-left:0;border-top:0;transform:translate(14px,14px)} .quemFoto.on .qmMira{opacity:1;transform:translate(0,0)} /* O chip cresceu com o endereco e o telefone. left:62px fixo estourava a moldura (477px no desktop, 350px no mobile), entao ele passou a ser limitado pelos DOIS lados e a encolher a tipografia quando aperta. */ .qmChip{position:absolute;left:22px;right:22px;bottom:26px;width:fit-content; max-width:calc(100% - 44px);display:flex;align-items:center;gap:9px; padding:10px 15px;background:rgba(12,12,14,.55);backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16); font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.09em;color:#F5F5F3; line-height:1.55;align-items:flex-start;border-radius:18px; opacity:0;transform:translateY(10px);transition:opacity .5s var(--e) .55s,transform .5s var(--e) .55s} .qmChip i{margin-top:5px} /* Abaixo de 1120px a moldura fica estreita demais para os 47 caracteres numa linha so. Em vez de cortar, o chip quebra em duas — por isso o `nowrap` cai aqui e o raio deixa de ser pilula. */ @media(max-width:1120px){.qmChip{font-size:9.5px;letter-spacing:.04em;padding:9px 13px;gap:7px}} @media(max-width:520px){.qmChip{font-size:8.5px;letter-spacing:.01em;padding:8px 11px;left:14px;right:14px; max-width:calc(100% - 28px);bottom:16px}} @media(max-width:360px){.qmChip{font-size:8px;letter-spacing:0;padding:7px 10px}} .qmChip i{width:7px;height:7px;border-radius:50%;background:var(--fogo);flex:none;animation:pisca 1.2s steps(1) infinite} .quemFoto.on .qmChip{opacity:1;transform:none} .qmTag{position:absolute;z-index:3;display:inline-flex;align-items:baseline;gap:7px; padding:9px 15px;border-radius:100px;background:rgba(247,245,242,.92); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:0 8px 24px rgba(12,12,14,.28); font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--tinta);white-space:nowrap; opacity:0;transform:translateY(8px) scale(.94); transition:opacity .5s var(--e),transform .6s var(--e)} .qmTag i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--fraco)} .qmTag.t1{top:9%;right:-14px;transition-delay:.5s} .qmTag.t2{top:38%;left:-18px;transition-delay:.62s} .qmTag.t3{bottom:26%;right:-8px;transition-delay:.74s} .quemFoto.on .qmTag{opacity:1;transform:none} @media(max-width:900px){.qmTag{font-size:14px;padding:7px 12px} .qmTag.t1{right:4px}.qmTag.t2{left:4px}.qmTag.t3{right:4px} /* o left:54px daqui reimpunha a margem antiga e o chip, ja maior com o endereco e o telefone, saia pela direita da moldura */ .qmChip{left:16px;right:16px;max-width:calc(100% - 32px);bottom:20px; font-size:9px;letter-spacing:.02em;padding:8px 12px;gap:7px}} .quemFoto img{transform:scale(1.06);transition:transform 1.1s var(--e)} .quemFoto.on img{transform:scale(1)} .quemTx .aspa{position:relative;border-left:0;padding-left:22px} .quemTx .aspa::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--fogo); transform:scaleY(0);transform-origin:top;transition:transform .7s var(--e) .5s} .quemTx .aspa.on::before{transform:scaleY(1)} @media(max-width:900px){.quemGrid{grid-template-columns:1fr}.quemFoto{min-height:0;aspect-ratio:4/4.4}} /* teclado: keycap fotográfica, aperta no hover e no scroll */ .teclado{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:clamp(16px,1.6vw,26px); padding:26px 0 16px;max-width:560px;margin:0 auto} .tecla{--rot:0deg;position:relative;width:clamp(118px,10.5vw,150px);aspect-ratio:1/.98;opacity:0;transform:rotate(var(--rot));cursor:pointer} .tKey{position:absolute;inset:0;background:url("../../img/tecla-386.png") center/contain no-repeat; /* A tecla e a imagem mais pesada que o visitante baixa: 235 KB em PNG, 14 KB em WebP (94% a menos). `image-set` com `type()` e o unico jeito de negociar formato dentro do CSS. A linha de cima fica de proposito: navegador que nao entende `type()` descarta esta declaracao e continua com o PNG. */ background-image:image-set(url("../../img/tecla-386.webp") type("image/webp"), url("../../img/tecla-386.png") type("image/png")); filter:drop-shadow(0 16px 18px rgba(17,16,15,.26)); transition:transform .09s ease-out,filter .09s ease-out} .tecla i{position:absolute;top:13%;left:16%;font-style:normal;font-size:clamp(14px,1.1vw,17px);font-weight:600;color:#2A2723;z-index:2} .tecla b{position:absolute;left:10%;right:10%;top:13%;bottom:27%;display:flex;align-items:center;justify-content:center; text-align:center;padding:10px 2px 0;font-style:italic;font-weight:800; letter-spacing:-.01em;color:#4A38E0;text-wrap:balance;z-index:2;font-size:clamp(11px,0.92vw,13.5px);line-height:1.2} .tecla:nth-child(2n){margin-top:clamp(20px,2.4vw,34px)} .tecla.caiu{animation:caiTecla .9s cubic-bezier(.24,1.35,.35,1) forwards} @keyframes caiTecla{ 0%{opacity:0;transform:translateY(-120px) rotate(calc(var(--rot) * 3.2)) scale(1.05)} 60%{opacity:1;transform:translateY(9px) rotate(var(--rot)) scale(1)} 100%{opacity:1;transform:translateY(0) rotate(var(--rot))}} .tecla.aperta .tKey,.tecla:hover .tKey{transform:translateY(10px); filter:drop-shadow(0 5px 7px rgba(17,16,15,.3))} .tecla:active .tKey{transform:translateY(13px);filter:drop-shadow(0 3px 5px rgba(17,16,15,.32))} @media(max-width:720px){.teclado{gap:14px;max-width:none}.tecla{width:clamp(104px,29vw,132px)} .tecla b{font-size:11.5px}.tecla i{font-size:13px}.tecla:nth-child(2n){margin-top:20px}} /* proposta */ .prop{background:#fff;border:1px solid var(--fio);border-radius:18px;padding:32px;box-shadow:0 30px 70px rgba(20,19,18,.10)} .prop h4{font-size:24px;margin:14px 0 22px} .prop .li{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-top:1px solid var(--fio);font-size:16px} .prop .li b{color:var(--tinta);font-weight:500;white-space:nowrap} .prop .tot{display:flex;justify-content:space-between;align-items:baseline;padding:20px 0 0;margin-top:12px;border-top:2px solid var(--tinta)} .prop .tot span{font-weight:600;font-size:16px;color:var(--tinta)} .prop .tot b{font-size:30px;font-weight:700;letter-spacing:-.03em;color:var(--tinta)} /* faixa escura */ .faixa{background:var(--escuro);color:rgba(245,245,243,.66)} .faixa h2,.faixa h3,.faixa h4,.faixa .d2,.faixa .d3{color:#F5F5F3} .faixa .hh:hover{background:rgba(255,255,255,.04)} .faixa .hh.pausa h4{color:rgba(245,245,243,.36)} .faixa .lb{color:rgba(245,245,243,.36)} .faixa .lb.fg{color:var(--fogo)} .faixa .cf b{color:#F5F5F3} .faixa strong{color:#F5F5F3} .faixa .cifras{border-color:rgba(255,255,255,.12)} /* ferramentas */ .ferr{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px; background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);border-radius:16px;overflow:hidden} .ferr .fr:nth-child(2){transition-delay:.12s} .ferr .fr:nth-child(3){transition-delay:.24s} .ferr .fr:nth-child(4){transition-delay:.36s} .fr:hover{background:#232120;transform:translateY(-6px); box-shadow:0 22px 48px rgba(0,0,0,.45),inset 0 2px 0 var(--fogo)} .fr:hover .frIdx{color:var(--fogo)} .fr:hover span:not(.frLogo){color:#F5F5F3} .fr span:not(.frLogo){transition:color .3s var(--e)} .frIdx{transition:color .3s var(--e)} .fr{transition:background .3s var(--e),box-shadow .3s var(--e),opacity .8s var(--e),transform .45s var(--e)} .fr{background:var(--escuro);padding:30px 28px 32px;position:relative;min-height:250px; display:grid;grid-template-rows:76px auto;row-gap:20px;align-content:start} .frIdx{position:absolute;top:28px;left:28px;display:flex;align-items:center;font-family:'JetBrains Mono',monospace;font-style:normal; font-size:11px;font-weight:700;letter-spacing:.14em;color:rgba(245,245,243,.34)} .frIdxCur{width:8px;height:13px;background:var(--fogo);margin-left:6px;animation:pisca 1s steps(1) infinite} .fr b{display:block;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--fogo);margin-bottom:12px} .fr span:not(.frLogo){font-size:16px;line-height:1.45;display:block} .frLogo{position:relative;display:inline-flex;align-items:center;gap:12px;height:44px;margin:0;align-self:end;justify-self:start;cursor:default;overflow:visible} .frLogo img{height:100%;width:auto;display:block;transition:opacity .18s linear} .frLogo canvas{position:absolute;pointer-events:none;opacity:0;transition:opacity .18s linear;z-index:2} .frLogo.ativa img{opacity:0} .frLogo.ativa canvas{opacity:1} .frLogo.wm{height:28px} /* A cor da marca nos cards escuros mora DENTRO do ferramenta-slot-v2.svg, nao aqui. Motivo: o SVG entra por , e nesse caminho ele e um documento proprio — `currentColor` nao herda do host e resolve para preto, o que fazia a marca sumir no card escuro. `color` no CSS daqui nao alcanca. O arquivo so e usado nesses 4 cards, entao o fill fixo la e seguro. O canvas de particulas amostra os pixels da imagem, entao corrigir o SVG conserta a marca parada E a animada. */ /* agenda: timeline com scroll (ref quantum) */ .tl{margin-top:8px} .tlTopo{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-bottom:18px} .tlLb{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace; font-size:12px;font-weight:700;letter-spacing:.14em;color:rgba(245,245,243,.35);transition:color .4s var(--e)} .tlLb i{width:9px;height:9px;border-radius:50%;background:rgba(245,245,243,.22);flex:none;transition:background .4s var(--e)} .tlLb.on{color:#F5F5F3} .tlLb.on i{background:var(--fogo)} .tlRegua{position:relative;height:26px; background: repeating-linear-gradient(90deg,rgba(245,245,243,.14) 0 1px,transparent 1px calc(100%/48)), repeating-linear-gradient(90deg,rgba(245,245,243,.28) 0 1px,transparent 1px 20%); background-size:100% 10px,100% 18px;background-position:0 bottom,0 bottom;background-repeat:no-repeat} .tlRegua .tlLinha{position:absolute;left:0;bottom:0;height:2px;width:0%;background:var(--fogo); box-shadow:0 0 12px rgba(255,58,36,.6)} .atoLb{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--fogo)} .atoT{font-size:clamp(28px,2.2vw,44px);font-weight:700;letter-spacing:-.03em;color:#F5F5F3} .agAc{margin-top:30px} .curVer{position:fixed;left:0;top:0;z-index:99;pointer-events:none; background:var(--fogo-cheio);color:#fff;font-family:'JetBrains Mono',monospace; font-size:11px;font-weight:700;letter-spacing:.14em;padding:9px 14px;border-radius:100px; opacity:0;transform:translate(-50%,-150%) scale(.6); transition:opacity .18s var(--e),transform .18s var(--e);white-space:nowrap} .curVer.on{opacity:1;transform:translate(-50%,-150%) scale(1)} @media(hover:none),(pointer:coarse){.curVer{display:none!important}} .tlBloco{padding:15px 0;border-top:1px solid rgba(245,245,243,.08)} .tlBloco b{display:block;font-size:16px;font-weight:600;color:#F5F5F3;margin-bottom:5px} .tlBloco span{font-size:14.5px;line-height:1.55;color:rgba(245,245,243,.55);display:block;max-width:46em} .agIt{border-top:1px solid rgba(245,245,243,.12)} .agIt:last-child{border-bottom:1px solid rgba(245,245,243,.12)} .agQ{width:100%;box-sizing:border-box;display:flex;align-items:center;gap:clamp(20px,3vw,48px); padding:26px 4px;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit} .agQuieta{cursor:default} .agHoraBig{flex:none;width:clamp(96px,10vw,150px);font-family:'JetBrains Mono',monospace; font-size:clamp(26px,2.4vw,42px);font-weight:700;letter-spacing:-.02em;color:var(--fogo); transition:transform .3s var(--e),text-shadow .3s var(--e)} .agQ:not(.agQuieta):hover{background:linear-gradient(90deg,rgba(255,58,36,.13),transparent 62%)} .agQ:not(.agQuieta):hover .agHoraBig{transform:translateX(14px) scale(1.12); text-shadow:0 0 18px rgba(255,58,36,.95),0 0 46px rgba(255,58,36,.5)} .agQ:not(.agQuieta):hover .agTit{color:#fff} .agQ:not(.agQuieta):hover .agMais{border-color:var(--fogo-escuro);color:#fff;background:var(--fogo-escuro);transform:rotate(90deg)} .agQ{transition:background .3s var(--e)} .agTit{flex:1} .agTit em{display:block;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px; font-weight:700;letter-spacing:.16em;color:rgba(245,245,243,.4);margin-bottom:6px} .agTit{font-size:clamp(24px,2vw,36px);font-weight:700;letter-spacing:-.03em;color:#F5F5F3} .agVolta{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.12em; color:rgba(245,245,243,.35)} .agSub{display:block;font-size:15px;font-weight:400;letter-spacing:0;line-height:1.5; color:rgba(245,245,243,.5);margin-top:8px;max-width:38em;text-wrap:pretty} .agMais{flex:none;width:40px;height:40px;border-radius:12px;border:1px solid rgba(245,245,243,.18); display:grid;place-items:center;font-style:normal;font-size:20px;color:#F5F5F3; transition:transform .35s var(--e),background .35s,color .35s} .agIt.aberta .agMais{transform:rotate(45deg);background:#F5F5F3;color:#0C0C0E} .agA{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1)} .agIt.aberta .agA{grid-template-rows:1fr} .agAin{overflow:hidden;min-height:0;padding-left:calc(clamp(96px,10vw,150px) + clamp(20px,3vw,48px))} .agAin .tlBloco:first-of-type{border-top:0;margin-top:0} .agAin .atoOut{margin:6px 0 28px;max-width:520px} @media(max-width:820px){ .tlTopo,.tlRegua{display:none} .tl{margin-top:0} .agAc{margin-top:6px} .agAin{padding-left:0} .agVolta{display:none} .agQ{gap:14px;padding:20px 0} .agHoraBig{width:64px;font-size:22px} .agTit{font-size:20px} .agTit em{font-size:10px;letter-spacing:.12em;margin-bottom:4px} .agSub{font-size:13.5px;margin-top:6px} .agMais{width:34px;height:34px;font-size:17px;border-radius:10px} .faixa .agInfo{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:36px} .agSep{display:none} .agChip{font-size:11px} } /* info do evento na agenda */ .agInfo{display:flex;align-items:center;flex-wrap:wrap;gap:14px 18px;margin-bottom:52px} .agChip{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace; font-size:12px;font-weight:700;letter-spacing:.14em;color:rgba(245,245,243,.72)} .agChip svg{color:var(--fogo)} .agSep{width:5px;height:5px;border-radius:50%;background:rgba(245,245,243,.28)} @media(max-width:720px){.agInfo{gap:10px 14px}.agSep{display:none}.agChip{font-size:11px}} /* agenda */ .ag{border-top:1px solid var(--fio)} .hh{display:grid;grid-template-columns:110px 1fr;gap:32px;padding:30px 0;border-bottom:1px solid var(--fio); transition:background .4s var(--e)} .hh:hover{background:rgba(20,19,18,.03)} .hh .t{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--fogo);padding-top:4px} .hh h4{font-size:22px;font-weight:600;letter-spacing:-.03em;margin-bottom:8px} .hh p{font-size:16px;max-width:44em} .hh.pausa .t{color:var(--fraco)} .hh.pausa h4{color:var(--fraco);font-weight:400;font-size:18px} @media(max-width:640px){.hh{grid-template-columns:1fr;gap:8px}} /* entregáveis · diagrama quantum services */ .entSec{margin:0 8px 8px} .entGrid{display:grid;grid-template-columns:1fr 1.25fr;gap:8px;align-items:start} .entLista{display:flex;flex-direction:column;gap:0;min-width:0; background:#F5F4F1;border-radius:28px;position:relative;overflow:hidden} .entLista::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:radial-gradient(rgba(20,19,18,.09) 1.2px,transparent 1.5px);background-size:26px 26px; -webkit-mask-image:linear-gradient(180deg,#000,transparent 22%,transparent 78%,#000); mask-image:linear-gradient(180deg,#000,transparent 22%,transparent 78%,#000)} .entPainel{position:sticky;top:8px;border-radius:28px;overflow:hidden;background:#0B0B0D; height:calc(100vh - 16px);outline:2px solid #0B0B0D;outline-offset:-2px} /* O clipe neon e MUITO mais claro que o radar que estava aqui. A 55% o texto media 5,26:1 no geral mas caia a 1,59:1 sobre as cristas — ali ele sumia. Opacidade menor + veu mais forte resolvem sem escurecer a peca inteira. */ .entPainel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.86; object-position:50% 8%} /* O veu cobria o clipe inteiro so para salvar o texto. Agora o texto tem cartao proprio, entao aqui fica so uma vinheta: tira o brilho das bordas para o card nao flutuar sobre confusao, e libera o meio do quadro. */ .entPainel::before{content:"";position:absolute;inset:0;z-index:1;background: radial-gradient(120% 80% at 50% 42%,transparent 34%,rgba(5,5,7,.55) 88%)} .entPainel::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;mix-blend-mode:screen; background:url("../images/svg/fractal-noise.1ad0e47f9a.svg")} /* Medi a luminancia do clipe em 15 regioes ao longo de 5 quadros: o meio e a faixa MAIS clara (0,07-0,10) e era exatamente onde o texto estava centralizado. O fundo e a segunda area mais escura (0,06), e ja tem o veu por cima. Texto desce; o video pode voltar a brilhar. */ .entPin{position:relative;z-index:2;padding:56px clamp(40px,7vw,150px) 132px;width:100%;height:100%; display:flex;flex-direction:column;justify-content:flex-end} .entPinTopo{position:absolute;top:44px;left:clamp(40px,7vw,150px);right:clamp(40px,7vw,150px)} .entPinLb{color:#F5F5F3} .entPinTag{margin-top:14px;font-size:18px;font-weight:500;color:rgba(245,245,243,.78);letter-spacing:-.01em} .entPinLb span{color:rgba(245,245,243,.55)} .entTitulo{color:#F5F5F3;font-size:clamp(44px,3.6vw,76px);line-height:1.04;letter-spacing:-.04em; margin-bottom:26px;min-height:4.35em} .entTitulo em{display:flex;align-items:center;gap:14px;font-style:normal;font-family:'JetBrains Mono',monospace; font-size:14px;font-weight:700;letter-spacing:.16em;color:var(--fogo);margin-bottom:18px} .entTitulo em::after{content:"";flex:1;max-width:90px;height:1px;background:rgba(255,58,36,.5)} .entSwap{transition:opacity .24s var(--e),transform .24s var(--e),filter .24s var(--e)} .entSwap.sai{opacity:0;transform:translateY(-18px);filter:blur(7px)} .entSwap.chega{animation:entChega .42s var(--e)} @keyframes entChega{from{opacity:0;transform:translateY(22px);filter:blur(9px)}to{opacity:1;transform:none;filter:none}} .entDots{display:flex;gap:8px;margin-top:30px} .entDots i{width:26px;height:4px;border-radius:100px;background:rgba(255,255,255,.18);transition:all .35s var(--e)} .entDots i.on{background:var(--fogo);width:46px} .entMarcador{position:fixed;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column; gap:12px;z-index:40;opacity:0;pointer-events:none;transition:opacity .35s var(--e)} .entMarcador.on{opacity:1} .entMarcador i{width:8px;height:8px;border-radius:100px;background:rgba(20,19,18,.2);transition:all .35s var(--e)} .entMarcador i.on{height:26px;background:var(--tinta)} @media(max-width:1020px){.entMarcador{display:none}} .entPinSub{color:rgba(245,245,243,.7);max-width:24em;font-size:18px} .entLista{min-width:0} .ent{position:relative;z-index:1;padding:clamp(72px,12vh,150px) clamp(40px,7vw,150px);min-height:100vh; display:flex;flex-direction:column;justify-content:center} .ent>*{position:relative;z-index:1;width:100%;max-width:none} .entLb{font-family:'JetBrains Mono',monospace;font-size:clamp(12px,0.6vw,16px);font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--fraco)} .entLb b{color:var(--tinta)} .entH{font-size:clamp(34px,2.9vw,74px);line-height:1.04;letter-spacing:-.045em;color:var(--tinta); font-weight:700;margin:18px 0 18px;max-width:100%;text-wrap:balance} .entSub{font-size:clamp(18px,1.05vw,26px);max-width:36em;margin-bottom:0} .entMedia .mfun{min-width:0} .entMedia .foto{border-radius:18px;overflow:hidden} .entMedia .foto img{width:100%;height:100%;object-fit:cover;display:block} .entBaixo{display:grid;grid-template-columns:minmax(150px,200px) 1fr;gap:56px;align-items:start;margin-top:56px} .entRotulo{font-family:'JetBrains Mono',monospace;font-size:clamp(12px,0.6vw,16px);font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--tinta);padding-top:16px} .entMedia{margin:clamp(40px,5vh,72px) 0 0;max-width:clamp(660px,88%,1000px)} .entRows{border-bottom:1px solid var(--fio)} .entRow{display:flex;gap:22px;padding:14px 0;border-top:1px solid var(--fio)} .entRow i{font-family:'JetBrains Mono',monospace;font-size:clamp(12px,0.6vw,16px);font-weight:700;color:var(--fogo);font-style:normal;flex:none} .entRow span{font-family:'JetBrains Mono',monospace;font-size:clamp(12px,0.6vw,16px);font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--tinta)} .entOut{margin-top:52px;display:flex;align-items:center;gap:14px;width:100%;padding:8px 14px 8px 8px; background:repeating-linear-gradient(135deg,rgba(20,19,18,.035) 0 3px,transparent 3px 10px);font-family:'JetBrains Mono',monospace; font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta)} .entOut .seta{background:var(--tinta);color:#fff;border-radius:100px;padding:4px 12px;font-size:12px;line-height:1.4} .entOut .curq{width:9px;height:15px;background:var(--fogo);display:inline-block;animation:pisca 1s steps(1) infinite} @media(max-width:1020px){.entGrid{grid-template-columns:1fr}.entPainel{position:relative;height:auto;min-height:420px}.ent{min-height:0;padding:48px 24px}.entMedia{grid-template-columns:1fr}.entBaixo{grid-template-columns:1fr;gap:6px}} /* problema: dobra escura de manifesto */ .secProb{background:#0C0C0E;position:relative;overflow:visible;border-radius:28px;padding:var(--vDobra) 0} .secProb::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;mix-blend-mode:screen;border-radius:28px; background:url("../images/svg/fractal-noise.1ad0e47f9a.svg")} .secProb .w{position:relative;z-index:2} .probAlto{position:relative;z-index:2} .probPin{position:relative;min-height:calc(100vh - var(--vDobra));display:flex;align-items:center;padding:0} @media(max-width:720px){.probPin{min-height:0;padding:0} .manifAlto{margin-top:0;height:auto} .manifesto{margin-top:52px;padding-bottom:20px} .secProb .duo{gap:26px} .probFoto{margin-top:0} .secProb{padding-bottom:calc(var(--vDobra) + 20px)}} .secProb .d2{color:#F5F5F3} .secProb .lb{color:rgba(245,245,243,.45)} .secProb .txt p{color:rgba(245,245,243,.66)} .secProb .txt strong{color:#F5F5F3} .secProb .txt .fgData{color:var(--fogo);font-weight:600} .lbBola{display:flex;align-items:center;gap:10px} .lbBola i{width:8px;height:8px;border:2px solid var(--fogo);border-radius:50%;flex:none} /* grayscale saiu: o clipe neon e violeta/magenta, ou seja, ja e a paleta. Em cinza ele virava textura anonima. O arquivo tambem deixou de ser dessaturado no encode — as duas coisas juntas e que davam o cinza. */ .probBg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.09;pointer-events:none} .probGrid{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:clamp(40px,5vw,96px);align-items:center;margin-top:40px} .probRetrato{border-radius:24px;overflow:hidden;aspect-ratio:1} .probRetrato img{width:100%;height:100%;object-fit:cover;display:block} .probCita{font-size:clamp(30px,2.6vw,58px);line-height:1.16;letter-spacing:-.035em;font-weight:700;color:#F5F5F3;text-wrap:balance} .probCita em{font-style:normal;color:var(--fogo)} .probAspas{color:var(--fogo);margin-right:6px} .probSub{margin-top:36px;font-size:clamp(16px,1vw,22px);color:rgba(245,245,243,.6);max-width:38em} .probAss{display:flex;align-items:center;gap:14px;margin-top:44px} .probAss i{width:10px;height:10px;border:2px solid var(--fogo);border-radius:50%} .probAss b{display:block;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#F5F5F3} .probAss small{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,245,243,.45);margin-top:4px} @media(max-width:900px){.probGrid{grid-template-columns:1fr}.probRetrato{max-width:340px}} /* problema: fill fluido em telas grandes */ .secProb .d2{font-size:clamp(30px,2.6vw,64px)} .secProb .lb{font-size:clamp(12px,0.6vw,16px)} .secProb .txt p{font-size:clamp(18px,1.25vw,22px);max-width:29em;line-height:1.55;text-wrap:pretty} .secProb .duo{gap:clamp(48px,6vw,150px)} /* problema: imagem com aspa em glass */ .probFoto{position:relative} /* .14 servia para o radar, que era escuro. O neon e claro e a mesma opacidade fazia ele gritar atras do texto — caiu para .07. */ /* O texto desta secao agora tem cartao proprio, entao o clipe nao precisa mais ser abafado para a leitura acontecer. Estava em .11 por causa disso. */ .probBg{position:absolute;top:0;left:0;width:100%;height:100vh;object-fit:cover;opacity:.55;pointer-events:none;will-change:transform} .manifAlto{height:190vh;position:relative;z-index:2;margin-top:-34vh} .manifPin{position:sticky;top:0;min-height:100vh;display:flex;align-items:center} .manifPin .w{width:100%} .manifesto{display:flex;flex-wrap:wrap;justify-content:center; text-align:center;margin:0 auto;font-size:clamp(34px,3.6vw,80px);font-weight:700; letter-spacing:-.04em;line-height:1.14;max-width:17em;text-wrap:balance;column-gap:.28em} .mAspas{color:var(--fogo);margin-right:8px} .mFim{margin:0 0 0 8px} .manifesto .pal{color:rgba(245,245,243,.14);transition:color .35s var(--e)} .manifesto .pal.lida{color:#F5F5F3} .manifesto .pal.fg.lida{color:var(--fogo)} @media(max-width:720px){ .manifAlto{height:auto;margin-top:0} .manifPin{position:static;min-height:0;padding:8px 0 0} .manifesto .pal{transition:color .28s var(--e)} } .probFoto{display:flex;flex-direction:column;gap:26px;justify-content:center;padding:0} .pastaPalco{display:flex;flex-direction:column;align-items:center;gap:18px;padding:26px 0 6px} .pasta3d{width:186px;height:136px;perspective:600px} .pastaTras{position:absolute;left:0;right:0;bottom:0;height:104px;background:linear-gradient(180deg,#4A38E0,#2E1F9E); border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)} .pastaTras::before{content:"";position:absolute;top:-15px;left:0;width:92px;height:24px; background:linear-gradient(180deg,#4A38E0,#4231D4);border-radius:10px 0 0 0; clip-path:polygon(0 0,72% 0,100% 100%,0 100%)} .pFile{position:absolute;left:50%;bottom:22px;width:128px;padding:10px 12px 12px;background:#FBFAF8;border-radius:10px; display:flex;flex-direction:column;gap:6px; box-shadow:0 2px 4px rgba(0,0,0,.2),0 12px 28px rgba(0,0,0,.35); transform:translateX(-50%);transition:transform .55s cubic-bezier(.34,1.56,.64,1)} .pfTopo{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px; font-weight:700;letter-spacing:.02em;color:#141312} .pfTopo i{font-style:normal;font-size:9px;letter-spacing:.08em;color:#fff;background:var(--fogo-cheio); border-radius:4px;padding:3px 5px} .pfLinha{height:5px;border-radius:3px;background:rgba(20,19,18,.12);width:92%} .pfLinha.curta{width:60%} .pastaFrente{position:absolute;left:0;right:0;bottom:0;height:82px; background:linear-gradient(178deg,#9B78FF 0%,#5B49F5 52%,#3D2BC4 100%);border-radius:6px 6px 14px 14px; transform-origin:bottom center;transition:transform .55s cubic-bezier(.34,1.56,.64,1); box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -6px 14px rgba(0,0,0,.15), 0 0.6px 1.6px rgba(0,0,0,.2),0 2.3px 5.9px rgba(0,0,0,.18),0 16px 38px rgba(224,41,18,.3)} .pasta3d.o1 .pastaFrente{transform:rotateX(-28deg)} .pasta3d.o1 .f1{transform:translateX(-50%) translate(-52px,-58px) rotate(-9deg)} .pasta3d.o2 .f2{transform:translateX(-50%) translateY(-76px)} .pasta3d.o3 .f3{transform:translateX(-50%) translate(52px,-58px) rotate(9deg)} .pastaRotulo{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);white-space:nowrap; font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:rgba(245,245,243,.42)} .zapDigitando{background:#202C33;border-radius:12px 12px 12px 4px;padding:12px;height:32px;margin-right:auto; display:flex;gap:4px;align-items:center; box-shadow:0 0.6px 1.6px rgba(0,0,0,.17),0 2.3px 5.9px rgba(0,0,0,.14)} .zapDigitando i{width:6px;height:6px;border-radius:50%;background:rgba(233,237,239,.5); animation:digita 1s ease-in-out infinite} .zapDigitando i:nth-child(2){animation-delay:.15s} .zapDigitando i:nth-child(3){animation-delay:.3s} @keyframes digita{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}} .dorZap>*{animation:chega .75s cubic-bezier(.22,1.12,.36,1) both;transform-origin:bottom right} .dorZap>.zapDia,.dorZap>.zapDigitando{transform-origin:bottom left} @keyframes chega{from{opacity:0;transform:translateY(16px) scale(.86)}to{opacity:1;transform:none}} .fonePalco{position:relative;display:flex;justify-content:center;padding:24px 0 56px} .fonePalco::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:380px;height:380px;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(255,58,36,.18),transparent 65%);filter:blur(30px)} .fone{position:relative;width:308px;background:#17181B;border-radius:50px;padding:11px;z-index:1; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.09),inset 0 0 0 4px #000, 0 2px 6px rgba(0,0,0,.4),0 34px 90px rgba(0,0,0,.6)} .foneIlha{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:84px;height:23px; background:#000;border-radius:13px;z-index:3} .foneTela{background:#0A0A0C;border-radius:40px;overflow:hidden;padding:56px 12px 20px;min-height:520px; display:flex;flex-direction:column;justify-content:flex-end;position:relative} .foneTela::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:40px; background:linear-gradient(115deg,rgba(255,255,255,.05) 0%,transparent 30%)} .dorZap{display:flex;flex-direction:column;gap:6px;height:clamp(330px,42vh,400px);justify-content:flex-end; padding:0 4px;overflow:hidden} @media(max-width:720px){.dorZap{height:380px}} .pasta3d{position:absolute;left:calc(50% - 268px);bottom:34px;transform:rotate(-6deg);z-index:2} @media(max-width:900px){.pasta3d{position:static;transform:none;margin:26px auto 0}} .zapDia{align-self:stretch;display:flex;align-items:center;gap:12px;margin:10px 0 6px; font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,245,243,.4); white-space:nowrap} .zapDia::before,.zapDia::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.09)} .zapRot{font-size:10px;color:rgba(245,245,243,.45);margin:8px 4px 2px} .zapRot.dir{text-align:right} .zapLinha{display:flex;align-items:flex-end;gap:10px} .zapFace{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none} .bolhaTu{margin-left:auto;background:#3B82F6;color:#fff;border-radius:18px 18px 4px 18px; padding:12px 16px;max-width:78%;font-size:15px;line-height:1.45; box-shadow:0 0.6px 1.6px rgba(0,0,0,.2),0 2.3px 5.9px rgba(0,0,0,.18),0 14px 34px rgba(0,0,0,.28)} /* A outra ponta agora fala. Bolha cinza, canto invertido e alinhada a esquerda — o oposto da .bolhaTu, que e a ALL MAX. */ .bolhaEle{margin-right:auto;background:#26262B;color:#F5F5F3;border-radius:18px 18px 18px 4px; padding:12px 16px;max-width:78%;font-size:15px;line-height:1.45; box-shadow:0 0.6px 1.6px rgba(0,0,0,.2),0 2.3px 5.9px rgba(0,0,0,.18),0 14px 34px rgba(0,0,0,.28)} .zapDigitando{background:#1C1C1C;border-radius:18px 18px 18px 4px;padding:12px 14px;height:34px; display:flex;gap:4px;align-items:center; box-shadow:0 0.6px 1.6px rgba(0,0,0,.17),0 2.3px 5.9px rgba(0,0,0,.14)} .zapDigitando i{width:6px;height:6px;border-radius:50%;background:rgba(233,237,239,.5); animation:digita 1s ease-in-out infinite} .zapDigitando i:nth-child(2){animation-delay:.15s} .zapDigitando i:nth-child(3){animation-delay:.3s} @keyframes digita{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}} .dorZap>*{animation:chega .75s cubic-bezier(.22,1.12,.36,1) both;transform-origin:bottom right} .dorZap>.zapDia,.dorZap>.zapLinha{transform-origin:bottom left} @keyframes chega{0%{opacity:0;transform:translateY(22px) scale(.94)}60%{opacity:1}100%{opacity:1;transform:none}} .dorVazio{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase; color:rgba(245,245,243,.38);text-align:center;padding-top:14px} .visto{color:#53BDEB;font-weight:700} .dorVazio{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase; color:rgba(245,245,243,.38);text-align:center;padding-top:8px} .mockJanela{width:100%;border-radius:14px;overflow:hidden;background:#101012; box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)} .mockNav{display:flex;align-items:center;gap:12px;padding:11px 14px;background:#1A1A1E} .mDots{display:flex;gap:6px} .mDots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)} .mUrl{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.06em; color:rgba(245,245,243,.55);background:rgba(255,255,255,.07);padding:5px 14px;border-radius:8px} .mockView{height:clamp(340px,40vh,520px);overflow:hidden} .mShot{width:100%;display:block;animation:mockRola 16s ease-in-out infinite alternate} @keyframes mockRola{from{transform:translateY(0)}to{transform:translateY(calc(-100% + clamp(340px,40vh,520px)))}} @media (prefers-reduced-motion: reduce){.mShot{animation:none}} .probAspa{position:static;margin-top:6px;z-index:2; background:rgba(16,16,18,.5);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2); border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:22px 24px; color:#F5F5F3;font-size:clamp(20px,1.1vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1.35} .probAspa em{font-style:normal;color:var(--fogo)} /* clientes atendidos */ .cliFita{overflow:hidden;max-width:100%} .cliFita{overflow:hidden;margin-top:64px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .cliFita .fita2{display:flex;width:max-content;animation:fitaRola 30s linear infinite} .cliGrupo{display:flex;gap:14px;padding-right:14px} .cli{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--fio); border-radius:16px;padding:12px 22px 12px 12px;white-space:nowrap} .cli img{width:48px;height:48px;object-fit:contain} /* sem border-radius: recorte redondo em wordmark corta letra */ .cli b{display:block;font-size:16px;font-weight:600;color:var(--tinta);letter-spacing:-.01em} .cli span{display:block;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--fraco);letter-spacing:.04em} /* prova */ .provas{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:20px} .pv{background:#fff;border:1px solid var(--fio);border-radius:18px;padding:34px 30px 28px; display:flex;flex-direction:column; transition:transform .4s var(--e),box-shadow .4s var(--e)} .pv:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(20,19,18,.13)} .pv b{display:block;font-size:clamp(36px,3vw,46px);font-weight:700;letter-spacing:-.04em;color:var(--fogo);line-height:1;margin-bottom:16px} .pv p{font-size:16px;margin-bottom:20px;color:var(--tinta);font-weight:400;flex:1;text-wrap:pretty} .pv.escuro{background:#0C0C0E;border-color:#0C0C0E} .pv.escuro p{color:rgba(245,245,243,.88)} .pv.escuro .qn{color:rgba(245,245,243,.5)} @media(max-width:940px){.provas{grid-template-columns:1fr}} .pv .qn{display:flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--fraco)} .qav{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none} .qini{display:grid;place-items:center;background:rgba(20,19,18,.08);color:var(--tinta); font-style:normal;font-size:15px;font-weight:700;letter-spacing:0} .pv.escuro .qini{background:rgba(255,255,255,.1);color:#F5F5F3} .qnn{display:flex;flex-direction:column;gap:3px;line-height:1.2} .qnn small{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--fogo);text-transform:none} /* preço */ /* preço: dobra escura estilo quantum */ .secPreco{background:#0C0C0E;border-radius:28px;position:relative;overflow:hidden} .secPreco::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;mix-blend-mode:screen; background:url("../images/svg/fractal-noise.1ad0e47f9a.svg")} .secPreco .w{position:relative;z-index:2} .pxCard{display:grid;grid-template-columns:1fr 1fr;gap:0;background:rgba(255,255,255,.05);border-radius:30px;overflow:hidden} .pxEsq{padding:clamp(24px,3.5vw,64px);display:flex;flex-direction:column;min-width:0} .pxDir{min-width:0} .pxLi{min-width:0} .pxLi span{min-width:0;overflow-wrap:anywhere} .pxNum{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.14em;color:rgba(245,245,243,.4)} .pxLogo{width:min(78%,380px);height:auto;display:block;margin:26px 0 34px} .pxTabela{margin-bottom:34px} .pxLi{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07); font-family:'JetBrains Mono',monospace;font-size:13px;color:rgba(245,245,243,.6)} .pxLi b{color:var(--fogo);font-weight:700;white-space:nowrap} .pxLi b.semPreco{color:rgba(245,245,243,.4);font-weight:600} .pxTotal{border-bottom:0;padding-top:16px;margin-top:4px;border-top:1px solid rgba(255,255,255,.16)} .pxTotal span{color:rgba(245,245,243,.85);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px} .pxTotal b s{color:rgba(245,245,243,.45);font-size:15px;text-decoration-thickness:1.5px} .pxDe{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;letter-spacing:.06em;color:rgba(245,245,243,.35)} .pxDe s{color:rgba(245,245,243,.45)} .pxPreco{display:flex;align-items:baseline;gap:6px;color:var(--fogo);margin:6px 0 20px} .pxPreco u{text-decoration:none;font-size:clamp(26px,2.2vw,40px);font-weight:700;letter-spacing:-.02em} .pxPreco small{font-size:clamp(22px,1.8vw,32px);font-weight:600} .pxPreco span{font-size:clamp(64px,6vw,110px);font-weight:700;letter-spacing:-.04em;line-height:1} .pxPreco em{font-family:'JetBrains Mono',monospace;font-style:normal;font-size:13px;font-weight:600;letter-spacing:.08em;color:rgba(245,245,243,.35)} .pxQuando{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;min-width:0;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500; letter-spacing:.05em;color:rgba(245,245,243,.45);margin:auto 0 26px} .pxQuando b{color:#F5F5F3;font-weight:600} .pxOut{display:flex;align-items:center;gap:14px;padding:8px 14px 8px 8px;flex-wrap:wrap;min-width:0; background:repeating-linear-gradient(135deg,rgba(245,245,243,.05) 0 3px,transparent 3px 10px); font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.12em;color:rgba(245,245,243,.75)} .pxOut .seta{background:#F5F5F3;color:#111;border-radius:100px;padding:4px 12px;font-size:12px;line-height:1.4} .pxOut .curq{width:9px;height:15px;background:var(--fogo);display:inline-block;animation:pisca 1s steps(1) infinite} .pxDir{background:#171717;border-radius:20px;margin:8px;padding:clamp(28px,3vw,48px);display:flex;flex-direction:column} .pxDirTopo{display:flex;align-items:center;justify-content:space-between;font-family:'JetBrains Mono',monospace; font-size:12px;font-weight:700;letter-spacing:.14em;color:rgba(245,245,243,.45);margin-bottom:14px} .pxDots{display:flex;gap:5px} .pxDots i{width:5px;height:5px;border-radius:50%;background:rgba(245,245,243,.6)} .pxDots i+i{background:rgba(245,245,243,.2)} /* A lista mudou de coluna. Ela nasceu no painel da direita, mas quando o video do cluster entrou ali a direita foi para 1518px e a esquerda ficou com 841px de VAZIO embaixo da calculadora. Trazer a lista para ca equilibra as duas sem inventar conteudo — o conteudo ja existia, estava no lugar errado. `margin-top:auto` a empurra para o RODAPE da coluna, espelhando o `.pxBaixo{margin-top:auto}` que a direita ja usa: as duas colunas passam a terminar na mesma linha e a sobra vira respiro ENTRE a calculadora e a lista. NAO ha troca de cor aqui, e isso e proposital: cheguei a inverter para texto escuro achando que a coluna esquerda fosse clara. Ela nao e — `.pxCard` e branco a 5% sobre secao escura, entao as DUAS colunas sao escuras. A lista ficou preta no preto e sumiu. As cores originais servem nas duas. */ .pxEsq .pxDirTopo{margin-top:auto;padding-top:clamp(30px,3.4vw,46px)} .pxEsq .pxItens{margin-bottom:0} .pxEsq .pxItem:last-child{border-bottom:0;padding-bottom:0} .pxItens{margin-bottom:30px} .pxItem{display:flex;align-items:flex-start;gap:16px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.07); font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.6;color:rgba(245,245,243,.7)} .pxItem b{color:#F5F5F3;font-weight:600} .pxIco{flex:none;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12); display:grid;place-items:center;font-style:normal;font-size:13px;color:#F5F5F3;margin-top:2px} .pxItem.off{color:rgba(245,245,243,.28)} .pxItem.off .pxIco{color:rgba(245,245,243,.28);border-color:rgba(255,255,255,.07);background:none} /* ---- cluster proprio, dentro do painel de contratacao ---- O `margin-top:auto` do .pxBaixo empurra o rodape do painel para baixo e abria 418px de vazio no desktop (29px no mobile — por isso o bloco encolhe em vez de sumir). Tudo aqui e CSS: nenhum arquivo novo, nenhuma origem nova, e portanto nenhuma mudanca na CSP. */ /* --verde-nvidia: a cor da marca do fabricante do hardware, declarada no BLOCO e nao no cartao — a capa do player e irma do cartao, nao filha dele, e num `var()` declarado no cartao ela cairia sempre no fallback. Fica presa aqui de proposito: e sinalizacao de origem do conteudo, nao entra na paleta do site. */ .pxCluster{--verde-nvidia:#76B900;--acento-vid:var(--fogo);margin:4px 0 22px;display:flex;flex-direction:column;gap:14px} .clTopo{display:flex;align-items:center;justify-content:space-between;gap:12px; font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:rgba(245,245,243,.42)} .clLive{display:inline-flex;align-items:center;gap:7px;color:rgba(245,245,243,.62)} .clLive i{width:6px;height:6px;border-radius:50%;background:#3DDC97;flex:none; box-shadow:0 0 0 0 rgba(61,220,151,.55)} .clRack{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .clNo{position:relative;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px; padding:13px 16px;border-radius:12px;overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.09); font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.04em} .clNo b{color:#F5F5F3;font-weight:600;letter-spacing:.06em} .clNo s{text-decoration:none;color:rgba(245,245,243,.34);font-size:11px;letter-spacing:.12em} /* a grelha frontal: dois gradientes radiais em xadrez dao a malha perfurada sem imagem nenhuma */ .clGrelha{width:34px;height:22px;border-radius:4px;flex:none; background-color:rgba(0,0,0,.35); background-image:radial-gradient(rgba(245,245,243,.30) 1px,transparent 1.1px), radial-gradient(rgba(245,245,243,.30) 1px,transparent 1.1px); background-size:5px 5px;background-position:0 0,2.5px 2.5px; border:1px solid rgba(255,255,255,.10)} /* medidor de atividade: a barra viva de cada no */ .clNo u{position:relative;display:block;width:56px;height:4px;border-radius:100px; background:rgba(255,255,255,.09);overflow:hidden} .clNo u i{position:absolute;inset:0;width:100%;border-radius:inherit;transform-origin:left center; background:linear-gradient(90deg,var(--fogo),#8F7BFF);transform:scaleX(.18)} @media (prefers-reduced-motion:no-preference){ .clLive i{animation:clPulso 2.4s ease-out infinite} /* cada no com fase e ritmo proprios — o cluster tem que parecer que esta processando, nao que quatro barras batem juntas no mesmo compasso */ .clNo:nth-child(1) u i{animation:clCarga 3.1s var(--e) infinite} .clNo:nth-child(2) u i{animation:clCarga 4.3s var(--e) -1.2s infinite} .clNo:nth-child(3) u i{animation:clCarga 2.6s var(--e) -.5s infinite} .clNo:nth-child(4) u i{animation:clCarga 3.7s var(--e) -2.1s infinite} /* varredura: um job atravessando o rack de cima para baixo */ .clNo::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(100deg,transparent 38%,rgba(139,120,255,.16) 50%,transparent 62%); transform:translateX(-100%)} .clNo:nth-child(1)::after{animation:clVarre 6s linear infinite} .clNo:nth-child(2)::after{animation:clVarre 6s linear .35s infinite} .clNo:nth-child(3)::after{animation:clVarre 6s linear .7s infinite} .clNo:nth-child(4)::after{animation:clVarre 6s linear 1.05s infinite} } @keyframes clPulso{0%{box-shadow:0 0 0 0 rgba(61,220,151,.55)}70%,100%{box-shadow:0 0 0 7px rgba(61,220,151,0)}} @keyframes clCarga{0%,100%{transform:scaleX(.16)}45%{transform:scaleX(.92)}70%{transform:scaleX(.4)}} @keyframes clVarre{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}} /* Botao do video da NVIDIA. E DE PROPOSITO discreto: este painel existe para levar ao "AGENDAR DIAGNOSTICO", e uma capa de video grande competiria com o CTA — ainda por cima com material de marketing de terceiro. Quem quer saber o que e um DGX Spark clica; quem nao quer, nao e desviado. O player e o mesmo youtube-nocookie que a home ja usa, com fachada: nada vai para o Google antes do clique, e por isso a CSP nao muda uma virgula. */ .clVid{display:flex;align-items:center;gap:13px;width:100%;margin-top:4px;padding:12px 15px; background:rgba(91,73,245,.09);border:1px solid rgba(91,73,245,.6);border-radius:12px; cursor:pointer;text-align:left;color:inherit;font:inherit; transition:background .25s var(--e),border-color .25s var(--e),box-shadow .25s var(--e)} .clVid:hover{background:rgba(91,73,245,.16);border-color:var(--acento-vid); box-shadow:0 0 0 1px rgba(91,73,245,.4),0 10px 30px -16px rgba(91,73,245,.7)} .clVid:focus-visible{outline:3px solid var(--fogo);outline-offset:3px} .clVidPlay{flex:none;width:30px;height:30px;border-radius:50%;background:var(--acento-vid);position:relative} /* triangulo ESCURO, nao branco: branco sobre #76B900 da 2,4:1, abaixo do 3:1 que a WCAG pede para elemento grafico. O quase-preto da 7,9:1. */ .clVidPlay::after{content:"";position:absolute;top:50%;left:53%;transform:translate(-50%,-50%); border-left:9px solid #fff;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent} /* anel pulsante: so BORDA, miolo transparente, `pointer-events:none`. Sem z-index negativo — filho negativo pinta atras do fundo do ANCESTRAL, nao so do pai, e sumiria. Ja custou uma sessao descobrir isso nos cards de contato. */ .clVidPlay::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none; border:2px solid var(--acento-vid);opacity:0} @media (prefers-reduced-motion:no-preference){ .clVidPlay::before{animation:clVidAnel 2.6s ease-out infinite} .clVid:hover .clVidPlay::before{animation-duration:1.5s} } /* teto 1.9 e nao 2.1: o play tem 30px e o centro dele fica a 30px da borda do cartao (15px de padding + 15px de raio). Em 2.1 o anel chega a 31,5px e VAZA 1,5px para fora do cartao. Em 1.9 para em 28,5px, dentro. */ @keyframes clVidAnel{ 0%{transform:scale(1);opacity:.9} 70%,100%{transform:scale(1.9);opacity:0} } .clVidTx{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.05em; color:#F5F5F3;line-height:1.4} .clVidTx s{display:block;text-decoration:none;font-weight:500;font-size:11px;letter-spacing:.08em; color:rgba(245,245,243,.42);margin-top:2px} /* Tocando: o rack sai e o player ocupa o lugar dele. O rack tem 313px e o video 16:9 tem 335px na largura deste painel — a diferenca cabe na folga que sobrou, entao o painel nao empurra o resto da pagina. */ /* tocando, o player OCUPA O LUGAR do filme do cluster em vez de empilhar embaixo dele: dois videos um sobre o outro no mesmo painel seria alto demais e faria os dois competirem. */ .pxCluster.clTocando .clFilme, .pxCluster.clTocando .clRack, .pxCluster.clTocando .clVid{display:none} .clPalco{position:relative;width:100%;aspect-ratio:9/16;max-height:78vh;margin-inline:auto;border-radius:12px;overflow:hidden; background:#000;border:1px solid rgba(255,255,255,.09)} .clPalco iframe,.clPalcoVid{position:absolute;inset:0;width:100%;height:100%;border:0; display:block;background:#000} /* Come o ponteiro para o player nunca receber hover — sem hover, o YouTube nao levanta a tarja com titulo, canal e "assistir no YouTube". E o unico jeito: `showinfo` e `modestbranding` foram depreciados e nao removem mais nada. Custo do veu: quem esta assistindo nao pode pausar. Aceitavel num clipe de 24s aberto por clique, e "voltar ao cluster" fecha. */ .clFecha{margin-top:8px;align-self:flex-start;background:none;border:0;cursor:pointer;padding:4px 0; font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:rgba(245,245,243,.45)} .clFecha:hover{color:#F5F5F3} .clFecha:focus-visible{outline:2px solid var(--fogo);outline-offset:3px;border-radius:4px} @media (max-width:900px){ .clVid{padding:9px 11px;gap:9px} .clVidPlay{width:22px;height:22px} .clVidTx{font-size:11px} } .clPe{margin:2px 0 0;font-size:12.5px;line-height:1.6;color:rgba(245,245,243,.5)} .clPe b{color:rgba(245,245,243,.82);font-weight:600} /* No celular o vao e de 29px, nao 418: o bloco vira compacto em vez de sumir. A informacao continua valendo — o que some e o espaco que nao existe la. */ /* No celular a coluna unica se mantem, so mais baixa. Tentei grade 2x2 antes: cada cartao ficava com ~133px uteis e "DGX SPARK" + "NO 01" quebravam em duas linhas cada um. Uma coluna a 334px cabe folgada e ainda le como rack, que e o ponto do desenho. */ @media (max-width:900px){ .pxCluster{gap:10px;margin-bottom:16px} .clRack{gap:6px} .clNo{gap:10px;padding:9px 11px;font-size:11px} .clNo b{white-space:nowrap} .clNo s{font-size:10px;letter-spacing:.1em;white-space:nowrap} .clNo u{display:none} .clGrelha{width:24px;height:17px} .clPe{font-size:11.5px} .clVidTx s{font-size:10px} } .pxBaixo{margin-top:auto} .pxBarra{margin:22px auto 8px} .pxDir .loteline{color:rgba(245,245,243,.62);text-align:center} .pxDir .loteline b{color:#F5F5F3} .pxDir .loteline s{color:rgba(245,245,243,.45)} .pxDir .barra{background:rgba(255,255,255,.16)} .pxBaixo{text-align:center} .pxBaixo .pxDe{text-align:center} .pxBaixo .pxPreco{justify-content:center} .pxLote s{color:rgba(245,245,243,.4)} .pxPorque{background:rgba(255,255,255,.05);border-radius:20px;padding:0;overflow:visible; display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:end;position:relative} .pqTx{padding:44px 8px 44px 44px} .pxPorque .txt strong{color:#F5F5F3} .pqFoto{position:relative;align-self:end;display:flex;justify-content:center;min-width:0;max-width:100%} .pqTx{min-width:0} .ticket{max-width:100%} .pqFoto i{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:78%;aspect-ratio:1;border-radius:50%; background:radial-gradient(50% 50% at 50% 50%,rgba(255,58,36,.32),transparent 70%);filter:blur(12px)} .ticket{position:relative;width:min(100%,300px);background:#F5F4F1;border-radius:18px; transform:rotate(5deg);margin:40px 0 44px; box-shadow:0 30px 60px rgba(0,0,0,.5),inset 0 1px 0 #fff; transition:transform .5s var(--e)} .pxPorque:hover .ticket{transform:rotate(2deg) translateY(-8px)} .tkAlto{padding:28px 26px 20px} .tkLogo{width:72%;height:auto;display:block;margin-bottom:16px} .tkData{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.1em;color:rgba(20,19,18,.55);line-height:1.7} .tkPicote{position:relative;border-top:2px dashed rgba(20,19,18,.25);margin:0 10px} .tkPicote::before,.tkPicote::after{content:"";position:absolute;top:-13px;width:26px;height:26px;border-radius:50%;background:#1A1A1B} .tkPicote::before{left:-23px} .tkPicote::after{right:-23px} .tkBaixo{padding:20px 26px 26px} .tkPreco{display:flex;align-items:baseline;gap:5px;color:var(--fogo);font-weight:700;letter-spacing:-.03em} .tkPreco small{font-size:20px} .tkPreco span{font-size:56px;line-height:1} .tkPreco u{text-decoration:none;font-size:26px;font-weight:700} .tkLote{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.14em;color:rgba(20,19,18,.55);margin:8px 0 16px} .tkBarra{height:38px;background:repeating-linear-gradient(90deg,#141312 0 2px,transparent 2px 5px,#141312 5px 6px,transparent 6px 9px)} @media(max-width:1150px){.pqTx{padding:36px 10px 36px 32px} .ticket{width:min(100%,258px)} .tkPreco span{font-size:46px}.tkBarra{height:32px}} @media(max-width:900px){.pxPorque{grid-template-columns:minmax(0,1fr)}.pqTx{padding:32px 24px 4px} .pqFoto{width:100%;overflow:hidden;border-radius:0 0 20px 20px} .ticket{margin:20px auto 34px;width:min(78%,270px);transform:rotate(3deg)}} .pxPorque .txt p{color:rgba(245,245,243,.66)} @media(max-width:940px){.pxCard{grid-template-columns:1fr}.pxDir{margin:0 8px 8px}} .box{background:#fff;border:1px solid var(--fio);border-radius:20px;padding:48px;text-align:center; box-shadow:0 30px 70px rgba(20,19,18,.08)} .box .val{font-size:76px;font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--tinta);margin:8px 0 6px} .box .val small{font-size:30px;font-weight:600;vertical-align:super;margin-right:4px} .box .ob{font-size:16px;color:var(--fraco);margin-bottom:34px} .inclui{list-style:none;text-align:left;max-width:440px;margin:36px auto 0;padding-top:30px;border-top:1px solid var(--fio)} .inclui li{font-size:16px;padding-left:28px;position:relative;margin-bottom:14px;color:var(--corpo)} .inclui li:last-child{margin-bottom:0} .inclui li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--fogo)} .inclui li b{color:var(--tinta);font-weight:500} /* lote */ .barra{height:8px;border-radius:100px;background:rgba(20,19,18,.16);width:100%;margin:18px 0 8px;position:relative} .barra i,.fbar i{display:block;height:100%;border-radius:100px; background-image:linear-gradient(90deg,#61CE70,#9BCB55 24%,#F59E0B 52%,#EF4444 84%,#C11919); background-repeat:no-repeat;transition:width 1.1s var(--e)} .chama{position:absolute;top:50%;left:0;transform:translate(-50%,-54%);font-size:16px;font-style:normal; transition:left 1.1s var(--e);filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));pointer-events:none} .loteline{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--fraco);width:100%;text-align:center} .loteline b{color:var(--tinta);font-weight:600} .loteline s{color:var(--fraco)} /* faq */ .faqCli{display:flex;flex-direction:column;gap:14px} .fq2{} .fqQ{width:100%;box-sizing:border-box;display:flex;align-items:center;gap:16px;padding:23px clamp(24px,2.4vw,40px);cursor:pointer; background:#FFF;border:1px solid rgba(17,16,15,.13);border-radius:16px;text-align:left; font-family:inherit;font-size:17px;font-weight:500;color:var(--tinta); transition:border-color .22s,box-shadow .22s} .fqQ:hover{border-color:rgba(17,16,15,.30)} .fq2.aberta .fqQ{border-color:rgba(17,16,15,.32);box-shadow:0 12px 34px rgba(17,16,15,.07)} .fqTx{flex:1} .fqCur{display:inline-block;width:2px;height:1.15em;background:var(--tinta);vertical-align:text-bottom;margin-left:3px;opacity:0} .fq2.aberta .fqCur,.fqQ:hover .fqCur{opacity:1;animation:pisca 1.05s steps(1) infinite} .fqEnter{flex:none;color:rgba(17,16,15,.35);display:grid;place-items:center} .fqEnter svg{width:19px;height:19px} .fq2.aberta .fqEnter{color:var(--fogo)} .fqA{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1)} .fq2.aberta .fqA{grid-template-rows:1fr} .fqAin2{overflow:hidden;min-height:0;padding:0 clamp(10px,1.2vw,22px)} .fqBarra{display:flex;align-items:center;gap:15px;padding:13px 6px 0;color:rgba(17,16,15,.45); opacity:0;transform:translateY(-4px);transition:opacity .4s .12s,transform .4s .12s} .fq2.aberta .fqBarra{opacity:1;transform:none} .fqChip{background:rgba(199,157,54,.16);color:#8A6D1F;font-size:14px;font-weight:500;padding:6px 13px;border-radius:9px} .fqIco{display:grid;place-items:center} .fqIco svg{width:18px;height:18px} .fqDir{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:14px;color:rgba(17,16,15,.6)} .fqDir b{font-weight:500} .fqSpin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(59,130,246,.25);border-top-color:#3B82F6;animation:gira .9s linear infinite} @keyframes gira{to{transform:rotate(360deg)}} .fqResp{padding:26px 6px 12px} .fqMeta{display:flex;align-items:center;gap:13px;margin-bottom:15px} .fqAst{flex:none;display:grid;place-items:center} .fqAst img{width:19px;height:19px;display:block} .fq2.aberta:not(.pronta) .fqAst img{animation:pensaAst 1.4s ease-in-out infinite} @keyframes pensaAst{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.18) rotate(180deg)}} .fqMetaTx{font-size:14.5px;color:rgba(17,16,15,.55)} .fq2.aberta:not(.pronta) .fqMetaTx{background:linear-gradient(90deg,rgba(17,16,15,.30) 25%,rgba(17,16,15,.80) 50%,rgba(17,16,15,.30) 75%); background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brilha 1.3s linear infinite} @keyframes brilha{to{background-position:-200% 0}} .fqResp p{margin:0;padding-left:32px;font-size:16px;line-height:1.65;color:rgba(17,16,15,.8);max-width:62em} .fqResp p .pc{opacity:0;font-style:normal} .fqResp p .pc.on{opacity:1} .fqDigCur{display:inline-block;width:2px;height:1em;background:var(--tinta);vertical-align:-2px;margin-left:1px} @media(max-width:720px){.fqQ{padding:17px 16px;font-size:15px;gap:10px} .fqBarra{gap:11px}.fqIco:nth-of-type(2){display:none} .fqResp{padding:22px 2px 10px}.fqResp p{padding-left:0}} footer{padding:var(--vDobra) 0 44px;font-size:14px;color:rgba(245,245,243,.42); background:#000;margin:8px 8px 0;border-radius:28px 28px 0 0} @media(max-width:720px){footer{margin:0;border-radius:0;padding:var(--vDobra) 0 34px} .rodMarca{display:none} .rodLogoMob{display:block;height:34px;width:auto;margin:30px 0 28px}} .rodTopo{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; padding-bottom:34px;border-bottom:1px solid rgba(245,245,243,.12)} .rodLb{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.14em;color:rgba(245,245,243,.5)} .rodCta{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.14em; color:#F5F5F3;text-decoration:none;border-bottom:1px solid var(--fogo);padding-bottom:4px;transition:color .3s var(--e)} .rodCta:hover{color:var(--fogo)} .rodLogoMob{display:none} .rodMarca{position:relative;margin:44px 0 36px;cursor:default} .rodMarca img{width:100%;height:auto;display:block; filter:grayscale(1) brightness(.30) contrast(1.15); transition:opacity .18s linear,filter .5s var(--e)} .rodMarca:hover img{filter:grayscale(1) brightness(.42) contrast(1.15)} .rodMarca canvas{position:absolute;pointer-events:none;opacity:0;transition:opacity .18s linear;z-index:2} .rodMarca.ativa img{opacity:0} .rodMarca.ativa canvas{opacity:1} .rodBaixo{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; padding-top:26px;border-top:1px solid rgba(245,245,243,.12);font-size:13px} .rodDir{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .rodWa{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:100px; background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.35);color:#25D366;text-decoration:none; font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; transition:background .3s var(--e),transform .3s var(--e)} .rodWa:hover{background:rgba(37,211,102,.18);transform:translateY(-2px)} .rodWa svg{width:16px;height:16px;flex:none} .rodAss{display:inline-flex;align-items:center;gap:9px;text-decoration:none;opacity:.5;transition:opacity .3s var(--e)} .rodAss:hover{opacity:1} .rodAss span{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.14em;color:rgba(245,245,243,.55)} .rodAss svg{height:16px;width:auto;display:block;color:#F5F5F3} @media(max-width:720px){.rodBaixo{flex-direction:column;align-items:flex-start;gap:20px} .rodDir{width:100%;justify-content:space-between}} /* certificado */ .certGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,5vw,90px);align-items:center} .certTx .certOut{margin-top:34px;max-width:440px;color:var(--tinta); background:repeating-linear-gradient(135deg,rgba(20,19,18,.05) 0 3px,transparent 3px 10px)} .certTx .certOut .seta{background:var(--tinta);color:#fff} .certPeca{perspective:1400px} .cert{position:relative;background:linear-gradient(160deg,#FFFFFF,#F4F2ED);border-radius:14px; padding:38px 40px 30px;display:flex;flex-direction:column;gap:26px; box-shadow:0 40px 80px rgba(20,19,18,.20),0 2px 0 rgba(255,255,255,.9) inset; transform:rotateY(-9deg) rotateX(4deg) rotate(-1.5deg);transform-origin:center; transition:transform .7s var(--e),box-shadow .7s var(--e)} .certPeca:hover .cert{transform:rotateY(0deg) rotateX(0deg) rotate(0deg);box-shadow:0 50px 90px rgba(20,19,18,.26)} .cert::before{content:"";position:absolute;inset:12px;border:1px solid rgba(20,19,18,.14);border-radius:8px;pointer-events:none} .cert::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;opacity:.5; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.7) 45%,transparent 60%)} .certTopo{display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;z-index:2} .certLogo{height:26px;width:auto} .certEd{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.16em;color:rgba(20,19,18,.45)} .certMeio{position:relative;z-index:2} .certLb{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700; letter-spacing:.2em;color:var(--fogo);margin-bottom:14px} .certNome{display:block;font-size:clamp(26px,2.6vw,40px);font-weight:700;letter-spacing:-.03em;color:var(--tinta); padding-bottom:12px;border-bottom:1px dashed rgba(20,19,18,.25);margin-bottom:16px} .certTexto{font-size:14.5px;line-height:1.55;color:rgba(20,19,18,.62);max-width:34em} .certTexto b{color:var(--tinta);font-weight:600} .certBaixo{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;position:relative;z-index:2} .certAss{display:flex;align-items:center;gap:12px} .certAss>img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--fogo);padding:2px;background:#fff} .certMono[hidden]{display:none!important} .certMono{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--fogo-cheio);color:#fff;font-style:normal;font-family:'Inter Tight',sans-serif; font-size:14px;font-weight:700;letter-spacing:.02em} .certAss span{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--tinta)} .certAss small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.12em;color:rgba(20,19,18,.4);margin-top:4px} .certSelo{position:relative;width:62px;height:62px;border-radius:50%;display:grid;place-items:center; background:var(--fogo-cheio);color:#fff;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700; box-shadow:0 10px 22px rgba(255,58,36,.35)} .certSelo i{position:absolute;inset:5px;border:1px dashed rgba(255,255,255,.55);border-radius:50%} @media(max-width:900px){.certGrid{grid-template-columns:1fr;gap:36px} .cert{transform:none;padding:30px 26px 24px} .rodTopo{flex-direction:column;align-items:flex-start;gap:16px}} /* mobile: curativos até a dobra dedicada */ @media(max-width:1020px){ .qtopo{position:static !important;margin:0 0 26px;gap:14px} .qcard .in{padding:40px 20px 0} .qcard h1{font-size:clamp(26px,7.8vw,34px);max-width:none} .qcard .lead{font-size:16px} .qvideo .qbandtop{flex-wrap:wrap !important;row-gap:4px;justify-content:center;left:10px;right:10px;top:10px;padding:10px 12px} .qbandtop b{font-size:10px} .term{min-width:0;width:100%} .term .tx{min-width:0;font-size:12px} .qbandtop{gap:10px;padding:12px 14px} .qbandtop b{font-size:10px;letter-spacing:.08em;white-space:nowrap} .loteline{font-size:10px;letter-spacing:.04em;white-space:nowrap} .qvideo{min-height:64vh} .entPin{padding:36px 0 30px} .entPinTopo{padding:0 20px} .entCarros{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0; -webkit-overflow-scrolling:touch;scrollbar-width:none;margin-top:26px} .entCarros::-webkit-scrollbar{display:none} .entSlide{flex:0 0 100%;scroll-snap-align:center;padding:0 20px;box-sizing:border-box} .entSlide .entTitulo{font-size:clamp(38px,10.5vw,54px);line-height:.98;letter-spacing:-.045em;margin-bottom:16px} .entSlide .entTitulo em{font-size:12px} .entSlide .entPinSub{font-size:16px;color:rgba(245,245,243,.6)} .entDots{padding:0 20px;margin-top:22px} .entPinTopo{position:static;margin-bottom:22px} .entTitulo{min-height:0} .ent{padding:64px 24px;min-height:0} } /* respiros da dobra do problema no celular (fica por último pra vencer as regras acima) */ @media(max-width:720px){ .secProb .manifAlto{margin-top:0!important;height:auto!important} .secProb .manifPin{padding:0!important} .secProb .manifesto{margin:64px auto 0!important;padding-bottom:0!important} .secProb{padding-bottom:96px!important} .secProb + section, .secProb + .entSec{margin-top:10px!important} .secProb .duo{gap:34px!important} } /* ============================================================ ALL MAX — capa clicavel de video (fachada do YouTube) Nenhum script do Google carrega ate o clique, e a capa e auto-hospedada: o IP do visitante so chega ao YouTube se ele decidir assistir. Coerente com a postura de LGPD da casa. ============================================================ */ .ytCapa{position:relative;display:block;width:100%;height:100%;padding:0;border:0; background:#0B0B0D;cursor:pointer;overflow:hidden;border-radius:inherit} .ytCapa img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .6s var(--e),filter .4s var(--e)} .ytCapa:hover img{transform:scale(1.02);filter:brightness(.86)} .ytCapa:focus-visible{outline:3px solid var(--fogo);outline-offset:-3px} .ytPlay{position:absolute;left:50%;top:50%;translate:-50% -50%;width:84px;height:84px; border-radius:50%;background:var(--fogo-cheio); box-shadow:0 10px 34px rgba(74,56,224,.42),inset 0 0 0 1px rgba(255,255,255,.22); display:grid;place-items:center;transition:transform .3s var(--e),background .3s var(--e)} .ytPlay::before{content:"";width:0;height:0;margin-left:5px; border-left:24px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent} .ytCapa:hover .ytPlay{transform:scale(1.07)} .ytCapa iframe,.ytCapa.tocando picture{display:none} .ytCapa.tocando{cursor:default} .ytCapa.tocando iframe{display:block;position:absolute;inset:0;width:100%;height:100%;border:0} .ytCapa.tocando .ytPlay{display:none} @media (prefers-reduced-motion:reduce){.ytCapa img,.ytPlay{transition:none}} /* o quadro e vertical: object-position no topo mantem o rosto enquadrado quando o slot fica mais quadrado que 9:16 no desktop (0,64) */ .ytCapa img{object-position:50% 22%} /* ============================================================ ALL MAX — pagina das 12 ofertas nao vende ingresso A maquina de lote (barra, porcentagem, preco que sobe) e um mecanismo de escassez de evento. Sem evento, exibi-la seria escassez inventada. Fica oculta aqui e intacta no codigo, para a pagina do workshop, onde o lote e real. ============================================================ */ .barra, .loteline, .chama, .fbar, [data-lote-barra], [data-lote-pct], [data-lote-num], [data-preco], [data-proximo], [data-cheio]{ display:none !important; } /* ============================================================ ALL MAX — faixa de clientes Os logos vem de 11 marcas diferentes, em fundo claro e escuro, com proporcoes de 1:1 a 4:1. Sem normalizacao a faixa vira colcha de retalho: altura fixa, largura livre e um filtro que iguala o peso visual sem apagar a identidade de cada uma. ============================================================ */ .cli img{ /* 34px com opacity(.72) apagava marca de traco fino: a DPO MAX e a Consentify sao letra vazada, e sub-pixel + transparencia some. Subiu para 44px e o `contrast` passou a ADENSAR em vez de aliviar. `brightness()` foi descartado: escurece o fundo branco do PNG da Consentify e revela uma caixa cinza que nao existe na marca. */ height:44px; width:auto; max-width:180px; object-fit:contain; filter:grayscale(1) contrast(1.5); transition:filter .3s var(--e); } .cli:hover img{ filter:none; } @media (max-width:820px){ .cli img{ height:32px; max-width:132px } } /* ============================================================ PARCEIROS INTEGRADOS Superficie ESCURA. Os 16 arquivos sao heterogeneos (SVG colorido, PNG branco, PNG colorido, wordmark, simbolo). `brightness(0) invert(1)` achata QUALQUER um deles para branco puro, entao um filtro so resolve as 16 marcas como um sistema unico. Parceiro NAO revela cor no hover, de proposito: cliente e prova (ganha cor na faixa de cima), parceiro e infraestrutura (fica monocromatico). Sem isso a secao vira salada de logo colorido — exatamente o que foi recusado. ============================================================ */ .pcGrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(245,245,243,.10); border:1px solid rgba(245,245,243,.10); border-radius:18px; overflow:hidden; margin-top:54px; } @media(max-width:1100px){ .pcGrid{grid-template-columns:repeat(3,1fr)} } @media(max-width:760px){ .pcGrid{grid-template-columns:repeat(2,1fr)} } .pcCard{ background:var(--escuro); padding:26px 22px 22px; display:flex; flex-direction:column; gap:13px; min-height:134px; transition:background .3s var(--e) } .pcCard:hover{ background:#1C1D21 } .pcLogo{ height:26px; display:flex; align-items:center } .pcLogo img{ height:100%; width:auto; max-width:134px; object-fit:contain; object-position:left center; filter:brightness(0) invert(1); opacity:.62; transition:opacity .3s var(--e) } .pcCard:hover .pcLogo img{ opacity:1 } /* marca sem arquivo de logo: fecho tipografico na mesma altura optica */ .pcLogo b{ font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:700; letter-spacing:-.02em; color:rgba(245,245,243,.62); transition:color .3s var(--e) } .pcCard:hover .pcLogo b{ color:#F5F5F3 } .pcNome{ font-size:14px; font-weight:600; letter-spacing:-.01em; color:rgba(245,245,243,.92) } .pcFn{ font-size:12.5px; line-height:1.4; color:rgba(245,245,243,.52); margin-top:-6px } .pcNota{ max-width:64ch; margin:30px auto 0; text-align:center; font-size:14px; line-height:1.6; color:rgba(245,245,243,.46) } .pcNota b{ color:rgba(245,245,243,.72); font-weight:600 } /* Peso optico: altura igual NAO da presenca igual. Um simbolo compacto (Stripe, Google, Meta) precisa ser maior que um wordmark (ASAAS, Microsoft) para pesar o mesmo na grade. Tres classes, nao uma. */ .pcCard[data-marca="simbolo"] .pcLogo{ height:29px } .pcCard[data-marca="simbolo"] .pcLogo img{ max-width:46px } .pcCard[data-marca="palavra"] .pcLogo{ height:22px } .pcCard[data-marca="largo"] .pcLogo{ height:31px } .pcCard[data-marca="largo"] .pcLogo img{ max-width:172px } /* ---- hero: texto complementar e CTA secundário (§5 do brief) ---- */ /* O complementar fala com quem NAO e tecnico. Vem depois da promessa, em tom mais baixo, medida mais curta: e o paragrafo que so e lido se a promessa pegou. */ .leadComp{font-size:16px;line-height:1.62;max-width:560px;font-weight:300; margin:18px 0 30px;padding-left:16px;border-left:1px solid var(--fio); color:var(--corpo)} [data-superficie="escura"] .leadComp,.faixa .leadComp{border-left-color:rgba(245,245,243,.14)} .term2{display:inline-flex;align-items:center;gap:9px;align-self:flex-start; margin-top:14px;padding:13px 20px;border-radius:12px; border:1px solid var(--fio);background:transparent; font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;text-decoration:none; color:var(--tinta);transition:border-color .25s var(--e),color .25s var(--e)} .term2:hover{border-color:var(--fogo);color:var(--fogo)} .term2 span{color:var(--fogo)} @media(max-width:820px){.term2{align-self:stretch;justify-content:center}} /* ============================================================ RODAPE INSTITUCIONAL Transposto do site em producao: 0800, tres enderecos, CNPJ, bloco do Encarregado, selos, Workloop/AISAC e os quatro documentos legais. Superficie ESCURA (o footer herda o fundo do body), entao o texto usa a escala clara e o acento e o violeta claro — ver o bloco de superficies no topo deste arquivo. ============================================================ */ .rodBlurb{max-width:70ch;margin:36px 0 42px;font-size:16px;line-height:1.6; color:rgba(245,245,243,.62)} .rodGrade{display:grid;grid-template-columns:1.1fr .9fr 1.3fr .8fr; gap:clamp(24px,3.2vw,46px);align-items:start} @media(max-width:1080px){.rodGrade{grid-template-columns:1fr 1fr}} @media(max-width:620px){.rodGrade{grid-template-columns:1fr;gap:30px}} .rodCol{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700; letter-spacing:.17em;text-transform:uppercase;color:rgba(245,245,243,.46); margin:0 0 14px} .rodGrade ul,.rodDpo ul{list-style:none;margin:0;padding:0} .rodGrade li{margin-bottom:9px;font-size:14px;line-height:1.5} .rodGrade a{color:rgba(245,245,243,.72);text-decoration:none;transition:color .25s var(--e)} .rodGrade a:hover{color:var(--fogo)} /* a nota do telefone e legenda, nao continuacao do link */ .rodGrade li small{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px; letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,243,.42);margin-top:2px} .rodEnd li{color:rgba(245,245,243,.6);font-size:13.5px;line-height:1.55;margin-bottom:11px} .rodEnd strong{display:block;color:rgba(245,245,243,.88);font-weight:600} .rodCnpj{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em; padding-top:10px;border-top:1px solid rgba(245,245,243,.12)} .rodSelos{display:flex;flex-wrap:wrap;gap:7px} .rodSelos li{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:rgba(245,245,243,.6); border:1px solid rgba(245,245,243,.14);border-radius:100px;padding:5px 11px;margin:0} .rodDpo,.rodSpec{max-width:92ch;margin-top:38px;padding-top:26px; border-top:1px solid rgba(245,245,243,.12)} .rodDpo p,.rodSpec p{margin:0 0 .65em;font-size:13.5px;line-height:1.65; color:rgba(245,245,243,.56)} .rodDpo strong,.rodSpec strong{color:rgba(245,245,243,.84);font-weight:600} .rodDpo a,.rodSpec a{color:var(--fogo);text-decoration:underline} .rodCred{margin-top:12px} .rodLegais{display:inline-flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline; font-size:12.5px} .rodLegais a{color:rgba(245,245,243,.6);text-decoration:underline; text-underline-offset:.2em;transition:color .25s var(--e)} .rodLegais a:hover{color:var(--fogo)} .rodLegais i{font-style:normal;opacity:.35;color:rgba(245,245,243,.6)} /* ============================================================ PAGINAS LEGAIS Politica e termo nao sao landing: sao lidos em sequencia, do inicio ao fim, as vezes com o advogado do cliente do outro lado. A tipografia aqui serve LEITURA LONGA — medida curta, entrelinha alta, hierarquia de secao clara e tabela legivel (sao 14 tabelas so na politica de privacidade). SUPERFICIE CLARA de proposito. `section` no lp/ ja e papel, e papel e melhor para ler 38 KB de texto do que fundo preto. So o cabecalho fica escuro, para separar do documento. ============================================================ */ .pgLegal{background:#0B0B0D} .pular{position:absolute;left:-9999px;padding:12px 20px;background:var(--escuro); color:#F5F5F3;border-radius:10px;z-index:200} .pular:focus{left:16px;top:16px} .legalTopo{position:sticky;top:0;z-index:60;background:rgba(11,11,13,.9); backdrop-filter:blur(14px);border-bottom:1px solid rgba(245,245,243,.10)} .legalTopo .w{display:flex;align-items:center;gap:clamp(16px,4vw,54px); flex-wrap:wrap;padding-block:14px} .legalMarca img{height:26px;width:auto;display:block} .legalNav{display:flex;flex-wrap:wrap;gap:4px} .legalNav a{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;text-decoration:none; color:rgba(245,245,243,.52);padding:8px 13px;border-radius:100px; transition:color .25s var(--e),background .25s var(--e)} .legalNav a:hover{color:#F5F5F3;background:rgba(245,245,243,.07)} .legalNav a.atual{color:var(--fogo-claro);background:rgba(147,112,255,.14)} /* dali para baixo e papel: as cores voltam a ser as da superficie clara */ .legalHero{padding:clamp(54px,8vw,96px) 0 clamp(20px,3vw,34px)} .legalHero .lead{margin-top:20px;color:var(--corpo)} .legalOrigem{margin-top:22px;font-family:'JetBrains Mono',monospace;font-size:10.5px; letter-spacing:.12em;text-transform:uppercase;color:var(--corpo)} .legalCorpo{padding-top:0;padding-bottom:clamp(56px,8vw,110px)} .legal{max-width:74ch;color:var(--corpo);font-size:16px;line-height:1.72} .legal h2{font-size:clamp(21px,2.2vw,28px);line-height:1.2;letter-spacing:-.03em; font-weight:700;color:var(--tinta);margin:56px 0 14px;padding-top:26px; border-top:1px solid var(--fio);text-wrap:balance} .legal h2:first-child{margin-top:0;padding-top:0;border-top:0} .legal h3{font-size:clamp(17px,1.7vw,20px);line-height:1.3;letter-spacing:-.02em; font-weight:600;color:var(--tinta);margin:32px 0 10px} .legal h4{font-size:16px;font-weight:600;color:var(--tinta);margin:24px 0 8px} .legal p{margin:0 0 1.05em} .legal strong{color:var(--tinta);font-weight:600} .legal a{color:var(--fogo);text-decoration:underline} .legal ul,.legal ol{margin:0 0 1.05em;padding-left:1.35em} .legal li{margin:0 0 .5em} .legal li::marker{color:var(--fraco)} /* tabela rola sozinha no estreito em vez de estourar a pagina */ .legal table{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:14.5px; line-height:1.5;display:block;overflow-x:auto} @media(min-width:720px){ .legal table{display:table} } .legal th,.legal td{text-align:left;vertical-align:top;padding:11px 14px; border:1px solid var(--fio)} .legal th{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em; /* --fraco daria 2,55:1 sobre o papel: cabecalho de tabela e texto funcional, entao usa --corpo, que da 5,77:1 */ text-transform:uppercase;color:var(--corpo);font-weight:700; background:rgba(20,19,18,.045)} .legal tbody tr:nth-child(even) td{background:rgba(91,73,245,.045)} /* ============================================================ CINCO PORTAS DE ENTRADA O visitante nao sabe que tecnologia quer; sabe que dor tem. Cada porta e uma dor nomeada e so depois vira link tecnico. A numeracao 01..05 nao e enfeite: as portas SAO ordenadas, da dor mais comum (trabalho repetitivo) para a mais especializada (conformidade). Quem le de cima para baixo encontra a sua antes. Superficie CLARA — a secao anterior ("O problema") e escura, entao aqui o alternador de superficie ja devolve o violeta escuro por conta propria. ============================================================ */ .portas{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:48px} @media(max-width:900px){.portas{grid-template-columns:1fr}} /* a quinta ocupa a linha inteira: e a de maior ticket e a que sustenta contrato regulado, entao nao fica orfa num canto */ @media(min-width:901px){.porta:last-child{grid-column:1 / -1}} .porta{background:var(--papel2);border:1px solid var(--fio);border-radius:20px; padding:clamp(26px,2.6vw,38px);display:flex;flex-direction:column;gap:14px; transition:border-color .3s var(--e),transform .3s var(--e)} .porta:hover{border-color:rgba(91,73,245,.34);transform:translateY(-2px)} .portaN{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700; letter-spacing:.18em;color:var(--fogo)} .portaT{font-size:clamp(21px,2.2vw,28px);line-height:1.14;letter-spacing:-.035em; font-weight:700;color:var(--tinta);margin:0;text-wrap:balance} .portaD{font-size:15.5px;line-height:1.6;color:var(--corpo);margin:0;max-width:54ch} .portaPar{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:4px 0 0} .portaPar dt{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700; /* --fraco da 2,59:1 sobre o card branco e reprova. Rotulo que nomeia o conteudo e texto funcional, entao usa --corpo: 5,99:1. */ letter-spacing:.13em;text-transform:uppercase;color:var(--corpo); padding-top:3px;white-space:nowrap} .portaPar dd{font-size:15px;line-height:1.55;color:var(--tinta);margin:0} .portaLinks{list-style:none;margin:14px 0 0;padding:16px 0 0; border-top:1px solid var(--fio);display:flex;flex-direction:column;gap:9px} .portaLinks a{display:inline-flex;align-items:baseline;gap:9px;font-size:14.5px; line-height:1.4;color:var(--corpo);text-decoration:none; transition:color .25s var(--e)} .portaLinks a span{color:var(--fogo);transition:transform .25s var(--e)} .portaLinks a:hover{color:var(--fogo)} .portaLinks a:hover span{transform:translateX(3px)} /* ============================================================ CONTROLE E CONFIANCA §6 do brief: o BENEFICIO vem primeiro. O nome "catraca de governanca" so aparece no fecho do bloco, depois que a pessoa ja entendeu o que ganha — e marcado como mecanismo interno, nao como oferta a parte. Superficie ESCURA: o alternador devolve o violeta claro sozinho. ============================================================ */ .ctrGrade{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:46px; background:rgba(245,245,243,.12);border:1px solid rgba(245,245,243,.12); border-radius:20px;overflow:hidden} @media(max-width:760px){.ctrGrade{grid-template-columns:1fr}} .ctrItem{background:var(--escuro);padding:clamp(24px,2.4vw,34px); display:flex;flex-direction:column;gap:11px} .ctrN{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700; letter-spacing:.18em;color:var(--fogo)} .ctrT{font-size:clamp(17px,1.7vw,21px);line-height:1.24;letter-spacing:-.028em; font-weight:600;color:#F5F5F3;margin:0;text-wrap:balance} .ctrD{font-size:14.5px;line-height:1.6;color:rgba(245,245,243,.62);margin:0} .ctrNome{max-width:62ch;margin-top:28px;font-size:15px;line-height:1.6; color:rgba(245,245,243,.62)} .ctrNome em{font-style:normal;color:var(--fogo);font-weight:600} /* ============================================================ PAGINAS DE OFERTA Reusa a alternancia de superficie da home (`section` e papel, `.faixa` e escura), entao o violeta troca sozinho a cada bloco. O que muda aqui e a densidade: pagina de oferta e lida por quem ja tem o problema, entao informacao por tela pesa mais que respiro. ============================================================ */ .solHero{padding:clamp(40px,6vw,76px) 0 clamp(30px,4vw,52px)} .solVolta{display:inline-flex;align-items:center;gap:8px;margin-bottom:26px; font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;text-decoration:none; color:var(--corpo);transition:color .25s var(--e)} .solVolta:hover{color:var(--fogo)} .solHero .lb{display:block;margin-bottom:18px} .solHero .lead{margin-top:22px} .solProb{max-width:66ch;margin-top:20px;font-size:clamp(17px,1.8vw,21px); line-height:1.55;color:rgba(245,245,243,.78)} .solQuando{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px} @media(max-width:760px){.solQuando{grid-template-columns:1fr}} .solQBloco{background:var(--papel2);border:1px solid var(--fio);border-radius:18px; padding:clamp(22px,2.2vw,30px)} .solQBloco--nao{background:transparent} .solQT{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--tinta);margin:0 0 14px} .solQBloco ul{list-style:none;margin:0;padding:0} .solQBloco li{position:relative;padding-left:22px;margin-bottom:10px; font-size:15px;line-height:1.55;color:var(--corpo)} .solQBloco li::before{content:"";position:absolute;left:0;top:.62em; width:9px;height:2px;background:var(--fogo);border-radius:2px} .solQBloco--nao li::before{background:var(--fraco)} .solEsc{list-style:none;margin:30px 0 0;padding:0; display:grid;grid-template-columns:repeat(2,1fr);gap:1px; background:var(--fio);border:1px solid var(--fio);border-radius:18px;overflow:hidden} @media(max-width:760px){.solEsc{grid-template-columns:1fr}} .solEsc li{background:var(--papel);padding:18px 22px;font-size:15px; line-height:1.5;color:var(--corpo)} .solPassos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px;margin-top:38px;background:rgba(245,245,243,.12); border:1px solid rgba(245,245,243,.12);border-radius:18px;overflow:hidden} .solPasso{background:var(--escuro);padding:26px 22px;display:flex; flex-direction:column;gap:9px} .solPn{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700; letter-spacing:.18em;color:var(--fogo)} .solPt{font-size:17px;font-weight:600;letter-spacing:-.02em;color:#F5F5F3;margin:0} .solPd{font-size:14px;line-height:1.55;color:rgba(245,245,243,.62);margin:0} /* tabela rola sozinha no estreito em vez de estourar a pagina */ .solTabWrap{margin-top:32px;overflow-x:auto;border:1px solid var(--fio); border-radius:18px} .solTab{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5; min-width:560px} .solTab th,.solTab td{text-align:left;vertical-align:top;padding:13px 16px; border-bottom:1px solid var(--fio)} .solTab th{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--corpo);font-weight:700;background:rgba(20,19,18,.04)} .solTab td{color:var(--corpo)} .solTab td:first-child{color:var(--tinta);font-weight:500} .solTab tbody tr:last-child td{border-bottom:0} .solSeg{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:9px} .solSeg li{position:relative;padding-left:22px;font-size:15px;line-height:1.55; color:rgba(245,245,243,.72)} .solSeg li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px; background:var(--fogo);border-radius:2px} /* PROJECAO: o selo e visivel de proposito. Numero modelado nunca pode ser lido como resultado obtido — e a regra do §9. */ .solSelo{display:inline-block;margin:22px 0 0;padding:7px 14px;border-radius:100px; border:1px solid rgba(245,159,11,.42);background:rgba(245,159,11,.10); font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:#8A5A00} .solNums{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px;margin-top:32px} .solNum b{display:block;font-size:clamp(30px,3.6vw,46px);line-height:1; letter-spacing:-.04em;color:var(--fogo)} .solNum span{display:block;margin-top:9px;font-size:14px;line-height:1.5;color:var(--corpo)} .solNota{max-width:66ch;margin-top:26px;font-size:13.5px;line-height:1.6;color:var(--corpo)} .solFaqs{margin-top:30px;border-top:1px solid var(--fio)} .solFaq{border-bottom:1px solid var(--fio)} .solFaq summary{cursor:pointer;padding:20px 0;font-size:17px;font-weight:600; letter-spacing:-.02em;color:var(--tinta);list-style:none; display:flex;justify-content:space-between;gap:18px;align-items:baseline} .solFaq summary::-webkit-details-marker{display:none} .solFaq summary::after{content:"+";color:var(--fogo);font-weight:400;flex:none} .solFaq[open] summary::after{content:"–"} .solFaq p{margin:0 0 22px;max-width:70ch;font-size:15.5px;line-height:1.65;color:var(--corpo)} /* ---- agendar ---- */ /* ---- deixa de rolagem no fim do hero de /agendar/ ---- O hero ocupa a primeira tela inteira e o que vem depois — as tres vias de contato e a agenda — fica abaixo da dobra, em corpo pequeno. A deixa nao e so uma seta: e um LINK de verdade para #vias, entao alem de avisar que tem mais, ela leva. Sem JS o href sozinho ja funciona. */ .portasTodas{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(26px,3vw,40px); padding:14px 22px;border-radius:100px;text-decoration:none; border:1px solid var(--fio);color:var(--tinta); font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:700; letter-spacing:.1em;text-transform:uppercase; transition:background .25s var(--e),border-color .25s var(--e)} .portasTodas:hover{background:rgba(20,19,18,.05);border-color:var(--tinta)} .portasTodas:focus-visible{outline:3px solid var(--fogo);outline-offset:3px} .portasTodas i{font-style:normal;display:inline-block;transition:transform .25s var(--e)} .portasTodas:hover i{transform:translateX(4px)} @media (prefers-reduced-motion:reduce){.portasTodas,.portasTodas i{transition:none}} /* ---- hub /solucoes/ ---- Os cartoes reusam .ctrItem, que nasceu como bloco de TEXTO. Aqui eles viram LINK, e link precisa do que texto nao precisa: alvo inteiro clicavel, foco visivel e uma saida declarada. */ .hubPorta{padding-top:clamp(30px,3.6vw,54px);padding-bottom:clamp(30px,3.6vw,54px)} .hubH2{margin:12px 0 clamp(22px,2.4vw,34px);max-width:20em} .hubCard{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit; transition:background .25s var(--e),border-color .25s var(--e),transform .25s var(--e)} .hubCard:hover{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.2);transform:translateY(-2px)} .hubCard:focus-visible{outline:3px solid var(--fogo);outline-offset:3px} .hubIr{margin-top:auto;padding-top:12px;font-family:'JetBrains Mono',monospace; font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--fogo)} .hubIr i{font-style:normal;display:inline-block;transition:transform .25s var(--e)} .hubCard:hover .hubIr i{transform:translateX(4px)} @media (prefers-reduced-motion:reduce){ .hubCard,.hubIr i{transition:none} .hubCard:hover{transform:none} } .agDesce{display:inline-flex;align-items:center;gap:16px;margin-top:clamp(28px,3vw,40px); padding:14px 16px 14px 24px;border-radius:100px;text-decoration:none; background:var(--fogo-cheio);color:#fff; box-shadow:0 18px 40px -18px rgba(74,56,224,.75); transition:transform .3s var(--e),box-shadow .3s var(--e)} .agDesce:hover{transform:translateY(-2px);box-shadow:0 22px 48px -18px rgba(74,56,224,.9)} .agDesce:focus-visible{outline:3px solid var(--tinta);outline-offset:4px} .agDesceTx{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700; letter-spacing:.11em;text-transform:uppercase;line-height:1.3} .agDesceTx small{display:block;margin-top:3px;font-size:10.5px;font-weight:500; letter-spacing:.09em;color:rgba(255,255,255,.72);text-transform:none} /* a seta e desenhada em CSS: duas bordas giradas 45 graus. Uma imagem aqui seria um arquivo a mais para dois tracos. */ .agDesceSeta{position:relative;flex:none;width:38px;height:38px;border-radius:50%; background:#fff} .agDesceSeta::after{content:"";position:absolute;top:44%;left:50%;width:9px;height:9px; border-right:2.5px solid var(--fogo-cheio);border-bottom:2.5px solid var(--fogo-cheio); transform:translate(-50%,-50%) rotate(45deg)} /* anel pulsante: so BORDA, miolo transparente, `pointer-events:none` e sem z-index negativo — filho negativo pinta atras do fundo do ANCESTRAL, nao so do pai, e sumiria. */ .agDesceSeta::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none; border:2px solid rgba(255,255,255,.9);opacity:0} @media (prefers-reduced-motion:no-preference){ .agDesceSeta::after{animation:agDesceQuica 1.9s var(--e) infinite} .agDesceSeta::before{animation:agDesceAnel 1.9s ease-out infinite} } @keyframes agDesceQuica{ 0%,55%,100%{transform:translate(-50%,-50%) rotate(45deg)} 22%{transform:translate(-50%,-15%) rotate(45deg)} } /* teto 1.75: a bolinha tem 38px e vive a 16px da borda do botao. Em 2x o anel chegaria a 38px e vazaria; em 1.75 para em 33px, dentro. */ @keyframes agDesceAnel{ 0%{transform:scale(1);opacity:.85} 65%,100%{transform:scale(1.75);opacity:0} } @media (max-width:520px){ .agDesce{width:100%;justify-content:space-between;padding:13px 14px 13px 20px} .agDesceTx{font-size:12px} } /* o cabecalho e sticky (63px): sem isto o topo da secao encosta embaixo dele */ #vias{scroll-margin-top:82px} #vias:focus{outline:none} .agSelos{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:28px 0 0;padding:0} .agSelos li{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--corpo); border:1px solid var(--fio);border-radius:100px;padding:7px 14px} /* ============================================================ SEGURANCA, LGPD E REGULATORIO (§8 item 8) Superficie CLARA. Dois niveis: o que a ALL MAX faz DENTRO do projeto, e a plataforma para quando a empresa precisa sustentar um programa inteiro. O bloco da plataforma e visualmente separado de proposito — e outro produto, revendido licenciado ou em white label, nao um modulo do projeto. ============================================================ */ .segGrade{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:44px; background:var(--fio);border:1px solid var(--fio);border-radius:20px;overflow:hidden} @media(max-width:760px){.segGrade{grid-template-columns:1fr}} .segItem{background:var(--papel2);padding:clamp(24px,2.4vw,32px); display:flex;flex-direction:column;gap:10px} .segT{font-size:17px;font-weight:700;letter-spacing:-.025em;color:var(--tinta);margin:0} .segD{font-size:14.5px;line-height:1.6;color:var(--corpo);margin:0} .segPlat{display:grid;gap:clamp(24px,3vw,44px);margin-top:18px; padding:clamp(28px,3vw,44px);border:1px solid var(--fio);border-radius:20px; background:var(--papel2)} @media(min-width:900px){.segPlat{grid-template-columns:1.6fr .9fr;align-items:start}} .segPlatT{font-size:clamp(21px,2.2vw,28px);line-height:1.16;letter-spacing:-.035em; font-weight:700;color:var(--tinta);margin:14px 0 14px} .segPlatD{font-size:15.5px;line-height:1.62;color:var(--corpo);margin:0;max-width:58ch} .segMods{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:20px 0 0;padding:0} .segMods li{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--corpo); border:1px solid var(--fio);border-radius:100px;padding:6px 12px} .segPub{margin:22px 0 0;font-size:14.5px;line-height:1.6;color:var(--corpo);max-width:60ch} /* o vocabulario travado: "estruturado conforme", nunca "certificado" */ .segNota{margin:16px 0 0;font-size:12.5px;line-height:1.55;color:var(--corpo); padding-top:14px;border-top:1px solid var(--fio);max-width:60ch} .segPlatLink{display:flex;flex-direction:column;gap:20px;align-items:flex-start; padding:30px 28px;border:1px solid var(--fio);border-radius:18px;text-decoration:none; background:var(--papel2);transition:border-color .3s var(--e),box-shadow .3s var(--e); box-shadow:0 10px 30px -22px rgba(20,19,18,.5)} .segPlatLink:hover{box-shadow:0 16px 40px -22px rgba(91,73,245,.55)} .segPlatLink:hover{border-color:rgba(91,73,245,.4)} .segPlatLink img{height:58px;width:auto;max-width:100%;object-fit:contain} @media(max-width:820px){.segPlatLink img{height:46px}} .segPlatLink span{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--fogo); display:inline-flex;align-items:center;gap:8px} .segPlatLink i{font-style:normal;transition:transform .25s var(--e)} .segPlatLink:hover i{transform:translateX(3px)} /* ============================================================ TELA DA CATRACA Substitui a gravacao de tela do produto de OUTRA empresa que estava aqui. Feita em HTML/CSS e nao em video, de proposito: · texto perfeito em qualquer densidade de tela, e indexavel; · 0 byte de video (a gravacao anterior pesava 590 KB); · e mostra um fluxo REAL da ALL MAX, nao uma encenacao. O que ela demonstra e a tese da pagina: duas acoes passam pela regra, uma para e vai para uma pessoa, uma e bloqueada por falta de base legal. PARAR E RESULTADO VALIDO — por isso o contador diz "2 pararam" sem pedir desculpa. ============================================================ */ .telaCtc{padding:0} .telaCtc .in2{padding:18px} .ctcTopo{display:flex;align-items:baseline;justify-content:space-between;gap:14px; margin-bottom:14px;flex-wrap:wrap} .ctcLb,.ctcCont{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700; letter-spacing:.14em;text-transform:uppercase} .ctcLb{color:rgba(245,245,243,.72)} .ctcCont{color:rgba(245,245,243,.52)} .ctcCont b{color:var(--fogo-claro);font-weight:700} .ctc{display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:baseline; padding:13px 15px;margin-bottom:8px;border-radius:12px; background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07); border-left-width:2px} @media(max-width:620px){.ctc{grid-template-columns:1fr}} .ctcTipo{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:rgba(245,245,243,.5)} .ctcAlvo{font-size:14px;color:#F5F5F3;font-weight:500} .ctcVer{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700; letter-spacing:.11em;text-transform:uppercase;white-space:nowrap; padding:4px 10px;border-radius:100px;justify-self:end; /* posicao explicita: no DOM o veredito vem DEPOIS da regra (a ordem de leitura certa e causa -> efeito), mas visualmente ele pertence a primeira linha, na ponta direita. Sem isso o auto-placement joga o chip para uma terceira linha, alinhado a esquerda. */ grid-column:3;grid-row:1} @media(max-width:620px){.ctcVer{grid-column:1;grid-row:auto;justify-self:start}} .ctcRegra{grid-column:1 / -1;font-size:12.5px;line-height:1.45; color:rgba(245,245,243,.56)} /* a triade de estado: os mesmos tres que a catraca usa no resto da pagina */ .ctc[data-estado="ok"]{border-left-color:var(--ok)} .ctc[data-estado="ok"] .ctcVer{background:rgba(97,206,112,.14);color:#7EDC8C} .ctc[data-estado="warn"]{border-left-color:var(--warn)} .ctc[data-estado="warn"] .ctcVer{background:rgba(245,158,11,.15);color:#F7B94A} .ctc[data-estado="bad"]{border-left-color:var(--bad)} .ctc[data-estado="bad"] .ctcVer{background:rgba(239,68,68,.15);color:#F58080} .ctcTrilha{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start; margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)} @media(max-width:620px){.ctcTrilha{grid-template-columns:1fr}} .ctcTrLb{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--fogo-claro);padding-top:2px} .ctcTrilha p{margin:0;font-size:12.5px;line-height:1.5;color:rgba(245,245,243,.56)} /* Entrada em cascata. `--i` da o atraso por linha. A animacao PARTE do estado final e volta: se o CSS de animacao nao rodar, a linha ja esta visivel — movimento nunca esconde conteudo. */ @media (prefers-reduced-motion:no-preference){ .rv.vis .ctc{animation:ctcEntra .5s cubic-bezier(.2,.7,.3,1) backwards; animation-delay:calc(var(--i) * .11s + .15s)} @keyframes ctcEntra{ from{opacity:0;transform:translateY(9px)} } } /* Rotulo de exemplo ilustrativo (§9 tipo 5). Numero sem rotulo, num painel que parece um sistema real, le como medicao. */ .ilustra{max-width:62ch;margin:18px 0 0;font-size:12.5px;line-height:1.55; color:rgba(245,245,243,.56);padding-left:14px; border-left:2px solid rgba(245,158,11,.5)} /* ============================================================ CALCULADORA DE ROI Fica na dobra de preco, que e superficie ESCURA (.secPreco). O campo "quanto alguem confere de novo" e o coracao da peca: e o termo que nenhuma calculadora de RPA tem, e e o cliente quem preenche. ============================================================ */ .roi{margin-top:26px} .roiIn{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:520px){.roiIn{grid-template-columns:1fr}} .roiIn label{position:relative;display:flex;flex-direction:column;gap:7px} .roiIn span{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:rgba(245,245,243,.62);line-height:1.35} .roiIn input{width:100%;background:rgba(255,255,255,.06);color:#F5F5F3; border:1px solid rgba(255,255,255,.14);border-radius:11px; padding:12px 14px;font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700; letter-spacing:.02em;transition:border-color .25s var(--e),background .25s var(--e)} .roiIn input:focus{outline:none;border-color:var(--fogo-claro);background:rgba(147,112,255,.10)} .roiIn input::-webkit-outer-spin-button,.roiIn input::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0} .roiIn input[type=number]{-moz-appearance:textfield} .roiIn i{position:absolute;right:14px;bottom:13px;font-style:normal; font-family:'JetBrains Mono',monospace;font-size:14px;color:rgba(245,245,243,.5)} .roiOut{margin:22px 0 0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.12)} .roiOut > div{display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)} .roiOut > div:last-child{border-bottom:0} .roiOut dt{font-size:13.5px;line-height:1.4;color:rgba(245,245,243,.66);margin:0} .roiOut dd{margin:0;font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700; color:#F5F5F3;white-space:nowrap;letter-spacing:-.01em} .roiPerda dd{color:var(--warn)} .roiReal{padding-top:13px!important;margin-top:4px;border-top:1px solid rgba(255,255,255,.16)!important} .roiReal dt{color:rgba(245,245,243,.84);font-weight:500} .roiReal dd{font-size:19px;color:var(--fogo-claro)} .roiTese{margin:18px 0 0;font-size:14px;line-height:1.6;color:rgba(245,245,243,.72);max-width:56ch} .roiTese b{color:#F5F5F3;font-weight:700} /* premissa a vista: sem isso o numero e caixa-preta, que e o oposto da tese */ .roiPrem{margin:16px 0 0;padding-top:13px;border-top:1px solid rgba(255,255,255,.10); font-size:11.5px;line-height:1.55;color:rgba(245,245,243,.5);max-width:60ch} .roiPrem b{color:rgba(245,245,243,.74);font-weight:700} /* a linha 2 repete o valor da linha 1 de proposito: e o argumento. A nota inline evita que a repeticao leia como bug. */ .roiOut dt i{display:block;font-style:normal;font-size:11.5px;line-height:1.4; color:rgba(245,245,243,.44);margin-top:3px} /* o bloco de premissas nao pode colidir com o rodape do cartao */ .pxEsq .roi{margin-bottom:30px} .pxEsq .pxBaixo{margin-top:0} /* O rodape do cartao herdava --corpo (tinta escura) sobre fundo escuro: 1,3:1, ilegivel. As duas metades do cartao estao no mesmo fundo, entao ambas usam a escala clara. */ .pxEsq .pxBaixo{color:rgba(245,245,243,.72);font-size:14px;line-height:1.5; display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;justify-content:flex-start; text-align:left;margin-top:0} .pxEsq .pxBaixo span{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,243,.5)} .pxEsq .pxBaixo b{color:#F5F5F3;font-weight:600} .pxEsq .entOut{color:rgba(245,245,243,.72);margin-top:16px} .pxEsq .entOut .seta{color:var(--fogo-claro)} /* ---- vias de contato: tres pesos, nao tres botoes iguais ---- A agenda e o caminho que a pagina inteira empurra, entao e a unica preenchida e a unica que pulsa. WhatsApp e telefone sao alternativas. Tres botoes com o mesmo peso nao escolhem nada pelo visitante. */ .agVias{display:grid;gap:16px;margin-top:38px} @media(min-width:900px){.agVias{grid-template-columns:1.25fr 1fr 1fr;align-items:stretch}} .agVia{position:relative;display:flex;flex-direction:column;gap:9px; padding:clamp(22px,2.4vw,30px);border-radius:20px;text-decoration:none; border:1px solid var(--fio);background:var(--papel2);color:var(--tinta); transition:transform .3s var(--e),border-color .3s var(--e),box-shadow .3s var(--e)} .agVia:hover{transform:translateY(-3px);border-color:rgba(91,73,245,.42)} .agIco{width:34px;height:34px;display:grid;place-items:center;border-radius:11px; background:rgba(91,73,245,.10);color:var(--fogo);margin-bottom:2px} .agIco svg{width:19px;height:19px;display:block} .agTopo{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--corpo)} .agAcao{display:flex;align-items:baseline;gap:9px;font-size:clamp(17px,1.8vw,20px); line-height:1.2;letter-spacing:-.025em;font-weight:700;color:var(--tinta)} .agAcao i{font-style:normal;color:var(--fogo);transition:transform .25s var(--e)} .agVia:hover .agAcao i{transform:translateX(4px)} .agVia .agNota{margin:2px 0 0;font-size:13.5px;line-height:1.55;color:var(--corpo);max-width:44ch} /* a principal: preenchida, e com um anel que respira */ .agVia--principal{background:var(--fogo-cheio);border-color:transparent;color:#fff; box-shadow:0 18px 40px -18px rgba(74,56,224,.75)} .agVia--principal:hover{border-color:transparent;box-shadow:0 24px 52px -18px rgba(74,56,224,.9)} .agVia--principal .agIco{background:rgba(255,255,255,.16);color:#fff} .agVia--principal .agTopo{color:rgba(255,255,255,.78)} .agVia--principal .agAcao{color:#fff} .agVia--principal .agAcao i{color:#fff} .agVia--principal .agNota{color:rgba(255,255,255,.8)} /* O anel e so BORDA (miolo transparente), entao pode ficar acima do card sem cobrir texto — e `pointer-events:none` garante que nao rouba o clique. Com z-index:-1 ele sumia atras do fundo da secao, que e o bug classico: filho negativo pinta atras do fundo do ancestral, nao so do pai. Respira devagar: chamar atencao sem virar pisca-pisca. */ .agVia--principal::before{content:"";position:absolute;inset:-3px;border-radius:inherit; border:1.5px solid rgba(124,101,255,.85);opacity:0;pointer-events:none} @media(prefers-reduced-motion:no-preference){ .agVia--principal::before{animation:agPulso 2.8s ease-out infinite} } @keyframes agPulso{ 0% {transform:scale(1); opacity:.75} 70% {transform:scale(1.035); opacity:0} 100% {transform:scale(1.035); opacity:0} } /* ---- agenda em frame, dentro da propria pagina ---- Fica escondida ate o clique. `[hidden]` do UA perde para qualquer display que a gente declare, entao a regra vai explicita. */ .agFrame{margin-top:clamp(30px,3.2vw,56px); /* o cabecalho e sticky (63px): sem isto o scrollIntoView encosta o topo da agenda embaixo dele e some a barra de fuso horario da TidyCal */ scroll-margin-top:82px} .agFrame[hidden]{display:none} .agFrameTopo{display:flex;align-items:center;justify-content:space-between; gap:16px;flex-wrap:wrap;margin-bottom:14px} .agFrameTit{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--corpo)} .agFrameFora{font-size:13.5px;font-weight:600;color:var(--fogo);text-decoration:none} .agFrameFora:hover{text-decoration:underline} /* 1320px, e o numero e medido, nao chutado. A TidyCal desenha o formulario de agendamento dentro de um modal Bootstrap com `overflow-y:auto` e altura igual a do PROPRIO frame. Ou seja: o que rola nao e a nossa pagina, e um container dentro do iframe — e ele so para de rolar quando o frame e mais alto que o conteudo dele. Medido com o formulario aberto: o conteudo pede 1252px em 1440px de largura e 1287px em 390px. 1320 cobre os dois com folga. Por que NAO da para ser automatico: como o modal tem a altura do frame, o `document.scrollHeight` de dentro nunca passa do frame. A TidyCal ate embarca o lado filho do iframe-resizer, mas o valor que ele consegue reportar e o do proprio frame — no formulario ele ENCOLHERIA a janela em vez de crescer. Cheguei a hospedar o lado pai (v4, MIT) para testar; medido, so piora. O custo desta escolha e o estado do calendario, que so ocupa 611px e fica com vazio abaixo. Trocamos vazio branco por formulario que cabe inteiro. */ .agFrameJan{display:block;width:100%;height:1320px; border:1px solid var(--fio);border-radius:20px;background:var(--papel2)} /* O fundo do topo deixou de ser