/* ========================================================================== PRÉVIA v5 (15/10/2026). Folha própria da index-v5.php: fundo escuro, vidro, pílula e degradê azul-laranja como acento. Um sistema só, repetido em toda seção: etiqueta em pílula, título com uma palavra em degradê, uma linha de apoio, cartão de vidro. No ar desde 20/10/2026 só na home; as outras páginas usam a style.css. ========================================================================== */ /* Mortend é a fonte de títulos do manual da marca (uso comercial exige a licença da Arterfak). Sem o arquivo licenciado, o @font-face saiu na publicação da home (20/10/2026) para não gerar 404; os títulos ficam na Sora, que é o que a prévia aprovada mostrava. Com a licença: arquivo em assets/fonts/mortend/ e o @font-face de volta. */ :root { --bg: #071230; /* navy do manual da marca */ --bg-2: #0b1a3f; --vidro: rgba(255, 255, 255, .04); --vidro-2: rgba(255, 255, 255, .08); --linha: rgba(255, 255, 255, .1); --linha-2: rgba(255, 255, 255, .2); --texto: #f2f4f8; --texto-2: #c3cad6; --mudo: #8d97a8; --tinta: #071230; /* texto escuro sobre o degradê */ --azul: #1a6fea; /* azul do manual */ --azul-claro: #00bffe; /* ciano do manual */ --quente: #00bffe; /* só azuis: o acento é o ciano */ --grad: linear-gradient(110deg, var(--azul) 0%, var(--azul-claro) 100%); --r-cartao: 10px; /* teto de 10 px aprovado pelo Leonardo */ --r-botao: 10px; --r-chip: 10px; --r-mini: 10px; --r-foto: 10px; --fd: 'Mortend', 'Space Grotesk', 'Sora', 'Segoe UI', system-ui, sans-serif; /* títulos: manual da marca */ --fb: 'Montserrat', 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, sans-serif; /* corpo: a mesma do manual */ --caixa: 1200px; --topo-h: 72px; --ez: cubic-bezier(.16, 1, .3, 1); /* entradas: saída rápida, pouso suave */ --ez2: cubic-bezier(.65, 0, .35, 1); /* traços e recortes: simétrica */ } /* ----- base ----- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 110px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--texto-2); font: 400 1.0625rem/1.7 var(--fb); overflow-x: clip; -webkit-font-smoothing: antialiased; } /* Sora auto-hospedada (a mesma de produção), só para o H1 do herói; uma face variável serve os pesos 600 a 800. Sora-fb: Arial ajustada às métricas da Sora, para o título não pular quando a fonte chega. */ @font-face { font-family: 'Sora'; font-style: normal; font-weight: 600 800; font-display: swap; src: url(../fonts/sora-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 600 800; font-display: swap; src: url(../fonts/sora-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Sora-fb'; src: local('Arial'), local('Liberation Sans'), local('Arimo'); size-adjust: 112.6%; ascent-override: 86.2%; descent-override: 25.8%; line-gap-override: 0%; } h1, h2, h3 { font-family: var(--fd); color: var(--texto); letter-spacing: 0; margin: 0 0 1rem; text-transform: uppercase; } h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.12; font-weight: 700; } h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.15; font-weight: 700; } h3 { font-size: 1.05rem; line-height: 1.3; font-weight: 700; } p { margin: 0 0 1rem; } a { color: var(--azul-claro); text-decoration: none; } a:hover { color: #fff; } img { max-width: 100%; height: auto; } ul { padding: 0; margin: 0; list-style: none; } .pular { position: absolute; left: -999px; top: 0; } .pular:focus { left: 16px; top: 16px; z-index: 100; background: #fff; color: var(--tinta); padding: .6rem 1rem; border-radius: var(--r-botao); } .caixa { max-width: var(--caixa); margin: 0 auto; padding: 0 20px; } .secao { position: relative; padding: 96px 0; overflow: clip; } /* clip, não hidden: o sticky dos segmentos continua funcionando */ .secao > .caixa { position: relative; z-index: 1; } .secao-curta { padding: 48px 0; } .centro { text-align: center; margin-top: 2.6rem; } .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .lead { color: var(--texto-2); font-size: 1.1rem; } /* ========================================================================== Entradas. Só valem com html.v5-anima, posto pelo v5-portao.js antes da primeira pintura (e retirado em 2,5 s se o v5.js não responder). A linguagem, a mesma da campanha da Sounet: títulos sobem palavra por palavra de trás de uma máscara com leve giro, rótulos se revelam da esquerda para a direita, parágrafos entram focando (desfoque → nítido), cartões sobem em cascata saindo do desfoque, faixas deslizam da direita e os painéis grandes sobem como cortina. Os botões nunca são animados direto (têm transição própria de hover): anima o bloco em volta. ========================================================================== */ html.v5-anima .rv { opacity: 0; transform: translateY(42px) scale(.98); filter: blur(6px); transition: opacity .9s var(--ez), transform 1.2s var(--ez), filter 1s var(--ez); transition-delay: calc(var(--i, 0) * 120ms); } html.v5-anima .rv.in { opacity: 1; transform: none; filter: none; } html.v5-anima .rv-x { opacity: 0; transform: translateX(90px); transition: opacity 1.1s var(--ez), transform 1.5s var(--ez); } html.v5-anima .rv-x.in { opacity: 1; transform: none; } #crm, #depoimentos { overflow-x: clip; } /* a faixa chega de fora da tela; clip (não hidden) não vira caixa de rolagem */ html.v5-anima .rv-clip { clip-path: inset(10% 10% 10% 10% round var(--r-foto)); transition: clip-path 1.3s var(--ez) .15s; } html.v5-anima .rv-clip.in { clip-path: inset(-40px -40px -40px -40px round var(--r-foto)); } /* títulos: cada palavra dentro de uma máscara; sobe de trás dela com o atraso --d (ms) */ .rv-m { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .06em .18em 0; margin: -.1em -.06em -.18em 0; } html.v5-anima .rv-i { display: inline-block; transform: translateY(112%) rotate(5deg); transform-origin: 0 100%; transition: transform 1.05s var(--ez); transition-delay: calc(var(--d, 0) * 1ms); } html.v5-anima .is-in .rv-i { transform: none; } /* o título só some até o JS embrulhar as palavras; sem JS a classe do portão cai e ele aparece */ html.v5-anima [data-ent] h1:not(.rv-ok), html.v5-anima [data-ent] h2:not(.rv-ok), html.v5-anima [data-ent] .cta-titulo:not(.rv-ok) { visibility: hidden; } /* a palavra em degradê, fatiada: o span não pinta mais; cada pedaço recebe o degradê (medidas no JS) */ .rv-ok .grad { background: none; } .rv-ok .grad .rv-i:not(.palavra), h1.fatiado .grad .letra { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* rótulos e olho: revelados da esquerda para a direita, sem mexer no layout */ html.v5-anima [data-ent] .olho { clip-path: inset(-2px 100% -2px -4px); transition: clip-path 1.1s var(--ez2) .12s; } html.v5-anima [data-ent].is-in .olho { clip-path: inset(-2px -4px -2px -4px); } html.v5-anima [data-ent] .rotulo { opacity: 0; translate: 0 10px; transition: opacity .7s var(--ez2) .1s, translate .7s var(--ez2) .1s; } html.v5-anima [data-ent].is-in .rotulo { opacity: 1; translate: 0 0; } /* parágrafos: entram focando */ html.v5-anima [data-ent] .ent-p { opacity: 0; filter: blur(9px); transform: translateY(10px); transition: opacity 1s var(--ez), filter 1.1s var(--ez), transform 1.1s var(--ez); transition-delay: .42s; } html.v5-anima .heroi .ent-p { transition-delay: calc(var(--h1, 500ms) - 120ms); } html.v5-anima [data-ent].is-in .ent-p { opacity: 1; filter: none; transform: none; } /* blocos de ação e apoio: sobem depois do título */ html.v5-anima [data-ent] .ent-bloco { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ez), transform 1s var(--ez); transition-delay: calc(var(--h1, 500ms) + var(--atraso, 0ms)); } html.v5-anima [data-ent].is-in .ent-bloco { opacity: 1; transform: none; } /* painéis grandes: sobem como cortina */ html.v5-anima .ent-cortina { clip-path: inset(22% 5% 0 5% round var(--r-cartao)); transform: translateY(34px); transition: clip-path 1.3s var(--ez), transform 1.3s var(--ez); } html.v5-anima .ent-cortina.is-in { clip-path: inset(0 round var(--r-cartao)); transform: none; } /* brilho que atravessa o botão principal logo depois de ele entrar */ .btn-grad { position: relative; overflow: hidden; } .btn-grad::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .55) 50%, transparent 75%); transform: translateX(-130%); } html.v5-anima [data-ent].is-in .btn-grad::after { animation: v5Sheen 1.2s var(--ez2) both; animation-delay: calc(var(--h1, 500ms) + .75s); } @keyframes v5Sheen { to { transform: translateX(130%); } } /* barra de progresso da rolagem, no topo */ .progresso { position: fixed; top: 0; left: 0; z-index: 70; height: 3px; width: 0; background: var(--grad); pointer-events: none; } /* ----- a pilha que abre toda seção ----- */ /* rótulo da seção: sem pílula; o triângulo do símbolo na frente do texto em caixa alta, como nos marcadores de lista do manual (16/10/2026) */ .rotulo { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.1rem; color: var(--azul-claro); font: 600 .72rem/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; } .rotulo .ico-tri { font-size: 1.05em; color: var(--quente); } .cabeca { text-align: center; max-width: 780px; margin: 0 auto 3.4rem; } .cabeca .lead { margin-bottom: 0; } /* ----- botões ----- */ .btn { display: inline-flex; align-items: center; gap: .55rem; padding: .95rem 1.5rem; border-radius: var(--r-botao); border: 1px solid transparent; font: 600 .95rem/1 var(--fb); white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; } .btn svg { width: 18px; height: 18px; flex: none; } .btn-g { padding: 1.1rem 1.8rem; font-size: 1rem; } /* letra branca (pedido do Leonardo em 20/10/2026, no herói e no "Orçamento grátis" da barra), com o ciano do degradê um pouco mais fundo para a letra ler na ponta clara */ .btn-grad { --grad: linear-gradient(110deg, var(--azul) 0%, #0aa8ea 100%); background: var(--grad); color: #fff; box-shadow: 0 8px 30px rgba(26, 111, 234, .25); } .btn-grad:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 40px rgba(26, 111, 234, .38); } /* Botão com a luz varrendo em ciclo (pedido do Leonardo em 20/10/2026, no estilo do botão do herói em produção): uma faixa de luz inclinada passando a cada 3,6 s, em vez da varredura única da entrada. */ .btn-brilho::after { background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%); transform: translateX(-100%) skewX(-12deg); } .btn-brilho::after, html.v5-anima [data-ent].is-in .btn-brilho::after { animation: v5Varre 3.6s ease-in-out 1.2s infinite; } @keyframes v5Varre { 0% { transform: translateX(-100%) skewX(-12deg); } 28%, 100% { transform: translateX(100%) skewX(-12deg); } } /* no hover, a mesma faixa de luz do botão do herói atravessa qualquer botão em degradê (pedido do Leonardo em 20/10/2026, no lugar de só trocar a cor). Fica no ::before porque o ::after é da varredura de entrada, que segura a posição final; ao sair do hover a faixa volta sem transição, já fora do botão. */ .btn-grad::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%); transform: translateX(-100%) skewX(-12deg); } .btn-grad:hover::before { transform: translateX(100%) skewX(-12deg); transition: transform .8s ease-in-out; } /* as letras do botão caem uma a uma na entrada, como no botão em produção (o v5.js envolve cada letra e sorteia o atraso em até 1,8 s; sem JS ou com movimento reduzido o texto aparece normalmente) */ .rotulo-anima { display: inline-block; } /* sem line-height próprio: o botão fica da mesma altura do vizinho */ .letra-cai { display: inline-block; opacity: 0; transform: translateY(-80px) rotateX(90deg) scale(.8); filter: blur(4px); } .letra-cai.visivel { animation: v5Cair .65s cubic-bezier(.22, 1, .36, 1) forwards; } @keyframes v5Cair { 0% { opacity: 0; transform: translateY(-80px) rotateX(90deg) scale(.8); filter: blur(6px); } 60% { opacity: 1; filter: blur(0); } 75% { transform: translateY(6px) rotateX(0deg) scale(1.02); } 90% { transform: translateY(-2px) rotateX(0deg) scale(.99); } 100% { opacity: 1; transform: translateY(0) rotateX(0deg) scale(1); filter: blur(0); } } .btn-vidro { background: var(--vidro); border-color: var(--linha-2); color: #fff; backdrop-filter: blur(8px); } .btn-vidro:hover { background: var(--vidro-2); border-color: rgba(255, 255, 255, .35); color: #fff; transform: translateY(-2px); } .btn-escuro { background: rgba(7, 18, 48, .85); color: #fff; backdrop-filter: blur(6px); } .btn-escuro:hover { background: var(--tinta); color: #fff; transform: translateY(-2px); } .btn-contorno-escuro { border-color: rgba(7, 18, 48, .4); color: var(--tinta); } .btn-contorno-escuro:hover { background: rgba(7, 18, 48, .12); color: var(--tinta); } .acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 1.4rem; } /* Ícones da marca: o símbolo (o 3 com o triângulo) e o triângulo sozinho, como máscara CSS sobre os SVGs extraídos do kit, na cor do texto ou do acento. */ .ico-cl3, .ico-tri { display: inline-block; flex: none; width: 1em; height: 1.09em; background: currentColor; -webkit-mask: url(../img/logo/cl3-simbolo.svg) center / contain no-repeat; mask: url(../img/logo/cl3-simbolo.svg) center / contain no-repeat; vertical-align: -.12em; } .ico-tri { width: .62em; height: 1em; -webkit-mask-image: url(../img/logo/cl3-tri.svg); mask-image: url(../img/logo/cl3-tri.svg); } .link-seta { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .95rem; } .link-seta .ico-tri { font-size: .8em; color: var(--azul-claro); transition: transform .2s ease; } .link-seta:hover .ico-tri { transform: translateX(3px); } .btn .ico-tri { font-size: .75em; } /* ----- cartão de vidro ----- */ .vidro { background: var(--vidro); border: 1px solid var(--linha); border-radius: var(--r-cartao); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease, background .25s ease; } .icone-grad { width: 52px; height: 52px; border-radius: 50%; background: var(--grad); color: var(--tinta); display: grid; place-items: center; flex: none; } .icone-grad svg { width: 24px; height: 24px; } .checks { display: grid; gap: .8rem; margin: 1.4rem 0 1.6rem; } .checks li { display: flex; gap: .75rem; align-items: center; color: var(--texto); font-size: .98rem; } .checks .ico-cl3 { color: var(--azul-claro); font-size: 1.5em; } /* menor que ~24 px o símbolo vira uma bolinha */ .checks.duas { grid-template-columns: 1fr 1fr; gap: .8rem 1.5rem; } /* ----- brilhos de fundo ----- */ .brilho { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; pointer-events: none; } .brilho-azul { width: 560px; height: 560px; left: -180px; top: -140px; background: rgba(26, 111, 234, .35); } .brilho-quente { width: 520px; height: 520px; right: -160px; top: 120px; background: color-mix(in srgb, var(--quente) 32%, transparent); } .brilho.pequeno { width: 440px; height: 440px; right: -140px; top: -180px; opacity: .45; } /* ----- fundos de seção com as ideias do manual da marca ----- bolha: bloco azul em degradê com um canto bem arredondado, sangrando pela borda (capas do manual); pontos: grade 5x3; símbolo em marca d'água; faixa do padrão numa borda; barra azul fina na margem (página da personalidade). */ .deco { position: absolute; z-index: 0; pointer-events: none; } .deco-bolha { width: 520px; height: 360px; background: linear-gradient(135deg, var(--azul) 0%, var(--azul-claro) 100%); opacity: .12; } .secao:not(.claro) .deco-bolha { opacity: .2; } .deco-bolha.ne { right: -150px; top: -130px; border-bottom-left-radius: 260px; } .deco-bolha.no { left: -150px; top: -130px; border-bottom-right-radius: 260px; } .deco-bolha.se { right: -150px; bottom: -130px; border-top-left-radius: 260px; } .deco-bolha.so { left: -150px; bottom: -130px; border-top-right-radius: 260px; } .deco-pontos { --pontos: rgba(26, 111, 234, .5); width: 96px; height: 56px; background-image: radial-gradient(circle, var(--pontos) 1.7px, transparent 2.3px); background-size: 20px 20px; } .secao:not(.claro) .deco-pontos { --pontos: rgba(255, 255, 255, .28); } .deco-pontos.ne { right: 4%; top: 64px; } .deco-pontos.no { left: 4%; top: 64px; } .deco-pontos.se { right: 4%; bottom: 64px; } .deco-pontos.so { left: 4%; bottom: 64px; } .deco-simbolo { width: 44%; max-width: 600px; aspect-ratio: 489 / 533; background: rgba(255, 255, 255, .035); -webkit-mask: url(../img/logo/cl3-simbolo.svg) center / contain no-repeat; mask: url(../img/logo/cl3-simbolo.svg) center / contain no-repeat; } .claro .deco-simbolo { background: rgba(26, 111, 234, .06); } .deco-simbolo.ne { right: -9%; top: -8%; } .deco-simbolo.so { left: -9%; bottom: -8%; transform: scaleX(-1); } .deco-padrao { top: 0; bottom: 0; width: 220px; background: url(../img/logo/cl3-padrao.webp) 0 0 / 150px auto repeat; } .claro .deco-padrao { background-image: url(../img/logo/cl3-padrao-claro.webp); } .deco-padrao.o { left: 0; -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); } .deco-padrao.l { right: 0; -webkit-mask-image: linear-gradient(270deg, #000, transparent); mask-image: linear-gradient(270deg, #000, transparent); } .deco-barra { left: 0; top: 14%; bottom: 14%; width: 6px; background: var(--grad); border-radius: 0 3px 3px 0; } @media (max-width: 760px) { .deco-padrao, .deco-bolha { display: none; } .deco-simbolo { width: 72%; } .deco-pontos { width: 56px; height: 36px; } /* no celular o cabeçalho é centralizado: os pontos ficam acima/abaixo dele */ .deco-pontos.ne, .deco-pontos.no { top: 22px; } .deco-pontos.se, .deco-pontos.so { bottom: 22px; } } /* ----- cabeçalho flutuante ----- */ /* ----- cabeçalho (19/10/2026): o formato da produção, barra de largura total que fica opaca e encolhe ao rolar, some ao descer e volta ao subir; marcador deslizante e painel de serviços ----- */ .topo { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--topo-h); display: flex; align-items: center; background: transparent; border-bottom: 1px solid transparent; transition: height .28s cubic-bezier(.4, 0, .2, 1), background-color .28s ease, border-color .28s ease, transform .34s cubic-bezier(.4, 0, .2, 1); } /* fundo ao rolar igual ao da produção (pedido do Leonardo em 20/10/2026): navy quase preto, menos azulado, e o fio #1b2c46 */ html.is-rolado .topo { height: 62px; background: rgba(5, 13, 26, .82); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); border-bottom-color: #1b2c46; } .topo-solido { background: rgba(5, 13, 26, .96); border-bottom-color: #1b2c46; } .topo.oculto { transform: translateY(-101%); } .topo-miolo { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; } .marca { display: flex; align-items: center; } .marca img { display: block; height: 34px; width: auto; transition: height .28s cubic-bezier(.4, 0, .2, 1); } html.is-rolado .marca img { height: 29px; } .menu { position: static; display: flex; align-items: center; gap: 1.4rem; } /* estático: o painel e o marcador se posicionam pelo miolo da barra, não pelo nav */ .menu > ul { display: flex; gap: .15rem; } .menu > ul > li { position: relative; } .menu > ul > li > a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .9rem; border-radius: var(--r-botao); color: var(--texto-2); font-weight: 500; font-size: .95rem; white-space: nowrap; transition: color .2s ease; } .menu > ul > li > a:hover, .menu > ul > li > a.ativa { color: #fff; } /* Um marcador só: sublinhado de 2px no degradê da marca, da largura do texto, que desliza até o item sob o mouse e repousa no ativo (medidas no v5.js). O mesmo desenho do menu em produção, pedido do Leonardo em 20/10/2026 no lugar da pílula de vidro. Sublinhado por item não desliza: são caixas separadas. */ .menu-marcador { position: absolute; left: 0; top: 0; width: 0; height: 2px; border-radius: 2px; background: var(--grad); opacity: 0; transform-origin: left center; transition: transform .32s cubic-bezier(.4, 0, .2, 1), width .32s cubic-bezier(.4, 0, .2, 1), opacity .2s ease; pointer-events: none; } .menu-marcador.visivel { opacity: 1; } .menu-seta { width: .5em; height: .75em; background: currentColor; -webkit-mask: url(../img/logo/cl3-tri.svg) center / contain no-repeat; mask: url(../img/logo/cl3-tri.svg) center / contain no-repeat; rotate: 90deg; transition: rotate .25s ease; opacity: .7; } .tem-sub:hover .menu-seta, .tem-sub:focus-within .menu-seta { rotate: -90deg; opacity: 1; } /* Painel de serviços, editorial (escolhido pelo Leonardo em 19/10/2026 entre lista numerada, editorial e lista simples): abre no hover ou no foco de "Serviços", da largura do menu, com serviços, segmentos e um cartão com imagem levando à análise grátis. Sem ícones: as caixinhas em degradê com ícone genérico davam cara de template. */ .menu > ul > li.tem-sub { position: static; } /* o painel se posiciona pela barra inteira, não pelo item (pesa mais que .menu > ul > li) */ .submenu { position: absolute; left: 20px; right: 20px; grid-template-columns: 1.05fr .85fr 320px; gap: 2.4rem; padding: 1.6rem 1.8rem; top: calc(100% + 10px); display: grid; border-radius: var(--r-cartao); background: rgba(7, 18, 48, .97); border: 1px solid var(--linha-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s; } .submenu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* ponte: o mouse cruza o vão sem o painel fechar */ .tem-sub:hover > .submenu, .tem-sub:focus-within > .submenu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .tem-sub:hover .sub-item, .tem-sub:focus-within .sub-item, .tem-sub:hover .sub-destaque, .tem-sub:focus-within .sub-destaque { animation: v5Sobe .4s var(--ez) both; animation-delay: calc(var(--i, 0) * 35ms); } .sub-titulo { font: 600 .68rem/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--azul-claro); margin: 0 0 .7rem; } .sub-lado ul { display: grid; gap: .4rem; margin-bottom: .9rem; } .sub-lado ul a { color: var(--texto-2); font-size: .92rem; transition: color .2s ease, padding-left .2s ease; } .sub-lado ul a:hover { color: #fff; padding-left: .3rem; } .sub-lado .link-seta { font-size: .86rem; margin-top: .35rem; } .submenu .sub-col { display: flex; flex-direction: column; } .submenu .sub-item { display: block; padding: .62rem 0 .62rem .1rem; border-bottom: 1px solid var(--linha); color: var(--texto-2); transition: padding-left .25s var(--ez); } .submenu .sub-item:last-child { border-bottom: 0; } .submenu .sub-item:hover { padding-left: .6rem; } .submenu .sub-item strong { display: block; color: var(--texto); font-size: 1rem; font-weight: 600; line-height: 1.25; transition: color .2s ease; } .submenu .sub-item:hover strong { color: var(--azul-claro); } .submenu .sub-item > span { display: block; font-size: .78rem; color: var(--mudo); margin-top: .12rem; } .submenu .sub-lado { padding-left: 2.4rem; border-left: 1px solid var(--linha); } .submenu .sub-lado ul a { font-size: .98rem; } .sub-destaque { position: relative; display: flex; align-items: flex-end; min-height: 300px; border-radius: var(--r-foto); overflow: hidden; border: 1px solid var(--linha); color: var(--texto-2); } .sub-destaque img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transition: transform .9s var(--ez); } .sub-destaque:hover img { transform: scale(1.05); } .sub-destaque::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 18, 48, .1) 0%, rgba(7, 18, 48, .55) 45%, rgba(7, 18, 48, .95) 100%); } .sub-destaque-txt { position: relative; z-index: 1; display: grid; gap: .3rem; padding: 1.1rem 1.2rem; } .sub-destaque-txt .sub-titulo { margin-bottom: .2rem; } .sub-destaque-txt strong { color: #fff; font-size: 1.1rem; line-height: 1.2; } .sub-destaque-txt > span:not(.sub-titulo):not(.link-seta) { font-size: .82rem; color: var(--texto-2); } .sub-destaque-txt .link-seta { margin-top: .4rem; color: #fff; font-size: .86rem; } .btn-topo { white-space: nowrap; transition: transform .2s ease, box-shadow .25s ease, color .2s ease; } html.is-rolado .btn-topo { transform: scale(.94); } .menu a.btn-menu-cel { display: none; } /* só no menu do celular */ .menu-botao { display: none; } .menu-veu { position: fixed; inset: 0; z-index: 49; background: rgba(2, 6, 14, .6); opacity: 0; transition: opacity .26s ease; } .menu-veu.visivel { opacity: 1; } .menu-veu[hidden] { display: none; } /* ----- herói ----- */ .heroi { position: relative; overflow: hidden; padding: calc(var(--topo-h) + 72px) 0 48px; } /* pouco respiro em cima (20/10) e embaixo: o mural é colado na borda */ /* O astronauta de volta, em três pedaços: cada carrega a foto inteira sob uma máscara serrilhada (pedaco-1/2/3) e, conforme o JS avança --p com a rolagem, cada pedaço sai pelo seu vetor (--tx/--ty/--tr) a partir do seu --t0, por isso o rasgo abre aos poucos. Sem JS ou no celular, a foto fica inteira. O degradê por cima escurece a foto para o texto ler bem e funde a base com o fundo da página. */ .rasgo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .rp { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 11, 22, .78) 0%, rgba(5, 13, 26, .88) 70%, var(--bg) 100%), /* o mesmo véu do herói em produção (20/10/2026): mais escuro, fechando no fundo da página */ var(--bg) url(../img/espaco.webp) center / cover no-repeat; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --pl: clamp(0, calc((var(--p, 0) - var(--t0, 0)) * var(--k, 1)), 1); transform: translate(calc(var(--pl) * var(--tx, 0%)), calc(var(--pl) * var(--ty, 0%))) rotate(calc(var(--pl) * var(--tr, 0deg))); opacity: calc(1 - max(var(--pl) - .55, 0) / .45); will-change: transform, opacity; } .rp-1 { -webkit-mask-image: url(../img/pedaco-1.webp); mask-image: url(../img/pedaco-1.webp); --tx: -16%; --ty: 22%; --tr: -7deg; --t0: 0; --k: 1; } .rp-2 { -webkit-mask-image: url(../img/pedaco-2.webp); mask-image: url(../img/pedaco-2.webp); --tx: 1%; --ty: 32%; --tr: 3deg; --t0: .07; --k: 1.075; } .rp-3 { -webkit-mask-image: url(../img/pedaco-3.webp); mask-image: url(../img/pedaco-3.webp); --tx: 18%; --ty: -18%; --tr: 6deg; --t0: .14; --k: 1.163; } @media (max-width: 960px), (prefers-reduced-motion: reduce) { .rp { -webkit-mask-image: none; mask-image: none; transform: none; opacity: 1; } .rp-2, .rp-3 { display: none; } } @media (max-width: 768px) { .rp { background-image: linear-gradient(180deg, rgba(7, 18, 48, .6) 0%, rgba(7, 18, 48, .78) 60%, var(--bg) 100%), url(../img/espaco-mobile.webp); } } /* O título se desmonta ao rolar: o JS fatia o H1 em letras (.letra dentro de .palavra, que segura a quebra de linha) e sorteia para cada uma um vetor (--dx/--dy/--dr), um ponto de partida (--t0) e o fator --k = 1/(1 - t0). Cada letra só começa a voar quando --p passa do seu --t0: o conjunto se desfaz aos poucos, no mesmo ritmo do rasgo da foto. */ .heroi .palavra { display: inline-block; white-space: nowrap; } .heroi .letra { display: inline-block; } .heroi .desfaz { --pl: clamp(0, calc((var(--p, 0) - var(--t0, 0)) * var(--k, 1)), 1); transform: translate(calc(var(--pl) * var(--dx, 0px)), calc(var(--pl) * var(--dy, 0px))) rotate(calc(var(--pl) * var(--dr, 0deg))); opacity: calc(1 - var(--pl)); will-change: transform, opacity; } /* fatiada, a palavra em degradê pinta o degradê letra por letra, cada uma com o recorte que lhe cabe (tamanho e posição vêm do JS), senão cada letra ganharia o degradê inteiro e a varredura pela palavra se perderia */ .heroi h1.fatiado .grad { background: none; } .heroi h1.fatiado .grad .letra { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .heroi h1.fatiado .grad .letra.pontua { background: none; color: var(--texto); -webkit-text-fill-color: var(--texto); } /* a vírgula colada à palavra em degradê fica branca */ /* rótulo acima do H1 (opção E, escolhida em 15/10/2026): barra azul à esquerda e a frase em duas linhas, caixa normal, peso médio. Sem pílula, sem traço. */ .olho { display: inline-block; margin: 0 0 1.2rem; padding: .15rem 0 .15rem .9rem; border-left: 3px solid var(--azul); color: var(--texto-2); font: 500 .98rem/1.45 var(--fb); } /* texto à esquerda, encostado na base, e a cena do mural à direita (mural, escolhido pelo Leonardo em 17/10/2026) */ /* Fundo animado do herói, céu com profundidade (escolhido pelo Leonardo em 20/10/2026 entre céu, aurora e órbitas, no lugar dos ícones de plataformas flutuando e do selo girando da home em produção): estrelas em camadas cintilando e à deriva e uma estrela cadente de tempos em tempos (canvas, v5.js), mais uma luz lenta varrendo a cena (camada CSS animada só por transform). Por cima da foto e atrás do texto e do mural. */ .fundo-heroi { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .ceu { display: block; width: 100%; height: 100%; } .ceu-luz { position: absolute; left: 50%; top: 40%; width: 90vw; height: 90vw; max-width: 1100px; max-height: 1100px; margin: -45vw 0 0 -45vw; border-radius: 50%; background: radial-gradient(circle, rgba(0, 191, 254, .16) 0%, rgba(26, 111, 234, .08) 38%, rgba(26, 111, 234, 0) 66%); animation: v5Luz 26s ease-in-out infinite alternate; } @media (min-width: 1223px) { .ceu-luz { margin: -550px 0 0 -550px; } } @keyframes v5Luz { from { transform: translate(-28%, -10%); } to { transform: translate(28%, 14%); } } .heroi-grade { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: end; } /* a coluna do texto um pouco maior: "seu Site Profissional," cabe numa linha na Sora de produção */ .heroi-texto { padding-bottom: 20px; } /* H1 do herói no padrão do H1 de produção (pedido do Leonardo em 20/10/2026): Sora 800, o mesmo tamanho e a caixa como está escrita (só as iniciais das palavras-chave), em vez da Mortend em caixa alta dos outros títulos. */ .heroi h1 { font: 800 clamp(2.2rem, 4.8vw, 3.6rem)/1.15 'Sora', 'Sora-fb', 'Segoe UI', sans-serif; letter-spacing: -.03em; text-transform: none; margin-bottom: 1.3rem; } @media (max-width: 699px) { .heroi h1 { font-size: 1.9rem; } } .heroi .lead { font-size: 1.15rem; max-width: 520px; margin-bottom: 2rem; } .heroi-nota { color: var(--mudo); font-size: .92rem; margin: 0; } .heroi-nota strong { color: var(--texto-2); font-weight: 600; } /* .etiqueta continua na jornada; no herói as provas têm três desenhos (?prova=a|b|c, 19/10/2026) */ .etiqueta { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; padding: .65rem 1.05rem; border-radius: var(--r-chip); background: rgba(7, 18, 48, .82); border: 1px solid var(--linha-2); backdrop-filter: blur(12px); color: #fff; font: 500 .88rem/1 var(--fb); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); } .etiqueta strong { font-weight: 700; } .estrelas { color: #ffb020; letter-spacing: .04em; font-size: .85em; } /* a cena: estica até a borda de baixo do herói (a margem negativa anula o padding) para o mural ficar colado nela */ .heroi-cena { position: relative; align-self: stretch; min-height: 580px; margin-bottom: -48px; } /* Mural de três sites em degraus: o do meio na frente e mais baixo, os laterais atrás, mais altos e girados 4°, para a barra de cada um ficar à mostra; todos cortados pela borda de baixo do herói, como se saíssem de baixo. Cada site numa janela do Safari: semáforo vermelho, amarelo e verde e o segmento no campo de endereço (pedido do Leonardo em 20/10/2026). No hover o site vem para a frente (palco, aprovado pelo Leonardo em 20/10/2026 depois de comparar com o leque e o rodízio). */ .mural { position: absolute; inset: 0 -6px 0; } .ms { position: absolute; top: 40px; width: 60%; height: calc(100% - 10px); margin: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-foto); background: #26282e; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 24px 50px rgba(0, 0, 0, .55); } /* barra do Safari escuro: semáforo à esquerda e o campo de endereço no centro (a terceira coluna, vazia, é o que o centraliza) */ .ms-barra { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; height: 32px; padding: 0 12px; background: linear-gradient(180deg, #383b42 0%, #2c2e34 100%); border-bottom: 1px solid rgba(0, 0, 0, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09); } .ms-luzes { display: flex; gap: 7px; } .ms-luzes i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .3); } .ms-luzes i:nth-child(2) { background: #febc2e; } .ms-luzes i:nth-child(3) { background: #28c840; } .ms-end { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 14px; border-radius: 6px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); font-size: .64rem; font-weight: 500; letter-spacing: .01em; color: rgba(255, 255, 255, .8); white-space: nowrap; } .ms-end::before { content: ''; flex: none; width: 7px; height: 9px; background: currentColor; opacity: .65; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M3 7V5a4 4 0 0 1 8 0v2h1a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1zm2 0h4V5a2 2 0 0 0-4 0v2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M3 7V5a4 4 0 0 1 8 0v2h1a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1zm2 0h4V5a2 2 0 0 0-4 0v2z'/%3E%3C/svg%3E") center / contain no-repeat; } .ms-end span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ms img { flex: 1 1 0; min-height: 0; width: 100%; height: auto; object-fit: cover; object-position: 50% 0%; background: #122452; transition: object-position var(--tempo, 6s) cubic-bezier(.4, 0, .3, 1); } .ms:not(:hover) img { transition-duration: .9s; } .ms:hover img { object-position: 50% 100%; } .mural .ms:nth-child(1) { left: 0; rotate: -4deg; } .mural .ms:nth-child(2) { left: 20%; top: 104px; height: calc(100% - 60px); z-index: 2; } .mural .ms:nth-child(3) { left: 40%; rotate: 4deg; } @media (hover: none) { .ms img { animation: desfila calc(var(--tempo, 5s) * 3.2) ease-in-out infinite alternate; } } html.v5-anima .heroi:not(.is-in) .ms { opacity: 0; } html.v5-anima .heroi.is-in .ms { animation: v5Site .9s var(--ez) both; animation-delay: calc(.3s + var(--i, 0) * .1s); } @keyframes v5Site { from { opacity: 0; translate: 0 110px; } } /* o site sob o mouse vem para a frente, endireita e sobe; os outros escurecem e o do meio abre espaço */ .mural .ms { transition: transform .55s var(--ez), rotate .55s var(--ez), filter .4s ease, box-shadow .4s ease; } .mural .ms:hover { z-index: 3; rotate: 0deg; transform: translateY(-12px) scale(1.03); box-shadow: 0 34px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 191, 254, .45); } .mural:hover .ms:not(:hover) { filter: brightness(.5) saturate(.8); } .mural .ms:nth-child(1):hover ~ .ms:nth-child(2) { transform: translateX(16%); } .mural:has(.ms:nth-child(3):hover) .ms:nth-child(2) { transform: translateX(-16%); } /* Régua editorial com as quatro provas sob o texto: números grandes separados por fios, contando ao entrar (data-count no v5.js). Escolhida pelo Leonardo em 20/10/2026. */ .heroi-provas { display: flex; flex-wrap: wrap; gap: .9rem 0; margin: 1.8rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--linha); } .heroi-provas li { display: grid; gap: .3rem; padding-right: 1.4rem; margin-right: 1.4rem; border-right: 1px solid var(--linha); } .heroi-provas li:last-child { border-right: 0; margin-right: 0; padding-right: 0; } .heroi-provas strong { font: 700 1.45rem/1 var(--fd); color: #fff; white-space: nowrap; } .heroi-provas strong .estrelas { font-size: .62em; vertical-align: .18em; } .heroi-provas li > span { font-size: .78rem; color: var(--mudo); } @keyframes desfila { from { object-position: 50% 0%; } to { object-position: 50% 100%; } } /* ----- serviços em bento ----- */ .bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .cartao-servico { position: relative; display: flex; flex-direction: column; min-height: 240px; padding: 1.8rem; color: inherit; } .cartao-servico.largo { grid-column: span 2; } .cartao-servico h3 { margin: auto 0 .5rem; font-size: 1.35rem; } .cartao-servico p { margin: 0; color: var(--mudo); font-size: .97rem; } .cartao-servico .cartao-seta { position: absolute; top: 1.6rem; right: 1.6rem; color: var(--mudo); transition: color .2s ease, transform .2s ease; } .cartao-servico .cartao-seta svg { width: 20px; height: 20px; } .cartao-servico:hover { border-color: var(--linha-2); transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0, 0, 0, .4), 0 0 0 1px rgba(26, 111, 234, .18); background: var(--vidro-2); } .cartao-servico:hover .cartao-seta { color: #fff; transform: translate(3px, -3px); } .cartao-servico:hover p { color: var(--texto-2); } /* ----- jornada: passos à esquerda, palco fixo à direita trocando de cena ----- */ .jornada-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 4rem; align-items: start; } .passos { position: relative; margin: 0; padding: .4rem 0; list-style: none; display: grid; gap: .4rem; } .passos-trilho { position: absolute; left: 23px; top: 40px; bottom: 40px; width: 2px; background: var(--linha); } .passos-cheio { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--grad); box-shadow: 0 0 14px rgba(26, 111, 234, .5); transition: height .25s linear; } .passo { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 1.2rem; padding: 1.2rem 0; cursor: pointer; } .passo-icone { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: var(--r-mini); background: #fff; border: 1px solid var(--linha); color: var(--azul); display: grid; place-items: center; box-shadow: 0 0 0 6px #fff; transition: background .35s ease, color .35s ease, box-shadow .35s ease, border-color .35s ease; } .passo-icone svg { width: 20px; height: 20px; } .passo.ativa .passo-icone, .passo.feita .passo-icone { background: var(--grad); color: #fff; border-color: transparent; } .passo.ativa .passo-icone { box-shadow: 0 0 0 6px #fff, 0 12px 28px rgba(26, 111, 234, .35); } .passo-corpo { opacity: .45; transition: opacity .35s ease, transform .35s ease; } .passo:hover .passo-corpo { opacity: .75; } .passo.ativa .passo-corpo { opacity: 1; transform: translateX(4px); } .passo-num { display: block; font: 600 .74rem/1 var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--quente); margin-bottom: .55rem; } .passo h3 { font-size: 1.2rem; margin-bottom: .55rem; } .passo p { color: var(--mudo); font-size: .96rem; margin-bottom: .8rem; } .passo-tag { display: inline-block; padding: .4rem .8rem; border-radius: var(--r-chip); background: var(--vidro-2); color: var(--texto); font-size: .78rem; font-weight: 600; } .passo-tag.alerta { background: color-mix(in srgb, var(--quente) 22%, transparent); color: var(--azul-claro); } /* o palco: uma janela do Safari escuro, a mesma do mural do herói, fixa na tela enquanto os passos rolam ao lado (20/10/2026, pedido do Leonardo: "algo mais real"). As etapas são as abas, o endereço muda a cada cena com a barra de carregamento e o conteúdo é a página que a pessoa veria. Medidas em em: no celular o palco inteiro encolhe mudando só o font-size. */ .palco { position: sticky; top: calc(var(--topo-h) + 28px); border-radius: var(--r-cartao); background: #2c2e34; border: 1px solid rgba(7, 18, 48, .18); box-shadow: 0 40px 90px rgba(7, 18, 48, .26), 0 12px 30px rgba(7, 18, 48, .14); overflow: hidden; color: #fff; font-size: 16px; } .palco svg { display: block; } .sf-topo { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 1.1em; height: 2.9em; padding: 0 1em; background: linear-gradient(180deg, #3a3d44 0%, #313339 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09); } .sf-topo .ms-luzes { gap: .45em; } .sf-topo .ms-luzes i { width: .75em; height: .75em; } .sf-nav, .sf-acoes { display: flex; align-items: center; gap: .8em; color: rgba(255, 255, 255, .6); } .sf-nav svg, .sf-acoes svg { width: 1.05em; height: 1.05em; } .sf-nav svg + svg { opacity: .4; } .sf-end { position: relative; justify-self: center; display: flex; align-items: center; justify-content: center; gap: .5em; width: min(100%, 24em); height: 1.85em; padding: 0 1em; border-radius: 6px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .85); font: 500 .76em/1 var(--fb); white-space: nowrap; overflow: hidden; } .sf-end svg { flex: none; width: 1em; height: 1em; opacity: .6; } .sf-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .palco.sem-cadeado .sf-end svg { display: none; } .palco.sem-cadeado .sf-url { color: rgba(255, 255, 255, .45); } /* a barra azul do Safari carregando a página, a cada troca de cena */ .sf-carga { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #0a84ff; transform: scaleX(0); transform-origin: 0 50%; opacity: 0; } .sf-carga.vai { animation: v5Carga .9s ease-out both; } @keyframes v5Carga { 0% { opacity: 1; transform: scaleX(0); } 75% { opacity: 1; transform: scaleX(.92); } 100% { opacity: 0; transform: scaleX(1); } } .sf-abas { display: flex; gap: 2px; padding: 0 .55em .5em; background: #313339; border-bottom: 1px solid rgba(0, 0, 0, .65); } .sf-aba { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: .55em; height: 2.1em; padding: 0 .8em; border: 0; border-radius: 6px; background: transparent; color: rgba(255, 255, 255, .55); font: 500 .74em/1 var(--fb); cursor: pointer; transition: background .25s ease, color .25s ease; } .sf-aba > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-aba:hover { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .85); } .sf-aba.ativa { background: #4a4c53; color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06); } .sf-fav { flex: none; display: grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 3px; font: 700 .8em/1 var(--fb); font-style: normal; color: #fff; } .sf-fav svg { width: 100%; height: 100%; } .fav-g { border-radius: 50%; background: conic-gradient(from -40deg, #ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); -webkit-mask: radial-gradient(circle, transparent 36%, #000 39%); mask: radial-gradient(circle, transparent 36%, #000 39%); } .fav-abas { color: rgba(255, 255, 255, .7); padding: .05em; } .fav-empresa { background: var(--grad); font-size: .62em; width: 2em; height: 2em; } .fav-zap { border-radius: 50%; background: #25d366; padding: .22em; } .palco-cenas { position: relative; aspect-ratio: 4 / 3; background: #fff; overflow: hidden; } /* trocar de página no navegador é quase imediato: só um esmaecer curto, sem a cena subir */ .cena { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .4s ease; pointer-events: none; } .cena.ativa { opacity: 1; pointer-events: auto; } @keyframes v5Sobe { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } } @keyframes v5Pisca { to { opacity: 0; } } /* 1) a pesquisa no Google, em Arial como a página de verdade; o ponteiro entra e clica no resultado da sua empresa */ .cena-busca { padding: 1.1em 1.6em 0; background: #fff; color: #202124; font-family: Arial, 'Helvetica Neue', sans-serif; } .g-caixa { display: flex; align-items: center; gap: .6em; height: 2.75em; padding: 0 1.1em; border-radius: 10px; border: 1px solid #dfe1e5; background: #fff; box-shadow: 0 1px 6px rgba(32, 33, 36, .2); font-size: .88em; } .g-texto { white-space: nowrap; overflow: hidden; } .g-cursor { flex: none; width: 1.5px; height: 1.2em; background: #1a73e8; animation: v5Pisca 1s steps(2) infinite; } .g-icones { display: flex; align-items: center; gap: .85em; margin-left: auto; color: #70757a; } .g-icones svg { width: 1.2em; height: 1.2em; } .g-icones i { width: 1px; height: 1.5em; background: #dadce0; } .g-icones svg:nth-of-type(2), .g-icones svg:nth-of-type(3) { color: #4285f4; } .g-abas { display: flex; gap: 1.5em; margin-top: .75em; padding: 0 .4em; border-bottom: 1px solid #ebebeb; font-size: .72em; color: #5f6368; } .g-abas span { padding: .3em 0 .8em; } .g-abas .ativa { color: #1a73e8; font-weight: 700; box-shadow: inset 0 -3px 0 #1a73e8; } .g-res { list-style: none; margin: .8em 0 0; padding: 0 .4em; display: grid; grid-template-columns: minmax(0, 1fr); gap: .85em; } /* minmax: o título em nowrap não alarga a coluna */ .g-item { position: relative; display: block; opacity: 0; } .cena.ativa .g-item { animation: v5Sobe .5s var(--ez) both; animation-delay: calc(1.9s + var(--i, 0) * .15s); } .g-site { display: flex; align-items: center; gap: .6em; margin-bottom: .35em; } .g-fav { flex: none; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: #f1f3f4; border: 1px solid #e3e5e8; font: 700 .62em/1 Arial, sans-serif; font-style: normal; color: #5f6368; } .g-voce .g-fav { background: var(--grad); border-color: transparent; color: #fff; } .g-site b { display: block; font-weight: 400; font-size: .7em; line-height: 1.3; color: #202124; } .g-site small { display: block; font-size: .6em; line-height: 1.3; color: #4d5156; } .g-tit { display: block; margin-bottom: .2em; font-size: .98em; line-height: 1.3; color: #1a0dab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .g-txt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: .7em; line-height: 1.5; color: #4d5156; } /* o resultado da sua empresa: o clique acende a moldura e sublinha o título, como no hover de verdade */ .g-voce { margin: 0 -.7em; padding: .55em .7em .6em; border-radius: 8px; } .cena.ativa .g-voce { animation: v5Sobe .5s var(--ez) both, v5Escolhe .45s ease 3.95s both; animation-delay: calc(1.9s + var(--i, 0) * .15s), 3.95s; } .cena.ativa .g-voce .g-tit { animation: v5Sublinha .01s linear 3.95s both; } @keyframes v5Escolhe { to { background: #f4f8ff; box-shadow: 0 0 0 1.5px #1a73e8, 0 10px 26px rgba(26, 115, 232, .18); } } @keyframes v5Sublinha { to { text-decoration: underline; } } .g-ponteiro { position: absolute; left: 34%; top: 3.1em; width: 1.05em; opacity: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); pointer-events: none; } .cena.ativa .g-ponteiro { animation: v5Ponteiro 1.2s var(--ez) 2.7s both, v5Clique .26s ease 3.9s; } @keyframes v5Ponteiro { from { opacity: 0; transform: translate(9em, 6em); } 25% { opacity: 1; } to { opacity: 1; transform: none; } } @keyframes v5Clique { 50% { scale: .82; } } /* 2) a comparação: a visão das abas do Safari com os três sites abertos; um não carrega, outro é antigo, e o terceiro (a captura real) fica */ .cena-compara { display: flex; flex-direction: column; justify-content: center; padding: 1.4em 1.6em 1.2em; background: #1d1e22; } .c-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2em; } .c-mini { position: relative; opacity: 0; } .cena.ativa .c-mini { animation: v5Sobe .5s var(--ez) both; animation-delay: calc(.15s + var(--i, 0) * .12s); } .c-tela { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 12px 28px rgba(0, 0, 0, .5); } .c-tela img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; } .c-nome { display: flex; align-items: center; justify-content: center; gap: .45em; margin-top: .65em; font: 500 .68em/1 var(--fb); color: rgba(255, 255, 255, .78); white-space: nowrap; } .c-nome i { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 3px; background: #5f6368; font: 700 .8em/1 var(--fb); font-style: normal; color: #fff; } .c-nome i.c-nome-voce { background: var(--grad); } /* o que não carrega: a barra azul parada no começo e a roda girando */ .c-lento::before { content: ''; position: absolute; left: 0; top: 0; width: 34%; height: 3px; background: #0a84ff; } .c-spin { position: absolute; left: 50%; top: 42%; width: 2.2em; height: 2.2em; margin: -1.1em 0 0 -1.1em; border-radius: 50%; border: 3px solid #e5e7eb; border-top-color: #9aa0a6; animation: v5Gira .9s linear infinite; } .c-spin-txt { position: absolute; left: 0; right: 0; top: 56%; text-align: center; font: .62em/1 Arial, sans-serif; color: #9aa0a6; } @keyframes v5Gira { to { transform: rotate(360deg); } } /* o antigo: Times, faixa "em construção", links azuis sublinhados e contador de visitas */ .c-velho { display: flex; flex-direction: column; align-items: center; background: #ece6d3; color: #000; font-family: 'Times New Roman', Times, serif; text-align: center; } .v-topo { align-self: stretch; padding: .45em .2em; background: linear-gradient(180deg, #3a6ea5, #1e3f66); color: #ffd700; font: italic 700 .82em/1.1 'Times New Roman', serif; text-shadow: 1px 1px 0 #000; text-transform: uppercase; } .v-obras { align-self: stretch; margin: .55em .5em .4em; padding: .28em 0; background: repeating-linear-gradient(-45deg, #ffcc00 0 .45em, #111 .45em .9em); } .v-obras b { padding: .1em .35em; background: #111; color: #ffcc00; font: 700 .48em/1.2 Arial, sans-serif; text-transform: uppercase; letter-spacing: .04em; } .v-menu { display: flex; gap: .55em; font-size: .56em; } .v-menu i { color: #0000ee; text-decoration: underline; font-style: normal; } .v-foto { align-self: stretch; height: 30%; margin: .5em .7em .4em; background: linear-gradient(135deg, #9db4c0, #5c6b73); border: 2px outset #d6d6d6; } .v-txt { font-size: .56em; color: #0000ee; text-decoration: underline; } .v-cont { margin-top: .45em; padding: .15em .35em; background: #000; color: #39ff14; font: .5em/1.2 'Courier New', monospace; } .c-ver { position: absolute; left: 50%; bottom: 2.7em; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .35em; white-space: nowrap; padding: .45em .7em; border-radius: var(--r-mini); font: 600 .7em/1 var(--fb); opacity: 0; } .c-ver.ruim { background: #3a1d22; color: #ffb4b4; border: 1px solid rgba(255, 90, 90, .45); } .c-ver.bom { background: #0b3a5c; color: #a5e8ff; border: 1px solid rgba(0, 191, 254, .55); } .c-ver svg { width: 1.1em; height: 1.1em; } .cena.ativa .c-ver { animation: v5Sobe .45s var(--ez) both; animation-delay: calc(1.3s + var(--i, 0) * .5s); } .cena.ativa .c-ruim .c-tela { animation: v5Apaga .5s ease forwards; animation-delay: calc(1.3s + var(--i, 0) * .5s); } .cena.ativa .c-bom .c-tela { animation: v5Destaca .5s ease 2.3s both; } @keyframes v5Apaga { from { opacity: 1; filter: none; } to { opacity: .35; filter: grayscale(1); } } @keyframes v5Destaca { to { translate: 0 -4px; box-shadow: 0 0 0 2px #0a84ff, 0 18px 40px rgba(10, 132, 255, .35); } } .c-legenda { margin: 1.3em 0 0; text-align: center; color: rgba(255, 255, 255, .72); font-size: .86em; opacity: 0; } .cena.ativa .c-legenda { animation: v5Sobe .5s var(--ez) both; animation-delay: 2.9s; } /* 3) o site que convence: a captura rolando na janela inteira e, por cima, a lista do que faz ela escolher */ .e-tela { position: absolute; inset: 0; display: block; } .e-tela img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; } .cena.ativa .e-tela img { animation: desfila 12s ease-in-out 1s infinite alternate; } .e-lista { position: absolute; right: 1.2em; bottom: 1.2em; width: 16em; padding: .95em 1.1em .5em; border-radius: 10px; background: rgba(255, 255, 255, .97); color: #0c1a2e; box-shadow: 0 22px 50px rgba(7, 18, 48, .35), 0 0 0 1px rgba(7, 18, 48, .07); opacity: 0; } .cena.ativa .e-lista { animation: v5Sobe .5s var(--ez) .5s both; } .e-lista-tit { margin: 0 0 .5em; font: 700 .62em/1 var(--fb); letter-spacing: .12em; text-transform: uppercase; color: #6b7a90; } .e-item { display: flex; align-items: center; gap: .6em; padding: .6em 0; border-top: 1px solid #edf1f6; font: 600 .8em/1.3 var(--fb); opacity: 0; } .e-lista-tit + .e-item { border-top: 0; } .e-item svg { flex: none; width: 1.35em; height: 1.35em; padding: .2em; border-radius: 50%; background: #e6f0ff; color: #1a6fea; stroke-width: 3; } .cena.ativa .e-item { animation: v5Sobe .45s var(--ez) both; animation-delay: calc(1s + var(--i, 0) * .5s); } /* 4) o WhatsApp Web de quem vende: chega a mensagem do site, a resposta é digitada no campo e enviada, a cliente aparece digitando e responde */ .cena-zap { display: flex; flex-direction: column; background: #0b141a; color: #e9edef; font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .z-topo { flex: none; display: flex; align-items: center; gap: .8em; height: 3.4em; padding: 0 1.1em; background: #202c33; } .z-avatar { flex: none; display: grid; place-items: end center; width: 2.5em; height: 2.5em; border-radius: 50%; overflow: hidden; background: #6b7c85; color: #cfd8dc; } .z-avatar svg { width: 82%; height: 82%; } .z-nome { display: grid; gap: .2em; font-size: .86em; line-height: 1.2; } .z-nome small { position: relative; height: 1.25em; font-size: .8em; color: #8696a0; } .z-on, .z-dig { position: absolute; left: 0; top: 0; white-space: nowrap; } .z-dig { color: #00a884; opacity: 0; } .cena.ativa .z-dig { animation: v5Entre 1.4s linear 3.6s both; } .cena.ativa .z-on { animation: v5Fora 1.4s linear 3.6s both; } @keyframes v5Entre { 0%, 100% { opacity: 0; } 4%, 96% { opacity: 1; } } @keyframes v5Fora { 0%, 100% { opacity: 1; } 4%, 96% { opacity: 0; } } .z-icones { display: flex; gap: 1.3em; margin-left: auto; color: #aebac1; } .z-icones svg { width: 1.15em; height: 1.15em; } /* como no app, poucas mensagens ficam presas embaixo, perto do campo */ .z-conversa { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .45em; padding: 1em 7%; background-color: #0b141a; background-image: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.3px); background-size: 15px 15px; } .z-data { align-self: center; margin-bottom: .5em; padding: .4em .85em; border-radius: 7px; background: #182229; color: #8696a0; font-size: .64em; letter-spacing: .05em; text-transform: uppercase; opacity: 0; } .cena.ativa .z-data { animation: v5Sobe .4s var(--ez) .25s both; } .z-msg { position: relative; max-width: 80%; margin: 0; padding: .4em .6em .45em .65em; border-radius: 7.5px; font-size: .8em; line-height: 1.42; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); opacity: 0; } .cena.ativa .z-msg { animation: v5Sobe .4s var(--ez) both; animation-delay: var(--q, 0s); } .z-msg time { float: right; display: inline-flex; align-items: center; gap: .3em; margin: .6em 0 -.3em .9em; font-size: .7em; color: rgba(233, 237, 239, .6); white-space: nowrap; } .z-msg time svg { width: 1.45em; height: auto; color: #53bdeb; } .z-dele { align-self: flex-start; background: #202c33; border-top-left-radius: 0; } .z-nosso { align-self: flex-end; background: #005c4b; border-top-right-radius: 0; } .z-dele::before, .z-nosso::before { content: ''; position: absolute; top: 0; border-style: solid; } .z-dele::before { left: -.5em; border-width: 0 .55em .55em 0; border-color: transparent #202c33 transparent transparent; } .z-nosso::before { right: -.5em; border-width: 0 0 .55em .55em; border-color: transparent transparent transparent #005c4b; } .z-dele + .z-nosso, .z-nosso + .z-dele { margin-top: .35em; } .z-barra { flex: none; display: flex; align-items: center; gap: 1em; height: 3.3em; padding: 0 1.1em; background: #202c33; color: #8696a0; } .z-barra > svg, .z-mic svg { width: 1.3em; height: 1.3em; } .z-campo { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; height: 2.35em; padding: 0 .9em; border-radius: 8px; background: #2a3942; font-size: .8em; white-space: nowrap; overflow: hidden; } .z-ph { color: #8696a0; } .z-escrito { position: absolute; left: .9em; right: .9em; overflow: hidden; color: #e9edef; opacity: 0; } .z-mic { display: grid; } .cena.ativa .z-escrito { animation: v5Escreve 1.3s steps(30, end) 1.5s both, v5Envia .01s linear 2.95s forwards; } .cena.ativa .z-ph { animation: v5Fora 1.5s linear 1.47s both; } @keyframes v5Escreve { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } @keyframes v5Envia { to { opacity: 0; } } /* ----- abas de mercado (os nichos de nossos-servicos.php) ----- */ .seg-abas { display: flex; flex-direction: column; gap: .35rem; } .seg-item { border-radius: var(--r-mini); border: 1px solid transparent; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; } .seg-item.ativa { background: var(--vidro); border-color: var(--linha); box-shadow: 0 0 0 1px rgba(26, 111, 234, .3), 0 10px 40px rgba(26, 111, 234, .12); } .seg-aba { all: unset; position: relative; display: block; width: 100%; box-sizing: border-box; padding: .7rem 1rem; cursor: pointer; font: 600 1.02rem/1.3 var(--fb); color: var(--texto-2); } .seg-aba:hover { color: #fff; } .seg-aba:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: -2px; border-radius: var(--r-mini); } .seg-item.ativa .seg-aba { color: #fff; } .seg-aba::before { content: ''; display: inline-block; width: .5em; height: .8em; margin-right: .6rem; vertical-align: -.05em; background: var(--azul-claro); -webkit-mask: url(../img/logo/cl3-tri.svg) center / contain no-repeat; mask: url(../img/logo/cl3-tri.svg) center / contain no-repeat; opacity: 0; transform: translateX(-4px); transition: opacity .25s ease, transform .25s ease; } .seg-item.ativa .seg-aba::before { opacity: 1; transform: none; } /* a barrinha da aba ativa enche em 6 s e a próxima entra (classe .auto na seção, pelo JS); pausa com o mouse em cima */ .seg-tempo { position: absolute; left: 1rem; right: 1rem; bottom: 0; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; } .auto .seg-item.ativa .seg-tempo { opacity: 1; animation: v5Tempo 6s linear forwards; } .seg-abas:hover .seg-tempo { animation-play-state: paused; } @keyframes v5Tempo { to { transform: scaleX(1); } } .seg-painel { position: relative; z-index: 1; } .seg-painel[hidden] { display: none; } /* ----- mercados como mesa de provas (20/10/2026): o mercado da vez à esquerda (a lista dos mercados saiu para a seção ficar compacta) e, à direita, parada e centralizada com ele, as onze capturas espalhadas como provas soltas sobre o fundo da seção (sem placa de mesa). A prova do mercado ativo sai da pilha e vira uma janela do Safari com o site rolando. As provas têm o tamanho da janela e encolhem por transform (scale .36), então a imagem não perde nitidez ao crescer; posições em cqw/cqh da mesa (container de tamanho). ----- */ .mesa-grade { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 3.5rem; align-items: center; } /* o mercado da vez: contador e setas em cima; os onze painéis empilhados na mesma célula do grid (a altura é a do maior, então nada pula na troca); fechado, o painel fica fora da leitura (visibility) */ .mesa-nav { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.3rem; } .mesa-conta { margin-right: auto; font: 600 .74rem/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--mudo); } .mesa-conta b { color: var(--azul-claro); font-weight: 700; } .mesa-seta { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: var(--r-mini); border: 1px solid var(--linha-2); background: rgba(255, 255, 255, .04); color: #fff; cursor: pointer; transition: background .2s ease, border-color .2s ease; } .mesa-seta svg { width: 18px; height: 18px; } .mesa-seta:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); } .mesa-seta:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; } .mesa-paineis { display: grid; } .mesa-painel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s .35s; } .mesa-painel.ativa { visibility: visible; opacity: 1; transition: opacity .45s ease .1s, visibility 0s; } .mesa-painel h3 { font-size: 1.3rem; margin-bottom: .7rem; } .mesa-porque { margin: 0 0 1.1rem; font: 600 1.22rem/1.35 var(--fb); color: #fff; } .mesa-pontos { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .55rem; } .mesa-pontos li { display: flex; align-items: flex-start; gap: .65rem; color: var(--texto-2); font-size: .97rem; line-height: 1.45; } .mesa-pontos .ico-cl3 { flex: none; color: var(--azul-claro); font-size: 1.35em; } /* inline-block em vez de flex: quando o nome do mercado quebra a linha, a seta acompanha o fim do texto em vez de ir para a borda */ .mesa-painel .link-seta { display: inline-block; } .mesa-painel .link-seta .ico-tri { margin-left: .4rem; } .sem-quebra { white-space: nowrap; } .mesa-painel.ativa > * { animation: v5Sobe .5s var(--ez) both; } .mesa-painel.ativa .mesa-porque { animation-delay: .05s; } .mesa-painel.ativa .mesa-pontos { animation-delay: .12s; } .mesa-painel.ativa .link-seta { animation-delay: .2s; } /* a barrinha enche em 6 s e o próximo mercado entra (classe .auto na seção, pelo JS); pausa com o mouse em cima */ .mesa-tempo { position: relative; display: block; height: 2px; margin-top: 1.6rem; border-radius: 2px; background: var(--linha); overflow: hidden; } .mesa-tempo::after { content: ''; position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; } .auto .mesa-tempo.corre::after { animation: v5Tempo 6s linear forwards; } .mesa-grade:hover .mesa-tempo::after { animation-play-state: paused; } /* a mesa: só a área onde as provas pousam, transparente, sem fundo nem borda */ .mesa { position: relative; height: 30rem; container-type: size; } .prova { position: absolute; left: 50%; top: 50%; z-index: 1; display: flex; flex-direction: column; height: 88cqh; aspect-ratio: 3 / 4; margin: -44cqh 0 0 -33cqh; padding: .8rem; border-radius: 4px; background: #f4f3ef; box-shadow: 0 20px 44px rgba(0, 0, 0, .55); transform: translate(calc(var(--dx) * 1cqw), calc(var(--dy) * 1cqh)) rotate(var(--r)) scale(var(--s, .36)); filter: brightness(.62) saturate(.85); cursor: pointer; transition: transform .9s cubic-bezier(.2, .75, .2, 1), filter .5s ease, padding .45s ease, background-color .45s ease, border-radius .45s ease, box-shadow .45s ease; } .prova:hover { --s: .39; filter: brightness(.9) saturate(1); } .prova.ativa { z-index: 10; padding: 0; border-radius: 10px; background: #2c2e34; filter: none; cursor: default; transform: translate(0, 0) rotate(0deg) scale(1); box-shadow: 0 40px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .14); } .prova-barra { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; height: 0; padding: 0 12px; overflow: hidden; background: linear-gradient(180deg, #383b42 0%, #2c2e34 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09); transition: height .45s ease; } .prova.ativa .prova-barra { height: 32px; border-bottom: 1px solid rgba(0, 0, 0, .6); } .prova-tela { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #fff; } .prova-tela img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; } .prova.ativa .prova-tela img { animation: desfila calc(var(--tempo, 6s) * 1.8) ease-in-out 1.1s infinite alternate; } /* ----- posicionamento + números ----- */ .painel-dif.escuro { background: linear-gradient(160deg, #0d1f4d 0%, #071230 100%); border-color: rgba(255, 255, 255, .08); box-shadow: 0 30px 80px rgba(7, 18, 48, .25); } .painel-dif { position: relative; overflow: hidden; padding: 3.5rem; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; } .dif-texto { position: relative; z-index: 1; } .dif-texto h2 { margin-bottom: 1.2rem; } .dif-texto > p { color: var(--texto-2); } .dif-numeros { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .numero { padding: 1.7rem 1.5rem; border-radius: var(--r-mini); background: rgba(0, 0, 0, .28); border: 1px solid var(--linha); } .numero strong { display: block; font: 700 2rem/1 var(--fd); color: var(--azul-claro); margin-bottom: .5rem; letter-spacing: 0; } .numero span { color: var(--mudo); font-size: .9rem; line-height: 1.4; display: block; } /* ----- CRM e integrações: o bloco da home em produção (20/10/2026). Fundo cinza-claro para se separar do posicionamento, branco, logo acima; as três frentes com o fio de 2px por cima; as logos coloridas soltas numa fileira que se acomoda sozinha, destacadas uma por vez (v5.js) ou sob o mouse. ----- */ #crm { background: var(--bg-2); } .crm-servicos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-bottom: 3.6rem; } .crm-servicos > div { border-top: 2px solid var(--texto); padding-top: 1.3rem; } .crm-servicos h3 { font-size: 1.1rem; color: var(--texto); margin: 0 0 .55rem; } .crm-servicos p { font-size: .96rem; line-height: 1.65; margin: 0; } .crm-titulo { text-align: center; color: var(--mudo); font: 600 .78rem/1.5 var(--fb); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 2rem; } .crm-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.4rem 3.6rem; max-width: 1080px; margin: 0 auto; } .crm-logos li { position: relative; padding-bottom: 12px; } /* todas com a cor da marca (pedido do Leonardo em 20/10/2026); o destaque só aumenta a logo e passa o fio por baixo */ .crm-logos img { display: block; max-height: 30px; max-width: 148px; width: auto; height: auto; transition: transform .4s var(--ez); } /* o fio atravessa em vez de rebobinar: entra crescendo da esquerda e sai encolhendo para a direita */ .crm-logos li::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: right center; transition: transform .45s cubic-bezier(.4, 0, .2, 1); } .crm-logos li:hover img, .crm-logos li.em-foco img { transform: scale(1.12); } .crm-logos li:hover::after, .crm-logos li.em-foco::after { transform: scaleX(1); transform-origin: left center; } .crm-nota { text-align: center; max-width: 62ch; margin: 2.6rem auto 0; color: var(--mudo); font-size: .96rem; } .crm-cta { text-align: center; margin: 1.8rem 0 0; } /* ----- prova social (16/10/2026): nota no Google à esquerda, um depoimento por vez à direita ----- */ .prova-grade { display: grid; grid-template-columns: .9fr 1.1fr; gap: 4rem; align-items: center; } .prova-lado .lead { margin-bottom: 1.6rem; } .prova-nota { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .3rem .6rem; padding: .9rem 1.2rem; border-radius: var(--r-cartao); background: var(--vidro); border: 1px solid var(--linha); } .prova-estrelas { color: #ffb020; letter-spacing: .06em; font-size: .95rem; } .prova-nota strong { font: 700 1.6rem/1 var(--fd); color: var(--texto); margin-left: .2rem; } .prova-nota-txt { color: var(--mudo); font-size: .92rem; } .prova-nota .link-seta { font-size: .88rem; margin-left: .6rem; padding-left: .9rem; border-left: 1px solid var(--linha-2); } .prova-palco { position: relative; padding: 2.6rem 2.6rem 2.2rem; border-radius: var(--r-cartao); background: var(--vidro); border: 1px solid var(--linha); overflow: hidden; } .prova-palco::before { content: '“'; position: absolute; left: 1.6rem; top: .2rem; font: 800 6rem/1 var(--fd); color: var(--azul-claro); opacity: .18; pointer-events: none; } /* o que sai some rápido e o que entra chega depois: os dois textos não se sobrepõem */ .prova-item { margin: 0; opacity: 0; translate: 0 14px; transition: opacity .3s ease, translate .3s ease; } .prova-item.ativa { transition: opacity .6s var(--ez) .3s, translate .7s var(--ez) .3s; } .prova-item:not(.ativa) { position: absolute; inset: 2.6rem 2.6rem auto; pointer-events: none; } .prova-item.ativa { opacity: 1; translate: 0 0; } .prova-item blockquote { margin: 0 0 1.4rem; } .prova-item blockquote p { margin: 0; font: 500 clamp(1.08rem, 1.5vw, 1.3rem)/1.55 var(--fb); color: var(--texto); } .prova-item figcaption { display: flex; align-items: center; gap: .85rem; } .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--grad); color: var(--tinta); font: 700 .9rem/1 var(--fd); display: grid; place-items: center; flex: none; } .depo-quem { display: grid; line-height: 1.3; } .depo-quem strong { color: var(--texto); font-size: .98rem; } .depo-quem span { color: var(--mudo); font-size: .82rem; } .prova-nav { display: flex; gap: .5rem; margin-top: 1.8rem; } .prova-ponto { position: relative; width: 36px; height: 14px; padding: 5px 0; border: 0; background: none; cursor: pointer; } .prova-ponto i { display: block; height: 4px; border-radius: 2px; background: var(--vidro-2); overflow: hidden; position: relative; } .prova-ponto i::after { content: ''; position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; } .prova-ponto.ativa i::after { transform: none; } .auto .prova-ponto.ativa i::after { animation: v5TempoCheio 7s linear forwards; } .prova-palco:hover .prova-ponto i::after { animation-play-state: paused; } .prova-ponto:hover i { background: rgba(255, 255, 255, .28); } .prova-ponto:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; border-radius: 4px; } @keyframes v5TempoCheio { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ----- quem somos ----- */ .duas-colunas { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; } .pilares { display: grid; gap: 1rem; } .pilar { padding: 1.6rem 1.8rem; } .pilar-rotulo { font: 600 .72rem/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--azul-claro); margin-bottom: .6rem; } .pilar p:last-child { margin: 0; color: var(--texto-2); font-size: .97rem; } .pilar-valores { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem; } .pilar-valores li { color: var(--texto-2); font-size: .95rem; padding-left: 1rem; position: relative; } .pilar-valores li::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 11px; background: var(--quente); -webkit-mask: url(../img/logo/cl3-tri.svg) center / contain no-repeat; mask: url(../img/logo/cl3-tri.svg) center / contain no-repeat; } /* ----- blog ----- */ .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .post { overflow: hidden; display: flex; flex-direction: column; } .post:hover { border-color: var(--linha-2); transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); } .post-capa { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); } .post-capa img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .post:hover .post-capa img { transform: scale(1.04); } .post-data { position: absolute; right: 0; bottom: 0; padding: .55rem .9rem .5rem; background: rgba(7, 18, 48, .92); backdrop-filter: blur(8px); border-top-left-radius: var(--r-mini); text-align: center; font-family: var(--fb); line-height: 1; } .post-data strong { display: block; font-size: 1.4rem; color: #fff; } .post-data span { display: block; margin-top: .2rem; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mudo); } .post-corpo { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; } .post-cat { font: 600 .7rem/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--azul-claro); margin-bottom: .6rem; } .post h3 { font-size: 1.08rem; line-height: 1.4; margin: 0 0 .6rem; } .post h3 a { color: var(--texto); } .post h3 a:hover { color: var(--azul-claro); } .post-corpo > p:not(.post-cat) { color: var(--mudo); font-size: .93rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 1.2rem; } .post-rodape { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--linha); } .post-rodape .link-seta { font-size: .88rem; } .seta-redonda { width: 40px; height: 40px; border-radius: var(--r-botao); border: 1px solid var(--linha-2); display: grid; place-items: center; color: #fff; transition: background .2s ease, color .2s ease; } .seta-redonda svg { width: 18px; height: 18px; } .post:hover .seta-redonda { background: var(--grad); color: var(--tinta); border-color: transparent; } /* ----- FAQ ----- */ .faq { max-width: 820px; margin: 0 auto; display: grid; gap: .75rem; } .faq-item { padding: 0 1.6rem; } .faq-item h3 { margin: 0; } .faq-q { all: unset; display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; cursor: pointer; font: 600 1.05rem/1.35 var(--fb); color: var(--texto); } .faq-q:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 4px; border-radius: 6px; } .faq-mais { position: relative; width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid var(--linha-2); transition: transform .3s ease, background .3s ease; } .faq-mais::before, .faq-mais::after { content: ''; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); } .faq-mais::before { width: 12px; height: 1.5px; } .faq-mais::after { width: 1.5px; height: 12px; } .faq-item.is-open .faq-mais { transform: rotate(45deg); background: var(--vidro-2); } .faq-item.is-open { border-color: var(--linha-2); background: var(--vidro-2); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; } .faq-a-miolo { overflow: hidden; color: var(--texto-2); font-size: .98rem; } .faq-item.is-open .faq-a { grid-template-rows: 1fr; } .faq-a-miolo > :last-child { margin-bottom: 1.4rem; } .faq-a-miolo ul { padding-left: 1.2rem; list-style: disc; margin-bottom: 1rem; } .faq-a-miolo li { margin-bottom: .25rem; } /* ----- chamada final ----- */ .cta-cartao { position: relative; overflow: hidden; text-align: center; padding: 4.6rem 2rem; border-radius: var(--r-cartao); background: var(--grad); color: var(--tinta); } .cta-cartao::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 0%, rgba(255, 255, 255, .25), transparent 70%); pointer-events: none; } .cta-cartao::after { content: ''; position: absolute; right: -4%; top: -14%; width: 38%; aspect-ratio: 489 / 533; background: rgba(255, 255, 255, .12); -webkit-mask: url(../img/logo/cl3-simbolo.svg) center / contain no-repeat; mask: url(../img/logo/cl3-simbolo.svg) center / contain no-repeat; pointer-events: none; } .cta-cartao > * { position: relative; } .cta-titulo { font: 700 clamp(1.5rem, 2.6vw, 2.2rem)/1.15 var(--fd); letter-spacing: 0; text-transform: uppercase; color: var(--tinta); margin-bottom: 1rem; } .cta-cartao > p:not(.cta-titulo) { max-width: 620px; margin: 0 auto 2rem; color: rgba(7, 18, 48, .78); font-size: 1.08rem; } .cta-cartao .acoes { justify-content: center; margin: 0; } /* ----- rodapé ----- */ .rodape { position: relative; overflow: hidden; border-top: 1px solid var(--linha); background: linear-gradient(180deg, var(--bg), #040b20); font-size: .93rem; } .rodape::before { content: ''; position: absolute; inset: 0; background: url(../img/logo/cl3-padrao.webp) 0 0 / 260px auto repeat; /* azulejo rasterizado do cl3-padrao.svg: o SVG repetido pesava na pintura */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%); mask-image: linear-gradient(180deg, transparent 0%, #000 55%); pointer-events: none; } .rodape > * { position: relative; } .rodape-grade { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 2.5rem; padding-top: 72px; padding-bottom: 56px; } .rodape h3 { font: 600 .74rem/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--texto); margin: 0 0 1rem; } .rodape h3 + ul + h3 { margin-top: 1.6rem; } .rodape-col li { margin-bottom: .5rem; } .rodape-col a { color: var(--mudo); } .rodape-col a:hover { color: #fff; } .rodape-marca img { height: 40px; width: auto; display: block; margin-bottom: 1rem; } .rodape-marca p { color: var(--mudo); } .rodape-nota a { color: var(--texto); } .rodape-selo { padding: 1rem 1.1rem; border-left: 2px solid var(--azul); background: var(--vidro); border-radius: 0 var(--r-mini) var(--r-mini) 0; font-size: .88rem; color: var(--texto-2); } .rodape address { font-style: normal; color: var(--mudo); margin: 1.2rem 0 1rem; line-height: 1.6; } .rodape address strong, .rodape-horario strong { display: block; color: var(--texto); } .rodape-horario { color: var(--mudo); } .rodape-estados { border-top: 1px solid var(--linha); padding: 1.6rem 0; } .rodape-estados h3 { margin-bottom: .7rem; } .rodape-locais { display: flex; flex-wrap: wrap; gap: .25rem 0; } .rodape-locais li { font-size: .82rem; color: var(--mudo); } .rodape-locais li + li::before { content: '·'; margin: 0 .6rem; opacity: .5; } .rodape-locais a { color: var(--mudo); } .rodape-locais a:hover { color: #fff; } .rodape-locais .base a { color: var(--texto-2); font-weight: 600; } .rodape-locais .todas a { color: var(--azul-claro); } .rodape-barra { border-top: 1px solid var(--linha); padding: 1.3rem 0; } .rodape-barra-miolo { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .8rem 1.5rem; color: var(--mudo); font-size: .85rem; } .rodape-barra-miolo p { margin: 0; } .rodape-barra-miolo ul { display: flex; gap: 1.2rem; } .rodape-barra-miolo a { color: var(--mudo); } .rodape-barra-miolo a:hover { color: #fff; } /* ----- WhatsApp flutuante: igual ao da home em produção (pílula verde, rótulo e ícone, ponto de "online" pulsando; no celular vira o círculo). É a única pílula da página, por decisão: o balão fica como sempre foi. ----- */ .zap { position: fixed; right: 22px; bottom: 22px; z-index: 60; height: 52px; padding: 0 15px 0 19px; border-radius: 999px; background: #25d366; color: #fff; display: inline-flex; align-items: center; gap: 9px; font: 600 .88rem/1 var(--fd); box-shadow: 0 6px 22px rgba(11, 61, 32, .35); transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; } .zap, .zap:hover, .zap:focus { text-decoration: none; color: #fff; } .zap svg { width: 25px; height: 25px; } .zap span { white-space: nowrap; } .zap:hover { transform: translateY(-3px) scale(1.04); background: #1fc25b; box-shadow: 0 12px 30px rgba(11, 61, 32, .42); } .zap-ponto { position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border-radius: 50%; background: #4ade80; border: 2.5px solid #fff; } .zap-ponto::after { content: ''; position: absolute; inset: -2.5px; border-radius: 50%; border: 2px solid #4ade80; opacity: 0; animation: zap-ping 2.4s ease-out infinite; } @keyframes zap-ping { 0% { transform: scale(.9); opacity: .7; } 70%, 100% { transform: scale(1.9); opacity: 0; } } @media (max-width: 600px) { .zap span { display: none; } .zap { width: 56px; height: 56px; padding: 0; border-radius: 50%; justify-content: center; } .zap svg { width: 28px; height: 28px; } } /* ========================================================================== Faixas claras. A mesma linguagem (pílula, palavra em degradê, cartão com borda, raio 10) sobre fundo branco, para a página alternar escuro e claro em vez de ser uma parede escura só. Quase tudo vem da troca das variáveis; o que não vem está logo abaixo. Ordem na home: herói escuro, serviços e jornada claros, mercados escuro, posicionamento e CRM claros, depoimentos escuro, quem somos e blog claros, FAQ, chamada e rodapé escuros. ========================================================================== */ .escuro, .page-hero, .sys-hero, #chamada, #depoimentos, #sites-por-segmento { --bg: #071230; --bg-2: #0b1a3f; --vidro: rgba(255, 255, 255, .04); --vidro-2: rgba(255, 255, 255, .08); --linha: rgba(255, 255, 255, .1); --linha-2: rgba(255, 255, 255, .2); --texto: #f2f4f8; --texto-2: #c3cad6; --mudo: #8d97a8; --tinta: #071230; --azul-claro: #00bffe; --quente: #00bffe; --grad: linear-gradient(110deg, var(--azul) 0%, var(--azul-claro) 100%); color: var(--texto-2); } .claro, main.interna > section:nth-of-type(even):not(.dark-band) { --bg: #ffffff; --bg-2: #f4f7fb; --vidro: #ffffff; --vidro-2: #eef3f9; --linha: #e1e7ef; --linha-2: #cbd5e1; --texto: #0c1a2e; --texto-2: #43536a; --mudo: #6b7a90; --tinta: #ffffff; /* texto e ícone sobre o degradê, que aqui é mais escuro */ --azul-claro: #0a9ddc; /* o ciano do manual escurecido para ler sobre branco (3:1) */ --quente: #0a9ddc; --grad: linear-gradient(110deg, var(--azul) 0%, var(--azul-claro) 100%); background: var(--bg); color: var(--texto-2); } /* :not(.btn): o azul do hover de link sumia no degradê azul do botão */ .claro a:not(.btn):hover, main.interna > section:nth-of-type(even):not(.dark-band) a:not(.btn):hover { color: var(--azul); } .claro .vidro, main.interna > section:nth-of-type(even):not(.dark-band) .vidro { box-shadow: 0 2px 10px rgba(8, 22, 44, .05); } .claro .cartao-servico:hover, main.interna > section:nth-of-type(even):not(.dark-band) .cartao-servico:hover { box-shadow: 0 18px 44px rgba(8, 22, 44, .12); background: #fff; } .claro .cartao-servico:hover .cartao-seta, main.interna > section:nth-of-type(even):not(.dark-band) .cartao-servico:hover .cartao-seta { color: var(--texto); } .claro .passo-tag { background: var(--bg-2); } .claro .passo-tag.alerta { background: #e3f2fe; color: #0a6ab8; } .claro .numero { background: var(--bg-2); border-color: var(--linha); } .claro .brilho { opacity: .22; } .claro .dif-texto > p { color: var(--texto-2); } .claro .btn-vidro, main.interna > section:nth-of-type(even):not(.dark-band) .btn-vidro, main.interna > section:nth-of-type(even):not(.dark-band) .btn-ghost, main.interna > section:nth-of-type(even):not(.dark-band) .btn-ghost-dark { color: var(--texto); background: #fff; } .claro .btn-vidro:hover, main.interna > section:nth-of-type(even):not(.dark-band) .btn-vidro:hover, main.interna > section:nth-of-type(even):not(.dark-band) .btn-ghost:hover, main.interna > section:nth-of-type(even):not(.dark-band) .btn-ghost-dark:hover { color: var(--texto); background: var(--bg-2); border-color: var(--linha-2); } .claro .seta-redonda { color: var(--texto); } .claro .post:hover { box-shadow: 0 18px 44px rgba(8, 22, 44, .12); } .claro .post-data { background: rgba(255, 255, 255, .94); } .claro .post-data strong { color: var(--texto); } .claro .pilar p:last-child, .claro .pilar-valores li { color: var(--texto-2); } /* duas faixas claras seguidas viram uma só: a segunda não repete o respiro de cima (menos em volta do CRM, que tem fundo cinza-claro próprio e precisa do respiro dos dois lados) */ .claro:not(#crm) + .claro:not(#crm) { padding-top: 0; } /* ----- responsivo ----- */ @media (max-width: 1100px) { .bento { grid-template-columns: 1fr 1fr; } .posts { grid-template-columns: 1fr 1fr; } .mesa-grade { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 2.4rem; } } @media (max-width: 960px) { .secao { padding: 72px 0; } /* menu do celular: painel abaixo da barra, itens entrando em cascata; o painel de serviços vira lista */ .menu { position: fixed; left: 0; right: 0; top: var(--topo-h); max-height: calc(100vh - var(--topo-h)); overflow: auto; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: .6rem 16px 1.2rem; background: rgba(7, 18, 48, .98); border-bottom: 1px solid var(--linha); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); } html.is-rolado .menu { top: 62px; max-height: calc(100vh - 62px); } html.menu-aberto .menu { display: flex; } .menu > ul { flex-direction: column; gap: 0; } html.menu-aberto .menu > ul > li { animation: v5Sobe .4s var(--ez) both; animation-delay: calc(var(--i, 0) * 50ms); } .menu > ul > li > a { display: flex; justify-content: space-between; padding: .85rem .6rem; border-radius: var(--r-mini); font-size: 1.05rem; } .menu > ul > li > a.ativa { background: var(--vidro-2); } .menu > ul > li > a.ativa::after { display: none; } .menu-marcador, .menu-seta { display: none; } .submenu { position: static; translate: none; transform: none; opacity: 1; visibility: visible; width: auto; grid-template-columns: 1fr; gap: .4rem; padding: .2rem 0 .8rem .6rem; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; } .submenu::before, .sub-destaque, .submenu .sub-col:not(.sub-lado) > .sub-titulo { display: none; } /* no celular: lista, sem o cartão com imagem */ .sub-lista { padding: 0; } .submenu .sub-item { padding: .5rem .4rem; border: 0; animation: none; } .submenu .sub-item > span { display: none; } .submenu .sub-lado { padding: .7rem .8rem; border: 1px solid var(--linha); border-radius: var(--r-mini); background: var(--vidro); } .menu a.btn-menu-cel { display: inline-flex; justify-content: center; margin: .8rem 0 0; padding: .95rem 1.5rem; color: #fff; } .btn-topo { display: none; } .menu-botao { display: grid; gap: 5px; width: 44px; height: 44px; place-content: center; border: 0; background: transparent; cursor: pointer; } .menu-botao span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s ease, opacity .25s ease; } html.menu-aberto .menu-botao span:nth-child(1) { transform: translateY(7px) rotate(45deg); } html.menu-aberto .menu-botao span:nth-child(2) { opacity: 0; } html.menu-aberto .menu-botao span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .heroi { padding-top: calc(var(--topo-h) + 70px); padding-bottom: 72px; } .heroi-grade { grid-template-columns: 1fr; gap: 2rem; } .ceu-luz { width: 120vw; height: 120vw; margin: -60vw 0 0 -60vw; } .heroi-cena { min-height: 0; padding: 1.2rem 0 0; margin-bottom: -72px; } .mural { position: relative; inset: auto; height: 320px; margin: 0 -6px; } .mural .ms:nth-child(n) { width: 62%; top: 22px; height: calc(100% + 20px); } /* nth-child(n) só para pesar o mesmo que as regras de cima */ .mural .ms:nth-child(2) { left: 19%; top: 72px; height: calc(100% - 10px); } .mural .ms:nth-child(3) { left: 38%; } /* no celular a barra encolhe e o endereço ocupa o resto dela, senão o segmento some nas reticências */ .ms-barra { grid-template-columns: auto minmax(0, 1fr); gap: 8px; height: 28px; padding: 0 9px; } .ms-luzes { gap: 5px; } .ms-luzes i { width: 8px; height: 8px; } .ms-end { gap: 5px; padding: 3px 8px; font-size: .6rem; } .crm-servicos { grid-template-columns: 1fr; gap: 1.9rem; margin-bottom: 2.6rem; } .crm-logos { gap: 1.8rem 2.4rem; } .crm-logos img { max-height: 25px; max-width: 118px; } /* no celular a régua vira 2x2 */ .heroi-provas { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 0; } .heroi-provas li:nth-child(2n) { border-right: 0; margin-right: 0; padding-right: 0; } /* no celular e no tablet a mesa vem antes do texto, mais baixa, e continua parada */ .mesa-grade { grid-template-columns: 1fr; gap: 1.4rem; } .mesa { order: -1; height: min(22rem, 62vw); } .prova { padding: .7rem; } .prova-barra { gap: 6px; padding: 0 8px; } .prova.ativa .prova-barra { height: 24px; } .prova-barra .ms-luzes { gap: 4px; } .prova-barra .ms-luzes i { width: 7px; height: 7px; } .prova-barra .ms-end { padding: 2px 8px; font-size: .56rem; } .mesa-porque { font-size: 1.1rem; } .seg-abas { order: 1; flex-direction: row; overflow-x: auto; gap: .5rem; padding-bottom: .4rem; scrollbar-width: thin; } .seg-item { flex: none; border-color: var(--linha); border-radius: var(--r-chip); } .seg-aba { padding: .6rem 1rem; font-size: .9rem; white-space: nowrap; } .painel-dif { grid-template-columns: 1fr; padding: 2.4rem; gap: 2rem; } .duas-colunas { grid-template-columns: 1fr; gap: 2.5rem; } .rodape-grade { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { /* jornada no celular: o palco gruda no topo, menor, e os passos rolam embaixo dele */ .jornada-grade { grid-template-columns: 1fr; gap: 1.2rem; } .palco { order: -1; top: calc(var(--topo-h) + 8px); z-index: 2; font-size: 12px; } .sf-topo { grid-template-columns: auto minmax(0, 1fr); } .sf-nav, .sf-acoes { display: none; } .sf-aba { padding: 0 .45em; gap: .4em; } .cena-busca { padding: 1em 1.1em 0; } .g-abas { display: none; } .g-res { gap: .8em; } .g-txt { -webkit-line-clamp: 1; } .cena-compara { padding: 1em 1.1em .9em; } .c-tres { gap: .8em; } .e-lista { right: .8em; bottom: .8em; } .passo { grid-template-columns: 40px minmax(0, 1fr); gap: .9rem; padding: 1rem 0; } .passo-icone { width: 40px; height: 40px; } .passo-icone svg { width: 17px; height: 17px; } .passos-trilho { left: 19px; } .passo h3 { font-size: 1.08rem; } .c-ver { font-size: .62em; bottom: 2.9em; } } @media (max-width: 640px) { .secao { padding: 60px 0; } .bento { grid-template-columns: 1fr; } .cartao-servico.largo { grid-column: auto; } .cartao-servico { min-height: 0; } .cartao-servico h3 { margin-top: 1.4rem; } .posts { grid-template-columns: 1fr; } .checks.duas { grid-template-columns: 1fr; } .dif-numeros { grid-template-columns: 1fr 1fr; gap: .7rem; } .numero { padding: 1.2rem 1rem; } .numero strong { font-size: 2rem; } .pilar-valores { grid-template-columns: 1fr; } .rodape-grade { grid-template-columns: 1fr; gap: 2rem; padding-top: 52px; } .rodape-barra-miolo { flex-direction: column; align-items: flex-start; } .cta-cartao { padding: 3.2rem 1.4rem; } .btn-g { padding: 1rem 1.4rem; } .acoes .btn-g { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .crm-logos img, .crm-logos li::after { transition: none; } .btn-grad::before { display: none; } .ms, .ms img, .btn-grad::after, .btn-brilho::after, .zap-ponto::after, .ceu-luz { animation: none; } .topo, .marca img, .menu-marcador, .submenu, .menu-veu, .menu-botao span { transition: none; } .topo.oculto { transform: none; } .sub-item, .sub-destaque, html.menu-aberto .menu > ul > li { animation: none; } .nichos .seg-painel.ativa .nicho-cartao, .mesa-painel.ativa > * { animation: none; } .seg-tempo, .mesa-tempo { display: none; } .mesa-painel, .prova, .prova-barra { transition: none; } .prova.ativa .prova-tela img { animation: none; } .btn, .vidro, .post, .cartao-servico { transition: none; } .cena { transition: none; } .g-item, .c-mini, .c-ver, .c-legenda, .e-lista, .e-item, .z-data, .z-msg { animation: none; opacity: 1; } .c-ruim .c-tela { animation: none; opacity: .35; filter: grayscale(1); } .g-cursor, .g-ponteiro, .z-escrito, .z-dig { display: none; } .e-tela img, .passo-corpo, .passo-icone, .sf-carga, .c-spin { animation: none; transition: none; } } /* ========================================================================== PÁGINAS INTERNAS (16/10/2026). O vocabulário do style.css (container, section, dark-band, page-hero, kicker, split, card, spec-row, check-grid, formulários, FAQ...) reescrito na linguagem v5, para as outras páginas entrarem no padrão sem trocar a marcação. Liga pelo header.php ($page['v5'], ?v5=1 ou V5_PADRAO). A home não usa nada daqui. ========================================================================== */ /* nomes de variável que a marcação antiga, os estilos em linha e o blog.css ainda usam */ :root { --ink: #f2f4f8; --body: #c3cad6; --muted: #8d97a8; --surface: rgba(255, 255, 255, .04); --card: rgba(255, 255, 255, .04); --line: rgba(255, 255, 255, .1); --accent: #00bffe; --accent-deep: #00bffe; --accent-soft: #00bffe; --cyan-strong: #00bffe; --navy-1000: #040b20; --navy-950: #071230; --navy-900: #0b1a3f; --navy-800: #0f1f4a; --navy-line: rgba(255, 255, 255, .1); --font-display: var(--fd); --font-body: var(--fb); --radius: 10px; --radius-lg: 10px; --shadow: 0 16px 40px rgba(0, 0, 0, .35); --shadow-sm: 0 2px 10px rgba(0, 0, 0, .2); --header-h: var(--topo-h); } .claro, main.interna > section:nth-of-type(even):not(.dark-band) { --ink: #0c1a2e; --body: #43536a; --muted: #6b7a90; --surface: #f4f7fb; --card: #ffffff; --line: #e1e7ef; --accent: #0a9ddc; --accent-deep: #0a6ab8; --accent-soft: #1a6fea; --cyan-strong: #0a6ab8; --shadow: 0 16px 40px rgba(8, 22, 44, .08); --shadow-sm: 0 2px 10px rgba(8, 22, 44, .06); } /* índice do blog: temas numa linha (regra do style.css que o blog.css não traz) */ .blog-temas { margin: 1.6rem 0 .4rem; } .blog-temas ul { display: flex; flex-wrap: wrap; gap: .45rem 1.5rem; } .blog-temas a { color: var(--muted); font-size: .93rem; border-bottom: 1px solid transparent; padding-bottom: 2px; } .blog-temas a:hover, .blog-temas a:focus-visible { color: var(--ink); border-color: currentColor; } .blog-temas span { font-size: .78em; opacity: .6; margin-left: .2rem; font-variant-numeric: tabular-nums; } /* entrada das páginas internas: .reveal sobe como o .rv da home (o v5.js observa as duas) */ html.v5-anima .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ez), transform 1.1s var(--ez); } html.v5-anima .reveal.in { opacity: 1; transform: none; } html.v5-anima .reveal-d1 { transition-delay: .12s; } html.v5-anima .reveal-d2 { transition-delay: .24s; } html.v5-anima .reveal-d3 { transition-delay: .36s; } /* ritmo das páginas internas: a partir do herói (1ª seção), as pares ficam claras; a .dark-band fica sempre escura. O bloco de variáveis é o mesmo do .claro (ver acima, onde o seletor aparece junto). */ /* estrutura */ .container { position: relative; z-index: 1; max-width: var(--caixa); margin: 0 auto; padding: 0 20px; } section { position: relative; padding: 96px 0; overflow: clip; } section.tight { padding: 56px 0; } .center { text-align: center; } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .section-head { max-width: 46rem; margin-bottom: 3rem; } .section-head.center { margin-inline: auto; text-align: center; } .section-head p:not(.kicker) { color: var(--texto-2); font-size: 1.08rem; } .kicker, .hero-kicker { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.1rem; color: var(--azul-claro); font: 600 .72rem/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; } .kicker::before, .hero-kicker::before { content: ''; flex: none; width: .55em; height: .9em; background: var(--quente); -webkit-mask: url(../img/logo/cl3-tri.svg) center / contain no-repeat; mask: url(../img/logo/cl3-tri.svg) center / contain no-repeat; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .breadcrumb { font-size: .85rem; color: var(--mudo); margin-bottom: 1.4rem; } .breadcrumb a { color: var(--texto-2); } .breadcrumb a:hover { color: #fff; } .breadcrumb .sep { margin: 0 .5rem; opacity: .5; } /* herói das páginas internas: navy, texto à esquerda, bolha e grade de pontos do manual */ /* todo herói tem fundo, como na produção (pedido do Leonardo, 16/10/2026): o da página (hero_img → --hero-bg) ou, sem ele, o traço geométrico neutro */ .page-hero, .sys-hero { position: relative; padding: calc(var(--topo-h) + 110px) 0 84px; background: #071230 var(--hero-bg, url(../img/geo-neutro.svg)) right center / cover no-repeat; border-bottom: 1px solid var(--linha); overflow: clip; } .page-hero h1, .sys-hero h1, .page-hero h2, .sys-hero h2 { color: #fff; } .page-hero::before, .sys-hero::before { content: ''; position: absolute; right: -150px; top: -130px; width: 520px; height: 360px; background: linear-gradient(135deg, var(--azul), var(--azul-claro)); opacity: .2; border-bottom-left-radius: 260px; pointer-events: none; } .page-hero::after, .sys-hero::after { content: ''; position: absolute; left: 4%; bottom: 28px; width: 96px; height: 56px; background-image: radial-gradient(circle, rgba(255, 255, 255, .28) 1.7px, transparent 2.3px); background-size: 20px 20px; pointer-events: none; } .page-hero.com-foto { background: linear-gradient(100deg, rgba(7, 18, 48, .96) 0%, rgba(7, 18, 48, .9) 42%, rgba(7, 18, 48, .55) 100%), #071230 var(--hero-bg, none) right center / cover no-repeat; } .page-hero h1, .sys-hero h1 { max-width: 24ch; margin-bottom: 1.2rem; } .hero-lp-copy h1 { max-width: none; } .page-hero .lead, .sys-hero .lead, .hero-sub { max-width: 640px; font-size: 1.15rem; color: var(--texto-2); margin-bottom: 1.6rem; } .hero-copy { max-width: 52rem; } .hero-proof { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; font-size: .88rem; } .hero-proof > span { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; padding: .65rem 1.05rem; border-radius: var(--r-chip); background: rgba(7, 18, 48, .82); border: 1px solid var(--linha-2); backdrop-filter: blur(12px); color: #fff; font: 500 .88rem/1 var(--fb); } .hero-proof strong { color: #fff; font-weight: 700; } .hero-proof .stars { color: #ffb020; letter-spacing: .04em; } .sys-hero { text-align: center; } .sys-hero-copy { max-width: 47rem; margin: 0 auto; } .sys-hero-copy h1 { max-width: none; } .sys-hero-copy .lead, .sys-hero-copy .hero-sub { margin-inline: auto; } .sys-hero-copy .cta-row, .sys-hero-copy .hero-proof { justify-content: center; } .sys-fundo { display: none; } .sys-malha { max-width: 720px; margin: 2.5rem auto 0; opacity: .8; } .sys-malha svg { display: block; width: 100%; height: auto; } .page-hero .rasgo { opacity: .4; } .hero-lp-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; } /* botões no vocabulário antigo */ .btn-primary { background: var(--grad); color: var(--tinta); box-shadow: 0 8px 30px rgba(26, 111, 234, .25); } .btn-primary:hover { color: var(--tinta); transform: translateY(-2px); box-shadow: 0 14px 40px rgba(26, 111, 234, .38); } .btn-ghost, .btn-ghost-dark { background: var(--vidro); border-color: var(--linha-2); color: #fff; backdrop-filter: blur(8px); } .btn-ghost:hover, .btn-ghost-dark:hover { background: var(--vidro-2); border-color: rgba(255, 255, 255, .35); color: #fff; transform: translateY(-2px); } .btn-zap { background: #25d366; color: #fff; } .btn-zap:hover { background: #1fc25b; color: #fff; transform: translateY(-2px); } .btn-lg { padding: 1.1rem 1.8rem; font-size: 1rem; } .cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 1.4rem; } .row-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .95rem; color: var(--azul-claro); } .row-link i { font-style: normal; transition: transform .2s ease; } .row-link:hover i { transform: translateX(3px); } /* cartões, painéis e listas */ .card, .contact-panel, .versus-col, .b-tile, .shift-row, .form-tech, .faq-item, .an-score { background: var(--vidro); border: 1px solid var(--linha); border-radius: var(--r-cartao); } .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1.2rem; } .card { display: flex; flex-direction: column; padding: 1.8rem; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .card:hover { border-color: var(--linha-2); transform: translateY(-4px); box-shadow: var(--shadow); } .card h3 { font-size: 1.1rem; margin-bottom: .6rem; } .card h3 a { color: var(--texto); } .card p { color: var(--texto-2); font-size: .96rem; flex: 1; } .contact-panel { padding: 2rem; } .contact-panel h3, .contact-panel h2 { margin-bottom: 1rem; } .contact-list { display: grid; gap: 1rem; } .contact-list strong { display: block; color: var(--texto); margin-bottom: .15rem; } .check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 2rem; margin: 1.4rem 0 0; } .check-grid li { display: flex; gap: .7rem; align-items: flex-start; color: var(--texto); font-size: .98rem; line-height: 1.5; } .check-grid li::before { content: ''; flex: none; width: 1.3em; height: 1.4em; margin-top: .05em; background: var(--azul-claro); -webkit-mask: url(../img/logo/cl3-simbolo.svg) center / contain no-repeat; mask: url(../img/logo/cl3-simbolo.svg) center / contain no-repeat; } .spec-rows { border-top: 1px solid var(--linha); } .spec-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; padding: 2.2rem 1rem; border-bottom: 1px solid var(--linha); transition: background .2s ease; } .spec-row:hover { background: var(--vidro); } .spec-title { display: flex; gap: 1.1rem; align-items: flex-start; } .spec-title > span { flex: none; margin-top: .45em; font: 600 .78rem/1 var(--fb); letter-spacing: .12em; color: var(--azul-claro); } .spec-title h3, .spec-title h2 { font-size: 1.3rem; margin: 0; } .spec-title a { color: var(--texto); } .spec-title a:hover { color: var(--azul-claro); } .spec-desc p { color: var(--texto-2); } .spec-tags { display: flex; flex-wrap: wrap; gap: .3rem 1rem; color: var(--mudo); font-size: .88rem; } .spec-tags li:not(:last-child)::after { content: '·'; margin-left: 1rem; opacity: .5; } .flow-step { display: grid; grid-template-columns: 52px 1fr; gap: 1.5rem; margin-bottom: 1.8rem; } .flow-marker { width: 48px; height: 48px; border-radius: var(--r-mini); background: var(--grad); color: #fff; display: grid; place-items: center; font: 700 1rem/1 var(--fd); } .flow-step h3 { font-size: 1.15rem; margin-bottom: .35em; } .flow-step p { margin: 0; color: var(--texto-2); font-size: .98rem; } .shift-list { display: grid; gap: .9rem; max-width: 920px; margin-inline: auto; } .shift-row { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 1rem; align-items: center; padding: 1.1rem 1.4rem; } .shift-row p { margin: 0; font-size: .98rem; } .shift-row .before { color: var(--mudo); } .shift-row .after { color: var(--texto); font-weight: 600; } .shift-arrow { text-align: center; color: var(--azul-claro); } .versus { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .versus-col { padding: 2.2rem 2rem; } .versus-col h3 { font-size: 1rem; margin-bottom: 1.3rem; } .versus-col ul { display: grid; gap: .85rem; } .versus-col li { display: flex; gap: .7rem; align-items: flex-start; font-size: .97rem; color: var(--texto-2); } .versus-col li::before { content: ''; flex: none; width: 1.1em; height: 1.2em; margin-top: .15em; background: var(--mudo); -webkit-mask: url(../img/logo/cl3-tri.svg) center / contain no-repeat; mask: url(../img/logo/cl3-tri.svg) center / contain no-repeat; } .versus-col.is-cl3 { border-color: rgba(26, 111, 234, .5); background: rgba(26, 111, 234, .12); } .versus-col.is-cl3 li { color: var(--texto); } .versus-col.is-cl3 li::before { background: var(--azul-claro); -webkit-mask-image: url(../img/logo/cl3-simbolo.svg); mask-image: url(../img/logo/cl3-simbolo.svg); width: 1.3em; height: 1.4em; margin-top: .05em; } .versus-note { text-align: center; max-width: 40rem; margin: 2.4rem auto 0; color: var(--mudo); } .bento-cidade { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 175px; gap: 1rem; } .b-tile { padding: 1.3rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem; } .b-tile strong { font: 700 1.7rem/1.1 var(--fd); color: var(--texto); } .b-tile span { font-size: .88rem; color: var(--mudo); } .b-tile.b-dark { background: var(--bg-2); } .b-tile .grad-text { color: transparent; } .b-nichos { grid-column: 1 / -1; grid-row: auto; justify-content: center; min-height: 0; } .b-nichos p { margin: .55rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem .45rem; } .b-nichos .nicho { display: inline-block; padding: .4rem .75rem; border-radius: var(--r-chip); border: 1px solid var(--linha-2); color: var(--texto); font-size: .85rem; } .b-nichos .nicho:hover { border-color: var(--azul-claro); color: #fff; } .b-nichos .nicho-mais { color: var(--mudo); border-style: dashed; } /* serviços (nossos-servicos): bento de seis cartões com o que cada um inclui */ .bento-servicos { grid-template-columns: repeat(3, 1fr); } .bento-servicos .cartao-servico { min-height: 300px; } .cartao-servico h2 { margin: auto 0 .5rem; font-size: 1.3rem; } .cartao-itens { display: grid; gap: .35rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--linha); font-size: .84rem; color: var(--mudo); } .cartao-itens li { display: flex; align-items: center; gap: .5rem; } .cartao-itens li::before { content: ''; flex: none; width: .45em; height: .75em; background: var(--azul-claro); -webkit-mask: url(../img/logo/cl3-tri.svg) center / contain no-repeat; mask: url(../img/logo/cl3-tri.svg) center / contain no-repeat; } /* sites por segmento (nossos-servicos): abas por grupo em chips e uma grade de cartões por nicho */ .nichos .seg-abas { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.8rem; } .nichos .seg-item { border-color: var(--linha); border-radius: var(--r-chip); } .nichos .seg-item.ativa { box-shadow: 0 0 0 1px rgba(26, 111, 234, .4); } .nichos .seg-aba { padding: .6rem 1rem; font-size: .92rem; white-space: nowrap; } .nichos .seg-aba span { display: inline-block; min-width: 1.5em; margin-left: .35rem; padding: .15em .4em; border-radius: 6px; background: var(--vidro-2); font-size: .74em; text-align: center; color: var(--mudo); } .nichos .seg-item.ativa .seg-aba span { background: var(--grad); color: var(--tinta); } .nichos .seg-painel:not([hidden]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } .nicho-cartao { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem 1.5rem 1.3rem; color: inherit; } .nicho-cartao:hover { border-color: var(--linha-2); transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); } .nicho-rotulo { font: 600 .68rem/1 var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--azul-claro); } .nicho-cartao h3 { font-size: 1.05rem; margin: 0; } .nicho-porque { margin: 0; font: 600 1.02rem/1.35 var(--fb); color: var(--texto); } .nicho-lead { margin: 0; color: var(--mudo); font-size: .92rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .nicho-cartao .link-seta { margin-top: auto; padding-top: .9rem; font-size: .88rem; } .nichos .seg-painel.ativa .nicho-cartao { animation: v5Sobe .5s var(--ez) both; animation-delay: calc(var(--i, 0) * .06s); } .b-accent { background: rgba(26, 111, 234, .18); border-color: rgba(26, 111, 234, .5); color: inherit; } .b-accent:hover { border-color: var(--azul-claro); } .tabela-rolagem { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: .95rem; } th, td { padding: .7rem .9rem; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; } th { color: var(--texto); font-weight: 600; } td { color: var(--texto-2); } .fonte-dado { font-size: .82rem; color: var(--mudo); } address { font-style: normal; } .prose { max-width: 44rem; } .prose p, .prosa-cidade p { color: var(--texto-2); } .erro-404 { min-height: 60vh; display: flex; align-items: center; text-align: center; } .erro-404 h1 { max-width: none; margin-inline: auto; } .erro-404 .lead { margin: 0 auto 2.4rem; } .erro-404 .cta-row, .erro-404 .hero-kicker { justify-content: center; } .hub-maiores { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; margin-top: 1.5rem; } .hub-maiores a, .hub-regiao a { display: block; padding: .8rem 1rem; border-radius: var(--r-mini); background: var(--vidro); border: 1px solid var(--linha); color: var(--texto); } .hub-maiores a:hover, .hub-regiao a:hover { border-color: var(--linha-2); color: #fff; } .map-embed { border: 0; width: 100%; height: 300px; border-radius: var(--r-mini); display: block; filter: grayscale(.35); margin-top: 1.4rem; } /* FAQ na marcação antiga (.faq-i no lugar de .faq-mais, .faq-a > div no lugar de .faq-a-miolo) */ .faq-item { padding: 0 1.6rem; } .faq-item > .faq-q { font: 600 1.02rem/1.4 var(--fb); color: var(--texto); cursor: pointer; } .faq-i { position: relative; width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid var(--linha-2); transition: transform .3s ease, background .3s ease; } .faq-i::before, .faq-i::after { content: ''; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); } .faq-i::before { width: 12px; height: 1.5px; } .faq-i::after { width: 1.5px; height: 12px; } .faq-item.is-open .faq-i { transform: rotate(45deg); background: var(--vidro-2); } .faq-a > div { overflow: hidden; color: var(--texto-2); font-size: .98rem; } .faq-a > div > :last-child { margin-bottom: 1.4rem; } .faq-a > div ul { padding-left: 1.2rem; list-style: disc; margin-bottom: 1rem; } /* formulários (contato, LP e análise) */ .form-grid, .ft-form { display: grid; gap: 1.1rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .field label, .ft-campo label, .an-label { display: block; font-weight: 600; font-size: .9rem; color: var(--texto); margin-bottom: .4rem; } .field input, .field textarea, .field select, .ft-campo input, .ft-campo textarea, .an-input-row input { width: 100%; padding: .85rem 1rem; border-radius: var(--r-mini); border: 1px solid var(--linha-2); background: rgba(255, 255, 255, .05); color: var(--texto); font: inherit; font-size: 1rem; transition: border-color .2s ease, box-shadow .2s ease; } .field input::placeholder, .field textarea::placeholder, .ft-campo input::placeholder, .ft-campo textarea::placeholder, .an-input-row input::placeholder { color: var(--mudo); } .field input:focus, .field textarea:focus, .field select:focus, .ft-campo input:focus, .ft-campo textarea:focus, .an-input-row input:focus { outline: none; border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(0, 191, 254, .2); } .field textarea, .ft-campo textarea { min-height: 130px; resize: vertical; } main.interna > section:nth-of-type(even):not(.dark-band) .field input, main.interna > section:nth-of-type(even):not(.dark-band) .field textarea, main.interna > section:nth-of-type(even):not(.dark-band) .ft-campo input, main.interna > section:nth-of-type(even):not(.dark-band) .ft-campo textarea, .claro .an-input-row input { background: #fff; } .form-note { font-size: .85rem; color: var(--mudo); } .campo-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-tech { padding: 2rem; } .ft-selo { display: inline-block; padding: .35rem .7rem; border-radius: var(--r-chip); background: rgba(0, 191, 254, .16); color: var(--azul-claro); font: 600 .72rem/1 var(--fb); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .8rem; } .ft-titulo { font: 700 1.3rem/1.2 var(--fd); text-transform: uppercase; color: var(--texto); margin-bottom: .6rem; } .ft-sub { color: var(--texto-2); font-size: .95rem; margin-bottom: 1.4rem; } .ft-botao { display: inline-flex; justify-content: center; align-items: center; gap: .55rem; width: 100%; padding: 1rem 1.5rem; border: 0; border-radius: var(--r-botao); background: var(--grad); color: var(--tinta); font: 600 1rem/1 var(--fb); cursor: pointer; box-shadow: 0 8px 30px rgba(26, 111, 234, .25); transition: transform .2s ease, box-shadow .2s ease; } .ft-botao:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(26, 111, 234, .38); } .ft-aviso, .form-aviso { padding: 1rem 1.2rem; border-radius: var(--r-mini); border: 1px solid var(--linha-2); background: var(--vidro-2); margin-bottom: 1.2rem; } .ft-aviso.is-ok, .form-aviso.is-ok { border-color: rgba(34, 197, 94, .5); } .ft-aviso.is-erro, .form-aviso.is-erro { border-color: rgba(255, 90, 90, .5); } .ft-aviso p, .form-aviso p { margin: 0; } .an-form { margin-bottom: 2.5rem; } .an-input-row { display: flex; gap: .8rem; flex-wrap: wrap; } .an-input-row input { flex: 1; min-width: 240px; } .an-erro { color: #ff9a9a; font-weight: 600; margin-top: 1rem; } .an-score { display: inline-flex; align-items: center; gap: 1rem; padding: 1.2rem 1.6rem; margin-bottom: 1.6rem; } .an-score strong { font: 800 2.6rem/1 var(--fd); color: var(--azul-claro); } .an-score span { font-size: .95rem; color: var(--mudo); } .an-score.is-otimo strong { color: #4ade80; } .an-score.is-medio strong { color: #fbbf24; } .an-score.is-ruim strong { color: #ff7a7a; } .an-bars { margin: 1.8rem 0 2.4rem; display: grid; gap: .55rem; } .an-bar-track { height: 8px; border-radius: 4px; background: var(--vidro-2); overflow: hidden; } .an-bar-track > * { height: 100%; background: var(--grad); border-radius: 4px; } .an-grupo { margin-bottom: 2.2rem; } .an-grupo h2 { font-size: 1.1rem; border-top: 1px solid var(--linha-2); padding-top: 1rem; } .an-lista li { display: flex; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid var(--linha); } .an-lista strong { color: var(--texto); font-size: .97rem; } .an-lista p { margin: .25rem 0 0; font-size: .9rem; color: var(--texto-2); } .an-mark { flex: none; width: 10px; height: 10px; margin-top: .5em; border-radius: 50%; background: var(--mudo); } .an-lista li.is-ok .an-mark { background: #4ade80; } .an-lista li.is-falha .an-mark { background: #ff7a7a; } .an-lista li.is-ok strong { color: var(--mudo); font-weight: 500; } .an-prior ol { list-style: none; counter-reset: prior; display: grid; gap: .8rem; } .an-prior li { position: relative; padding: 1rem 1.2rem 1rem 3.2rem; border-radius: var(--r-mini); background: var(--vidro); border: 1px solid var(--linha); } .an-prior li::before { counter-increment: prior; content: counter(prior); position: absolute; left: 1rem; top: 1rem; width: 1.5rem; height: 1.5rem; border-radius: 6px; background: var(--grad); color: #fff; font: 700 .8rem/1.5rem var(--fb); text-align: center; } .an-chips { display: flex; flex-wrap: wrap; gap: .5rem; } .an-chip { padding: .4rem .7rem; border-radius: var(--r-chip); background: var(--vidro-2); border: 1px solid var(--linha); font-size: .85rem; color: var(--texto); } .an-chip i { font-style: normal; font-weight: 400; font-size: .75rem; color: var(--mudo); } .an-pages th { color: var(--texto); } .an-pages td:first-child { color: var(--texto); font-weight: 600; white-space: nowrap; } @media (max-width: 960px) { .split, .spec-row, .versus, .hero-lp-grid, .form-row, .check-grid, .prova-grade { grid-template-columns: 1fr; } .prova-grade { gap: 1.6rem; } .prova-palco { padding: 2rem 1.4rem 1.6rem; } .prova-item:not(.ativa) { inset: 2rem 1.4rem auto; } .split { gap: 2.4rem; } .spec-row { gap: .8rem; padding: 1.6rem .5rem; } .page-hero, .sys-hero { padding: calc(var(--topo-h) + 70px) 0 56px; } .page-hero h1 { max-width: none; } .bento-cidade { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } .bento-servicos { grid-template-columns: 1fr 1fr; } .nichos .seg-painel:not([hidden]) { grid-template-columns: 1fr 1fr; } .nichos .seg-abas { flex-wrap: nowrap; justify-content: flex-start; } .shift-row { grid-template-columns: 1fr; gap: .4rem; } .shift-arrow { text-align: left; } .contact-panel, .form-tech { padding: 1.5rem; } } @media (max-width: 640px) { section { padding: 64px 0; } .bento-cidade { grid-template-columns: 1fr 1fr; } .bento-servicos, .nichos .seg-painel:not([hidden]) { grid-template-columns: 1fr; } .hero-proof > span { padding: .5rem .6rem; font-size: .76rem; } } @media (prefers-reduced-motion: reduce) { html.v5-anima .reveal { opacity: 1; transform: none; transition: none; } .prova-ponto i::after { animation: none; } } /* ========================================================================== Fotos sob véu navy nas faixas escuras (16/10/2026, pedido do Leonardo: "falta algumas fotos, algo de marketing nos fundos de azul"). O escritório da CL3 (a mesma foto da chamada final em produção) na chamada; a mesa de trabalho nos depoimentos; arte gerada para a CL3 nos mercados; foto de banco nos segmentos. O véu deixa a foto a uns 12% e os cartões por cima continuam legíveis. ========================================================================== */ #chamada, #depoimentos, #sites-por-segmento, #segmentos { background-color: #071230; background-image: linear-gradient(180deg, rgba(7, 18, 48, .9) 0%, rgba(7, 18, 48, .82) 50%, rgba(7, 18, 48, .94) 100%), var(--foto, none); background-size: cover; background-position: center; background-repeat: no-repeat; } #chamada { --foto: url(../img/fundo-chamada.webp); background-image: linear-gradient(180deg, rgba(7, 18, 48, .82) 0%, rgba(7, 18, 48, .7) 50%, rgba(7, 18, 48, .9) 100%), var(--foto, none); } #depoimentos { --foto: url(../img/fundo-manifesto.webp); } #sites-por-segmento { --foto: url(../img/fundo-hero.webp); } /* mercados: arte gerada para a CL3 em 20/10/2026 (janelas de navegador e o triângulo do símbolo no navy da marca), já escura, por isso o véu é mais aberto que o das fotos de banco */ #segmentos { --foto: url(../img/fundo-mercados.webp); background-image: linear-gradient(180deg, rgba(7, 18, 48, .8) 0%, rgba(7, 18, 48, .6) 50%, rgba(7, 18, 48, .9) 100%), var(--foto, none); } /* as fotos de banco são mais carregadas: véu mais fechado */ #sites-por-segmento { background-image: linear-gradient(180deg, rgba(7, 18, 48, .95) 0%, rgba(7, 18, 48, .9) 50%, rgba(7, 18, 48, .97) 100%), var(--foto, none); } #chamada .deco-pontos, #depoimentos .deco-bolha, #depoimentos .deco-padrao { opacity: .5; } @media (max-width: 760px) { #chamada { --foto: url(../img/fundo-chamada-mobile.webp); } #sites-por-segmento { --foto: url(../img/fundo-hero-mobile.webp); } #segmentos { --foto: url(../img/fundo-mercados-mobile.webp); } } /* foto de verdade dentro da página (Quem somos): o escritório, com legenda */ .foto-v5 { margin: 0 0 1.2rem; border-radius: var(--r-foto); overflow: hidden; border: 1px solid var(--linha); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); } .foto-v5 img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; } .foto-v5 figcaption { padding: .7rem 1rem; font-size: .82rem; color: var(--mudo); background: var(--vidro); }