/* ════════════════════════════════════════════════════════════════════════ OLIVER LABS · folha de estilo ──────────────────────────────────────────────────────────────────────── ESCRITA PARA O CELULAR PRIMEIRO. As regras de base são as do telefone; as telas grandes entram depois, em `@media (min-width: …)`. Quase todo mundo chega aqui pelo link da bio do Instagram, com uma mão só. As cores saem do logotipo: o navy do anel, o ciano e o violeta do rabo. Nada aqui foi escolhido de fora da marca. Ordem do arquivo 1 · Fichas (tokens) 6 · Garantias 11 · Dúvidas 2 · Base e tipografia 7 · Tipos de negócio 12 · Símbolo 3D + CTA 3 · Peças reutilizáveis 8 · Trabalhos 13 · Rodapé e flutuante 4 · Marca e topo 9 · Ficha técnica 14 · A entrada 5 · Abertura e celular 10 · O combinado 15 · Telas grandes ════════════════════════════════════════════════════════════════════════ */ /* ═══ 1 · FICHAS ════════════════════════════════════════════════════════ */ :root{ /* ── camada 1 · as cores da marca ─────────────────────────────────── */ /* A ESCADA DO AZUL. Uma cor só, do fundo do mar até a porcelana, com o matiz travado em ~213° e a saturação nunca abaixo de 35%. Ler a coluna L* (claridade que o olho percebe, 0 a 100) de cima a baixo: abismo #081729 L* 7 213° 67% noite #0B1F3A L* 12 214° 68% mar #122E4F L* 19 212° 63% baia #1B3B63 L* 24 213° 57% aco #2A5286 L* 35 214° 52% brisa #5D89BE L* 56 213° 43% neblina #9DB4D0 L* 72 213° 35% porcelana #C5D8F0 L* 86 213° 59% linho #DCE8F8 L* 92 214° 67% ⚠️ NÃO EXISTE BRANCO NESTA ESCADA, e é de propósito. Até 24/8/2026 o degrau claro era `#F5F7FA` (L* 97, saturação 33%) e o cartão começava em `#FFFFFF` puro — saturação ZERO. Era o único ponto da página onde a cor abandonava a marca, e lia como folha de papel colada num site azul-noite. Trocado por `porcelana`/`linho`, que são claros de verdade mas continuam sendo o azul do logotipo. ⚠️ E NÃO EXISTE BURACO. O que também quebrava era a escada pular de L* 24 direto para L* 97: 70 pontos de nada no meio. `aco` e `brisa` preencheram o vão, e é de onde saem bordas, divisórias e qualquer tom médio novo. Se precisar de um degrau, pegue daqui — não invente um cinza. */ --c-abismo:#081729; --c-noite:#0B1F3A; --c-mar:#122E4F; --c-baia:#1B3B63; --c-aco:#2A5286; --c-brisa:#5D89BE; --c-gelo:#EAF2FB; --c-neblina:#9DB4D0; --c-fumo:#6C86A6; --c-porcelana:#C5D8F0; --c-linho:#DCE8F8; --c-ciano:#22D3EE; --c-ceu:#38BDF8; --c-azul:#3B82F6; --c-violeta:#7C3AED; --c-zap:#25D366; /* âmbar: usado SÓ para "fora do horário". Se um dia entrar número de resultado nos cases, é esta a cor dele. Não vire cor de enfeite. */ --c-ambar:#F0913A; /* ── o cartão `.claro` NÃO tem mais fichas próprias ──────────────── Ele já foi um cartão claro (por três semanas, com um bloco de tokens `--claro-*` aqui). Em 24/8/2026 Augusto pediu de volta o escuro, "sem paredes de cor" — o cartão passou a herdar as cores padrão do site (gelo, neblina, ciano) e estes tokens deixaram de existir. A pele do cartão vive na seção "O CARTÃO (ESCURO)". O git guarda a paleta clara inteira, caso um dia volte. */ --f-titulo:'Montserrat',system-ui,sans-serif; --f-corpo:'Figtree',system-ui,-apple-system,sans-serif; /* ── camada 2 · significado ───────────────────────────────────────── */ --fundo:var(--c-abismo); --fundo-alto:var(--c-noite); --texto:var(--c-gelo); --texto-fraco:var(--c-neblina); --texto-apagado:var(--c-fumo); --linha:rgba(34,211,238,.14); --linha-forte:rgba(34,211,238,.34); --acento:var(--c-ciano); /* o degradê do rabo do símbolo, na ordem dele */ --grad-marca:linear-gradient(135deg,var(--c-ciano) 0%,var(--c-azul) 52%,var(--c-violeta) 100%); /* As duas camadas da marca que trocam de cor conforme o fundo. O C nunca muda: é sempre o degradê. `--marca-ele` é o L da frente, a peça que acende o desenho — gelo no escuro, navy no claro. Ele é chapado de propósito: quando era degradê, caía na ponta violeta e a marca inteira ficava roxa. `--marca-eco` é o L do meio, o eco atrás dele. Vai sempre para o lado contrário do fundo: ciano no escuro (9,98:1), navy no claro. Em navy sobre este fundo daria 1,09:1 — sumiria. */ --marca-ele:var(--c-gelo); --marca-eco:var(--c-ciano); /* o do botão para de subir antes do violeta: texto escuro em cima de violeta reprova em contraste, e botão que não se lê não converte */ --grad-cta:linear-gradient(135deg,var(--c-ciano) 0%,var(--c-ceu) 45%,#4F9CFF 100%); /* o de texto começa no gelo e evita o violeta puro pelo mesmo motivo */ --grad-texto:linear-gradient(115deg,var(--c-gelo) 0%,#7DD3FC 34%,var(--c-ciano) 62%,#818CF8 100%); --grad-tenue:linear-gradient(135deg,rgba(34,211,238,.13),rgba(124,58,237,.1)); /* ── camada 3 · componentes ───────────────────────────────────────── */ --btn-r:999px; --cartao-r:20px; --sombra-alta:0 28px 70px -28px rgba(2,8,20,.95); --sombra-marca:0 16px 44px -16px rgba(34,211,238,.42); --e1:.5rem; --e2:.875rem; --e3:1.25rem; --e4:1.9rem; --e5:2.75rem; --e6:clamp(3rem,8vw,5.5rem); --e7:clamp(4rem,12vw,8rem); --largura:1180px; --curva:cubic-bezier(.22,1,.36,1); --curva-tensa:cubic-bezier(.16,1.02,.3,1); } /* ═══ 2 · BASE E TIPOGRAFIA ════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:78px} /* NADA DE ARRASTAR DE LADO. A trava morava só no `body`. Isso é meio caminho: quem manda no transbordo da janela é o `html`, e o `body` só é consultado quando o `html` está em `visible` — regra que o Safari do iPhone honra de um jeito próprio. Com os dois travados não sobra brecha. `clip` depois de `hidden` de propósito, e não no lugar dele: `hidden` transforma o elemento em contêiner de rolagem (mexe com `sticky` e com a âncora de rolagem), `clip` só corta. Navegador que não conhece `clip` ignora a segunda linha e fica com a primeira. */ html,body{overflow-x:hidden;overflow-x:clip} body{ font-family:var(--f-corpo); font-size:1.03rem; line-height:1.62; color:var(--texto-fraco); /* navy mais rico: um leve levantar de azul no topo (o "respira azul"), fixo na viewport pra a profundidade não escorrer com o scroll */ background: radial-gradient(135% 100% at 50% -8%, var(--c-mar), transparent 56%) fixed, var(--fundo); -webkit-font-smoothing:antialiased; } body.travado{overflow:hidden} img,svg,canvas{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} button,input{font:inherit;color:inherit;background:none;border:none} button{cursor:pointer} ul,ol{list-style:none} ::selection{background:var(--c-ciano);color:var(--c-abismo)} :focus-visible{outline:2px solid var(--c-ciano);outline-offset:3px;border-radius:4px} h1,h2,h3,h4{ font-family:var(--f-titulo); color:var(--texto); font-weight:800; line-height:1.04; letter-spacing:-.032em; text-wrap:balance; } h1{font-size:clamp(2.3rem,8.6vw,4.2rem);line-height:1.02} h2{font-size:clamp(1.85rem,6.6vw,3rem)} h3{font-size:clamp(1.25rem,4.3vw,1.65rem);line-height:1.16} .tinta{ background:var(--grad-texto); -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; } /* ═══ 3 · PEÇAS REUTILIZÁVEIS ═════════════════════════════════════════ */ .wrap{width:min(100% - 2.2rem,var(--largura));margin-inline:auto} .oculto{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } .rotulo{ display:flex;align-items:center;gap:.6rem; font-size:.76rem;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--c-ciano); margin-bottom:var(--e2); } /* ═══ O MARCADOR DO RÓTULO: O ARCO DO C ═════════════════════════════════ Era uma barrinha de 22x2 que não dizia nada. Virou o ARCO DE TRÊS QUARTOS que é o C do símbolo, na mesma proporção da marca: traço sobre raio de 1 para 4 (na marca, traço 7 e raio 28). Aparece nos 8 rótulos do site, então quem rola vê um pedaço da logo oito vezes. COMO ELE SE DESENHA, sem uma linha de JavaScript. São DUAS máscaras sobrepostas com `mask-composite:intersect`, ou seja, só pinta onde as duas coincidem: 1. a FORMA · o arco, num SVG embutido 2. o LEQUE · um `conic-gradient` que abre de 0 até 300 graus Animando só o ângulo do leque, o arco nasce da ponta e completa. O `@property` é o que torna isso possível: sem registrar `--varre` como ângulo, o navegador trata a variável como texto e pula direto para o valor final, sem animar. ⚠️ Quem não suportar `@property` NÃO fica sem marcador: o valor inicial da variável é 300deg (arco inteiro), então o pior caso é o arco aparecer pronto, sem o gesto. É a degradação certa: some a animação, nunca o desenho. */ @property --varre{syntax:'';initial-value:300deg;inherits:false} .rotulo::before{ content:'';width:15px;height:15px;flex:none; background:var(--grad-marca); --forma:url("data:image/svg+xml;utf8,") center/contain no-repeat; /* o leque começa em -140deg para abrir a partir da MESMA ponta em que o arco começa, embaixo à esquerda. Se mudar o desenho, ajuste aqui. */ --leque:conic-gradient(from -140deg, #000 var(--varre), transparent 0); -webkit-mask:var(--forma); mask:var(--forma), var(--leque); mask-composite:intersect; } /* O gesto só dispara quando a seção entra na tela, junto com o resto do reveal, e uma vez só. Mesma ideia da marca que se desenha no topo. */ /* ⚠️ O ARCO NASCE VISÍVEL (`--varre` vale 300deg por padrão), e a animação é que o faz começar do zero. A ordem importa e já me mordeu: na primeira versão ele nascia vazio e só acendia com a classe `pronto`. Resultado, 6 dos 7 rótulos ficaram INVISÍVEIS, porque dois deles não carregam classe nenhuma ("O combinado" e "Quem faz") e nunca receberiam `pronto`. Regra: o desenho é o padrão, o gesto é o extra. */ @media (prefers-reduced-motion:no-preference){ /* Quem tem `.rev` já está com opacidade 0 até ser revelado, então não existe risco de o arco piscar pronto antes da hora. */ .js .rotulo.pronto::before, .js .rev.pronto .rotulo::before, .js .rotulo.entra::before{animation:desenharArco .55s var(--curva) .1s backwards} } @keyframes desenharArco{from{--varre:0deg}to{--varre:300deg}} /* No CELULAR o respiro entre seções é enxuto de propósito: cada vão grande faz a pessoa rolar mais e achar que a página não acaba. A base (mobile) parte de ~2,4rem; o `min-width:760px` mais abaixo devolve o respiro maior para tablet e computador, onde sobra tela. */ .secao{padding-block:clamp(2rem,7vw,8rem);position:relative} .secao__topo{margin-bottom:var(--e4)} .secao__lado{max-width:46ch;margin-top:var(--e3)} /* ── botões ───────────────────────────────────────────────────────── */ .btn{ --luzX:50%;--luzY:50%; position:relative;overflow:hidden;isolation:isolate; display:inline-flex;align-items:center;justify-content:center;gap:.55rem; padding:1rem 1.5rem;border-radius:var(--btn-r); font-family:var(--f-titulo);font-weight:700;font-size:.98rem; text-transform:uppercase;letter-spacing:.04em;white-space:nowrap; /* CAIXA ALTA; nowrap = o botão nunca quebra em 2 linhas */ transition:transform .35s var(--curva-tensa),box-shadow .35s var(--curva), border-color .3s,background .3s; } .btn .ico{width:19px;height:19px;fill:currentColor;flex:none} .btn:active{transform:scale(.98)} .btn--marca{background:var(--grad-cta);color:#06121F;box-shadow:var(--sombra-marca)} .btn--marca::before{ content:'';position:absolute;inset:0;z-index:-1; background:radial-gradient(170px circle at var(--luzX) var(--luzY),rgba(255,255,255,.55),transparent 62%); opacity:0;transition:opacity .3s; } .btn--fantasma{border:1px solid var(--linha-forte);color:var(--texto);background:rgba(234,242,251,.03)} .btn--g{padding:1.1rem 1.7rem} .btn--p{padding:.6rem 1rem;font-size:.88rem} /* ── revelação no scroll ─────────────────────────────────────────── */ /* Reveal encurtado (era .8s): em rolagem rápida o bloco ficava apagado tempo demais depois de já estar na tela. Agora entra em .45s, de menos longe, e o observador dispara um pouco ANTES de o bloco aparecer (o rootMargin positivo na seção 5 do main.js), então já chega legível. */ /* CASCATA (24/8/2026): mais deslize (16→26px) e mais degraus de atraso, a pedido do Augusto de deixar os blocos entrando em sequência, um após o outro, mais marcado que a aparição discreta de antes. */ .rev{transition:opacity .55s var(--curva),transform .55s var(--curva),filter .6s var(--curva)} .js .rev{opacity:0;transform:translateY(26px);filter:blur(6px)} .rev.pronto{opacity:1;transform:none;filter:blur(0)} /* entra em FOCO (materializa) */ .rev:nth-child(2){transition-delay:.07s} .rev:nth-child(3){transition-delay:.14s} .rev:nth-child(4){transition-delay:.21s} .rev:nth-child(5){transition-delay:.28s} .rev:nth-child(6){transition-delay:.35s} /* ── TÍTULOS SE FORMANDO ────────────────────────────────────────────── Cada linha do título sobe por trás de uma máscara quando entra na tela. O JS (seção "títulos" do main.js) quebra o h2 pelo
e monta a máscara; a classe `.formou` (do observador) solta a subida, escalonada por `--d`. Sem JS, o título já aparece montado. O par `padding-block`/`margin-block` de .05em dá respiro para a perna dos "g", "y", "p" não ser comida pela máscara, sem mexer no layout. */ .tl{display:block;overflow:hidden;padding-block:.06em;margin-block:-.06em} .tl__i{ display:block;transform:translateY(115%); transition:transform .8s var(--curva);transition-delay:var(--d,0s); } .formou .tl__i{transform:none} @media (prefers-reduced-motion:reduce){ .tl__i{transform:none;transition:none} } .entra{ transition:opacity .55s var(--curva) var(--atraso,0s), transform .55s var(--curva) var(--atraso,0s), filter .6s var(--curva) var(--atraso,0s); } .js .entra{opacity:0;transform:translateY(16px);filter:blur(5px)} .carregado .entra{opacity:1;transform:none;filter:blur(0)} /* materializa em foco */ /* ── fundo ──────────────────────────────────────────────────────── Duas luzes de marca subindo dos cantos, mais grão. Ambiente, não interface — e nada de canvas rodando à toa. */ .fundo{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden} /* Cena de fundo: os cristais flutuando (canvas 2D). Camada de ambiente, à frente das luzes e atrás do conteúdo. O motor está na seção 15 do main.js; aqui só posiciona. Sem WebGL — leve no 4G. */ #cena{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;display:block} .fundo__luz{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform} .fundo__luz--a{ width:78vmax;height:78vmax;top:-36vmax;left:-24vmax; background:radial-gradient(circle,rgba(34,211,238,.2),transparent 66%); animation:bailar 26s ease-in-out infinite; } .fundo__luz--b{ width:64vmax;height:64vmax;bottom:-30vmax;right:-26vmax; background:radial-gradient(circle,rgba(124,58,237,.22),transparent 66%); animation:bailar 34s ease-in-out infinite reverse; } @keyframes bailar{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 33%{transform:translate3d(6vw,4vh,0) scale(1.12)} 66%{transform:translate3d(-4vw,7vh,0) scale(.94)} } .fundo__grao{ position:absolute;inset:0;opacity:.045;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── o fundo 3D ─────────────────────────────────────────────────── Duas camadas atrás do `.fundo`, não na frente. O canvas limpa em `--c-abismo` OPACO: em cima do `.fundo` ele engoliria o grão junto. Atrás, o desenho fica na ordem certa — 3D, véu, luzes, grão — e eu não preciso mexer em z-index nenhum que já existia. Nada aqui aparece por conta própria. A classe `fundo3d-pronto` só entra quando o Three.js carregou, o .glb abriu e o primeiro quadro já foi desenhado. Falhou qualquer coisa no caminho, a classe não entra, e o fundo de sempre continua no ar sem ninguém perceber — é por isso que a transição está no elemento e não na classe: ela descreve a chegada, não a ausência. */ #fundo3d{ position:fixed; inset:0; z-index:-4; width:100%; height:100%; display:block; opacity:0; transition:opacity 1.1s var(--curva); pointer-events:none; } .fundo3d-pronto #fundo3d{opacity:1} /* Fallback estático do monograma, para quem não baixa o 3D (o gate na seção 13 do main.js decide). Fica atrás de tudo, discreto, e some assim que o canvas assume — no computador o 3D substitui, no celular ele permanece como a marca parada no fundo. Nenhum JavaScript. */ .fundo3d-estatico{ position:fixed; inset:0; z-index:-4; pointer-events:none; display:grid; place-items:center; } /* O monograma inline. A vida agora vem do traço se desenhando no scroll (seção 16 do main.js), não mais de um "respirar" de opacidade. */ .fundo3d-estatico__marca{ width:min(76vmin,540px); height:auto; overflow:visible; transform:translateY(-6%); /* um respiro acima do centro, como o 42% de antes */ opacity:.17; } .fundo3d-pronto .fundo3d-estatico{display:none} /* O véu fecha o miolo, que é exatamente onde o monograma mora e onde a manchete precisa ganhar. Ele também só existe com o 3D no ar: sem isso, quem cair no plano B veria o fundo antigo escurecido no centro sem motivo nenhum. */ .veu{ position:fixed; inset:0; z-index:-3; pointer-events:none; opacity:0; transition:opacity 1.1s var(--curva); background:radial-gradient(125% 95% at 50% 44%, rgba(8,23,41,.52) 0%, rgba(8,23,41,.80) 56%, rgba(8,23,41,.95) 100%); } .fundo3d-pronto .veu{opacity:1} /* as luzes viram reserva: somem quando o 3D assume, ficam para sempre se ele não assumir */ .fundo3d-pronto .fundo__luz{opacity:0; transition:opacity 1.1s var(--curva)} /* ═══ 4 · MARCA E TOPO ════════════════════════════════════════════════ O símbolo é o do manual: anel e um rabo que sai dele em degradê. No escuro o anel vira gelo — é a versão de fundo escuro da marca, não uma invenção minha. */ .marca{display:flex;align-items:center;gap:.5rem;flex:none} /* a marca nova é quase quadrada (1,08:1), então mede-se pela altura */ .marca__sinal{width:34px;flex:none;transition:transform .6s var(--curva)} /* ── a marca se desenha ──────────────────────────────────────────── Os tempos e a curva são os do arquivo de animação dele: o arco corre em 1,32s, o L entra 1,14s depois e leva 0,92s, os dois em `cubic-bezier(.65,0,.35,1)`. Quem dispara é o JS (seção 12), porque `animation` precisa ser reiniciada para repetir no ponteiro — coisa que uma transição não faz. O que eu NÃO trouxe do arquivo dele foi o laço infinito de 4 em 4 segundos. Num estúdio, olhando só o logo, ele é ótimo. Preso no canto de uma página que a pessoa vai ler por um minuto, vira um movimento puxando o olho a cada quatro segundos — e o trabalho desta página é a pessoa ler e chamar no WhatsApp, não olhar o logo. Aqui ele desenha uma vez e repete quando a pessoa passa o mouse ou toca. Para voltar ao laço, é uma linha na seção 12 do main.js. */ @keyframes tracar{to{stroke-dashoffset:0}} .topo .marca__sinal path{stroke-dasharray:1;stroke-dashoffset:0} .js .topo .marca__sinal path{stroke-dashoffset:1} .marca__nome{ font-family:var(--f-titulo);font-weight:800;font-size:1.02rem; letter-spacing:-.02em;color:var(--texto);line-height:1; text-transform:uppercase;white-space:nowrap; } .marca__nome i{ font-style:normal;font-weight:400;letter-spacing:.2em; margin-left:.34em;color:var(--texto-fraco); } .topo{ position:fixed;top:0;left:0;right:0;z-index:90; border-bottom:1px solid transparent; transition:background .35s,backdrop-filter .35s,border-color .35s; } .topo.encostado{ background:rgba(8,23,41,.82); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); border-bottom-color:var(--linha); } .topo__in{display:flex;align-items:center;gap:var(--e2);height:66px} .topo__nav{ position:fixed;inset:66px 0 auto; display:flex;flex-direction:column;align-items:stretch; padding:var(--e2) 1.1rem var(--e4); background:rgba(8,23,41,.98); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--linha); transform:translateY(-118%);transition:transform .42s var(--curva); } .topo__nav.aberto{transform:none} /* o :not(.btn) importa: sem ele este seletor vence `.btn--marca` e repinta o texto do botão do menu com a cor de link */ .topo__nav a:not(.btn){padding:.9rem 0;border-bottom:1px solid var(--linha);font-size:1.05rem;font-weight:600} /* caixa normal (só a 1ª maiúscula, como está no HTML); antes era CAIXA ALTA */ .topo__navcta{margin-top:var(--e3)} .hamburguer{width:44px;height:44px;position:relative;flex:none;margin-left:auto} .hamburguer span{ position:absolute;left:12px;width:20px;height:2px;border-radius:2px; background:var(--texto);transition:transform .35s var(--curva),opacity .2s; } .hamburguer span:nth-child(1){top:16px} .hamburguer span:nth-child(2){top:21px} .hamburguer span:nth-child(3){top:26px} .hamburguer[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)} .hamburguer[aria-expanded="true"] span:nth-child(2){opacity:0} .hamburguer[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)} .topo__barra{height:2px;width:0;background:var(--grad-marca);transition:width .1s linear} /* ═══ 5 · ABERTURA E O CELULAR ════════════════════════════════════════ */ .abertura{padding:calc(66px + var(--e3)) 0 var(--e4)} /* O aparelho é o eixo da frase. A manchete quebra em volta dele — a primeira metade em cima, a segunda embaixo — e por isso o topo deixou de ser "texto de um lado, imagem do outro". Um botão só. */ /* NO CELULAR/TABLET o topo é CENTRALIZADO (decisão dele, 25/8). Antes era à ESQUERDA ("cara de cabeçalho"), que fica bom no celular estreito mas ficava "meio de lado" no meio-termo largo (~600–960px): texto colado na esquerda, aparelho no centro e um vazio grande à direita (a marca-d'água do fundo aparecia nele). Centralizado, tudo divide o mesmo eixo e equilibra. De 960px pra cima é a composição própria (a manchete abraça o aparelho e PREENCHE a tela) — essa NÃO muda, o desktop segue igual. */ .eixo{ display:grid;justify-items:center;text-align:center; gap:var(--e2); } .eixo__rotulo{margin-bottom:.1rem} /* NO CELULAR o título é um

normal, inteiro, e o aparelho vem por último — assim o botão principal cabe na primeira tela sem rolagem. O wrap em volta do aparelho volta só a partir de 960px (lá embaixo). */ .eixo__titulo{display:block} .eixo__titulo .pal{ display:block; font-family:var(--f-titulo);font-weight:800; line-height:1.04;letter-spacing:-.035em; color:var(--texto); } /* DUAS VOZES. A primeira metade é a entrada: menor, mais leve, em texto fraco. A segunda é o soco: grande e em tinta. Antes as duas tinham o mesmo tamanho e peso — dois blocos gêmeos, sem hierarquia nenhuma. */ .eixo__titulo .pal:nth-of-type(1){ font-size:clamp(1.05rem,4.4vw,1.5rem);font-weight:600; color:var(--texto-fraco);letter-spacing:-.01em;margin-bottom:.15rem; } .eixo__titulo .pal:nth-of-type(2){ font-size:clamp(2.3rem,10vw,4.2rem);line-height:.98;letter-spacing:-.045em; } .eixo__sub{ max-width:46ch;color:var(--texto-fraco); font-size:.98rem;line-height:1.5; } /* ordem no celular: manchete → subtítulo → botão → 3 passos → aparelho. O aparelho fica por último de propósito: empurra a altura dele para baixo da dobra, e o botão sobe. */ .eixo__titulo{order:1} .eixo__sub{order:2} .eixo__acao{order:3} .eixo__apoio{order:4} .eixo__local{order:5} .trio{order:6} /* O `justify-items:start` do `.eixo` alinha o TEXTO à esquerda, que é o que dá a cara de cabeçalho. Mas ele pegava o aparelho junto e jogava o celular 133px fora do centro, encostado na margem esquerda. O texto fica à esquerda; o objeto fica no meio. */ .demo{order:7;justify-self:center} /* ── RITMO E RESPIRO (só no celular; ≥960 tem a composição própria) ──── Antes tudo tinha o MESMO gap (.875) e o herói lia como lista corrida. Aqui o espaço vira BATIDAS: dentro do grupo fica justo; entre grupos abre. Grupos: [rótulo·título·sub] · [botão] · [reforço·status] · [os 3 passos] · [o celular]. O botão ganha o maior respiro. */ @media (max-width:959.98px){ .eixo{gap:.6rem} .eixo__acao{margin-top:1.55rem} /* respiro grande ANTES do botão: destaca a ação */ .eixo__apoio{margin-top:1.25rem} /* separa o reforço do botão */ .eixo__local{margin-top:-.1rem} /* status colado no apoio (mesmo par) */ .trio{margin-top:1.5rem} /* separa o caminho */ .demo{margin-top:1.55rem} /* separa a prova (o celular) */ } /* ── HERO IGUAL NO CELULAR E NO COMPUTADOR (pedido dele, 26/8) ──────────── A frase abraça o aparelho em TODAS as larguras: linha 1 → APARELHO → linha 2 (antes, no celular, o aparelho ia pro fim e o título vinha inteiro em cima). Incondicional e DEPOIS da base + do ritmo, então vence <960; o bloco ≥960 repete os mesmos valores. As duas metades voltam ao MESMO tamanho (some a "voz desigual" do celular) — é o que abraça o aparelho. */ .eixo__titulo{display:contents} .eixo__titulo .pal:nth-of-type(1), .eixo__titulo .pal:nth-of-type(2){ display:block;font-weight:800;color:var(--texto); font-size:clamp(1.95rem,4.1vw,3.4rem);line-height:1.03;letter-spacing:-.035em;margin-bottom:0; } .eixo__titulo .pal:nth-of-type(1){order:1} .demo{order:2;justify-self:center;margin-top:0} /* aparelho no MEIO, colado nas linhas */ .eixo__titulo .pal:nth-of-type(2){order:3} .eixo__acao{order:4;margin-top:.9rem} /* CTA sobe pro lugar da cópia — visível já na entrada */ .trio{order:5} /* os 3 passos sobem junto, perto do celular */ .eixo__sub{order:6} /* a cópia "WhatsApp, agendamento..." desce */ .eixo__apoio{order:7} .eixo__local{order:8} /* Os três momentos do caminho do cliente. Antes era uma linha de texto miúdo; virou três colunas com ícone, título e explicação — e o ícone é a própria tela que está passando no aparelho (a grade do perfil, a janela do site, o balão da conversa). A linha atrás preenche conforme avança, e o passo da vez acende e sobe. Assim a pessoa entende o que está vendo mesmo sem olhar para o celular — que era o pedido. */ .trio{ position:relative;width:100%; display:grid;grid-template-columns:repeat(3,1fr); gap:0 .5rem; } /* o trilho e o preenchimento passam atrás dos ícones */ .trio::before,.trio::after{ content:'';position:absolute;top:19px;height:2px;border-radius:2px; left:16.6%;right:16.6%; } .trio::before{background:var(--linha)} .trio::after{ right:auto;width:calc((66.8% ) * var(--avanco,0)); background:var(--grad-marca); transition:width .7s var(--curva); animation:trilha-respira 2.4s ease-in-out infinite; /* o preenchimento respira */ } @keyframes trilha-respira{ 0%,100%{box-shadow:0 0 9px rgba(34,211,238,.5)} 50% {box-shadow:0 0 18px rgba(34,211,238,.85)} } .trio li{ display:flex;flex-direction:column;align-items:center;text-align:center; gap:.3rem;position:relative;z-index:1; transition:transform .45s var(--curva); } .trio__ico{ position:relative; width:38px;height:38px;border-radius:50%;flex:none; display:grid;place-items:center; background:var(--c-noite); border:1px solid var(--linha-forte); transition:background .45s var(--curva),border-color .45s,box-shadow .45s,transform .45s var(--curva); } .trio__ico svg{width:17px;height:17px;fill:var(--texto-apagado);transition:fill .45s} .trio b{ font-family:var(--f-titulo);font-weight:800;font-size:.82rem; letter-spacing:.035em;text-transform:uppercase;color:var(--texto-fraco); margin-top:.15rem;transition:color .45s; } /* o CAIXA ALTA alarga os rótulos; no celular estreito reduzo p/ caberem numa linha só (senão "ABRE O SEU SITE"/"FALA COM VOCÊ" quebram e desalinham) */ @media (max-width:640px){ .trio b{font-size:.68rem;letter-spacing:.02em} } /* NO CELULAR as descrições dos três passos somem. O trio continua inteiro e sincronizado com a animação (ele é o indicador de progresso), mas o ícone e o título já dizem o passo — a frase embaixo era a terceira vez que o topo contava a mesma história, e no celular isso é rolagem a troco de nada. De 760px para cima elas voltam, que lá sobra tela. */ .trio__diz{display:none} @media (min-width:760px){ .trio__diz{ display:block; font-size:.72rem;line-height:1.35;color:var(--texto-apagado); max-width:15ch;transition:color .45s; } } /* o passo da vez */ .trio li.on{transform:translateY(-3px)} .trio li.on .trio__ico{ background:var(--grad-cta);border-color:transparent; box-shadow:0 0 0 5px rgba(34,211,238,.12),0 8px 22px -8px rgba(34,211,238,.7); transform:scale(1.1); } .trio li.on .trio__ico svg{fill:#06121F} .trio li.on b{color:var(--texto)} .trio li.on .trio__diz{color:var(--texto-fraco)} /* ── TRILHA MAIS VIVA: halo pulsante (radar) no passo da vez ───────────── Um anel ciano que nasce no ícone ativo, expande e some, em laço. Some sozinho com movimento reduzido (o bloco global zera as animações). */ .trio li.on .trio__ico::after{ content:'';position:absolute;inset:-3px;border-radius:50%; border:2px solid rgba(34,211,238,.6);pointer-events:none; animation:pulso-trio 1.8s ease-out infinite; } @keyframes pulso-trio{ 0% {transform:scale(.72);opacity:.75} 70%,100%{transform:scale(2);opacity:0} } .eixo__acao{width:100%;max-width:22rem} .eixo__apoio{max-width:40ch;font-size:.95rem} .eixo__local{ display:flex;align-items:center;gap:.45rem; font-size:.82rem;color:var(--texto-apagado); } .eixo__local i{ width:6px;height:6px;border-radius:50%;background:var(--c-zap); box-shadow:0 0 0 3px rgba(37,211,102,.16);flex:none; transition:background .3s var(--curva),box-shadow .3s var(--curva); } /* O selo de disponibilidade. Só o TEXTO fica em destaque quando você está online; o "Atendo o Brasil inteiro" continua apagado, porque é contexto e não notícia. */ .eixo__estado{color:var(--c-zap);font-weight:600} /* Fora do expediente o verde vira âmbar e o pulso some. Verde é "pode chamar que eu respondo agora"; se não é verdade, não pode ser verde. */ .eixo__local.esta-fora i{ background:var(--c-ambar,#F0913A); box-shadow:0 0 0 3px rgba(240,145,58,.16); } .eixo__local.esta-fora .eixo__estado{color:var(--c-ambar,#F0913A)} /* O pulso só existe quando você está realmente disponível. */ @media (prefers-reduced-motion:no-preference){ .eixo__local:not(.esta-fora) i{animation:pulsar 2.4s ease-in-out infinite} } @keyframes pulsar{ 0%,100%{box-shadow:0 0 0 3px rgba(37,211,102,.16)} 50% {box-shadow:0 0 0 6px rgba(37,211,102,.05)} } .pal{display:inline-block} .js .pal{opacity:0;transform:translateY(.3em)} .pal{transition:opacity .6s ease var(--d,0s),transform .75s var(--curva) var(--d,0s)} .carregado .pal{opacity:1;transform:none} /* ── TÍTULO COM IMPACTO ────────────────────────────────────────────── A 2ª voz (a tinta, "e termina no próximo passo.") não sobe como a 1ª: ela é REVELADA em varredura da esquerda p/ direita, e um brilho ciano floresce e assenta. Uso `drop-shadow` (filtro), não `text-shadow`, porque a tinta é um degradê recortado no texto (fill transparente) e text-shadow não pega nele. */ .js .eixo__titulo .pal.tinta{transform:none;clip-path:inset(0 100% -.18em 0)} .eixo__titulo .pal.tinta{ transition:opacity .55s ease var(--d,0s),clip-path .9s var(--curva) var(--d,0s); will-change:clip-path,filter; } .carregado .eixo__titulo .pal.tinta{ clip-path:inset(0 0 -.18em 0); animation:titulo-brilho 1.25s ease calc(var(--d,0s) + .12s) both; } @keyframes titulo-brilho{ 0%{filter:drop-shadow(0 0 0 rgba(34,211,238,0))} 42%{filter:drop-shadow(0 0 24px rgba(34,211,238,.55))} 100%{filter:drop-shadow(0 0 0 rgba(34,211,238,0))} } /* ── o aparelho ─────────────────────────────────────────────────── */ .demo{display:flex;justify-content:center} .demo__palco{width:100%;display:flex;justify-content:center;perspective:1400px;perspective-origin:50% 42%} .aparelho{ position:relative;width:min(172px,46vw);aspect-ratio:284/583;flex:none; /* menor no celular: o CTA sobe pra 1ª tela (≥960 volta a 206px) */ border-radius:42px;padding:9px; background:linear-gradient(155deg,#24405F 0%,#08111D 46%,#16283F 100%); box-shadow:0 0 0 1px rgba(34,211,238,.24), 0 46px 90px -34px rgba(0,0,0,.95), 0 0 90px -30px rgba(34,211,238,.42); transform-style:preserve-3d; /* O giro era escrito por JavaScript a cada quadro, atrás do mouse. Virou animação de CSS: roda igual no celular, e o navegador resolve na thread de composição em vez de no script. */ animation:pousar 13s ease-in-out infinite; } @keyframes pousar{ 0%,100%{transform:rotateY(-9deg) rotateX(3deg)} 50% {transform:rotateY(9deg) rotateX(-2deg)} } .aparelho::before{ content:'';position:absolute;inset:0;border-radius:42px; background:linear-gradient(155deg,#1B3252,#070E18 72%); box-shadow:0 0 0 1px rgba(34,211,238,.18); transform:translateZ(-26px); } /* o vidro: uma faixa de luz que atravessa a tela conforme o aparelho vira, no mesmo compasso do `pousar`. É o que faz a superfície parecer vidro em vez de um retângulo pintado. */ .aparelho__vidro{ position:absolute;inset:9px;border-radius:34px;pointer-events:none;z-index:6; transform:translateZ(1px);overflow:hidden; } .aparelho__vidro::after{ content:'';position:absolute;top:-40%;bottom:-40%;left:0;width:56%; background:linear-gradient(100deg,transparent,rgba(205,235,255,.16) 42%,rgba(205,235,255,.26) 52%,transparent); animation:reluzir 13s ease-in-out infinite; } @keyframes reluzir{ 0%,100%{transform:translateX(-105%) rotate(6deg);opacity:.35} 50% {transform:translateX(285%) rotate(6deg);opacity:1} } .aparelho__ilha{ position:absolute;top:15px;left:50%;translate:-50% 0;z-index:7; width:74px;height:20px;background:#04080E;border-radius:99px;transform:translateZ(2px); } .aparelho__tela{ position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden; background:#000;transform:translateZ(0);text-align:left; } .cena{ position:absolute;inset:0;opacity:0;transform:translateY(10px); transition:opacity .45s ease,transform .55s var(--curva);pointer-events:none; } .demo.p1 .cena--perfil, .demo.p2 .cena--site, .demo.p3 .cena--zap{opacity:1;transform:none} /* O ESTADO DE REPOUSO — enquanto nenhuma classe de cena chegou. Sem esta regra o aparelho nasce PRETO: as três cenas começam invisíveis, quem acende a primeira é a classe `p1`, e quem põe `p1` é o ciclo da seção 6 do main.js — que só começa depois da entrada terminar, ~1,7s numa visita nova (mais num celular, onde a primeira pintura demora). Resultado: um retângulo preto embaixo da manchete, na primeira coisa que a pessoa vê. E se o main.js não carregar, preto para sempre. Aqui ele descansa na cena 1, que é justamente onde o ciclo começa — então quando o JavaScript assume não existe salto: `p1` pinta o mesmo que já estava na tela. Os `:not()` dão especificidade maior que `.demo.p1 .cena--perfil`, mas só casam enquanto não houver classe de cena nenhuma. Assim que o ciclo entra, esta regra se cala sozinha. */ .demo:not(.p1):not(.p2):not(.p3) .cena--perfil{opacity:1;transform:none} /* cena 1 · o perfil, na linguagem visual do Instagram no escuro */ /* `container-type:inline-size` transforma a tela do aparelho em régua: daqui para baixo, `cqw` é 1% da LARGURA REAL dela. Isso resolve o que o `vw` não resolvia — a largura do aparelho vem de `min(232px,57vw)` no celular mas de uma regra em px no computador, então nenhuma conta em `vw` acompanhava os dois. Com `cqw` o conteúdo escala junto em qualquer largura, venha ela de onde vier. Seguro aqui porque os dois filhos absolutos (`.ig__ava::after` e `.toque__eco`) já têm ancestral posicionado próprio. */ .cena--perfil{padding:15.8% 6% 0;background:#000;color:#F5F5F5;overflow:hidden;container-type:inline-size} .ig__barra{display:flex;align-items:center;padding:4px 0 10px} .ig__barra b{font-size:.76rem;font-weight:600} .ig__pontos{margin-left:auto;display:flex;flex-direction:column;gap:2.5px} .ig__pontos i{width:13px;height:1.5px;background:#F5F5F5;border-radius:2px} /* ⚠️ O APARELHO ENCOLHE, ENTÃO O QUE ESTÁ DENTRO DELE TAMBÉM PRECISA. `.aparelho` é `min(232px,57vw)`: abaixo de 407px de tela ele diminui. Tudo que ficava em px/rem fixo continuava do mesmo tamanho e ia espremendo a linha dos números até os rótulos colarem. A conta é medida vira `cqw`, 1% da largura real da tela (1cqw = 1,88px na largura cheia). Não uso `vw` aqui: a largura do aparelho vem de `min(232px,57vw)` no celular mas de uma regra em px no computador, e nenhuma conta em `vw` acompanhava os dois ao mesmo tempo. 56px → 29.8cqw · 15px → 8cqw · .44rem → 3.74cqw · .76rem → 6.47cqw */ .ig__topo{display:flex;align-items:center;gap:8cqw;padding:2px 0 10px} .ig__ava{ width:29.8cqw;height:29.8cqw; border-radius:50%;flex:none;position:relative; background:linear-gradient(45deg,#F09433,#E6683C 25%,#DC2743 50%,#CC2366 75%,#BC1888); padding:2.4px; } .ig__ava::after{ content:'';position:absolute;inset:2.4px;border-radius:50%; background:linear-gradient(150deg,#2E4763,#141F2C);border:2px solid #000; } /* Três colunas IGUAIS com folga. Era `flex` + `space-around`, e o `space-around` só separa quando sobra espaço: os três rótulos somavam exatamente a largura do container (118px de 118px), então encostavam um no outro e liam "publicaçõesseguidoresseguindo". A grade garante o terço, o `gap` garante a folga, e o corpo menor garante que "publicações" (o mais longo) caiba dentro do seu terço até em tela de 320px. */ .ig__nums{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;flex:1;min-width:0} .ig__nums span{font-size:3.74cqw;color:#A8A8A8;display:flex;flex-direction:column;align-items:center;line-height:1.35;min-width:0} .ig__nums b{font-size:6.47cqw;color:#F5F5F5;font-weight:600} .ig__nome{font-size:.7rem;font-weight:600} .ig__cat{font-size:.62rem;color:#A8A8A8;margin-top:1px} .ig__bio{font-size:.62rem;line-height:1.5;margin-top:4px} .ig__link{ position:relative;display:inline-block;margin-top:5px; font-size:.63rem;font-weight:600;color:#E0F1FF;transition:opacity .2s; } .demo.toque .ig__link{opacity:.5} .ig__botoes{display:flex;gap:5px;margin-top:11px} .ig__botoes span{ flex:1;text-align:center;font-size:.62rem;font-weight:600; background:#262626;border-radius:8px;padding:.36rem 0; } .ig__botoes span:first-child{background:#0095F6;color:#fff} .ig__abas{display:flex;margin-top:12px;border-top:1px solid #262626} .ig__abas i{flex:1;height:26px;display:grid;place-items:center;opacity:.45} .ig__abas i.on{opacity:1;box-shadow:inset 0 2px 0 #F5F5F5} .ig__abas svg{width:13px;height:13px;fill:#F5F5F5} .ig__grade{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:2px} .ig__grade i{aspect-ratio:1;background:linear-gradient(150deg,#243547,#131B24)} .ig__grade i:nth-child(2){background:linear-gradient(140deg,#2A3C4E,#161D26)} .ig__grade i:nth-child(3){background:linear-gradient(160deg,#22303F,#141A21)} .ig__grade i:nth-child(5){background:linear-gradient(150deg,#293A4C,#151C25)} .ig__grade i:nth-child(7){background:linear-gradient(130deg,#25333F,#161C22)} .ig__grade i:nth-child(9){background:linear-gradient(150deg,#2B3B4B,#171E26)} .toque__eco{ position:absolute;left:50%;top:50%;translate:-50% -50%; width:46px;height:46px;border-radius:50%; border:2px solid var(--c-ciano);opacity:0; } .demo.toque .toque__eco{animation:tocar .7s ease forwards} @keyframes tocar{0%{opacity:0;transform:scale(.3)}35%{opacity:1}100%{opacity:0;transform:scale(1.7)}} /* cena 2 · o site abrindo e rolando sozinho */ .cena--site{background:var(--c-abismo);overflow:hidden} .cena--site img{width:100%;height:auto} .demo.p2 .cena--site img{animation:rolarsite 3.3s .45s cubic-bezier(.45,0,.5,1) forwards} @keyframes rolarsite{from{transform:translateY(0)}to{transform:translateY(-46%)}} .cena__carga{ position:absolute;top:0;left:0;height:2px;width:0;z-index:5; background:var(--grad-marca);box-shadow:0 0 12px var(--c-ciano); } .demo.p2 .cena__carga{animation:carregar .5s ease forwards} @keyframes carregar{0%{width:0;opacity:1}80%{width:100%;opacity:1}100%{width:100%;opacity:0}} /* cena 3 · a conversa, na linguagem visual do WhatsApp no escuro */ .cena--zap{background:#0B141A;display:flex;flex-direction:column;color:#E9EDEF;padding-top:26px} .wa__topo{display:flex;align-items:center;gap:9px;padding:8px 12px;background:#202C33;flex:none} .wa__volta{width:8px;height:8px;flex:none;border-left:1.6px solid #E9EDEF;border-bottom:1.6px solid #E9EDEF;transform:rotate(45deg)} .wa__ava{width:30px;height:30px;border-radius:50%;flex:none;background:linear-gradient(150deg,#3E5567,#2A3942)} .wa__id b{display:block;font-size:.72rem;font-weight:500;line-height:1.25} .wa__id i{font-style:normal;font-size:.56rem;color:#8696A0} .wa__corpo{flex:1;padding:10px 9px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px} .wa__dia{align-self:center;font-size:.5rem;letter-spacing:.06em;color:#8696A0;background:#182229;padding:.2rem .5rem;border-radius:6px} .wa__balao{ position:relative;max-width:82%;font-size:.63rem;line-height:1.45; padding:.42rem 2.6rem .42rem .55rem;border-radius:8px;opacity:0; } .wa__balao em{position:absolute;right:.5rem;bottom:.3rem;font-style:normal;font-size:.48rem;color:#8696A0} .wa__balao--in{align-self:flex-start;background:#202C33;border-top-left-radius:2px} .wa__balao--out{align-self:flex-end;background:#005C4B;border-top-right-radius:2px} .wa__balao--out em{color:#8AD4C1} .demo.p3 .wa__balao--in{animation:balao .4s .35s var(--curva) forwards} .demo.p3 .wa__balao--out{animation:balao .4s 1.15s var(--curva) forwards} @keyframes balao{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}} .wa__campo{flex:none;display:flex;align-items:center;gap:7px;padding:7px 9px 14px} .wa__campo span{flex:1;font-size:.6rem;color:#8696A0;background:#2A3942;border-radius:100px;padding:.42rem .72rem} .wa__campo i{width:28px;height:28px;border-radius:50%;flex:none;background:#00A884} /* ═══ 6 · GARANTIAS ═══════════════════════════════════════════════════ */ /* ═══ RITMO DA PÁGINA ═══════════════════════════════════════════════════ Nove das dez seções eram 100% transparentes: a página inteira era uma chapa contínua de azul-noite, e num scroll longo o olho não tinha onde descansar nem o que ler como "começou outra coisa". A solução NÃO é fundo claro: os celulares têm brilho ciano e sombra desenhados para o escuro, e o monograma 3D e a marca d'água somem em fundo areia. O degrau é dentro do próprio azul, meio tom acima, com um fio de 1px marcando o corte. ⚠️ A cor é `--c-baia` a 50%, e NÃO `--c-noite`. Medi os dois contra a base: `--c-noite` dá um degrau de 1,04:1, que o olho não enxerga. Era ele que estava em `.garantias`, e por isso aquela faixa nunca pareceu destacada de nada. `--c-baia` a 50% dá 1,23:1, que se percebe sem berrar, e a metade de transparência deixa o fundo 3D continuar aparecendo por baixo. As seções alternam base/alta. As mais escuras (base) ficam com o portfólio e as dúvidas: é onde os aparelhos brilham mais. */ .garantias, .secao--alta{border-block:1px solid var(--linha);background:rgba(27,59,99,.5)} /* ── INVESTIMENTO · três planos "a partir de" ─────────────────────────── */ .planos{display:grid;grid-template-columns:1fr;gap:var(--e3)} @media (min-width:768px){ .planos{grid-template-columns:repeat(3,1fr);align-items:stretch} } .plano{ position:relative;display:flex;flex-direction:column; padding:1.7rem 1.4rem;border-radius:20px; border:1px solid var(--linha); background:linear-gradient(180deg,rgba(27,59,99,.42),rgba(18,46,79,.28)); } .plano--destaque{ border-color:var(--c-ciano); background:linear-gradient(180deg,rgba(34,211,238,.18),rgba(59,130,246,.09) 55%,rgba(18,46,79,.55)); box-shadow:0 22px 54px -26px rgba(34,211,238,.5); animation:planoRespira 4.5s var(--curva) infinite; /* brilho que "respira" — chama o olho pro plano recomendado */ } @keyframes planoRespira{ 0%,100%{ box-shadow:0 22px 54px -28px rgba(34,211,238,.42) } 50% { box-shadow:0 26px 66px -20px rgba(34,211,238,.72) } } @media (prefers-reduced-motion:reduce){ .plano--destaque{animation:none} } @media (min-width:768px){ .plano--destaque{transform:translateY(-10px)} } .plano__selo{ position:absolute;top:-.72rem;left:1.4rem;white-space:nowrap; font-family:var(--f-titulo);font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:#06121F;background:var(--grad-cta);padding:.3rem .7rem;border-radius:999px; } /* selo do 397: contorno ciano, mais sutil que o "Mais escolhido" preenchido do 597 — dois ganchos, mas o 597 continua o destaque visual mais forte. */ .plano__selo--custo{ background:rgba(34,211,238,.14);color:var(--c-ciano); border:1px solid var(--c-ciano); } .plano__nome{font-family:var(--f-titulo);font-size:1.12rem;font-weight:700;color:var(--texto);margin:0} .plano__preco{display:flex;flex-direction:column;gap:.05rem;margin:.55rem 0 .15rem} .plano__preco span{font-size:.76rem;color:var(--texto-apagado);letter-spacing:.02em} .plano__preco b{ font-family:var(--f-titulo);font-weight:800;font-size:2.1rem;line-height:1; background:var(--grad-cta);-webkit-background-clip:text;background-clip:text;color:transparent; } .plano__linha{ color:var(--texto-fraco);font-size:.95rem;margin:.4rem 0 1rem; padding-bottom:1rem;border-bottom:1px solid var(--linha); } .plano__prazo{ display:inline-flex;align-items:center;gap:.35rem;align-self:flex-start; margin:.5rem 0 .1rem;padding:.3rem .65rem;border-radius:999px; background:rgba(34,211,238,.12);border:1px solid var(--linha-forte); color:var(--c-ciano);font-family:var(--f-titulo);font-size:.72rem;font-weight:700;letter-spacing:.03em; } .plano__prazo svg{width:.95rem;height:.95rem;flex:none} .plano__itens{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.62rem;flex:1} .plano__itens li{position:relative;padding-left:1.6rem;color:var(--texto-fraco);font-size:.92rem;line-height:1.35} .plano__itens li::before{ content:'';position:absolute;left:0;top:.1em;width:1.05rem;height:1.05rem;background:var(--c-ciano); -webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat; mask:url('data:image/svg+xml;utf8,') center/contain no-repeat; } .plano__cta{width:100%;margin-top:auto;white-space:normal;padding-inline:1rem} .planos__nota{margin:var(--e4) auto 0;color:var(--texto-apagado);font-size:.9rem;text-align:center;max-width:52ch} .garantias__in{display:grid;grid-template-columns:1fr 1fr} .garantias__item{ padding:var(--e3) var(--e2);border-left:1px solid var(--linha); border-bottom:1px solid var(--linha); } .garantias__item:nth-child(odd){border-left:0} .garantias__item:nth-last-child(-n+2){border-bottom:0} .garantias__item b{ display:block;font-family:var(--f-titulo);font-size:1rem; color:var(--texto);font-weight:800;letter-spacing:-.02em;margin-bottom:.15rem; } .garantias__item span{font-size:.82rem;color:var(--texto-apagado);line-height:1.4} /* ═══ 7 · TIPOS DE NEGÓCIO — A ESCOLHA ════════════════════════════════ Quatro abas. A pessoa escolhe o negócio dela em vez de esperar a vez. Isto passava sozinho de 6 em 6 segundos, com os quatro nomes empilhados em `position:absolute` e só o da vez visível, mais uma barrinha de progresso mostrando quanto faltava para o próximo. O argumento era "demonstração, não menu". Caiu em 5/8/2026 por dois motivos práticos: quem chega procurando o próprio negócio fica esperando o dele aparecer em vez de ir atrás, e o "passar o mouse segura" — pensado para computador — no celular vira toque, então encostar na tela travava o giro e parecia defeito. O desenho é o mesmo das antigas fichas das dúvidas, que viraram acordeão e liberaram este padrão: fileira que rola de lado no celular, sem barra de rolagem à vista. */ .giro__nomes{ display:flex;gap:.4rem;overflow-x:auto;flex-wrap:nowrap; margin-inline:-1.1rem;padding:0 1.1rem .2rem;margin-bottom:var(--e4); scrollbar-width:none; } .giro__nomes::-webkit-scrollbar{display:none} .giro__nome{ white-space:nowrap;padding:.6rem 1rem;border-radius:var(--btn-r); font-family:var(--f-titulo);font-weight:700;font-size:.86rem; color:var(--texto-apagado);background:transparent; border:1px solid var(--linha);cursor:pointer; transition:color .25s,background .25s,border-color .25s; } .giro__nome[aria-selected="true"]{ color:#06121F;background:var(--grad-cta);border-color:transparent; } /* a inclinação no eixo X é o que dá o ar de folha virando em vez de texto trocando de opacidade */ .giro__palco{position:relative;perspective:1200px;min-height:var(--altura,auto)} .giro__caso{ position:absolute;inset:0;pointer-events:none; opacity:0;visibility:hidden; transform:translateY(26px) rotateX(7deg); transform-origin:50% 0; transition:opacity .3s var(--curva),transform .35s var(--curva),visibility .35s; } .giro__caso.ativo{ opacity:1;visibility:visible;transform:none; transition:opacity .5s var(--curva) .32s,transform .6s var(--curva) .32s,visibility 0s .32s; } .giro__texto h3{margin-bottom:var(--e2)} .giro__texto p{max-width:46ch;margin-bottom:0} /* a pilha: o esqueleto daquele tipo de página, montando-se de cima para baixo. É ela que prova a frase do título — a ordem muda de negócio para negócio. */ .pilha{ border:1px solid var(--linha);border-radius:var(--cartao-r); background:linear-gradient(180deg,rgba(18,46,79,.6),rgba(8,23,41,.5)); padding:var(--e3); } .pilha__topo{ font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--texto-apagado);padding-bottom:.7rem;margin-bottom:.8rem; border-bottom:1px dashed var(--linha-forte); } .pilha__lista{display:flex;flex-direction:column;gap:.42rem} .pilha__lista li{ position:relative;display:flex;align-items:center;gap:.7rem; padding:.72rem .85rem;border-radius:12px; border:1px solid var(--linha);background:rgba(234,242,251,.025); font-size:.9rem;color:var(--texto-fraco);overflow:hidden; } /* só encaixa quando o caso entra em cena: assim a pilha se monta na frente da pessoa a cada troca, em vez de já estar montada */ .giro__caso.ativo .pilha__lista li{animation:encaixar .5s var(--curva) both} .pilha__lista li:nth-child(1){animation-delay:.08s} .pilha__lista li:nth-child(2){animation-delay:.16s} .pilha__lista li:nth-child(3){animation-delay:.24s} .pilha__lista li:nth-child(4){animation-delay:.32s} .pilha__lista li:nth-child(5){animation-delay:.4s} @keyframes encaixar{from{opacity:0;transform:translateX(-14px) scaleX(.95)}to{opacity:1;transform:none}} .pilha__lista li::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-marca)} .pilha__lista li em{ font-style:normal;margin-left:auto;font-size:.66rem;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--texto-apagado); } .pilha__lista li:first-child{border-color:var(--linha-forte);background:var(--grad-tenue);color:var(--texto)} /* ═══ 8 · TRABALHOS — A DEMONSTRAÇÃO ═════════════════════════════════ Enquadrado em CELULAR, não em janela de navegador. As capturas são de 560px de largura — a de um telefone — então dentro da moldura o site aparece no tamanho real, e não espremido num retângulo deitado. É como o cliente dele vai ver: o tráfego vem da bio do Instagram. Ninguém escolhe nada e não existe "ver a página inteira". As molduras vivem em profundidade de verdade e se revezam sozinhas. */ /* O 3D aqui é do CSS, não do mouse — o giro que seguia o ponteiro foi removido porque no celular ele nunca existiu, e é do celular que vem quem chega pela bio. `perspective` curta é o que faz a profundidade aparecer numa tela de 360px: a 1600px o ponto de fuga fica tão longe que os aparelhos de trás voltam a parecer recortes colados. A 760px eles encolhem de verdade conforme se afastam. No computador a tela é larga e a mesma conta ficaria exagerada, então lá a perspectiva abre de novo. */ /* ── TROCA CELULAR ↔ COMPUTADOR: crossfade + a altura DESLIZANDO (FLIP) ─── Os dois modos moram no mesmo palco (.mostra__troca). Ao trocar, o que sai esvai (fade + encolhe de leve), o que entra surge, e a altura do palco desliza entre os dois tamanhos (a diferença passa de 380px — sem isso a página pularia). O JS mede e orquestra (trocarModo, main.js). Os seletores levam .mostra__troca na frente p/ vencer o `.rev` na propriedade transition. */ .mostra__troca{position:relative;margin-bottom:var(--e4);transition:height .42s var(--curva)} /* MATERIALIZAÇÃO: cada modo SE FORMA na tela (não é crossfade). Base: opacity + desfoque + transform, easing expo (o "premium" que peguei do cyberpunk- reveal do MotionSites). */ .mostra__troca .mostra,.mostra__troca .mostra__pc{ transition:opacity .5s cubic-bezier(.22,1,.36,1),filter .58s cubic-bezier(.22,1,.36,1),transform .62s cubic-bezier(.22,1,.36,1); } /* SAI: se dispersa — desfoca, sobe e escala pra fora (rápido, pra dar lugar) */ .mostra__troca .mostra.saindo,.mostra__troca .mostra__pc.saindo{ opacity:0;filter:blur(9px);transform:scale(1.06) translateY(-14px);transition-duration:.34s; } /* ENTRA: nasce DESFOCADO, superexposto e recuado, e se resolve — como uma imagem sendo revelada/impressa na tela (power-on). */ .mostra__troca .mostra.materializa,.mostra__troca .mostra__pc.materializa{ opacity:0;filter:blur(13px) brightness(1.55);transform:scale(.9) translateY(24px); } /* a VARREDURA ciano que corre por cima enquanto o modo se forma — a "borda" que materializa. Vive no palco, por cima dos dois modos. */ /* durante a troca os dois modos CONVIVEM: o que sai vira absoluto (por cima) e se dispersa; o que entra ocupa o fluxo (por baixo) e se forma — sem "buraco". O palco recorta o excedente enquanto a altura desliza. */ .mostra__troca.materializando{overflow:hidden} .mostra__troca .sobreposto{position:absolute;inset:0;width:100%;z-index:2} .mostra__troca.materializando::after{ content:'';position:absolute;left:0;right:0;top:-30%;height:30%;z-index:4; pointer-events:none;filter:blur(4px); background:linear-gradient(to bottom,transparent,rgba(34,211,238,.32) 55%,rgba(190,244,255,.72) 90%,transparent); animation:materializar-varre .72s cubic-bezier(.22,1,.36,1) forwards; } @keyframes materializar-varre{0%{top:-30%;opacity:0}14%{opacity:1}100%{top:106%;opacity:0}} .mostra{ position:relative; perspective:760px;perspective-origin:50% 44%; } .mostra__palco{ position:relative;padding-bottom:10%; transform-style:preserve-3d; animation:derivar 15s ease-in-out infinite; } @keyframes derivar{ 0%,100%{transform:rotateY(-11deg) rotateX(3.5deg)} 50% {transform:rotateY(11deg) rotateX(-2.5deg)} } /* ── APARELHOS SEGUEM O CURSOR (desktop): o sway automático some e o giro passa a responder ao mouse, com inércia (o JS seta --curX/--curY em ). A especificidade `.segue-cursor` vence as regras-base. ─────────────────── */ .segue-cursor .mostra__palco{ animation:none; transform:rotateY(calc(var(--curX,0) * 12deg)) rotateX(calc(var(--curY,0) * -7deg)); } .segue-cursor .janela{ animation:none; transform:rotateY(calc(var(--curX,0) * 6deg)) rotateX(calc(var(--curY,0) * -4deg)); } .obra{ position:absolute;top:0;left:0;width:58%; border-radius:30px;padding:7px; background:linear-gradient(155deg,#24405F 0%,#08111D 46%,#16283F 100%); box-shadow:0 0 0 1px rgba(34,211,238,.24), 0 40px 80px -30px rgba(0,0,0,.95), 0 0 80px -30px rgba(34,211,238,.4); backface-visibility:hidden; transition:left .9s var(--curva),transform .9s var(--curva), opacity .55s var(--curva),filter .9s var(--curva); } /* a primeira fica no fluxo e dita a altura do palco. Todas têm a mesma proporção, então tanto faz qual está na frente. */ .obra:first-child{position:relative} /* ═══ O LEQUE ════════════════════════════════════════════════════════════ Antes era uma FILA EM PROFUNDIDADE: a da frente e as outras duas empilhadas atrás e à direita, quase apagadas (opacidade .42 e .18). Só uma se lia; as outras eram sombra. Agora é um LEQUE SIMÉTRICO: a escolhida no centro e as outras duas abertas para os lados, viradas para dentro. Todas as três se leem, e a pessoa vê de uma vez que existem três trabalhos, não um. As posições são simétricas de propósito. Na fila antiga o olho seguia para a direita e saía da composição; no leque ele volta sempre para o centro, que é onde está a ficha. */ /* ⚠️ A POSIÇÃO HORIZONTAL SAI DO `left`, NÃO DO `translate`. Duas tentativas minhas falharam usando `translateX` em porcentagem, e a razão é dupla: porcentagem em `translate` é relativa à largura do PRÓPRIO elemento (58% do palco, não 100%), e ainda por cima o palco inteiro gira com a animação `derivar`, então o deslocamento local não corresponde ao que se vê. `left` em porcentagem é relativo ao PALCO e não sofre a rotação. Com a moldura em 58%, centralizar é `left:21%`. O `transform` fica só com profundidade e giro. */ /* ⚠️ LEQUE CIRCULAR DE 4 (24/8/2026): entrou o quarto trabalho (Ressignificar). O leque mostra TRÊS de cada vez — frente (0), direita (1) e esquerda (3) — e o quarto (2, o "oposto" da frente) fica ESCONDIDO no fundo, opacidade 0. Ao passar (setas, arrasto ou toque), o ciclo gira e o escondido emerge por um lado enquanto outro recolhe. Assim comporta 4 (ou mais) trabalhos sem apertar o leque. Os offsets 1 e 3 são simétricos de propósito; o 2 é a "sala dos fundos". */ .obra[data-off="0"]{left:21%;transform:translate3d(0,0,40px) rotateY(0deg) rotateZ(0deg);opacity:1;z-index:3} .obra[data-off="1"]{left:44%;transform:translate3d(0,7%,-220px) rotateY(-26deg) rotateZ(4deg);opacity:.62;filter:saturate(.72);z-index:2} .obra[data-off="3"]{left:-2%;transform:translate3d(0,7%,-220px) rotateY(26deg) rotateZ(-4deg);opacity:.62;filter:saturate(.72);z-index:2} .obra[data-off="2"]{left:21%;transform:translate3d(0,10%,-470px) rotateY(0deg) rotateZ(0deg);opacity:0;z-index:1} /* ── O LEQUE FECHADO, e a abertura ────────────────────────────────────── Antes de a seção chegar na tela as três ficam SOBREPOSTAS no centro, como um baralho na mão. Quando o reveal marca `pronto`, elas abrem. O escalonamento (`transition-delay` crescente) é o que faz parecer baralho sendo espalhado em vez de três coisas surgindo juntas. ⚠️ O estado fechado só existe com `.js`: sem JavaScript a classe `pronto` nunca chega e as três ficariam empilhadas para sempre. Sem `.js`, portanto, o leque já nasce aberto. */ .js .mostra:not(.pronto) .obra{ left:21%; transform:translate3d(0,0,0) rotateY(0deg) rotateZ(0deg) scale(.92); opacity:0; } .js .mostra.pronto .obra{transition-delay:0s} .js .mostra.pronto .obra[data-off="1"]{transition-delay:.08s} .js .mostra.pronto .obra[data-off="3"]{transition-delay:.14s} .js .mostra.pronto .obra[data-off="2"]{transition-delay:.20s} /* as laterais visíveis convidam ao toque; a da frente já está escolhida, e a escondida (off 2) não recebe clique */ .mostra .obra[data-off="1"],.mostra .obra[data-off="3"]{cursor:pointer} @media (hover:hover){ .mostra .obra[data-off="1"]:hover,.mostra .obra[data-off="3"]:hover{opacity:.9;filter:saturate(1)} } /* ── NAVEGAÇÃO DOS TRABALHOS (24/8/2026) ───────────────────────────────── Setas para passar um a um e pontos para ir direto a um trabalho. O gesto de arrastar no celular CONTINUA funcionando, mas não é mais anunciado: a dica "arraste" competia com os botões (dois modelos de interação na mesma tela — a pessoa via seta E "arraste" ao mesmo tempo). Agora o modelo claro é o clique; o arrasto fica como bônus silencioso. */ .mostra__nav{ display:flex;align-items:center;justify-content:center;gap:1.1rem; margin-top:var(--e4); } .mostra__seta{ flex:none;width:46px;height:46px;border-radius:50%; display:none;place-items:center; /* padrão = touch: setas ocultas (o gesto é arrastar); voltam no @media do PC */ border:1px solid var(--linha-forte);background:rgba(34,211,238,.06); color:var(--texto);transition:background .25s,border-color .25s,transform .15s; } .mostra__seta svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .mostra__seta:active{transform:scale(.93)} .mostra__meio{display:flex;flex-direction:column;align-items:center;gap:.55rem} .mostra__dots{display:flex;gap:.5rem;list-style:none;margin:0;padding:0} .mostra__dots button{ display:block;width:9px;height:9px;border-radius:50%;padding:0; background:var(--texto-fraco);opacity:.45; transition:opacity .25s,background .25s,transform .25s; } .mostra__dots button[aria-current="true"]{background:var(--c-ciano);opacity:1;transform:scale(1.3)} /* dica de arraste (entrou no lugar das setas): a setinha ↔ desliza de leve pros dois lados, convidando ao gesto. É só visual — o leitor de tela navega pelos pontos, por isso a dica é aria-hidden no HTML. */ .mostra__dica{ display:inline-flex;align-items:center;gap:.5rem;margin:0; font-size:.8rem;letter-spacing:.02em;color:var(--texto-fraco); } .mostra__dica svg{ width:20px;height:20px;flex:none;fill:none;stroke:var(--c-ciano); stroke-width:2;stroke-linecap:round;stroke-linejoin:round; animation:dicaArrasta 2.6s var(--curva,ease) infinite; } @keyframes dicaArrasta{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}} @media (prefers-reduced-motion:reduce){ .mostra__dica svg{animation:none} } /* PC (mouse, ponteiro fino): as setas de clicar voltam e a dica de arraste some — clicar é o esperado no computador; arrastar com mouse não é óbvio. No touch vale o contrário (dica aparece, setas somem — regras acima). */ @media (hover:hover) and (pointer:fine){ .mostra__seta{ display:grid } .mostra__dica{ display:none } } @media (hover:hover){ .mostra__seta:hover{background:rgba(34,211,238,.15);border-color:var(--c-ciano)} .mostra__dots button:hover{opacity:.8} } /* ── VER NO CELULAR OU NO COMPUTADOR (25/8/2026) ────────────────────────── O mesmo trabalho nos dois formatos. O botão liga/desliga entre o leque de celulares (`.mostra`) e a janela de navegador (`.mostra__pc`); o JS troca o `hidden` de cada um. O padrão segue o aparelho de quem visita. */ .mostra__modo{ display:flex;gap:.3rem;width:fit-content;margin:0 auto var(--e4); padding:.32rem;border-radius:99px; border:1px solid var(--linha);background:rgba(11,31,58,.45); } .mostra__modobtn{ display:inline-flex;align-items:center;gap:.5rem; padding:.55rem 1.15rem;border-radius:99px; font-family:var(--f-titulo);font-weight:700;font-size:.9rem; text-transform:uppercase;letter-spacing:.05em; color:var(--texto-fraco);transition:color .25s,background .25s; } .mostra__modobtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .mostra__modobtn[aria-pressed="true"]{background:var(--grad-cta);color:#06121F} @media (hover:hover){.mostra__modobtn:not([aria-pressed="true"]):hover{color:var(--texto)}} /* A JANELA DE NAVEGADOR: barra com o semáforo e o endereço, e a tela em proporção 3/2 (formato de monitor). As quatro capturas ficam empilhadas e só a `.ativa` aparece (troca por opacidade). Ela pede vida em dois tempos, a pedido do Augusto (25/8/2026): a tela ATIVA ROLA devagar dentro da moldura, como o site rola no celular; e a janela toda BALANÇA num giro 3D sutil — o equivalente ao `derivar` dos aparelhos, mas contido, para não perder a seriedade. A perspectiva mora no pai. */ .mostra__pc{position:relative;perspective:1700px;perspective-origin:50% 38%} .janela{ position:relative;border-radius:12px;overflow:hidden; border:1px solid var(--linha-forte);background:var(--fundo-alto); box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 80px -30px rgba(34,211,238,.32); transform-style:preserve-3d; animation:balancar-pc 17s ease-in-out infinite; } @keyframes balancar-pc{ 0%,100%{transform:rotateY(-4deg) rotateX(1.6deg) translateY(0)} 50% {transform:rotateY(4deg) rotateX(-1deg) translateY(-7px)} } .janela__barra{ display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem; background:#0E2136;border-bottom:1px solid var(--linha); } /* a barra virou um cabeçalho com o NOME do projeto (sem semáforo nem cara de navegador) — o JS troca o texto a cada trabalho. */ .janela__nome{ flex:1;min-width:0;text-align:center; font-size:.82rem;font-weight:600;letter-spacing:.01em;color:var(--texto-fraco); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .janela__tela{position:relative;aspect-ratio:3/2;overflow:hidden;background:#000} /* gravação real de cada site rodando (o vídeo é 3:2, igual à moldura, então preenche sem cortar). Só a tela ATIVA aparece; as outras somem por opacidade. O JS toca só a ativa e só no modo Computador — no celular nenhum vídeo é baixado. */ .pc-tela{ position:absolute;top:0;left:0;width:100%;height:100%; object-fit:cover;object-position:top center;background:#000; opacity:0;transition:opacity .5s var(--curva); } .pc-tela.ativa{opacity:1} /* CAPA: o print (poster) do projeto ativo por cima da janela — cobre 100% enquanto o vídeo carrega ou rebufferiza, então NUNCA aparece o fundo preto. O JS liga `.cobre` na troca e tira quando o vídeo COMEÇA A ANDAR (evento `timeupdate`, currentTime>0) — não no `playing`, que dispararia antes do 1º quadro decodificar e deixaria o iOS mostrar preto. */ .pc-capa{ position:absolute;top:0;left:0;width:100%;height:100%;z-index:2; object-fit:cover;object-position:top center;pointer-events:none; opacity:0;transition:opacity .3s var(--curva); } .pc-capa.cobre{opacity:1;transition:none} /* cobre na hora; a saída (revelar o vídeo) é que é suave */ @media (prefers-reduced-motion:reduce){ .janela{animation:none} } .obra__ilha{ position:absolute;top:15px;left:50%;translate:-50% 0;z-index:2; width:30%;height:4.5%;max-height:16px; background:#04080E;border-radius:99px; } .obra__tela{ position:relative;aspect-ratio:9/19.5;overflow:hidden; border-radius:24px;background:#000; } .obra__tela img{position:absolute;top:0;left:0;width:100%;height:auto} /* Só a da frente percorre, e só depois que a seção aparece na tela. Sem o `.viva` a animação começava no carregamento e já tinha acabado quando a pessoa rolava até aqui — a tela ficava parada no rodapé escuro do site, parecendo um celular desligado. Passar o mouse pausa no lugar (`play-state`) em vez de tirar a animação, que faria a imagem saltar de volta para o topo. ⚠️ E essa mesma armadilha estava aqui na troca, escondida. A animação morava só no `[data-off="0"]`. Quando o passador trocava, a moldura que saía perdia o seletor, a animação era REMOVIDA (não pausada) e a captura voltava ao topo num único quadro — medi 240px de tranco, com a moldura ainda 42% visível girando para trás. É a "travada" que se sente no celular. Agora a animação fica em TODAS as molduras e as de trás ficam pausadas: a que sai congela onde estava, que é o que o olho espera — o site continua ali, só recuou. Quem chega à frente recomeça do zero, e disso cuida o `reiniciarPercurso` na seção 7 do main.js. */ .mostra.viva .obra .obra__tela img{ animation:percorrer var(--percorre,8s) linear forwards; } .mostra.viva .obra:not([data-off="0"]) .obra__tela img, .mostra:not(.andando) .obra[data-off="0"] .obra__tela img{ animation-play-state:paused; } @keyframes percorrer{from{transform:translateY(0)}to{transform:translateY(var(--rolar,-80%))}} .mostra__fichas{position:relative;min-height:var(--altura,auto)} /* respiro entre a navegação (setas/pontos) e o nome do projeto: estavam colados e ele reclamou do amontoado. Só no empilhado (<1120); no grid do desktop as fichas ficam na coluna ao lado, com espaçamento próprio. */ @media (max-width:1119.98px){ .mostra__fichas{margin-top:var(--e4)} } /* o CTA logo depois da prova, centrado e com respiro em cima */ .projetos__cta{display:flex;width:fit-content;margin:var(--e5) auto 0} /* ── depoimentos (pronto para quando o HTML for descomentado) ───────── */ .depoimentos{display:grid;gap:var(--e3)} .depo{ margin:0;padding:var(--e4); border:1px solid var(--linha);border-radius:var(--cartao-r); background:rgba(8,23,41,.4); } .depo blockquote{ margin:0 0 var(--e3);font-size:1.08rem;line-height:1.5;color:var(--texto); } .depo blockquote::before{content:'“'} .depo blockquote::after{content:'”'} .depo cite{ font-style:normal;font-size:.82rem;font-weight:700; letter-spacing:.06em;color:var(--c-ciano); } /* ── quem faz: sorrindo na frente, séria ao lado e mais embaixo ──────── A COLORIDA sorrindo é a principal: inteira, na frente, com o nome, e o rosto nunca é coberto. A P&B séria fica AO LADO e mais embaixo, ATRÁS, só encostando na borda — sem colar uma na outra. Levemente ofuscada. Ganha luz ao passar o mouse; liga na seção 15 do main.js. */ .quem{display:grid;gap:var(--e4);justify-items:center;text-align:center} .retrato{position:relative;margin:0;width:min(400px,90vw);aspect-ratio:3/4} .retrato__img{width:100%;height:100%;object-fit:cover;display:block} /* a colorida: canto de cima-esquerda, na FRENTE (z maior), inteira. Retrato aberto (cabeça a quase a cintura): mostra ombros e camisa. */ .retrato__base{ position:absolute;top:0;left:0;margin:0;width:56%;aspect-ratio:700/1461;z-index:2; border-radius:calc(var(--cartao-r) + 2px);overflow:hidden; box-shadow:0 30px 72px -30px rgba(0,0,0,.9); } .retrato__base::after{ /* fio da marca por cima */ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; border:1px solid rgba(34,211,238,.3); } /* a séria: canto de baixo-direita, ATRÁS (z menor), só encostando na colorida. Levemente ofuscada, e inteira. */ .retrato__sobre{ position:absolute;right:0;bottom:0;margin:0;width:50%;aspect-ratio:760/950;z-index:1; padding:3px;border-radius:calc(var(--cartao-r) + 1px); background:linear-gradient(150deg,rgba(34,211,238,.45),rgba(124,58,237,.35)); box-shadow:0 24px 56px -26px rgba(0,0,0,.95); } .retrato__sobre .retrato__img{ border-radius:calc(var(--cartao-r) - 2px); filter:brightness(.82); /* ofuscada, mas não apagada */ transition:filter .4s var(--curva); } /* AS FOTOS SE JUNTANDO (24/8/2026). Pedido do Augusto: "as minhas fotos se juntando". A colorida (frente, canto de cima-esquerda) entra vindo da ESQUERDA; a séria (atrás, canto de baixo-direita) entra vindo da DIREITA e um tico menor — as duas deslizam de lados opostos e se encaixam na sobreposição final. Escalonado: a colorida chega primeiro, a séria fecha o par. Sem `.js` (JS fora do ar) as duas já ficam à mostra. */ .retrato__base,.retrato__sobre{ transition:opacity .7s var(--curva),transform .7s var(--curva), box-shadow .35s var(--curva); } .js .retrato__base{opacity:0;transform:translateX(-32px) translateY(6px)} .js .retrato__sobre{opacity:0;transform:translateX(38px) translateY(12px) scale(.93)} .retrato__sobre{transition-delay:.14s} .retrato--on .retrato__base,.retrato--on .retrato__sobre{opacity:1;transform:none} .retrato__selo{ position:absolute;left:0;right:0;bottom:0;z-index:3; padding:2rem .9rem .7rem;text-align:left; display:flex;flex-direction:column;gap:.1rem; font-family:var(--f-titulo);font-weight:800;color:#fff; font-size:clamp(.82rem,2.4vw,1rem); background:linear-gradient(to top,rgba(4,8,14,.92),rgba(4,8,14,.35) 60%,transparent); } .retrato__selo i{ font-style:normal;font-weight:600;font-size:.66rem;letter-spacing:.08em; text-transform:uppercase;color:var(--c-ciano); } .quem__texto h2{margin:.4rem 0 var(--e3)} .quem__texto p{max-width:46ch;margin-inline:auto} .quem__fecho{margin-top:var(--e3);color:var(--texto);font-weight:600} /* A que sai some em 0,3s; a que entra só começa aos 0,3s. Com as duas em meia opacidade ao mesmo tempo, o texto de um projeto aparecia escrito por cima do outro — ilegível. */ .ficha{ position:absolute;inset:0;opacity:0;visibility:hidden; transform:translateY(14px); transition:opacity .3s var(--curva),transform .3s var(--curva),visibility .3s; } .ficha.ativo{ opacity:1;visibility:visible;transform:none; transition:opacity .45s var(--curva) .3s,transform .5s var(--curva) .3s,visibility 0s .3s; } .ficha h3{margin-bottom:.25rem} .ficha__sub{ font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--c-ciano);margin-bottom:var(--e2); } .ficha p{max-width:52ch} /* a linha do problema: o que aquele negócio precisava resolver, dita antes da solução. Peso maior e cor de texto cheio, para o olho pegar a tensão primeiro e ler a resposta em seguida. */ .ficha__desafio{ font-family:var(--f-titulo);font-weight:700; font-size:1.05rem;line-height:1.3;color:var(--texto); margin-bottom:var(--e2); } /* ═══ 9 · FICHA TÉCNICA E TRILHA ══════════════════════════════════════ */ .especs{border-top:1px solid var(--linha-forte);margin-bottom:var(--e5)} .especs__linha{padding:.9rem 0;border-bottom:1px solid var(--linha);transition:padding-left .35s var(--curva)} .especs__linha dt{ font-size:.74rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase; color:var(--c-ciano);margin-bottom:.15rem; } .especs__linha dd{color:var(--texto);font-size:.98rem} .trilha{ border:1px solid var(--linha);border-radius:var(--cartao-r); background:linear-gradient(180deg,rgba(18,46,79,.55),rgba(8,23,41,.45)); padding:var(--e4) var(--e3) var(--e3); } .trilha__titulo{ font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--texto-apagado);margin-bottom:var(--e4); } .trilha__lista{position:relative;padding-left:2rem} .trilha__lista::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:var(--linha-forte)} .trilha__lista::after{ content:'';position:absolute;left:7px;top:6px;width:1px;height:var(--preenchido,0%); background:var(--grad-marca);box-shadow:0 0 12px rgba(34,211,238,.6); transition:height .7s var(--curva); } .trilha__lista li{position:relative;padding-bottom:var(--e4)} .trilha__lista li:last-child{padding-bottom:0} .trilha__lista li::before{ content:'';position:absolute;left:-2rem;top:.4rem;width:15px;height:15px;border-radius:50%; border:1px solid var(--linha-forte);background:var(--c-abismo); transition:border-color .4s,background .4s,box-shadow .4s; } .trilha__lista li.aceso::before{border-color:var(--c-ciano);background:var(--grad-marca);box-shadow:0 0 0 4px rgba(34,211,238,.16)} .trilha__lista h4{ font-family:var(--f-titulo);font-size:1.04rem;font-weight:800; letter-spacing:-.02em;color:var(--texto);margin-bottom:.15rem; } .trilha__lista p{font-size:.93rem} /* ═══ 10 · O COMBINADO ════════════════════════════════════════════════ */ /* ═══ O CARTÃO (ESCURO) ══════════════════════════════════════════════════ HISTÓRICO, porque a classe se chama `.claro` e isso confunde: por três semanas este foi um cartão CLARO, para destacar "O combinado" e as dúvidas numa página toda escura. Passou por branco puro, porcelana, degradê azul→branco e azul-médio — e em cada volta Augusto achou "muito branco". Em 24/8/2026 ele fechou a questão: *"não quero paredes de cor, quero que faça sentido com o site"*. O cartão VOLTOU AO ESCURO, e o destaque migrou da COR para o MOVIMENTO (o título se formando por trás de uma máscara — ver a seção de máscara no CSS e no main.js). Mantive o nome `.claro` para não caçar a classe no HTML; o que mudou foi só a pele. Agora é um contêiner escuro, e o conteúdo HERDA as cores padrão do site — título gelo, corpo neblina, rótulo e `.tinta` no degradê de sempre. Por isso quase não há regra de cor aqui embaixo: no escuro, o padrão do site já serve. ⚠️ Se um dia voltar a querer um cartão claro, NÃO é só trocar o fundo: todo o texto precisa inverter e o acento sair do ciano (1,24:1 no claro, some). O git guarda a versão clara inteira. */ .claro{ position:relative;border-radius:calc(var(--cartao-r) + 6px); border:1px solid var(--linha); /* azul-noite semitransparente: mais claro que o abismo o bastante para ler como cartão, escuro o bastante para pertencer ao site. Deixa o fundo (luzes, monograma) transparecer de leve — integra em vez de colar por cima. */ background:linear-gradient(165deg,rgba(27,59,99,.42) 0%,rgba(16,40,70,.28) 100%); box-shadow: var(--sombra-alta), inset 0 1px 0 rgba(234,242,251,.06); padding:var(--e5) 1.2rem;overflow:hidden; } .claro h2{margin-bottom:var(--e4)} .combinado__lista li{padding:var(--e3) 0;border-top:1px solid var(--linha)} .combinado__lista li:first-child{border-top:0;padding-top:0} .combinado__lista li:last-child{padding-bottom:0} /* as quatro etiquetas (SEM MOLDE…) ficam no tom apagado de propósito: viradas para o acento competiriam com o rótulo "O COMBINADO" logo acima, que já é ciano. */ .combinado__marca{ display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.16em; color:var(--texto-apagado);margin-bottom:.35rem; } .combinado__lista strong{ display:block;font-family:var(--f-titulo);font-weight:800; font-size:1.16rem;letter-spacing:-.028em; color:var(--texto);line-height:1.2;margin-bottom:.35rem; } .combinado__lista span{font-size:.95rem;max-width:56ch;display:block;color:var(--texto-fraco)} /* ═══ 11 · DÚVIDAS E O MEDIDOR DE PREÇO ═══════════════════════════════ */ /* ACORDEÃO. Todas fechadas ao chegar, e uma por vez. Aqui era um par de abas: a primeira resposta já vinha aberta e o quadro reservava 330px de altura mínima. Quem não tinha dúvida nenhuma pagava por uma resposta que não pediu — num celular, meia tela de rolagem entre a pessoa e o botão de falar comigo — e "Quanto custa?" aberto de saída respondia uma pergunta antes de ela ser feita. Fechado, o bloco inteiro cabe num polegar. */ .duvidas{border-top:1px solid var(--linha)} .duvida{border-bottom:1px solid var(--linha)} .duvida__titulo{margin:0;font-size:inherit;line-height:inherit} .duvida__botao{ width:100%;display:flex;align-items:center;gap:var(--e2); justify-content:space-between;text-align:left;cursor:pointer; padding:1.15rem 0;background:none;border:0; font-family:var(--f-titulo);font-weight:700; font-size:clamp(1rem,3.6vw,1.12rem);letter-spacing:-.015em; color:var(--texto);transition:color .25s; } .duvida__sinal{ width:20px;height:20px;flex:none; fill:none;stroke:var(--texto-apagado);stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round; transition:transform .35s var(--curva),stroke .25s; } .duvida.aberta .duvida__sinal{transform:rotate(180deg);stroke:var(--c-ciano)} /* A altura anima de 0fr para 1fr numa grade. É o jeito de fazer isso sem chumbar `max-height` num palpite: a linha mede o conteúdo de verdade, então resposta curta e resposta longa abrem no mesmo ritmo e nenhuma fica cortada. */ .duvida__resposta{ display:grid;grid-template-rows:0fr; transition:grid-template-rows .35s var(--curva); } .duvida.aberta .duvida__resposta{grid-template-rows:1fr} /* `visibility` some junto com o vão: sem ela o texto fechado continuaria alcançável pelo Tab e lido por leitor de tela, escondido só no olho. O atraso segura até a dobra terminar. */ .duvida__miolo{ overflow:hidden;visibility:hidden; transition:visibility 0s .35s; } .duvida.aberta .duvida__miolo{visibility:visible;transition-delay:0s} .duvida__miolo > :first-child{margin-top:0} .duvida__miolo p{margin-bottom:var(--e2);max-width:62ch} .duvida__miolo p:last-child{margin-bottom:1.15rem} .duvida__miolo strong{color:var(--texto);font-weight:700} /* As dúvidas moram dentro do cartão `.claro`. Como o cartão voltou a ser ESCURO (24/8/2026), o acordeão usa as mesmas cores de sempre — linha ciano, texto gelo, sinal apagado, ciano ao abrir. Não precisa de nenhum override aqui: o padrão do site já é o certo no escuro. */ /* ═══ 12 · FECHAMENTO ═════════════════════════════════════════════════ O último bloco antes da pessoa chamar no WhatsApp. Até 4/8/2026 ele abria com o símbolo da marca em espessura — dezoito cópias empilhadas no eixo Z. Saiu quando o fundo 3D passou a mostrar o monograma: eram três marcas na mesma tela, e uma delas girando em laço infinito bem atrás do campo. No lugar entrou a `.receita`, que responde a manchete em vez de repetir a marca. */ .fechamento{position:relative;padding-block:clamp(2.2rem,8vw,8rem);overflow:hidden;text-align:center} .fechamento__brilho{ position:absolute;left:50%;top:4%;translate:-50% 0; width:min(900px,130vw);aspect-ratio:1;pointer-events:none; background:radial-gradient(circle,rgba(34,211,238,.16),rgba(124,58,237,.1) 44%,transparent 66%); animation:pulsar 10s ease-in-out infinite; } @keyframes pulsar{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}} /* ── a receita ──────────────────────────────────────────────────── A resposta da manchete, escrita como quem fala. Sem moldura e sem cartão: se ganhasse borda viraria mais um bloco competindo com o campo, e o campo é o que importa nesta seção. */ .receita{ max-width:52ch;margin:var(--e4) auto 0; text-align:left;color:var(--texto-fraco); } .receita__quem{ font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--c-ciano);margin-bottom:var(--e2); } .receita__linha{ padding:.45rem 0 .45rem 1.15rem;position:relative;line-height:1.5; } /* o tracinho faz as três linhas lerem como lista falada, sem virar marcador de lista de verdade */ .receita__linha::before{ content:'';position:absolute;left:0;top:1.05em; width:.6rem;height:1px;background:var(--linha-forte); } .receita__linha b{color:var(--texto);font-weight:700} /* As linhas entram uma atrás da outra, como quem fala uma frase de cada vez. O mesmo escalonamento serve para a entrada e para a troca de negócio — 0,27s do primeiro ao último: vivo sem ficar lento. */ .receita__quem {--d:0s} .receita__linha:nth-child(2){--d:.09s} .receita__linha:nth-child(3){--d:.18s} .receita__linha:nth-child(4){--d:.27s} .receita__quem,.receita__linha{ transition:opacity .32s var(--curva) var(--d),transform .32s var(--curva) var(--d); } .js .receita__quem,.js .receita__linha{opacity:0;transform:translateY(8px)} .receita.pronto .receita__quem,.receita.pronto .receita__linha{opacity:1;transform:none} /* depois de `.pronto` de propósito: quando as duas classes coexistem esta ganha, e as linhas recuam antes de voltar com o texto novo */ .receita.trocando .receita__quem,.receita.trocando .receita__linha{ opacity:0;transform:translateY(8px); } .fechamento h2{margin-bottom:var(--e3)} .fechamento__sub{max-width:44ch;margin:0 auto var(--e4)} .pedido{ display:flex;flex-direction:column;gap:.5rem; width:min(100%,560px);margin:0 auto; padding:.5rem;border:1px solid var(--linha-forte);border-radius:26px; background:rgba(11,31,58,.75); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); transition:border-color .3s,box-shadow .3s; } .pedido:focus-within{border-color:var(--c-ciano);box-shadow:0 0 0 4px rgba(34,211,238,.14)} .pedido__campo{padding:.85rem 1rem;font-size:1rem;color:var(--texto);text-align:center;width:100%} .pedido__campo::placeholder{color:var(--texto-apagado)} .pedido__campo[aria-invalid="true"]{outline:2px solid var(--c-ciano);outline-offset:2px;border-radius:12px} .pedido .btn{width:100%} /* o aviso amigável quando o campo vem vazio (o balão do navegador fica desligado com JS; veja a seção 10 do main.js) */ .pedido__aviso{ margin-top:var(--e2);font-size:.9rem;color:var(--c-ciano); } .pedido__aviso[hidden]{display:none} .fechamento__sugestoes{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:var(--e3)} .sugestao{ font-size:.83rem;padding:.34rem .78rem;border-radius:99px; border:1px dashed var(--linha-forte);color:var(--texto-apagado); transition:color .25s,border-style .25s,background .25s; } .fechamento__fino{margin-top:var(--e3);font-size:.83rem;color:var(--texto-apagado)} /* ═══ 13 · RODAPÉ E FLUTUANTE ═════════════════════════════════════════ */ .rodape{border-top:1px solid var(--linha);padding-top:var(--e5);background:rgba(6,17,31,.6)} /* mesma história do botão flutuante: sem o `env()` a última linha do rodapé terminava por baixo da barra de gestos do iPhone */ .rodape__in{display:grid;gap:var(--e4);padding-bottom:calc(var(--e4) + env(safe-area-inset-bottom))} .rodape__sobre p{max-width:38ch;font-size:.93rem;margin-top:var(--e2)} .rodape h4{ font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase; color:var(--texto-apagado);margin-bottom:var(--e2); } .rodape__cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4)} /* Fica de pé mesmo sem uso hoje: a linha de horário do rodapé saiu em 19/8/2026 (o selo do topo virou "Online agora" fixo e as duas se contradiziam), mas volta junto se o selo voltar a ser por horário. São 3 linhas; apagar e reescrever depois custaria mais. */ .rodape__horario{ margin-top:.55rem;font-size:.8rem;color:var(--texto-apagado);line-height:1.45; } /* ═══ FORMAS DE PAGAMENTO ═══════════════════════════════════════════════ Fileira discreta entre o corpo do rodapé e a linha de copyright. É sinal de confiança, não chamada para ação: por isso fica apagada, sem cor de marca, e não compete com nada. */ .pagamentos{ display:flex;flex-wrap:wrap;align-items:center;gap:.7rem var(--e3); padding-block:var(--e3);border-top:1px solid var(--linha); } .pagamentos__diz{ font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase; color:var(--texto-apagado);margin:0; } .pagamentos__lista{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:0;padding:0} .pagamentos__item{ display:inline-flex;align-items:center;gap:.45rem; padding:.42rem .78rem;border:1px solid var(--linha);border-radius:99px; font-size:.82rem;font-weight:600;color:var(--texto-fraco); background:rgba(11,31,58,.45); } .pagamentos__item svg{width:16px;height:16px;flex:none;color:var(--c-ciano)} /* AS BANDEIRAS vivem numa pastilha clara, não soltas no escuro. Duas razões, e nenhuma é estética: a marca não pode ser recolorida, e o azul da Visa (#1434CB) sobre o azul-noite do site dá contraste de 1,6:1, que é ilegível. Pastilha branca resolve os dois de uma vez. */ .pagamentos__marca{ display:inline-flex;align-items:center;justify-content:center; height:36px;min-width:52px;padding:0 11px;border-radius:7px; background:#F5F7FA;box-shadow:inset 0 0 0 1px rgba(8,23,41,.12); } .pagamentos__marca .bandeira{display:block} svg.bandeira{width:34px} /* ✅ AS BANDEIRAS OFICIAIS. Arquivos originais de cada marca, baixados do Wikimedia Commons em 24/8/2026 — Visa, Mastercard e Elo (o Pix já era oficial, do Banco Central). Até então Visa e Elo eram TIPOGRAFIA aproximada e o Mastercard era reconstruído por geometria; agora são os desenhos registrados de verdade, sem redesenho à mão. Cada logo tem proporção própria, então mando pela ALTURA e deixo a largura seguir; a pastilha cresce pelo `min-width` para acomodar o mais largo. O Mastercard traz a palavra embaixo dos círculos, por isso vem um pouco mais alto. */ /* ⚠️ o `img.` na frente NÃO é enfeite: sem ele estas regras são (0,1,0) e perdem para `img.bandeira` (0,1,1), então a altura viraria a natural do SVG (999px) e o logo explodia na tela. Com o `img.` empatam e, vindo depois, vencem. */ img.bandeira{width:auto;object-fit:contain} img.bandeira--visa{height:15px} img.bandeira--mastercard{height:27px} img.bandeira--elo{height:21px} img.bandeira--pix{width:22px;height:22px} .rodape__col{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start} .rodape__col a{font-size:.95rem;transition:color .25s} .rodape__base{ display:flex;flex-wrap:wrap;gap:.5rem var(--e3);justify-content:space-between; padding-block:var(--e3);border-top:1px solid var(--linha); font-size:.8rem;color:var(--texto-apagado); } /* O `env(safe-area-inset-*)` aqui não é firula: o index.html declara `viewport-fit=cover`, que manda o iPhone estender a página por baixo do entalhe e da barra de gestos — e nada no CSS compensava isso. Com `bottom:1rem` (16px) contra uma barra de gestos de 34px, a metade de baixo deste botão ficava DEBAixo da barra do sistema: meio alvo comido, e um deslize para cima chamando o iOS em vez do WhatsApp. Em aparelho sem área segura o `env()` vale 0 e nada muda. */ .flutuante{ position:fixed;z-index:80; right:calc(1rem + env(safe-area-inset-right)); bottom:calc(1rem + env(safe-area-inset-bottom)); display:inline-flex;align-items:center;gap:.5rem; padding:1rem;border-radius:50%; background:var(--c-zap);color:#04220F;font-weight:800; box-shadow:0 14px 36px -10px rgba(37,211,102,.6); transform:translateY(120%) scale(.9);opacity:0; transition:transform .5s var(--curva-tensa),opacity .4s; } .flutuante.visivel{transform:none;opacity:1} .flutuante svg{width:22px;height:22px;fill:currentColor} .flutuante span{display:none} .flutuante::after{ content:'';position:absolute;inset:0;border-radius:inherit; border:2px solid var(--c-zap);animation:eco 2.6s ease-out infinite; } @keyframes eco{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(1.25);opacity:0}} /* ═══ 14 · A ENTRADA ══════════════════════════════════════════════════ Sem corte nenhum. O que aparece dentro do celular NÃO é uma maquete: é a própria página, movida para dentro da moldura. A câmera avança no eixo Z até chegar em 1:1 — nesse ponto o conteúdo já está exatamente onde vai ficar, e a moldura só precisa sumir. Não existe troca para a pessoa perceber, porque não existe troca. */ .camara{ position:fixed;inset:0;z-index:200; background:var(--c-abismo); overflow:hidden; perspective:1100px; perspective-origin:50% 50%; transition:opacity .3s ease; } .camara.saindo{opacity:0;pointer-events:none} .voo{ position:absolute;inset:0; transform-style:preserve-3d; transform:translateZ(var(--z,-1100px)) rotateY(var(--gy,-16deg)) rotateX(var(--gx,5deg)); transition:transform var(--dur,1.2s) cubic-bezier(.5,0,.15,1); will-change:transform; } /* a moldura sai de `box-shadow`, nunca de `border`: borda mudaria a caixa de conteúdo, a página lá dentro refluiria a cada quadro e o texto tremeria. Sombra fica por fora e não custa layout nenhum. */ .fone{ position:absolute;inset:0; overflow:hidden; /* o translateZ(0) não é enfeite: sem um transform aqui, quem está em `position:fixed` lá dentro (o topo, o menu, o fundo) usa o `.voo` como referência e ESCAPA deste `overflow:hidden` — o menu do celular aparecia flutuando fora da moldura. Com o transform, a moldura passa a ser o bloco de referência e recorta tudo. */ transform:translateZ(0); border-radius:var(--raio,44px); box-shadow:0 0 0 var(--moldura,11px) #0A1524, 0 0 0 calc(var(--moldura,11px) + 1px) rgba(34,211,238,.3), 0 60px 120px -40px rgba(0,0,0,.9), 0 0 130px -30px rgba(34,211,238,.4); transition:border-radius var(--dur,1.2s) cubic-bezier(.5,0,.15,1), box-shadow var(--dur,1.2s) cubic-bezier(.5,0,.15,1); } .fone__ilha{ position:absolute;top:14px;left:50%;translate:-50% 0;z-index:5; width:76px;height:20px;background:#04080E;border-radius:99px; transition:opacity .45s ease,transform .45s ease; } .camara.chegando .fone__ilha{opacity:0;transform:translate(-50%,-16px)} /* a página vive aqui dentro durante a entrada, no tamanho natural */ .fone__conteudo{position:absolute;inset:0;overflow:hidden} /* ═══ 15 · TELAS GRANDES ══════════════════════════════════════════════ */ @media (min-width:760px){ body{font-size:1.06rem} .wrap{width:min(100% - 3rem,var(--largura))} /* de tablet para cima o respiro entre seções volta ao tamanho grande — o aperto é só no celular */ .secao,.fechamento{padding-block:var(--e7)} .secao__topo{margin-bottom:var(--e5)} .topo__in{height:74px;gap:var(--e4)} /* O menu em linha NÃO mora mais aqui: ele desce para o `min-width:960px` lá embaixo. Com cinco links mais o botão, entre 760 e 959px os rótulos quebravam em duas e três linhas e o cabeçalho inchava para 77px de altura. Até 959px continua valendo a gaveta com o hambúrguer, que nessa largura ainda é a leitura mais limpa. */ .marca__sinal{width:38px} .marca__nome{font-size:1.14rem} .abertura{padding:calc(74px + var(--e3)) 0 var(--e6)} .eixo{gap:var(--e3)} .trio{gap:0 1rem} .trio__ico{width:44px;height:44px} .trio__ico svg{width:20px;height:20px} .trio::before,.trio::after{top:22px} .trio b{font-size:.95rem} .trio__diz{font-size:.83rem;max-width:20ch} .eixo__apoio{font-size:1.05rem} .demo__palco{width:auto} .secao__topo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--e5);align-items:end} .secao__lado{margin-top:0} /* depoimentos: até três lado a lado quando houver espaço */ .depoimentos{grid-template-columns:repeat(3,1fr);gap:var(--e4)} /* quem faz: a composição à esquerda, texto à direita */ .quem{ grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:var(--e6);align-items:center;justify-items:start;text-align:left; } .retrato{width:min(380px,40vw)} .quem__texto p{margin-inline:0} .garantias__in{grid-template-columns:repeat(4,1fr)} .garantias__item{border-bottom:0} .garantias__item:nth-child(odd){border-left:1px solid var(--linha)} .garantias__item:first-child{border-left:0} .giro__nomes{margin-inline:0;padding-inline:0} /* No computador os quatro viram uma coluna à esquerda, que é onde a escolha fica óbvia: os nomes inteiros, um debaixo do outro, e o escolhido acesa a barra da marca. No celular eles seguem a fileira que rola de lado, porque em coluna comeriam meia tela antes de a pessoa ver um exemplo sequer. */ .giro{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:var(--e5);align-items:start} .giro__nomes{ display:flex;flex-direction:column;gap:.4rem;overflow:visible; margin-inline:0;padding:0;margin-bottom:0; } .giro__nome{ white-space:normal;text-align:left; padding:.7rem .95rem;font-size:.95rem; } .giro__caso{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:var(--e5);align-items:start} /* no computador o aparelho encolhe: a 44% ele ficava com mil pixels de altura e a seção passava da tela inteira */ .obra{width:32%} /* e a perspectiva abre: numa tela larga a de 760px deformava demais */ .mostra{perspective:1500px} /* P2.3 · o espaço morto à direita do portfólio. Antes os celulares ficavam à esquerda e o texto do case caía embaixo, sozinho, com meia tela vazia ao lado. Agora os dois viram duas colunas: aparelhos à esquerda, o problema/solução daquele case à direita, na mesma altura. Só a partir de 1120px — o mobile e o tablet não mudam. */ #projetos .wrap{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); column-gap:var(--e6);align-items:center; } #projetos .secao__topo, #projetos .projetos__cta, #projetos .mostra__modo{grid-column:1 / -1} .mostra__troca{margin-bottom:0} /* a navegação mora na coluna dos celulares (esquerda), logo abaixo deles — não na coluna do texto. O leque fica na linha 2 col 1, a ficha na col 2, e o nav desce para a col 1 sozinho. */ #projetos .mostra__nav{grid-column:1;margin-top:var(--e3)} /* a janela de computador ocupa a mesma coluna que o leque de celulares (esquerda); a ficha do case continua à direita. */ #projetos .mostra__troca{grid-column:1;align-self:center} /* menos respiro entre seções numa tela alta: a --e7 (8rem em cima e embaixo) abria um salto grande, principalmente antes do "o que vem junto". A --e6 (5,5rem) mantém a separação sem o vão. */ .secao{padding-block:var(--e6)} .entrega{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e5);align-items:start} .especs{margin-bottom:0} .especs__linha{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.5fr);gap:var(--e2);align-items:baseline} .especs__linha dt{margin-bottom:0} .especs__linha:hover{padding-left:.7rem;background:rgba(34,211,238,.05)} /* o respiro do cartão claro é da peça, não do conteúdo dela: vale para "O combinado" e para as dúvidas do mesmo jeito */ .claro{padding:var(--e6) clamp(1.6rem,4vw,3.2rem)} .combinado__lista li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--e3);align-items:baseline} .combinado__marca{min-width:8.6rem;margin-bottom:0} .combinado__lista strong{font-size:1.45rem} /* No computador o acordeão não vira duas colunas: uma lista de perguntas em coluna estreita quebraria cada linha em três, e a resposta ao lado voltaria a reservar altura vazia — que é o que estava errado antes. Ele só ganha largura de leitura e um pouco mais de ar por linha. */ .duvidas{max-width:76ch} /* DENTRO DO CARTÃO CLARO a trava de 76ch trabalha contra: no escuro o que sobrava à direita era só fundo e ninguém via, no claro vira meia área pálida vazia ao lado das perguntas. Quem precisa de largura de leitura é a RESPOSTA, e ela já tem a trava dela (`.duvida__miolo p`, 62ch). A pergunta é uma linha curta com o sinal na ponta direita — ocupar a caixa inteira é o comportamento normal de um acordeão. */ .claro .duvidas{max-width:none} .duvida__botao{padding:1.35rem 0;font-size:1.15rem} .pedido{flex-direction:row;align-items:center;gap:.5rem;padding:.45rem .45rem .45rem 1.2rem;border-radius:99px} .pedido__campo{text-align:left;padding:.8rem 0;flex:1;min-width:0} .pedido .btn{width:auto;flex:none} .rodape__in{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)} .rodape__cols{gap:var(--e5)} .flutuante{padding:.85rem 1.2rem;border-radius:99px} .flutuante span{display:inline} } @media (min-width:960px){ /* MENU EM LINHA (veio do bloco de 760px). Só a partir daqui cabem os cinco links mais o botão sem quebrar. O `nowrap` é o cinto de segurança: se um dia entrar um sexto link, ele aperta o espaçamento em vez de quebrar o rótulo no meio. */ .topo__nav{ position:static;flex-direction:row;align-items:center;gap:var(--e4); margin-left:auto;padding:0;background:none;border:0;transform:none; backdrop-filter:none;-webkit-backdrop-filter:none; } .topo__nav a:not(.btn){ padding:0;border:0;font-size:.95rem;font-weight:600;position:relative; color:var(--texto-fraco);white-space:nowrap; } .topo__nav a:not(.btn)::after{ content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px; background:var(--grad-marca);transform:scaleX(0);transform-origin:left; transition:transform .35s var(--curva); } .topo__nav a:not(.btn):hover{color:var(--texto)} .topo__nav a:not(.btn):hover::after{transform:scaleX(1)} /* o próprio é o botão (`btn topo__navcta`), não um pai dele */ .topo__navcta{margin-top:0;white-space:nowrap} .hamburguer{display:none} /* A ASSINATURA VOLTA: o aparelho no meio da frase. `display:contents` dissolve a caixa do

(a semântica fica: leitor de tela e Google leem a frase inteira), e as duas metades viram itens da grade, com o aparelho entre elas. O subtítulo entra logo depois da manchete. */ /* volta ao centro: aqui o eixo da composição é o aparelho, não a margem esquerda. E as duas metades voltam ao MESMO tamanho, que é o que faz a frase abraçar o aparelho por igual (a hierarquia desigual é solução do celular, onde não existe wrap). */ .eixo{gap:var(--e2);justify-items:center;text-align:center} .eixo__rotulo{order:0;margin-bottom:0} .eixo__titulo{display:contents} /* os dois `:nth-of-type` precisam repetir a especificidade das regras base (que também usam `:nth-of-type`), senão elas ganham aqui dentro e o desktop herdaria a hierarquia desigual do celular */ .eixo__titulo .pal:nth-of-type(1), .eixo__titulo .pal:nth-of-type(2){ display:block;font-weight:800;color:var(--texto); font-size:clamp(2.2rem,4.1vw,3.4rem);line-height:1.02;letter-spacing:-.035em; margin-bottom:0; } .eixo__titulo .pal:nth-of-type(1){order:1} .demo{order:2} .eixo__titulo .pal:nth-of-type(2){order:3} .eixo__sub{order:4;text-align:center;max-width:52ch} /* CTA logo depois do subtítulo (antes dos 3 passos, igual ao celular), senão o aparelho + subtítulo empurram o botão para baixo da dobra. */ .eixo__acao{order:5} .trio{order:6} .eixo__apoio{order:7} .eixo__local{order:8} /* o aparelho encolhe um pouco no wrap: continua sendo a assinatura, e a coluna inteira cabe numa tela de laptop comum */ .aparelho{width:206px} } @media (min-width:1120px){ /* no computador a composição vira cartaz: tipo grande, aparelho no centro. Não é a mesma coisa esticada — é a mesma ideia, maior. */ .eixo__titulo .pal{font-size:clamp(3rem,4vw,3.9rem)} .aparelho{width:224px} } @media (hover:hover) and (pointer:fine){ .btn:hover{transform:translateY(-2px)} .btn--marca:hover{box-shadow:0 20px 52px -14px rgba(34,211,238,.6)} /* a foto séria (ofuscada) ganha luz ao passar o mouse */ .retrato:hover .retrato__sobre{transform:translateY(-6px);transition-delay:0s; box-shadow:0 38px 70px -22px rgba(0,0,0,.98),0 0 44px -18px rgba(34,211,238,.4)} .retrato:hover .retrato__sobre .retrato__img{filter:none;opacity:1} .btn--marca:hover::before{opacity:1} .btn--fantasma:hover{border-color:var(--c-ciano);background:rgba(34,211,238,.08)} .marca:hover .marca__sinal{transform:scale(1.06)} .duvida__botao:hover{color:var(--c-ciano)} .duvida__botao:hover .duvida__sinal{stroke:var(--c-ciano)} .giro__nome:hover{color:var(--texto)} .rodape__col a:hover{color:var(--c-ciano)} .sugestao:hover{color:var(--texto);border-style:solid;background:rgba(34,211,238,.08)} .flutuante:hover{box-shadow:0 18px 46px -10px rgba(37,211,102,.8)} } /* ═══ MOVIMENTO REDUZIDO ══════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important; } .js .rev,.js .entra,.js .pal{opacity:1;transform:none;filter:none} .js .eixo__titulo .pal.tinta{clip-path:none} /* sem varredura no título */ .js .topo .marca__sinal path{stroke-dashoffset:0} .fundo__luz{animation:none} /* o módulo já pula direto para o repouso com movimento reduzido, mas esconder o canvas é mais barato ainda: não desenha, não compõe, não acorda a GPU. As luzes de sempre ficam. */ #fundo3d,.veu{display:none} .fundo3d-pronto .fundo__luz{opacity:1} .demo .cena--zap{opacity:1;transform:none} /* aqui quem fica é a cena 3, então o repouso na cena 1 não vale — senão as duas apareceriam uma por cima da outra. Mesma especificidade da regra lá de cima, e vem depois: esta ganha. */ .demo:not(.p1):not(.p2):not(.p3) .cena--perfil{opacity:0} /* Com movimento reduzido os quatro casos aparecem empilhados, então a escolha perde a função e some — quem já está vendo tudo não tem o que escolher. Enquanto os nomes eram só rótulo isso era detalhe; agora que são botões, escondê-los precisa desta justificativa: o conteúdo que eles abriam continua todo na tela, nada fica inalcançável. O `.giro` volta a ser uma coluna só, senão a grade do computador deixaria um vão onde estavam os nomes. */ .giro__caso{position:relative;opacity:1;visibility:visible;transform:none} .giro__caso + .giro__caso{margin-top:var(--e6);border-top:1px solid var(--linha);padding-top:var(--e5)} .giro{display:block} .giro__nomes,.mostra{display:none} .ficha{position:relative;opacity:1;visibility:visible;transform:none} .ficha + .ficha{margin-top:var(--e4)} .mostra__palco{animation:none} .obra__tela img{animation:none} .aparelho{animation:none;transform:rotateY(-6deg) rotateX(2deg)} .aparelho__vidro::after{animation:none;opacity:.4;transform:translateX(60%) rotate(6deg)} .flutuante{transform:none;opacity:1} .flutuante::after{display:none} /* a receita aparece pronta: sem escalonamento, sem deslize */ .receita__linha,.receita__quem{transition:none;transform:none} } /* ═══ ESPAÇAMENTO OTIMIZADO NO MOBILE (≤640px) ════════════════════════════ Ele pediu menos "ar" no celular — a página tinha ritmo de desktop. Em vez de caçar margem por margem, aperto a ESCALA vertical num lugar só: reduzo os dois tokens grandes (--e4/--e5) e o padding das seções. Assim o site inteiro aperta de forma consistente. e1/e2/e3 ficam (já são gaps justos). Fica DEPOIS de tudo, para vencer as regras base; não colide com os blocos ≥760 (breakpoints distintos). Tablet/desktop seguem com o respiro cheio. */ @media (max-width:640px){ :root{ --e4:1.5rem; --e5:1.9rem; } .secao{padding-block:1.5rem} /* este é o CTA de texto mais longo do site; no celular ele encolhe um tiquinho (fonte/tracking/laterais) pra caber numa linha só, como os outros já cabem. Acima de 640px volta ao tamanho cheio do .btn--g. */ .projetos__cta{margin-top:var(--e3);font-size:.81rem;letter-spacing:.008em;padding:1rem 1.05rem} }