/* Âmago — página inicial: hero, esfera de serviços e secções seguintes. */ /* ---------- Hero ---------- */ /* O hero é uma camada OPACA acima da secção seguinte: é assim que as peças do puzzle, quando estão afastadas e transbordam para cima, passam por baixo dele em vez de lhe ficarem por cima. Daí o fundo próprio e o z-index maior. */ .hero{position:relative;z-index:2;background:var(--fundo);overflow:hidden} .essencia{position:relative;z-index:1} /* Pontos de fundo: preenchem o hero, por baixo do conteúdo dele. */ #ambiente{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none} .hero .interior{position:relative;z-index:1} /* Duas colunas: texto à esquerda, esfera à direita. */ .hero .interior{display:grid;grid-template-columns:1fr auto;align-items:center;align-content:center; gap:clamp(24px,5vw,72px);max-width:1280px;margin:0 auto; min-height:calc(100svh - var(--altura-nav)); padding:clamp(24px,4vh,48px) clamp(16px,4vw,40px)} /* O texto fica por cima da esfera: os balões dos serviços não lhe podem passar à frente. */ .texto{max-width:100%;position:relative;z-index:600} /* O VÉU por trás do texto do hero (2026-09-23, pedido do cliente ao mesmo tempo que as linhas do fundo ganharam brilho): um clarão da COR DO FUNDO que apaga a teia de pontos onde a frase e os botões vivem. Mesma ideia do véu do convite, com a cor trocada — ali o fundo é branco, aqui é o verde da marca —, e é por isso que não se vê: o que se nota é a teia a desvanecer-se ao aproximar-se das letras. Vive DENTRO do `.texto`, que já tem `z-index:600`, com `z-index:-1`: fica atrás das letras e à frente do canvas (que é 0), sem mais um elemento no HTML. O inset é MENOR do lado direito (-3%) do que do esquerdo (-9%): é desse lado que está a esfera, e o véu, estando acima dela no empilhamento, escurecia-lhe a borda. Do lado de fora não há nada que ele possa estragar. */ .texto::before{content:"";position:absolute;z-index:-1;pointer-events:none; inset:-13% -3% -16% -9%; background:radial-gradient(ellipse 60% 56% at 50% 50%, rgba(var(--fundo-rgb),.97) 0%,rgba(var(--fundo-rgb),.94) 44%, rgba(var(--fundo-rgb),.6) 70%,rgba(var(--fundo-rgb),0) 100%)} /* A esfera nunca pode ser mais alta do que o hero: o ultimo termo limita-a a altura util do ecra (viewport menos a navbar e o padding do hero). */ /* O z-index aqui fecha um contexto de empilhamento: assim os z-index altos dos nós (até 500 no nó ativo) ficam contidos e não competem com o texto do hero. */ .esfera-wrap{position:relative;z-index:1; width:min(94vw,58vw,760px,calc(100svh - var(--altura-nav) - 2*clamp(24px,4vh,48px))); aspect-ratio:1;user-select:none;container-type:inline-size; cursor:grab;touch-action:pan-y} .esfera-wrap.a-arrastar{cursor:grabbing} /* Empilhamento em .esfera-wrap: 1 metade de trás da esfera · 2 marca · 3 metade da frente · 10-107 nós · 500 nó ativo */ .esfera-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none} #esfera-tras{z-index:1} #esfera-frente{z-index:3} #nos{position:absolute;inset:0;z-index:auto} /* Marca ao centro da esfera: fica atrás dos pontos da frente e à frente dos de trás. */ .marca{position:absolute;left:50%;top:50%;width:19%;z-index:2; transform:translate(-49.87%,-58.44%);pointer-events:none} /* A marca em NUVEM DE PONTOS (2026-09-23, pedido do cliente): o `marca-pontos.js` lê o próprio PNG, amostra-o numa grelha e desenha-o em pontos que se desfazem por onde o cursor passa. O canvas ocupa exatamente o lugar da imagem — a proporção é a do ficheiro (563x556), sem a qual um canvas não sabe que altura ter a partir de uma largura em percentagem. Não intercepta o rato: o arrasto da esfera continua a ser do `.esfera-wrap`. A imagem só sai de cena quando a nuvem está pronta (classe posta pelo script), por isso sem JavaScript — ou se a leitura do PNG falhar — fica o render, como antes. */ /* O seletor tem de incluir o `canvas`: a regra `.esfera-wrap canvas` (as duas telas da esfera) é mais específica do que uma classe sozinha e punha esta tela a ocupar o wrap todo — a nuvem saía do tamanho da esfera. O `inset:auto` desfaz o `inset:0` de lá. A tela é 34% MAIOR do que a imagem era (19% x 1,34 = 25,5%) e o `marca-pontos.js` desenha a nuvem ao meio dela, com a folga à volta: é essa folga que o PULSO usa para crescer sem bater nos limites do canvas — e ele precisa de toda, porque chega a medir 165px quando em repouso tem 145. O `translate` acompanha a folga, para o centro da marca ficar exatamente onde estava: o vertical sai de 0,5 + 0,0844/1,34 = 56,30% e o horizontal de 0,5 - 0,0013/1,34 = 49,90%. Quem mexer na folga do JS refaz os três. */ /* 40,8% = 25,5% x 1,6: o cliente escolheu a nuvem a "80%" num painel em que 50% era o tamanho de então (2026-09-28). A folga e o `translate` são frações da própria tela, por isso não mudam com a largura. */ .esfera-wrap canvas.marca-nuvem{position:absolute;inset:auto;left:50%;top:50%; width:40.8%;height:auto;aspect-ratio:563/556;z-index:2; transform:translate(-49.90%,-56.30%);pointer-events:none;display:block} .esfera-wrap.nuvem-viva .marca{display:none} /* Cada linha num que nunca quebra, para o título manter sempre a forma. */ .frase{margin:0;text-align:left; font-weight:200;font-size:var(--tipo-h1);letter-spacing:.01em;line-height:1.12} .frase span{display:block;white-space:nowrap;width:fit-content} .frase em{font-style:normal;font-weight:500} /* A entrada da frase, em corpo pequeno. Justificada nas duas pontas, fica exatamente com a largura da linha do título que a contém. Medidas em `em` para acompanhar o título; `white-space:normal` porque o justificado não funciona com nowrap. */ /* A entrada é dimensionada para acabar onde acaba a linha do título que a contém. O `font-size` em `em` é o único número a afinar: como tudo escala com o título, a proporção mantém-se em qualquer ecrã. O seletor tem de ser mais específico do que `.frase span`, senão herda dele o `fit-content`. */ .frase span.frase-antes{display:block;width:auto; font-size:.327em;font-weight:400;letter-spacing:.1em; text-transform:uppercase;line-height:1.4;margin-bottom:1em;opacity:.6} .sub{margin:20px 0 0;max-width:44ch;font-size:clamp(15px,1.4vw,18px);font-weight:300;line-height:1.6;color:var(--ink-2);opacity:.8} .botoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,3.5vh,32px)} /* NOTA: os botões (`.btn`) mudaram-se para o `base.css` a 2026-09-22 — deixaram de ser só do hero e são usados também nas páginas interiores, que não carregam esta folha. */ /* ---------- Nós dos serviços (HTML por cima do canvas) ---------- */ .no{position:absolute;left:0;top:0;width:0;height:0;outline:none} .no.atras{pointer-events:none} .disco{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--ink);cursor:pointer; transform:translate(-50%,-50%) scale(var(--p,1));opacity:var(--o,1); display:flex;align-items:center;justify-content:center;overflow:hidden; box-shadow:0 0 0 3px rgba(252, 252, 252, 0.989); transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),background .3s,box-shadow .3s,opacity .3s,transform .3s} .no.atras .disco{box-shadow:none;cursor:default} .no.ativo .disco{width:84px;height:84px;background:#fff;border:2px solid var(--ink);transform:translate(-50%,-50%) scale(1);opacity:1;box-shadow:0 10px 28px rgba(255, 255, 255, 0.985)} .no:focus-visible .disco{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)} /* Ícones: traço da cor do fundo sobre o disco branco. A espessura e os remates estão aqui e não em cada SVG, para todos combinarem entre si. */ .icone{width:38px;height:38px;display:block;color:var(--fundo); fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; opacity:0;transform:scale(.6);transition:opacity .25s .1s,transform .3s .1s} .no.ativo .icone{opacity:1;transform:scale(1)} .no.ativo{z-index:500 !important} .balao{position:absolute;top:0;left:44px;transform:translateY(-50%);display:flex;align-items:center;opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .25s .12s} .no.esq .balao{left:auto;right:44px;flex-direction:row-reverse} .no.ativo .balao{opacity:1} .linha{position:relative;width:40px;height:2px;background:var(--ink)} .linha::before{content:"";position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:var(--ink);transform:translateY(-50%)} .no:not(.esq) .linha::before{left:-3px} .no.esq .linha::before{right:-3px} /* Um rótulo comprido de mais deixava de caber na janela de um lado e na coluna do texto do outro, e o balão saía cortado: acima de 260px parte em duas linhas. */ .rotulo{background:var(--ink);color:var(--fundo);font-size:14px;font-weight:500;letter-spacing:.02em;padding:7px 14px;border-radius:999px; max-width:260px;white-space:normal;text-align:center;line-height:1.3} /* ---------- Secção "A Âmago": puzzle montado pelo scroll ---------- */ /* A secção é um percurso alto; o palco fica preso ao topo e o scroll dentro dele comanda a montagem. A altura do percurso define quanto se rola por peça. */ /* A altura do percurso é o scroll que a montagem inteira ocupa. Com as peças mais sobrepostas (ver `puzzle.js`) já não são precisos 340svh. */ /* `--consumido` é escrito pelo `puzzle.js`: é o percurso já gasto a montar, que é retirado da página para não se voltar a atravessar ao subir (ver lá o porquê). */ .essencia{background:#fff;color:var(--fundo); height:calc(250svh - var(--consumido, 0px))} /* O browser compensa sozinho o scroll quando um elemento muda de altura (scroll anchoring). Aqui a compensação é feita pelo JS, no mesmo frame e à medida certa; as duas juntas davam o dobro do recuo e a página saltava. */ :root{overflow-anchor:none} .essencia-palco{position:sticky;top:var(--altura-nav); height:calc(100svh - var(--altura-nav)); display:grid;place-items:center; padding:clamp(14px,3vh,40px) clamp(12px,3vw,40px)} /* ---------- Fitas de imagens em ciclo, atrás do puzzle ---------- */ /* Ocupam o palco todo; o véu branco por cima mantém a secção clara e deixa as peças brancas destacarem-se. As imagens levam o mesmo acerto de tom das peças. */ .essencia{--fita-gap:clamp(8px,1.4vh,18px)} .essencia-fundo{position:absolute;inset:0;z-index:0;overflow:hidden; display:grid;grid-template-rows:repeat(3,1fr);gap:var(--fita-gap)} .essencia-fundo::after{content:"";position:absolute;inset:0;background:#fff;opacity:.45} .fita{overflow:hidden} /* A tira tem de ter altura DEFINIDA (100% da linha): sem isso, o `height:90%` das imagens não tem contra o que resolver, elas ficam ao tamanho natural do ficheiro e a linha mostra só uma faixa delas. Sem `gap` de propósito: com margem em cada imagem, metade da tira é exatamente metade da largura, e o translateX(-50%) fecha o ciclo sem saltos. */ .fita-tira{display:flex;align-items:center;height:100%;width:max-content; will-change:transform;animation:fita-correr linear infinite} /* As imagens são 16:9 e aparecem inteiras. O `aspect-ratio` é obrigatório: dentro de um flex, `width:auto` numa imagem usa a largura intrínseca do ficheiro (880px) em vez de a deduzir da altura, e o conteúdo sai esticado. O `flex:none` impede que encolham e o `object-fit` garante que, havendo desvio, cortam em vez de deformar. */ .fita-tira img{display:block;flex:none;height:90%;width:auto;aspect-ratio:16/9; object-fit:cover;margin-right:var(--fita-gap)} .fita--1 .fita-tira{animation-duration:140s} .fita--2 .fita-tira{animation-duration:170s;animation-direction:reverse} .fita--3 .fita-tira{animation-duration:155s} @keyframes fita-correr{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* O viewBox é EXATAMENTE o puzzle montado (260x200), por isso ele enche o palco todo. As peças afastadas pintam para fora do SVG (overflow:visible) e vão parar por baixo do hero, que é opaco. A largura é limitada por três coisas: a caixa, um teto absoluto e a altura que sobra no ecrã convertida pela razão 260/200. Sem o terceiro termo o SVG não resolve `height:100%` numa grelha centrada e cresce para fora do ecrã. */ /* O TETO (`--teto`) é o que trava o puzzle nos ecrãs grandes. Sem ele quem mandava era sempre a altura, e num ecrã de 2560x1290 o puzzle media 1485px de largura com o título das peças a 35px — o cliente chamou-lhe "ENORME" (2026-09-22). O texto vive dentro do SVG e escala com ele, por isso travar a largura é travar a letra: a 1100px o título fica em 26px, entre os 24px de uma janela de 1600x900 (que ele aprova) e os 29px de 1080. Só morde a partir de ~1000px de altura de janela; abaixo disso continua a mandar a altura, e o que sobra do palco em volta é ocupado pelas fitas do fundo. */ /* Esta cor fica por baixo da fotografia: só se vê se a imagem não carregar. */ .puzzle{position:relative;z-index:1;--p-peca:#0d4441; --teto:1100px; --altura-util:calc(100svh - var(--altura-nav) - 2*clamp(14px,3vh,40px)); width:min(100%,var(--teto),calc(var(--altura-util) * 260 / 200)); height:auto;overflow:visible} /* O JS escreve `transform` e `opacity` a cada frame; a transição fica só na sombra, para o encaixe da peça se notar sem competir com o movimento do scroll. */ /* Sem sombra nas peças: como elas encaixam umas nas outras, a sombra de cada uma caía sobre a vizinha e aparecia como manchas escuras dentro do puzzle. O que marca as juntas é um traço fino no contorno de cada peça. */ .peca{transform-box:fill-box;transform-origin:center;will-change:transform} /* Todas as peças no mesmo tom: o verde escuro `--p-peca`, o da peça "O que fazemos" no protótipo. Opacas, é o que as destaca das imagens que passam atrás. */ /* O traço que marca as JUNTAS entre as peças. Subiu de .16/.5 para .45/.7 a pedido do cliente (2026-09-24: "mete um pequeno destaque nas linhas interiores do puzzle, porque mal se nota que estão encaixadas"). Cada peça traz o seu contorno completo, por isso nas juntas há DOIS traços encostados e no perímetro de fora há só um — é isso que faz o reforço marcar as juntas ao dobro sem transformar o puzzle num bloco com moldura. A cor é o verde escuro do fundo, não o preto: a junta lê-se como uma sombra entre peças. */ .peca-forma{fill:var(--p-peca);stroke:rgba(2,36,37,.45);stroke-width:.7} .peca-icone{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .peca-titulo{fill:#fff;font-size:6.2px;font-weight:500;letter-spacing:.13em;text-anchor:middle} .peca-corpo{fill:#fff;fill-opacity:.72;font-size:4.4px;font-weight:300;text-anchor:middle} /* Montado e com o percurso todo cortado: a altura passa a vir do conteúdo, para não ficar pendurada num `calc` cujas duas parcelas já se anulam a menos de um pixel, e as peças largam o `will-change` — não voltam a mexer-se e não precisam de ter uma camada de composição reservada para elas enquanto se rola por cima. */ .essencia.montado{height:auto} .essencia.montado .peca{will-change:auto} /* Sem percurso (movimento reduzido): o puzzle aparece montado e a secção encolhe. */ .essencia.sem-percurso{height:auto;padding:clamp(48px,8vh,96px) 0} .essencia.sem-percurso .essencia-palco{position:static;height:auto} /* O bloco HTML de cada peça para ecrãs estreitos (`foreignObject`): escondido por omissão, aparece abaixo dos 560px no lugar do texto SVG — ver lá. */ .peca-movel{display:none} /* ---------- Secção "Em números": contadores ---------- */ /* Volta ao verde do hero. É opaca e fica acima da secção do puzzle pelo mesmo motivo que o hero: uma peça que transborde do palco passa por baixo dela, não por cima. */ /* Vale um ecrã MENOS a navbar, a mesma conta do hero e do palco do puzzle. Com um ecrã inteiro sobravam no fim do scroll exatamente os pixels da barra: a secção ficava a passar por baixo dela e era preciso mais um bocadinho de scroll para chegar ao fundo. Assim, na última posição do scroll, a secção encosta por baixo da barra e acaba no fundo do ecrã. `min-height` e não `height`: em ecrãs baixos o conteúdo cresce para fora em vez de se cortar. */ .numeros{position:relative;z-index:2;background:var(--fundo);color:var(--ink); /* O TETO do conteúdo: o interior nunca passa desta altura (ver `.numeros .interior`). E a SECÇÃO pára de crescer no mesmo ponto: mede um ecrã menos a navbar, como as outras secções grandes, MAS nunca mais do que o interior travado e os dois respiros. Sem esta segunda parte, num ecrã de 2560x1290 ficavam 382px de verde vazio por baixo da segunda fila (532 numa de 1440) — o cliente apanhou-o logo: "entre os Resultados e os Projetos de Sucesso fica um espaçamento enorme" (2026-09-23). Como as duas secções são verdes, a fronteira entre elas não se vê, por isso a secção deixar de encher o ecrã não custa nada à vista; um vão de meio ecrã custava. Até ~900px de altura de janela quem manda continua a ser o ecrã e nada muda. */ --teto:760px; min-height:min(calc(100svh - var(--altura-nav)),calc(var(--teto) + 2 * var(--respiro))); display:grid; padding:var(--respiro) clamp(16px,4vw,40px)} /* Duas linhas: o título em cima, com a altura que precisar, e as métricas a ficar com todo o resto (`1fr`). É essa segunda linha que depois reparte o espaço. */ /* O `row-gap` é o MESMO respiro do padding: o título fica à mesma distância do topo da secção e da primeira fila de métricas. */ /* O `max-height` é o que trava o vão entre as duas filas nos ecrãs grandes. A secção continua a medir um ecrã inteiro (é o `min-height` da `.numeros`), mas o CONTEÚDO pára de crescer: 760px é, arredondado, o que uma janela de 900 de altura dá ao interior, e dá um vão de ~300px entre as filas — o que o cliente vê no ecrã pequeno e aprova. Num ecrã de 2560x1290 o vão ia aos 612px (2026-09-22: "um espaçamento enorme"). Como o interior é um item de grelha com o `stretch` travado pelo máximo, alinha-se ao início e o que sobra do ecrã fica no FIM da secção, como manda a regra de 2026-09-21 e como já acontece na Atualidade. NÃO é o mesmo que a experiência revertida de hoje (ver a nota da `.metricas`): aquela cortava a SECÇÃO a 900px e juntava as filas; esta mantém o vão que o ecrã pequeno tem — e a secção acompanha o teto (ver `--teto` na `.numeros`), para não sobrar verde vazio por baixo da segunda fila. */ .numeros .interior{max-width:1280px;width:100%;margin:0 auto;max-height:var(--teto); display:grid;grid-template-rows:auto 1fr;row-gap:var(--respiro)} /* Título da secção. Mesmo corpo e mesmo peso dos outros (`--tipo-titulo`, em base.css); o que o afasta das métricas é o `row-gap` do `.interior` e não uma margem própria, senão as duas somavam-se. Está aqui no lugar da antiga frase do "#1" (a afirmação de ser a empresa com mais Contratos de Desempenho Energético em hotéis), que o cliente mandou retirar — se ela voltar, volta como conteúdo e não como título. */ .numeros-titulo{margin:0 auto;text-align:center; font-weight:200;font-size:var(--tipo-titulo);line-height:1.06;letter-spacing:-.01em} /* Grelha de três colunas; cada métrica começa num traço fino, como uma tabela sem linhas verticais. Tudo alinhado à esquerda de propósito: o número muda de largura enquanto conta e, centrado, andaria de um lado para o outro. */ /* `space-between` (era `space-evenly`): a primeira fila cola ao respiro do título e a última ao respiro do fim, e o que sobra da altura do ecrã fica ENTRE as duas filas. Com `space-evenly` um terço da sobra ia parar por cima da primeira fila e o título ficava mais longe das métricas do que do topo — era isso que o cliente não queria. O `gap` fica a valer como distância mínima. REVERTIDO a 2026-09-22: experimentou-se `start` (filas juntas, sobra no fim) mais um teto de 900px na altura da secção, para fechar o vão que num ecrã de 1242 passa dos 600px e para os Projetos subirem. O cliente viu e recusou — "ficou muito mau". Fica registado que o vão grande em ecrãs altos é o preço desta escolha, e que ele o prefere ao alinhamento no topo. */ .metricas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr); align-content:space-between;gap:clamp(36px,6vh,72px) clamp(24px,4vw,64px)} .metrica{border-top:1px solid rgba(255,255,255,.14);padding-top:clamp(16px,2.5vh,28px)} /* O número grande, no peso fino do título do hero. Algarismos de largura fixa para a contagem não tremer; o "+" um pouco mais pequeno e subido, para não pesar tanto como um algarismo. */ .metrica-valor{margin:0;font-weight:200;font-size:clamp(48px,6vw,88px);line-height:1; letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap} .prefixo{font-size:.72em;vertical-align:.14em;margin-right:.02em;opacity:.85} .metrica-rotulo{margin:14px 0 0;max-width:26ch;font-size:clamp(14px,1.2vw,16px); font-weight:300;line-height:1.5;opacity:.72} .metrica-rotulo strong{font-weight:500} .metrica-rotulo sub{font-size:.7em;line-height:0} /* Entrada: cada métrica sobe e revela-se ao começar a contar. Só quando o JS marca a secção como preparada — sem ele, isto escondia tudo para sempre. A transição está só no estado visível: assim o esconder inicial é imediato e não se vê um fade-out. */ .numeros.preparada .metrica{opacity:0;transform:translateY(14px)} .numeros.preparada .metrica.visivel{opacity:1;transform:none; transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)} /* ---------- Serviços: grelha de cartões ---------- */ /* Volta ao branco depois dos números, com o título centrado por cima da grelha. */ /* Secção de ecrã inteiro, como o hero, o palco do puzzle e os números: cabe toda em `100svh - navbar`, com a navbar já descontada. Doze cartões em 6 colunas x 2 filas, que é o arranjo pedido. O que distingue esta versão da primeira (que também era 6x2) é o TETO DA LARGURA: antes a grelha usava a janela toda e esticava-se até 1723px numa janela de 1900 — 91% dela, uma faixa. Agora pára nos 76% (1444px na mesma janela), deixando 228px de margem de cada lado do ecrã, e o quadrado fica em 229px. A consequência a conhecer: com duas filas, quem manda é SEMPRE a largura, nunca a altura. "Caber num ecrã" deixa de ser uma restrição que aperte — vem de graça — mas em troca sobra altura, e sobra muita: 362px numa janela de 1900x950. Não é afinação a menos, é geometria — para não sobrar nada, cada quadrado teria de ter 327px de lado, o que dá um bloco de 2093px, mais largo do que a própria janela. Só se escolhe QUANTO sobra, mexendo em `--banda`: subi-la dá quadrados maiores e menos vazio, baixá-la dá mais margem lateral e mais vazio. Esse vazio é repartido em TRÊS partes iguais pelo `justify-content:space-evenly` — por cima do título, entre o título e a grelha, e por baixo da grelha (121px cada numa janela de 1900x950). Foi pedido assim: a distância do título aos cartões igual à distância do título ao topo do ecrã. Dois números comandam tudo o que vem a seguir — a banda e o número de colunas (com as filas a acompanhá-lo, porque colunas × filas = 12). Estão isolados aqui em cima para se afinarem sem mexer nas contas, como o ATRASO e a JANELA do `puzzle.js`. */ .servicos{position:relative;z-index:2;background:#fff;color:var(--fundo); /* As duas cores da rede que corre por trás desta secção — as mesmas do convite; o `js/rede.js` lê-as daqui. Ver o porquê de serem componentes RGB na regra `.convite`. */ --rede-tinta:2,36,37; --rede-pulso:15,143,122; /* Teto da largura do bloco. É uma percentagem da janela com um limite absoluto, e não uma medida fixa como os 1280px do resto do site: uma medida fixa que não estica em 1900 (79%) fica esticada em 1600 (94%), porque o que faz a grelha parecer uma faixa é a fração da janela que ocupa, não o número de pixéis. */ --banda:min(1600px,84vw); /* 4x3 desde 2026-09-22. Com 6x2 quem mandava era sempre a LARGURA e sobravam 267px de branco no fim da secção — geometria, não afinação: um quadrado que enchesse a altura precisaria de 344px de lado, o que dá um bloco mais largo do que a janela. Com três filas passa a mandar a ALTURA, e a altura é exatamente o que sobrava: a grelha enche o ecrã sem sobra nenhuma e o quadrado até cresce (225px contra 212). O preço é o bloco ficar mais estreito — 942px de 1600, contra 1344 —, que é o caminho contrário ao de setembro, quando o cliente achou o 6x2 "muito estendido para o lado". Doze cartões dividem certo por 6, 4, 3, 2 e 1: nunca há filas incompletas. */ --colunas:4; --filas:3; /* anda sempre a par de --colunas: colunas × filas = 12 */ /* Margem lateral igual à do hero e à dos números (era clamp(16px,5vw,80px)): a grelha já não vai de bordo a bordo, por isso deixou de precisar da guarda extra contra a janela. Com a mesma margem e a mesma banda de `.numeros .interior`, a grelha alinha com as métricas da secção imediatamente acima — que é a comparação que o olho faz ao passar de uma para a outra. */ --margem-lado:clamp(16px,4vw,40px); /* Entre cartões. Apertada a pedido do cliente: chegou a estar em 26px (para gastar altura vazia) e os cartões liam-se como doze caixas soltas em vez de uma grelha. A 14px voltam a ler-se como um bloco só. A folga apertada também devolve largura aos quadrados — são cinco folgas por fila, por isso cada 2px que se lhe tira são ~1,7px de lado a mais em cada cartão. */ --folga:clamp(8px,.9vw,14px); /* NOTA (2026-09-22): esta secção repartia o vazio do ecrã em três partes iguais — por cima do título, entre o título e a grelha, e por baixo dela. Dava os dois espaços do título iguais ENTRE SI (119px numa janela de 1600), mas muito maiores do que os das outras secções, que usam o `--respiro` da raiz (45px). O cliente marcou a diferença numa captura e pediu tudo igual, "nem que tenhas de aumentar ou preencher mais a secção dos serviços". Agora o respiro é o mesmo de todas e o que sobra vai para o FIM, como manda a regra de 2026-09-21. Saiu daqui o `--ar`, que era o mínimo dessas três partes. (Experimentou-se também esticar os cartões em altura para encher esse fim, e o cliente recusou — ver o comentário do `--lado`.) */ /* O corpo do título já não é desta secção: vive em `:root` (base.css) e é o mesmo dos títulos das outras — pedido do cliente. Continua a entrar DUAS vezes aqui, na regra do

