/* Âmago — variáveis, reset e barra de navegação. Carregado em todas as páginas. */ :root{ --ink:#ffffff; --ink-2:#ffffffff; --ink-3:#ffffffff; --fundo:#022425; --fundo-rgb:2,36,37; --altura-nav:70px; /* valor de arranque; o JS mede a navbar e atualiza-o */ --fonte:"Jost","Century Gothic","URW Gothic","Segoe UI",system-ui,-apple-system,sans-serif; /* Corpo dos títulos de secção (

), igual na página toda por decisão do cliente: "Os nossos serviços.", "Parceiros de Referência" e "Projetos de Sucesso" partilham este valor e não podem divergir. Está aqui na raiz e não em cada secção porque três valores parecidos, escritos em três sítios, mudam sempre um de cada vez. Atenção: entra também na CONTA da altura da grelha dos serviços (`--titulo`), por isso mexer-lhe muda o tamanho dos quadrados dessa secção — ver o comentário lá. O

do hero não é um título de secção e não segue esta medida. */ /* Ficou o corpo MENOR das duas medidas que havia: era o das faixas dos parceiros e dos projetos, e o cliente achou o dos serviços (que ia a 44px) grande de mais. Como este valor entra na conta da altura da grelha dos serviços, encolhê-lo devolve altura a essa secção — e nas janelas onde é a altura a mandar (3 ou 4 filas, abaixo dos 1200px) os quadrados ficam um pouco maiores. */ --tipo-titulo:clamp(22px,2.4vw,32px); /* O respiro de um título de secção: a distância do início do fundo da secção ao título é a MESMA que vai do título ao conteúdo (pedido do cliente a 2026-09-21, com traços numa captura: "os títulos têm de ter a mesma distância da parte de cima do fundo e do conteúdo"). Uma só medida para a página toda, usada em cima e em baixo do título nos projetos, nas distinções, nos parceiros e nas notícias, e como padding dos números. O que sobra do ecrã numa secção de ecrã inteiro vai para o FIM dela, nunca para cima do título. O teto (5vh) é o que deixa o fecho — distinções + parceiros — caber num ecrã de 900px: são cinco respiros seguidos nessa altura. */ --respiro:clamp(28px,5vh,64px); /* O corpo do

de uma PÁGINA — a afirmação que a abre. Vive aqui e não em cada folha porque é o mesmo papel em páginas diferentes: o hero da inicial e a capa das interiores. Estiveram em 54px e 70px, cada um na sua folha, e ninguém tinha decidido que fossem diferentes — divergiram sozinhos, que é o que dois números parecidos escritos em dois sítios fazem sempre (a mesma razão do `--tipo-titulo`, de setembro). NÃO é o `--tipo-titulo`: esse é dos títulos de SECÇÃO (

), e um

de página tem outro peso e outra escala. */ --tipo-h1:clamp(26px,4.2vw,54px); } *{box-sizing:border-box} html{color-scheme:light} /* Sem overflow no body: qualquer valor diferente de visible aqui faz do body o contentor de scroll da navbar e o position:sticky deixa de prender. O corte horizontal e feito no .hero, que e quem tem conteudo a transbordar. */ body{margin:0;background:var(--fundo);color:var(--ink);font-family:var(--fonte);-webkit-font-smoothing:antialiased} /* Sprite dos ícones: fica no documento para o lhe chegar, mas sem ocupar espaço nem aparecer. `display:none` aqui parte o em alguns motores. */ .sprite{position:absolute;width:0;height:0;overflow:hidden} /* Botões. Vivem aqui e não no `home.css` desde 2026-09-22: começaram no hero, mas são hoje os mesmos do convite e das páginas interiores — e essas não carregam a folha da homepage, por isso apareciam como links sublinhados. As cores são as de fundo ESCURO (é o do site); sobre branco, quem os usa troca-as, como faz a regra `.convite .btn`. */ .btn{display:inline-block;text-decoration:none;border-radius:999px;padding:13px 28px;font-size:15px;font-weight:500;letter-spacing:.02em;transition:background .25s,color .25s,box-shadow .25s} .btn.primario{background:var(--ink);color:var(--fundo)} .btn.primario:hover{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .btn.secundario{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)} .btn.secundario:hover{box-shadow:inset 0 0 0 1px var(--ink)} /* Entrada em fade do que traz `data-revelar` (ver `js/revelar.js`). Só OPACIDADE, sem o deslocamento que as métricas dos Resultados levam: foi o que o cliente escolheu depois de ver e recusar outras entradas. Quem esconde é o script, que põe o `a-revelar` ao arrancar — sem JavaScript ou com movimento reduzido estas duas regras não chegam a apanhar nada e o conteúdo está à vista. 1,8s e não os 0,9s da primeira versão: o cliente disse que "às vezes nem se nota que tem". A DURAÇÃO era só metade do problema — a curva era a outra. Com `ease`, que arranca depressa, os primeiros 30% da opacidade passavam em três décimos e o resto era uma cauda longa já quase opaca, que não se vê. Esta curva segura o princípio e sobe a meio, que é onde a passagem se lê. O limiar do observador subiu com ela (ver o `revelar.js`): a começar cedo de mais, o fade acabava antes de a secção estar à vista. */ .a-revelar{opacity:0} .a-revelar.visivel{opacity:1;transition:opacity 1.8s cubic-bezier(.35,0,.35,1)} /* Texto só para leitores de ecrã: fica no fluxo de leitura, mas fora da vista. */ .so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ---------- Barra de navegação ---------- */ /* Mesma cor do fundo; ao dar scroll ganha borda e sombra subtis. */ .navbar{position:sticky;top:0;z-index:900;background:transparent; border-bottom:1px solid transparent;transition:box-shadow .3s,border-color .3s} .navbar.presa{background:var(--fundo);border-bottom-color:rgba(255,255,255,.12);box-shadow:0 6px 24px rgba(0,0,0,.35)} /* Páginas BRANCAS (``: Serviços e Notícias). O `body` do site é verde escuro com texto branco; estas trocam-no. E a BARRA não pode ser transparente nelas: no topo da página ficariam o logótipo e os links brancos sobre branco — invisíveis. Fica com o aspeto que tem quando se prende, e assim também não salta ao dar o primeiro scroll. Nasceu no `servicos.css` (2026-09-24) com a nota de que qualquer página clara ia precisar do mesmo; passou para aqui quando a segunda chegou. */ .pagina-clara{background:#fff;color:var(--fundo)} .pagina-clara .navbar{background:var(--fundo);border-bottom-color:rgba(255,255,255,.12); box-shadow:0 6px 24px rgba(0,0,0,.35)} /* A altura da navbar tem de ser constante: o hero mede-se a partir dela, por isso qualquer mudanca de altura ao prender-se punha a pagina a oscilar. So muda a cor. */ .navbar .interior{position:relative;max-width:1280px;margin:0 auto;display:flex;align-items:center; justify-content:space-between;gap:24px;padding:14px clamp(16px,4vw,40px)} .logo{display:block;line-height:0} .logo img{width:clamp(104px,10vw,132px);height:auto;display:block} .menu{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);list-style:none;margin:0;padding:0} .menu a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:300;letter-spacing:.03em; padding:6px 2px;position:relative;white-space:nowrap} .menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink); transform:scaleX(0);transform-origin:left;transition:transform .25s} .menu a:hover::after,.menu a:focus-visible::after,.menu a[aria-current]::after{transform:scaleX(1)} .menu .cta a{border:1px solid var(--ink);border-radius:999px;padding:8px 18px;font-weight:400} .menu .cta a::after{display:none} .menu .cta a:hover{background:var(--ink);color:var(--fundo)} /* Dentro do Portal Cliente, a pastilha fica CHEIA — o traço por baixo, que marca a página atual nos outros links, está desligado nela. */ .menu .cta a[aria-current]{background:var(--ink);color:var(--fundo)} /* O botão da língua (2026-09-30): "EN" na página portuguesa, "PT" na inglesa. Vive dentro da `