e na conta da altura (`--titulo`), e é por isso que tem de ser uma variável: um valor copiado à mão de um sítio para o outro punha a conta a mentir e a última fila saía do ecrã sem aviso. Quem lhe mexer na raiz mexe no tamanho dos quadrados desta secção — chegou a estar em 76px e ficou pesado por cima da grelha. */ /* Só a caixa de texto do título: a sua distância à grelha já não é uma margem própria, vem do `space-evenly`. */ --titulo:calc(1.06 * var(--tipo-titulo)); /* Largura de trabalho: a banda, ou a janela quando ela é mais estreita do que a banda. Os 17px são a barra de scroll, que o `100vw` conta e o layout não tem. */ --util:min(var(--banda),calc(100vw - 2 * var(--margem-lado) - 17px)); /* O vão que fica para a grelha: o ecrã menos a navbar, o título e TRÊS respiros — o de cima do título, o do título à grelha e o do FIM da secção. O terceiro entrou a 2026-09-22, depois de a grelha passar a encher o ecrã: sem ele a última fila encostava à fronteira com a secção seguinte, sem folga nenhuma. Enquanto sobrava branco no fim ninguém dava por isso; a partir do momento em que a conta fecha, cada respiro tem de estar lá dentro. É a mesma conta das outras secções, só que aqui é preciso sabê-la em CSS porque é dela que sai o tamanho dos cartões. */ --vao:calc(100svh - var(--altura-nav) - var(--titulo) - 3 * var(--respiro)); /* E o que isso dá a cada fila. */ --cabe:calc((var(--vao) - (var(--filas) - 1) * var(--folga)) / var(--filas)); /* O cartão é quadrado: o lado é ao mesmo tempo largura e altura e tem de obedecer aos DOIS limites ao mesmo tempo — as colunas todas cabem na largura de trabalho e as filas todas cabem no ecrã. `--lado` é o menor dos dois e é dele que sai a largura do bloco e o tamanho de tudo o que vai dentro do cartão. O `max(130px,...)` é o chão: abaixo disso o rótulo mais comprido ("Contratos de Desempenho Energético", três linhas) já não cabe dentro do quadrado. Numa janela tão baixa que nem 130px cabem (ex. 900x500), é a secção que passa do ecrã — mais vale ter de dar scroll do que ver o texto a sair do cartão. */ /* O `--teto` trava o quadrado nos ecrãs grandes: com três filas manda a altura, e num ecrã de 2560x1290 o lado ia aos 322px (372 em 1440) contra os 211 de uma janela de 1600x900 — o cliente achou que "podiam não aumentar tanto" (2026-09-22). Aos 280px só morde a partir de ~1130px de altura de janela: numa de 1080 o lado dá 262 e não muda. O que sobra vai para o FIM da secção (`justify-content:flex-start`), como nas outras secções de ecrã inteiro. */ --teto:280px; --lado:max(130px, min(var(--teto),var(--cabe), calc((var(--util) - (var(--colunas) - 1) * var(--folga)) / var(--colunas)))); /* REVERTIDO no mesmo dia: o cartão volta a ser QUADRADO. Chegou a esticar em altura para encher o vão (`--alto`, com teto de 1,45 vezes a largura) e o cliente recusou — "deixaram de ser quadrados e ficaram retângulos", e numa janela mais baixa do que as que medi a segunda fila encostava ao fim da secção. Fica assim a consequência, que é conhecida desde setembro e agora é escolha dele: com 6 colunas e 2 filas SOBRA sempre ecrã por baixo da grelha, porque um quadrado que enchesse a altura precisaria de 344px de lado — um bloco de 2134px, mais largo do que a própria janela. O que sobra fica no FIM da secção, como manda a regra dos respiros. */ /* A largura do bloco montado sai do LADO e não da banda: quando é a altura a mandar (janelas baixas), os quadrados ficam mais pequenos do que a largura permitia e o bloco tem de encolher com eles — senão o título ficava mais largo do que a grelha que encima. */ --bloco:calc(var(--colunas) * var(--lado) + (var(--colunas) - 1) * var(--folga)); /* A mesma medida do hero, do palco do puzzle e dos números: um ecrã menos a navbar. Com um ecrã inteiro sobrariam no fim exatamente os pixels da barra, que ela tapa. `min-height` e não `height` porque o quadrado tem chão (ver `--lado`): numa janela baixíssima o conteúdo cresce para fora em vez de se cortar. */ min-height:calc(100svh - var(--altura-nav)); scroll-margin-top:var(--altura-nav); /* se um dia o menu apontar para #servicos */ /* O respiro em cima do título é o mesmo de todas as outras secções (`--respiro`, na raiz); o de baixo dele é a margem de cima da `.grelha`. O que sobrar do ecrã fica no FIM, por baixo da grelha — nunca por cima de um título. */ display:flex;flex-direction:column;justify-content:flex-start; padding:var(--respiro) var(--margem-lado)} /* A rede e o véu ocupam a secção toda, por trás de tudo. O `z-index:0` é preciso: sem ele o canvas, que é um elemento POSICIONADO, pintava por cima dos cartões, que não o são — e a grelha desaparecia debaixo dele. */ .servicos-rede,.servicos-veu{position:absolute;inset:0;z-index:0;pointer-events:none} .servicos-rede{width:100%;height:100%} /* O clarão que limpa o que está por TRÁS do conteúdo, e só isso: uma elipse alta o bastante para envolver o título e as três filas de cartões, deixando a rede nas margens laterais e nos cantos — inclusive por cima do título e por baixo da grelha, que é onde o cliente a quer. Duas voltas até aqui: a primeira elipse era baixa (60% da altura) e a rede passava POR CIMA do título, que fica fora dela; a seguir tentou-se um gradiente horizontal, que limpava a faixa central de alto a baixo — e aí a rede desaparecia justamente das zonas que ele tinha marcado a vermelho. A elipse grande é o meio-termo: cobre o conteúdo e larga tudo o resto. */ /* O raio HORIZONTAL (o primeiro número) é o que manda a rede aproximar-se ou afastar-se dos cartões: 44% deixa-a chegar quase à borda da grelha, 52% empurrava-a para longe. O vertical fica alto, que é o que impede o véu de cortar por cima do título. */ .servicos-veu{background:radial-gradient(ellipse 44% 88% at 50% 50%, #fff 0%,#fff 46%,rgba(255,255,255,.9) 70%,rgba(255,255,255,0) 92%)} /* O conteúdo sobe acima da rede. */ .servicos-titulo,.grelha{position:relative;z-index:1} /* O título tem a largura exata da grelha: passam a ser a mesma coluna e não duas medidas parecidas que quase batem certo. Sem margem em baixo: quem o afasta da grelha é o `space-evenly` da secção, e uma margem aqui somava-se a esse espaço e desigualava os três. */ .servicos-titulo{max-width:var(--bloco);margin:0 auto;text-align:center; font-weight:200;font-size:var(--tipo-titulo);line-height:1.06;letter-spacing:-.01em} /* Doze cartões dividem certo por 4, 3, 2 e 1: nunca há filas incompletas em nenhum dos arranjos — e por isso a grelha pode ser `grid` (em flex, o cartão quadrado era mais estreito do que a coluna e cabiam mais por fila do que as colunas pedidas). */ /* `margin:auto` nos quatro lados, e cada par faz uma coisa diferente: os lados centram a grelha na horizontal (como antes), e o topo e a base absorvem, em partes iguais, todo o espaço que sobrar na vertical depois do `padding-top` da secção. São estas duas margens automáticas que dão o espaço título->cartões e o espaço cartões->fim, e é por serem ambas `auto` que esses dois ficam sempre iguais entre si. */ .grelha{width:min(100%,var(--bloco));margin:var(--respiro) auto auto;flex:0 0 auto; display:grid;grid-template-columns:repeat(var(--colunas),minmax(0,1fr));gap:var(--folga)} /* Ícone em cima, nome por baixo, tudo centrado. O contorno é fino de propósito — são doze caixas lado a lado e um traço mais forte transformava a grelha numa rede. `min-width:0` porque um item da grelha não encolhe abaixo do seu conteúdo sem isso, e uma palavra comprida de um rótulo chegava para alargar a coluna. `aspect-ratio` dá o quadrado; se um rótulo comprido precisar de mais altura, a fila cresce e todos os cartões dela crescem juntos — nunca ficam desalinhados. O que está lá dentro mede-se em `--lado` (o lado do quadrado) e não em `vw`: num ecrã largo e baixo os cartões são pequenos mas a janela é larga, e com `vw` o ícone e o texto cresciam até rebentar o quadrado por baixo. Só os TETOS destes clamps subiram (ícone 46->58, texto 17->19): as PROPORÇÕES são as mesmas, por isso nos ecrãs pequenos — onde manda o valor calculado e não o teto — fica tudo como estava; num quadrado de 306px é que o conteúdo antigo ficava perdido no meio do branco. */ .cartao{aspect-ratio:1;min-width:0; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:clamp(8px,calc(var(--lado) * .07),24px); padding:clamp(10px,calc(var(--lado) * .10),28px) clamp(8px,calc(var(--lado) * .08),22px); text-align:center; /* Os doze são links desde 2026-09-25 — onze para o seu serviço na página de Serviços e o último para o topo dela —, por isso a cor e o sublinhado do link são anulados AQUI e não só no `--mais`: o que se lê continua a ser um cartão. */ color:inherit;text-decoration:none; border:1px solid rgba(var(--fundo-rgb),.14); /* O canto acompanha o quadrado: 14px num cartão de 160px e 14px num de 306px não são o mesmo canto — no segundo já se lia como reto. Era a única medida do cartão que tinha ficado em pixéis fixos. */ border-radius:clamp(14px,calc(var(--lado) * .06),20px);background:#fff; transition:border-color .25s,box-shadow .25s,transform .25s} .cartao h3{margin:0;font-size:clamp(12px,calc(var(--lado) * .082),19px);font-weight:500; line-height:1.35;letter-spacing:.01em;text-wrap:balance} /* Mesmo desenho dos ícones da esfera (vêm do mesmo sprite), mas o traço tem de ser outro número: a espessura está em unidades da grelha de 24 do desenho, por isso engorda com o ícone. A 58px, o `1.7` da esfera dava um traço desenhado de 4,1px — o dobro do que se vê na esfera; com `1.5` ficam 3,6px, perto dos 3,3px que o cartão de hoje já tem aos 46px. Nos ecrãs pequenos, onde o ícone volta a ter medida fixa, volta também o 1.7. */ /* A largura e a altura TÊM de ser o mesmo clamp: o ícone é quadrado, e dois valores diferentes deformam-no. */ .cartao-icone{width:clamp(28px,calc(var(--lado) * .25),58px); height:clamp(28px,calc(var(--lado) * .25),58px);display:block; color:var(--fundo);fill:none;stroke:currentColor;stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;transition:transform .25s} /* O último cartão leva ao TOPO da página de Serviços, onde os treze estão um a um com o seu texto; os outros onze levam cada um AO SEU. Mantém a forma dos outros para a grelha não partir; o que o distingue é o sublinhado do "aqui" e o ícone de seta para fora. A 4x3 calha-lhe o canto inferior direito — o fim natural da leitura e o fim da secção. */ .cartao--mais h3 span{text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:3px} /* O foco de teclado é dos DOZE e não só do último: agora são todos links. */ .cartao:focus-visible{outline:2px solid var(--fundo);outline-offset:3px} @media (hover:hover){ .cartao:hover{border-color:rgba(var(--fundo-rgb),.5);transform:translateY(-3px); box-shadow:0 12px 30px rgba(var(--fundo-rgb),.10)} .cartao:hover .cartao-icone{transform:scale(1.08)} .cartao--mais:hover h3 span{text-decoration-thickness:2px} } /* ---------- Fita horizontal (parceiros) ---------- */ /* Hoje só há uma faixa a passar em ciclo (os projetos também foram fita, até passarem a carrossel de páginas em 2026-09-17), mas a mecânica fica agarrada aos atributos `data-fita` (a janela) e `data-fita-tira` (a tira que anda) — os mesmos por onde o `fitas.js` as encontra — e não à classe da secção: qualquer outra que venha entra sem código novo. Cada secção traz depois a sua pele e os seus três números: `--ritmo`, `--copias` e `--sentido`. A tira leva a lista repetida `--copias` vezes e a volta desloca exatamente UMA cópia, por isso a seguinte entra onde a anterior saiu e o ciclo não tem salto. O que fica a cobrir a janela são as cópias restantes: (copias - 1) x uma cópia tem de dar mais do que a janela mais larga. Sem `gap` de propósito: com margem à direita em cada item (a última incluída), uma cópia mede exatamente 1/`--copias` da tira e a conta da volta fecha certa. */ [data-fita]{overflow:hidden; /* `touch-action:pan-y` é o que divide os gestos num telemóvel: o horizontal é nosso (arrastar a fita), o vertical continua a ser do browser (rolar a página). Sem isto o browser ficava com os dois e o arrasto nunca chegava a acontecer. A seleção é desligada porque arrastar por cima de imagens selecionava tudo à volta. */ touch-action:pan-y;-webkit-user-select:none;user-select:none} [data-fita-tira]{display:flex;align-items:center;width:max-content; will-change:transform;animation:fita-passar var(--ritmo) linear infinite} @keyframes fita-passar{from{transform:translateX(0)} to{transform:translateX(calc(-100% / var(--copias)))}} /* Nada de `animation-play-state:paused` no hover: a fita não pára por o rato lhe passar por cima, nem com JavaScript nem sem ele. Só o arrasto a detém — e sem JavaScript não há arrasto, por isso aqui ela nunca pára. */ /* Com o `fitas.js` a correr, a animação CSS sai de cena: as duas escreviam o mesmo `transform` e a animação apagava a cada frame o que o dedo tinha acabado de fazer. A partir daqui é o JS que move a tira — e é ele que lhe dá o arrasto. */ [data-fita].fita-viva [data-fita-tira]{animation:none} [data-fita].fita-viva{cursor:grab} [data-fita].a-arrastar{cursor:grabbing} /* ---------- Parceiros de referência ---------- */ /* Última faixa da página: os logótipos passam em ciclo, da esquerda para a direita. (Esteve, entre outras, numa versão de ecrã inteiro com os logótipos parados e espalhados, a crescerem com o rato — o cliente preferiu a fita.) */ .parceiros{position:relative;z-index:2;background:#fff;color:var(--fundo); /* Todos os PNG são exportados na mesma caixa (520x240, logótipo centrado e com o tamanho já normalizado pelo peso de tinta — ver o script que os preparou). Por isso basta fixar a altura: a largura sai igual para todos e a fita fica com um ritmo certo, sem um logótipo largo a empurrar os vizinhos. */ /* Subiram com o fecho: os prémios encolheram um pouco e o que eles deixaram foi para aqui, a pedido do cliente. */ --altura-logo:clamp(58px,7.5vw,118px); --folga-logo:clamp(24px,3.5vw,64px); /* O que tem de ser igual entre fitas não é o tempo da volta, é a VELOCIDADE: ~40px/s. Cada vez que os logótipos mudam de tamanho OU de número, uma cópia da lista muda de largura e este número tem de ser refeito — é a quinta vez que esta conta aparece. Agora são duas fitas com nove logótipos cada: uma cópia mede ~2800px, e 2800/40 dá os 70s. (Eram 140s com os dezoito numa fita só, onde a cópia media 5610px; mantê-los punha estas fitas a 20px/s, metade do que devem andar.) */ --ritmo:70s; --sentido:-1; /* da esquerda para a direita */ /* Uma cópia de nove logótipos mede ~2800px e ainda cobre sozinha a janela mais larga que se testa (2560), por isso duas continuam a chegar. Tem de bater certo com `COPIAS_PARCEIROS` em `core/views.py` — e o `testar_fitas.py` mede a cobertura, por isso um engano aqui não passa despercebido. */ --copias:2; /* O mesmo respiro dos dois lados: em cima é a distância do título ao topo do fundo, em baixo é a do selo ao fim do fecho. */ padding:var(--respiro) 0; /* A secção ocupa o fecho todo (é a única lá dentro), em coluna: título, fita e selo. É o que permite ao selo assentar no MEIO do que sobra do ecrã — ver a regra dele. */ flex:1;display:flex;flex-direction:column} /* Mesmo corpo dos outros títulos de secção (`--tipo-titulo`, em base.css). A margem lateral existe só para o título — a fita passa de bordo a bordo. */ .parceiros-titulo{margin:0 auto var(--respiro);text-align:center; padding-inline:clamp(16px,4vw,40px); font-weight:200;font-size:var(--tipo-titulo);line-height:1.06;letter-spacing:-.01em} /* EXPERIÊNCIA de 2026-09-21: os selos de louro vivem agora AQUI, no MEIO da secção, em LINHA e entre as duas fitas de logótipos (saíram o título "Distinções" e os quatro selos institucionais que rodeavam o "#1 ESE"). O "#1 ESE" fica ao meio e um pouco maior. Estiveram numa linha por baixo da fita única e em pirâmide, nesse mesmo dia. Três números afinam a fila, e estão os três aqui em cima: `--banda`, que é a fração da janela que ela ocupa, o `1.25` do selo do meio e o `--lateral`, que encolhe só os dois de fora. Da banda sai a UNIDADE de medida: três selos e duas folgas enchem-na, e como o do meio vale 1,25 unidades é `(banda - 2 folgas) / 3,25`. A caixa ESTICA pelo espaço que sobra do ecrã (`flex:1 0 auto`) e os selos centram-se dentro dela, o que os deixa a meio caminho entre as duas fitas. */ .selos{--banda:min(1520px,94vw); --folga:clamp(16px,2.5vw,48px); /* A altura que sobra para os selos, depois de descontar tudo o que a secção tem por cima e por baixo deles: a navbar, os CINCO respiros (topo, título, fita de cima, selos, fim), o título e as DUAS fitas. Todas as parcelas são nossas, por isso a conta fecha — é a mesma ideia do `--livre` da grelha dos serviços. A segunda fita e o quinto respiro são o preço desta experiência: numa janela de 1600x900 a altura livre desceu de 498 para 335px. */ --livre:calc(100svh - var(--altura-nav) - 5*var(--respiro) - 1.06*var(--tipo-titulo) - 2*var(--altura-logo)); /* Teto de altura da UNIDADE: em linha só o do meio usa a altura toda, e ele vale 1,25 unidades. */ --alt:calc(var(--livre)/1.25); /* Teto de largura da UNIDADE: três lado a lado mais as duas folgas enchem a banda. */ --lado:calc((var(--banda) - 2*var(--folga))/3.25); /* Quanto vale um selo LATERAL, em unidades. O do meio vale sempre 1,25 unidades, por isso este número encolhe só os dois de fora e não lhe toca — que é precisamente o que o cliente pediu. Era 1 (os laterais a cheio) até 2026-09-22. Mexer aqui não muda o tamanho do "#1 ESE"; o que muda é o vão entre os três, porque a fila é centrada e o que os selos deixam de ocupar fica repartido pelos lados. */ --lateral:.8; /* A fila ocupa a LARGURA TODA da janela e reparte o vazio por `space-evenly`: os quatro espaços — da borda ao selo da esquerda, dele ao do meio, do meio ao da direita e deste à borda — ficam iguais POR CONSTRUÇÃO, sem número nenhum a afinar. Foi o que o cliente pediu, com quatro setas marcadas numa captura. (Antes a fila era `fit-content` centrada por margens automáticas, com o `--folga` entre os selos: os vãos internos valiam a folga e as margens valiam tudo o que sobrava, que é precisamente a desigualdade que ele apanhou.) Sem `gap`: com `space-evenly` ele SOMA-SE ao espaço repartido, e os dois vãos de dentro ficariam maiores do que os de fora — a desigualdade de volta, ao contrário. O `--folga` continua a valer na conta do `--lado`, onde reserva a largura que garante que a sobra existe. */ margin-block:var(--respiro);width:100%; flex:1 0 auto; display:flex;align-items:center;justify-content:space-evenly} /* `max-width` e `max-height`, e não medidas fixas: o selo encolhe pelo limite que morder primeiro e nunca deforma. Em janelas largas manda a largura (a banda repartida por três); nas baixas manda a altura, e é isso que impede a fila de empurrar a fita de baixo para fora do ecrã. As três imagens têm proporções parecidas mas não iguais (entre 2,25 e 2,50), por isso ficam com alturas ligeiramente diferentes e o `align-items:center` alinha-as pelo meio. Os dois de fora são EXATAMENTE do mesmo tamanho porque saem do script na mesma caixa (ver o `PAR` em `ferramentas/preparar_premios.py`): os louros do cliente têm medidas diferentes e, à mesma altura, davam larguras diferentes — 431 contra 421px, que ele apanhou numa captura. Quem fica de que lado vem da ordem da lista `SELOS` na view. */ .selo{display:block;max-width:calc(var(--lado)*var(--lateral)); max-height:calc(var(--alt)*var(--lateral));width:auto;height:auto} .selo--principal{max-width:calc(var(--lado)*1.25);max-height:calc(var(--alt)*1.25)} /* Em ecrãs estreitos três numa fila ficariam ilegíveis (114px de largura cada num telemóvel de 430): passam a uma coluna, com a mesma relação de tamanhos entre eles (o do meio a 1,25 unidades, os de fora a `--lateral`). A altura livre é então repartida pelos TRÊS (3,25 alturas, com o do meio a valer 1,25) e a folga entra duas vezes — com os laterais mais pequenos sobra altura, que é folga a mais e não a menos. */ @media (max-width:900px){ /* Em coluna o `space-evenly` passaria a repartir a ALTURA (é o eixo principal) e os selos descolavam-se uns dos outros pelo palco todo: aqui o vão volta a ser o `--folga` e a fila volta a ser centrada. */ .selos{flex-direction:column;justify-content:center;gap:var(--folga); --lado:min(330px,70vw); --folga:clamp(10px,2.4vh,26px); /* O chão de 96px: num telemóvel DEITADO (844x390) a altura livre é negativa — a navbar, os cinco respiros, o título e as duas fitas somam mais do que o ecrã — e os três selos saíam com 9px de altura. Aqui é a secção que passa do ecrã, que é o que tem de acontecer; em pé (390x844) a conta dá 148px e o chão não morde. */ --alt:max(96px,calc((var(--livre) - 2*var(--folga))/3.25))} } /* A fita ocupa a largura toda da janela: cortá-la na banda de 1280px punha os logótipos a aparecer e a desaparecer no meio do branco, como se entrassem por uma porta. O véu nas pontas (`mask`) desvanece-os contra o fundo em vez de os cortar a direito. */ .parceiros-fita{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .parceiros-tira img{display:block;flex:none;height:var(--altura-logo);width:auto; margin-right:var(--folga-logo)} /* Sem JavaScript a volta é a animação CSS, e é aqui que ela troca de sentido (da esquerda para a direita). Com o `fitas.js` esta linha deixa de contar: quem inverte passa a ser o `--sentido`. */ .parceiros-tira{animation-direction:reverse} /* ---------- Projetos de sucesso ---------- */ /* Carrossel de páginas, logo a seguir aos serviços: três cartões de cada vez, a volta fecha (da última página passa-se à primeira) e as páginas passam sozinhas de dez em dez segundos, parando mal o rato lhes toque. Passa-se também à mão, com as setas dos lados, com os pontos, com o teclado ou com o dedo. (Foi fita em ciclo, como a dos parceiros, até 2026-09-17; o cliente preferiu mandar ele na passagem.) O verde do hero separa-o da grelha branca que vem antes e da faixa branca dos parceiros que vem a seguir. */ .projetos{position:relative;z-index:2;background:var(--fundo);color:#fff; /* Cartões por página. Uma página é sempre a largura da janela do carrossel: o cartão sai daí (largura menos as folgas, a dividir por este número), não de uma medida própria. Abaixo de 900px passa a um. ATENÇÃO: o total de cartões (nove, na lista `PROJETOS` da view) tem de ser múltiplo deste número, senão a última página encosta ao fim da lista e o passo até lá fica mais curto do que os outros — o que, numa volta que nunca acaba, se nota. Nove divide certo por 3 e por 1; é por isso que não há um valor 2 pelo caminho. */ --por-pagina:3; --folga-projeto:clamp(14px,1.6vw,28px); /* As setas têm coluna própria de cada lado da janela — nunca ficam por cima das fotografias. Em janelas largas cabem na margem que sobra ao lado da banda de 1280px (ver o `max-width` do `.carrossel`); nas estreitas é a janela do carrossel que cede. */ --seta:clamp(38px,3vw,48px); --folga-seta:clamp(10px,1.4vw,22px); /* A passagem de página: quanto tempo leva e com que curva. É aqui que se afina o "smooth". A curva arranca depressa e assenta devagar, como a esfera a parar. */ --passagem:.7s; --curva:cubic-bezier(.22,.61,.36,1); /* Quanto tempo uma página fica à vista antes de a seguinte entrar sozinha. O `carrossel.js` lê isto a cada agendamento (e não uma vez no arranque), por isso afinar é mesmo aqui. A contagem pára com o rato em cima, com o dedo em baixo, com o foco de teclado lá dentro, fora do ecrã e com o separador escondido — e recomeça do princípio a cada passagem, venha ela do relógio ou do utilizador. */ --intervalo:5s; /* Respiro igual em cima e em baixo, o mesmo que separa o título do carrossel. */ padding:var(--respiro) 0} /* Nota: esta secção já foi de ECRÃ INTEIRO duas vezes — em 2026-09-16 com duas filas de fotografias, e em 2026-09-17 para o selo "#1 ESE" branco assentar no verde por baixo do carrossel. As duas foram revertidas pelo cliente; o que fica é a faixa. */ /* A margem em baixo é que separa o título do carrossel: a faixa não tem `gap`. É o mesmo respiro do padding de cima da secção. */ .projetos-titulo{margin:0 auto var(--respiro);text-align:center; padding-inline:clamp(16px,4vw,40px); font-weight:200;font-size:var(--tipo-titulo);line-height:1.06;letter-spacing:-.01em} /* Seta | janela | seta, com os pontos por baixo da janela. A banda é a dos 1280px do resto do site MAIS as duas colunas das setas: assim, em janelas largas, é a janela do carrossel que fica alinhada com as métricas e com a grelha dos serviços, e as setas ficam de fora, na margem. `minmax(0,1fr)` porque uma coluna `1fr` não encolhe abaixo do conteúdo e a tira é mais larga do que a janela. */ .carrossel{display:grid;grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"antes janela depois" ". pontos ."; align-items:center;column-gap:var(--folga-seta); max-width:calc(1280px + 2 * (var(--seta) + var(--folga-seta))); margin:0 auto;padding-inline:clamp(16px,4vw,40px)} /* Sem JavaScript a janela é um contentor de scroll horizontal com paragens cartão a cartão, e as setas ficam escondidas (não há quem lhes responda) — mas guardam o lugar, para o layout não saltar quando o JS chega e as mostra. Com o `carrossel.js` a correr (`.vivo`), a janela fecha-se e é o `transform` da tira que mostra cada página. */ .carrossel-janela{grid-area:janela;min-width:0;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;scrollbar-width:none; /* Como na fita: o gesto horizontal é nosso (puxar a página), o vertical continua a ser do browser (rolar a página). A seleção é desligada porque arrastar por cima de imagens selecionava tudo à volta. */ touch-action:pan-y;-webkit-user-select:none;user-select:none} .carrossel-janela::-webkit-scrollbar{display:none} .carrossel.vivo .carrossel-janela{overflow:hidden;scroll-snap-type:none;cursor:grab} .carrossel.a-arrastar .carrossel-janela{cursor:grabbing} /* A tira leva os cartões numa linha. O `carrossel.js` clona a lista para cada lado, por isso em uso são três cópias seguidas e a de repouso é a do meio — é o que dá folga para a passagem atravessar a fronteira e a volta fechar sem recuar. */ .carrossel-tira{display:flex;gap:var(--folga-projeto); will-change:transform;transition:transform var(--passagem) var(--curva)} /* Com o dedo em baixo a tira segue-o sem atraso; ao redimensionar a janela, a página reposiciona-se sem deslizar. */ .carrossel.a-arrastar .carrossel-tira, .carrossel.sem-passagem .carrossel-tira{transition:none} .carrossel-seta{display:grid;place-items:center;width:var(--seta);height:var(--seta); padding:0;border:1px solid rgba(255,255,255,.4);border-radius:50%; background:transparent;color:#fff;cursor:pointer;visibility:hidden; -webkit-tap-highlight-color:transparent; transition:background .25s,color .25s,border-color .25s,opacity .25s} .carrossel.vivo .carrossel-seta{visibility:visible} [data-carrossel-antes]{grid-area:antes} [data-carrossel-depois]{grid-area:depois} .carrossel-seta svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} /* Nenhuma das setas chega a apagar-se: com a volta fechada há sempre para onde ir dos dois lados. */ @media (hover:hover){ .carrossel-seta:hover{background:#fff;color:var(--fundo);border-color:#fff} } .carrossel-seta:focus-visible{outline:2px solid #fff;outline-offset:3px} /* Um ponto por página. O da página à vista estica-se num TRAÇO que se vai preenchendo, e quando enche a página passa: é o tempo que falta, à vista. Os outros ficam círculos. Sem JS não há pontos nenhuns e a fila fecha-se. O preenchimento é um gradiente cortado pelo `background-size`, com a fração a vir do `--progresso` que o `carrossel.js` escreve a cada frame. Essa é a única coisa que o JS faz aqui — a forma, a cor e o tempo da transição são todos desta regra. */ .carrossel-pontos{grid-area:pontos;display:flex;justify-content:center; align-items:center;gap:10px; margin-top:clamp(18px,2.6vh,30px)} .carrossel-pontos:empty{display:none} /* `color:inherit` é obrigatório: um `