/* ==========================================================================
Mondra, folha de estilos única
Sistema visual: "A BANCADA"
A identidade nasceu das próprias fotografias: o tapete de corte, as
ferramentas, os moldes de papel (ver foto-bancada.jpg). A paleta foi
atualizada de verde+latão para azul-noite+terracota (ver histórico
do repositório, branch "paleta-azul"), mas os quatro materiais e a
lógica entre eles mantêm-se:
o AZUL-NOITE #16304F superfícies de marca (hero, processo, rodapé)
o PAPEL #F4F6F9 fundos claros, como molde de papel
o TERRACOTA #DE7440 o ÚNICO acento: CTAs e o cursor do comparador
a TINTA #12294A texto principal sobre fundos claros
E três motivos gráficos, todos com uma ideia por trás:
o campo de píxeis do M do logo (superfícies azul-noite)
a linha de costura (separadores e ligações tracejadas)
as marcas de registo de molde (cantos das fotografias)
Organização do ficheiro:
1. Variáveis
2. Reset e base
3. Utilitários (container, costura, marcas, grid da bancada)
4. Botões e links
5. Logo
6. Navegação
7. Hero
8. Secções e títulos
9. Comparador antes/depois
10. Índice de serviços
11. Banda de vídeo
12. Para quem
13. Como funciona (passos)
14. Tabela comparativa
15. Contacto e formulário
16. Rodapé
17. Revelação ao scroll
18. Ecrãs pequenos
19. Movimento reduzido
Contrastes verificados por cálculo WCAG: todas as combinações usadas
passam AA para texto normal (a mais baixa é terracota/azul-noite a 4.56:1,
usada apenas em texto grande ou elementos não textuais).
========================================================================== */
/* ==========================================================================
1. VARIÁVEIS
========================================================================== */
:root {
/* Materiais — EXPERIÊNCIA "paleta-azul": azul-noite + laranja, no
lugar do verde-bancada + latão da paleta original. */
--noite: #16304F; /* cor de marca, fundos escuros (9.1:1 sobre papel) */
--noite-fundo: #0E2340; /* fundos mais profundos (herdado do antigo --verde-esc, também nunca usado) */
--papel: #F4F6F9; /* fundo claro principal */
--papel-alt: #EAEEF3; /* fundo claro alternado */
--tinta: #12294A; /* texto principal sobre fundos claros (13.1:1 sobre papel) */
--sec-claro: #5C6B80; /* texto secundário em fundo claro */
--sec-escuro: #A9BED6; /* texto secundário em fundo escuro (7.0:1 sobre noite) */
--sec-escuro-mais: #BDD2EA; /* o mesmo, um degrau mais claro, para corpo de texto longo em fundo escuro (8.6:1) */
--branco: #FFFFFF;
--laranja-esc: #DE7440; /* acento sobre fundos escuros, terracota (4.63:1 com tinta por cima) */
--laranja-cla: #CD5B1D; /* acento sobre fundos claros, terracota — só como preenchimento/borda, nunca com tinta por cima (3.54:1, falha AA) */
/* Linhas, sempre derivadas da tinta ou do papel: uma só temperatura */
--linha: rgba(18, 41, 74, 0.15);
--linha-forte: rgba(18, 41, 74, 0.32);
--linha-clara: rgba(244, 246, 249, 0.22);
--sombra: 0 2px 6px rgba(18, 41, 74, 0.10), 0 14px 40px rgba(18, 41, 74, 0.14);
/* Tipografia */
--f-titulo: "Young Serif", "Iowan Old Style", Georgia, serif;
--f-texto: "Hanken Grotesk", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Medidas */
--largura: 1180px;
--altura-nav: 65px; /* 46px de conteúdo + 9,5px em cima e em baixo */
/* Escala de espaçamento, base 8px.
TODO o espaço do site sai daqui: nada de valores soltos.
Para o site inteiro respirar mais ou menos, mexe-se aqui. */
--e0: 0.25rem; /* 4px detalhe ótico (selos, cápsulas) */
--e1: 0.5rem; /* 8px dentro de um componente */
--e2: 0.75rem; /* 12px */
--e3: 1rem; /* 16px entre irmãos próximos */
--e4: 1.5rem; /* 24px */
--e5: 2rem; /* 32px entre blocos */
--e6: 2.5rem; /* 40px */
--e7: 3rem; /* 48px cabeçalho de secção -> conteúdo */
--e8: 4rem; /* 64px respiro da secção */
--e9: 6.5rem; /* 104px reservado para composições largas */
/* Semânticas: os pares que se repetem em todas as secções.
A hierarquia tem de descer sempre: secção > cabeça > título > lombada */
--pad-seccao: var(--e8); /* 64, respiro vertical da secção */
--pad-lateral: var(--e5); /* 32, margem do container, igual em todas */
--gap-cabeca: var(--e7); /* 48, cabeça -> conteúdo */
--gap-lombada-titulo: var(--e3); /* 16 */
--seccao: var(--pad-seccao);
}
/* ==========================================================================
2. RESET E BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--altura-nav) + 12px);
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background-color: var(--papel);
color: var(--tinta);
font-family: var(--f-texto);
font-size: 1.02rem;
font-weight: 400;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-wrap: break-word;
}
body.menu-aberto { overflow: hidden; }
h1, h2, h3 {
font-family: var(--f-titulo);
font-weight: 400; /* a Young Serif só tem um peso, e chega */
color: var(--noite);
line-height: 1.12;
margin: 0 0 0.5em;
letter-spacing: 0.005em;
}
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
img, svg, video { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background-color: var(--laranja-esc); color: var(--tinta); }
/* Foco sempre visível: azul-noite em fundo claro, terracota em fundo escuro
(ambos acima de 3:1 contra o fundo respetivo) */
:focus-visible {
outline: 3px solid var(--noite);
outline-offset: 3px;
}
.hero :focus-visible,
.seccao--noite :focus-visible,
.site-footer :focus-visible,
.site-header:not(.is-scrolled) :focus-visible {
outline-color: var(--laranja-esc);
}
/* ==========================================================================
3. UTILITÁRIOS
========================================================================== */
.container {
width: 100%;
max-width: var(--largura);
margin-inline: auto;
padding-inline: var(--pad-lateral);
}
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.hidden-field { display: none; }
.skip-link {
position: absolute;
top: -100px;
left: 1rem;
z-index: 200;
background: var(--tinta);
color: var(--papel);
padding: 0.75rem 1.25rem;
text-decoration: none;
font-weight: 700;
transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }
/* --- As superfícies escuras ---
Azul-noite liso. O grão vem todo do campo de píxeis (a seguir), que
é construído em JS: houve aqui um grid de linhas, do tapete de corte,
mas com os píxeis por cima ficavam duas grelhas sobrepostas. */
.seccao--noite,
.site-footer {
background-color: var(--noite);
}
/* --- Campo de píxeis e rasto do cursor ---
Vivem em qualquer superfície marcada com data-pixeis no HTML (hoje:
hero, "Como funciona" e rodapé). Os elementos nascem todos em JS
(main.js, secção 5): são decoração, e assim não fica markup vazio
para quem tem o JavaScript desligado.
O campo é um por célula de uma grelha de 26px, com o tamanho
sorteado da lista real dos quadrados do M do logo — o grão do fundo
é sempre um bocado da própria marca, nunca um quadrado inventado.
Cada um cintila sozinho, devagar, e não há dois iguais.
O rasto é um por célula que o rato visita, com satélites
ocasionais à volta. Só liga com rato a sério (ver a condição
pointer:fine no main.js); em ecrã tátil o contentor fica vazio para
sempre, portanto não custa nada. */
[data-pixeis] { position: relative; overflow: hidden; }
/* O conteúdo passa à frente da decoração, seja qual for a secção. */
[data-pixeis] > .container { position: relative; z-index: 3; }
.pixeis,
.rasto {
position: absolute;
inset: 0;
pointer-events: none;
}
.pixeis { z-index: 1; }
.pixeis i {
position: absolute;
display: block;
background-color: var(--laranja-esc);
opacity: 0;
}
html.js .pixeis i {
animation: cintilar var(--dur) ease-in-out var(--del) infinite;
}
@keyframes cintilar {
0%, 100% { opacity: 0; }
45%, 55% { opacity: var(--max); }
}
.rasto { z-index: 2; }
.rasto b {
position: absolute;
display: block;
background-color: var(--laranja-esc);
opacity: 0;
transform: scale(0.4);
animation: rasto var(--vida) cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
}
@keyframes rasto {
0% { opacity: 0; transform: scale(0.4); }
14% { opacity: var(--forca); transform: scale(1); }
100% { opacity: 0; transform: scale(0.88); }
}
/* --- Marcas de registo de molde ---
Quatro cantos em L à volta das fotografias, como um molde de papel
pousado na bancada. Duas pontas em cada pseudo-elemento. */
.marcas {
position: absolute;
inset: -11px;
pointer-events: none;
color: var(--noite);
}
.hero .marcas { color: var(--papel); }
.marcas::before,
.marcas::after {
content: "";
position: absolute;
width: 26px;
height: 26px;
border: 0 solid currentColor;
}
.marcas::before {
top: 0; left: 0;
border-top-width: 2.5px;
border-left-width: 2.5px;
}
.marcas::after {
bottom: 0; right: 0;
border-bottom-width: 2.5px;
border-right-width: 2.5px;
}
/* Moldura de fotografia (usada fora do hero).
5/6 e não 3/4: "Para quem" está na categoria "pequena" de secções
(576px), e o retrato mais alto passava disso. */
.moldura {
position: relative;
aspect-ratio: 5 / 6;
}
/* O primeiro frame do vídeo, à espera que ele carregue. Está aqui e
não no atributo poster de propósito: o poster descarrega sempre,
e em telemóvel esta moldura é display:none. Ver o index.html. */
.moldura--clientes {
background-image: url("../assets/poster-clientes.jpg");
background-size: cover;
background-position: center;
}
.moldura img,
.moldura video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ==========================================================================
4. BOTÕES E LINKS
O terracota é o único acento do site: reservado a ações.
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.95rem 1.6rem;
border: 1.5px solid transparent;
border-radius: 2px; /* cantos quase retos, de propósito */
font-family: var(--f-texto);
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.btn__icone {
width: 1.05em;
height: 1.05em;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.btn:hover .btn__icone { transform: translateX(4px); }
/* Exceção às 3 regras do acento: este botão cai em 3 fundos diferentes
(hero escuro; trabalhar/contacto claros) e o texto é sempre tinta.
laranja-cla + tinta só dá 3.54:1 (falha AA); laranja-esc + tinta dá
4.63:1. Por isso fica sempre em laranja-esc, seja qual for o fundo. */
.btn--acento {
background-color: var(--laranja-esc);
color: var(--tinta);
}
.btn--acento:hover { background-color: var(--laranja-cla); }
/* Botão de contorno, para fundos escuros */
.btn--contorno {
background: none;
border-color: rgba(244, 246, 249, 0.55);
color: var(--papel);
}
.btn--contorno:hover {
border-color: var(--papel);
background-color: rgba(244, 246, 249, 0.08);
}
.btn--full { width: 100%; }
/* --- A sombra dos botões ---
Só sombra, sem aresta nem brilho: uma curta e firme que desenha o
contorno de baixo, e uma larga e muito leve que levanta o botão da
página. Ao passar o rato sobe 1px e a sombra abre; ao carregar volta
a assentar. O laranja tem a sombra puxada à cor dele, para não ficar
suja. Nos de contorno para fundos escuros não há sombra: num fundo
escuro não se veria, e só sujava o contorno. */
.btn {
--btn-sombra: 18, 41, 74;
box-shadow: 0 1px 3px rgba(var(--btn-sombra), 0.16), 0 6px 16px rgba(var(--btn-sombra), 0.16);
transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease,
transform 0.16s ease, box-shadow 0.16s ease;
}
.btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 2px 5px rgba(var(--btn-sombra), 0.16), 0 10px 24px rgba(var(--btn-sombra), 0.20);
}
.btn:active:not(:disabled) {
transform: none;
box-shadow: 0 1px 3px rgba(var(--btn-sombra), 0.18);
transition-duration: 0.06s;
}
.btn--acento { --btn-sombra: 160, 71, 20; }
.btn--contorno,
.btn--contorno:hover,
.btn--contorno:active { box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
.btn:hover:not(:disabled) { transform: none; }
}
.link {
color: var(--noite);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1.5px;
}
.link:hover { text-decoration-thickness: 2.5px; }
.link--icon {
display: inline-flex;
align-items: center;
gap: 0.45rem;
text-decoration: none;
}
.link--icon:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ==========================================================================
5. LOGO
"Mondra" num só SVG: o M meio glifo Young Serif, meio píxeis de terracota,
e "ondra" na mesma linha de base. O glifo herda a cor do contexto
(tinta sobre papel, papel sobre azul-noite); os píxeis são sempre terracota.
========================================================================== */
.logo {
display: inline-flex;
align-items: center;
color: currentColor;
text-decoration: none;
}
/* 803x159 de viewBox; a esta altura a caixa alta fica com ~21px,
o mesmo tamanho ótico do wordmark anterior a 1.7rem */
.logo__marca {
height: 1.45rem;
width: auto;
display: block;
}
.logo--rodape .logo__marca { height: 1.6rem; }
/* Construção do M ao carregar: o main.js marca o SVG do cabeçalho com
.logo__marca--anima (só sem prefers-reduced-motion), esconde os
píxeis e dá a cada um o seu atraso; depois liga .is-on e eles
acendem um a um, em varrimento. Sem JavaScript nada disto corre
e o logo aparece completo. */
.js .logo__marca--anima .logo__pixeis rect { opacity: 0; }
.logo__marca--anima.is-on .logo__pixeis rect {
animation: logo-pixel 0.3s ease forwards;
}
@keyframes logo-pixel {
0% { opacity: 0; }
100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.js .logo__marca--anima .logo__pixeis rect {
opacity: 1;
animation: none;
}
}
/* ==========================================================================
5b. BARRA DE PROGRESSO
Uma faixa terracota no topo do ecrã, acima de tudo (inclusive da
navegação), que cresce da esquerda para a direita à medida que se
desce a página. É só transform: scaleX, escrito em --progresso pelo
main.js (0 a 1) num único scroll listener partilhado com a sombra
da navegação. Sem JavaScript, --progresso nunca muda de 0 e a
faixa fica invisível (width 0), sem ocupar espaço no layout.
========================================================================== */
.progresso {
position: fixed;
top: 0;
left: 0;
z-index: 300; /* acima da navegação, para nunca ficar tapada */
width: 100%;
height: 3px;
background-color: var(--noite);
transform-origin: left;
transform: scaleX(var(--progresso, 0));
}
/* ==========================================================================
6. NAVEGAÇÃO
Transparente sobre o hero azul-noite; ganha fundo de papel com o scroll.
A cor dos elementos vem de --nav-cor, que muda com o estado.
========================================================================== */
.site-header {
--nav-cor: var(--papel);
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
color: var(--nav-cor);
background-color: transparent;
transition: background-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}
.site-header.is-scrolled {
--nav-cor: var(--tinta);
background-color: rgba(244, 246, 249, 0.94);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 1px 0 var(--linha);
}
.nav {
display: flex;
align-items: center;
gap: 0.75rem;
min-height: var(--altura-nav);
}
/* --- Seletor de idioma --- */
.nav__lang {
margin-left: auto;
flex-shrink: 0;
}
/* --- Entrada no portal ---
Do tamanho do seletor de idioma ao lado, e com a mesma moldura: os
dois sao ferramentas da barra, e devem ler-se como um par. Sem
texto, porque a barra ja esta cheia e o icone de pessoa e
suficientemente convencional. O nome para leitores de ecra vai no
aria-label. */
.nav__conta {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
/* 32px: a mesma altura do seletor de idioma ao lado, medida no
browser. Os dois tem de assentar na mesma linha. */
width: 32px;
height: 32px;
margin-left: 0.5rem;
border: 1.5px solid currentColor;
border-radius: 2px;
color: inherit;
opacity: 0.75;
transition: opacity 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.nav__conta svg { width: 19px; height: 19px; }
.nav__conta:hover { opacity: 1; color: var(--laranja-esc); }
.nav__conta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* O [hidden] do HTML PERDE para qualquer regra que declare display, por
ser estilo do browser e nao da folha. Sem esta linha, o menu de
idiomas ficava visivel para sempre: a regra .lang__menu declara
display:flex, e ganhava ao atributo.
Ja tinha acontecido no portal, com a barra de topo, e o admin.css
tem esta mesma linha desde entao. Faltava aqui, e por isso o mesmo
erro repetiu-se. */
[hidden] { display: none !important; }
/* --- Idioma ---
Mostra só a língua em uso; carregar abre as duas. Antes mostrava as
duas lado a lado dentro de uma moldura, e isso ocupava o dobro da
largura para dizer metade: uma das siglas era sempre a que já
estava. O comportamento está no js/lang.js, partilhado com o
portal. */
.lang {
position: relative;
display: inline-flex;
}
.lang__actual {
appearance: none;
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.3rem;
/* 32px de altura, o mesmo do ícone da conta ao lado. */
min-height: 32px;
padding: 0 0.35rem;
border-radius: 4px;
background: none;
color: inherit;
font-family: var(--f-texto);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.4;
transition: background-color 0.16s ease;
}
.lang__seta {
width: 0.5rem;
height: 0.35rem;
transition: transform 0.16s ease;
}
.lang[data-aberto="sim"] .lang__seta { transform: rotate(180deg); }
/* O menu é sempre um painel claro, onde quer que esteja: por cima do
hero azul, da barra branca depois do scroll, ou da barra do portal.
Uma só aparência é menos código e não há contexto onde falhe. */
.lang__menu {
position: absolute;
top: calc(100% + 0.4rem);
right: 0;
z-index: 60;
min-width: 9rem;
display: flex;
flex-direction: column;
padding: 0.25rem;
background-color: var(--branco);
color: var(--tinta);
border: 1px solid var(--linha);
border-radius: 8px;
box-shadow: var(--sombra);
}
.lang__btn {
appearance: none;
border: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
min-height: 36px;
padding: 0 0.5rem;
border-radius: 5px;
background: none;
color: inherit;
text-align: left;
font-family: var(--f-texto);
font-size: 0.86rem;
font-weight: 500;
line-height: 1.4;
transition: background-color 0.16s ease;
}
.lang__btn:hover { background-color: rgba(18, 41, 74, 0.07); }
.lang__btn.is-active { font-weight: 700; }
/* O visto diz qual está em uso sem depender da cor, que é o que falha
a quem não distingue bem tons. */
.lang__btn.is-active::after {
content: '✓';
font-weight: 700;
}
/* O gatilho reage ao rato como os outros controlos da barra. Duas
regras em vez de color-mix, para funcionar em browsers antigos: um
véu claro sobre o hero azul-noite, um véu escuro depois do scroll. */
.site-header .lang__actual:hover,
.site-header .lang[data-aberto="sim"] .lang__actual {
background-color: rgba(244, 246, 249, 0.16);
}
.site-header.is-scrolled .lang__actual:hover,
.site-header.is-scrolled .lang[data-aberto="sim"] .lang__actual {
background-color: rgba(18, 41, 74, 0.10);
}
/* --- Botão hambúrguer (só em ecrãs pequenos) --- */
.nav__toggle {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 10px;
background: none;
border: 0;
cursor: pointer;
}
.nav__toggle-bar {
display: block;
height: 2px;
width: 100%;
background-color: var(--nav-cor);
transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* --- Menu: painel em ecrãs pequenos, barra no desktop (secção 18) --- */
.nav__menu {
position: fixed;
top: var(--altura-nav);
right: 0;
width: min(320px, 82vw);
height: calc(100dvh - var(--altura-nav));
padding: var(--e4) var(--e4) var(--e6);
background-color: var(--papel);
border-left: 1px solid var(--linha);
box-shadow: var(--sombra);
overflow-y: auto;
transform: translateX(100%);
visibility: hidden;
transition: transform 0.28s ease, visibility 0.28s ease;
}
.nav__menu.is-open {
transform: translateX(0);
visibility: visible;
}
/* --- Sem JavaScript ---
Quem abre o painel é o JS (põe .is-open). Sem ele, em ecrãs
pequenos o menu ficava escondido e fora do ecrã para sempre, com
o hambúrguer visível a não fazer nada: a navegação desaparecia.
Aqui os links voltam ao fluxo normal, numa fila por baixo da marca.
O cabeçalho deixa de ser fixo, senão crescia por cima do conteúdo,
e ganha o azul-noite da marca porque o texto dele é papel e por baixo
está o hero, também azul-noite: a barra passa a ser o topo do hero. */
html:not(.js) .site-header {
position: static;
background-color: var(--noite);
}
html:not(.js) .nav { flex-wrap: wrap; }
html:not(.js) .nav__toggle { display: none; }
html:not(.js) .nav__menu {
position: static;
flex-basis: 100%;
width: auto;
height: auto;
padding: 0 0 var(--e2);
background: none;
border: 0;
box-shadow: none;
overflow: visible;
transform: none;
visibility: visible;
}
html:not(.js) .nav__list {
flex-direction: row;
flex-wrap: wrap;
gap: var(--e1) var(--e4);
}
html:not(.js) .nav__link { color: var(--papel); padding: var(--e1) 0; }
html:not(.js) .nav__link--cta { color: var(--tinta); font-weight: 700; }
.nav__list {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.nav__link {
display: block;
padding: 0.75rem 0.5rem;
color: var(--tinta);
font-weight: 500;
font-size: 1.05rem;
text-decoration: none;
}
.nav__link:hover { color: var(--noite); }
.nav__link.is-active { font-weight: 700; color: var(--noite); }
.nav__link--cta {
margin-top: var(--e2);
background-color: var(--laranja-esc);
color: var(--tinta);
text-align: center;
font-weight: 700;
border-radius: 2px;
padding: 0.8rem 1.25rem;
}
.nav__link--cta:hover { background-color: var(--laranja-cla); color: var(--tinta); }
/* --- Grupos com painel (Serviços, Portal) ---
No menu lateral os painéis estão sempre abertos: o botão do grupo é só
um rótulo pequeno, e as entradas ficam por baixo dele, com ícone e uma
linha de explicação. No computador viram painéis que abrem (secção 18). */
.nav__grupo {
display: flex;
align-items: center;
gap: 0.4rem;
width: 100%;
margin-top: var(--e2);
padding: var(--e1) 0.5rem 0;
border: 0;
background: none;
font-family: var(--f-texto);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sec-claro);
cursor: default;
}
.nav__seta { display: none; width: 10px; height: 6px; transition: transform 0.2s ease; }
.nav__sub { margin: 0; padding: 0; list-style: none; }
.nav__sublink {
display: grid;
grid-template-columns: 2.25rem minmax(0, 1fr);
align-items: center;
gap: var(--e3);
padding: var(--e1) 0.5rem;
border-radius: var(--e1);
color: var(--tinta);
text-decoration: none;
transition: background-color 0.16s ease;
}
.nav__sublink:hover { background-color: var(--papel-alt); }
.nav__sublink:focus-visible { outline: 2px solid var(--noite); outline-offset: 2px; }
.nav__icone {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border-radius: var(--e1);
background-color: #FBE7DC;
}
.nav__icone svg {
width: 1.15rem;
height: 1.15rem;
fill: none;
stroke: var(--laranja-cla);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.nav__subtitulo { font-size: 0.98rem; font-weight: 700; line-height: 1.3; }
.nav__sublink.is-active .nav__subtitulo { color: var(--noite); }
.nav__sublink.is-active .nav__icone { background-color: var(--laranja-esc); }
.nav__sublink.is-active .nav__icone svg { stroke: var(--tinta); }
/* O cartão do portal só existe no painel de computador */
.nav__cartao { display: none; }
/* ==========================================================================
7. HERO
Ecrã inteiro sobre o azul-noite. Assimétrico: 6 colunas de texto,
5 de cena. A cena é um pequeno filme: um cartão de pesquisa que passa
de "sem site, sem morada, sem horário" a resultado dominante, mais um
telemóvel a receber mensagens. Dispara uma vez, ao entrar no ecrã
(ver main.js, secção 5), nunca ao carregar a página.
========================================================================== */
.hero {
position: relative;
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: center;
padding-top: calc(var(--altura-nav) + var(--e5));
padding-bottom: var(--e8);
overflow: hidden;
background-color: var(--noite);
}
.hero__grelha {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
gap: clamp(2.5rem, 6vw, 6rem);
align-items: center;
}
.hero__titulo {
color: var(--papel);
font-size: clamp(2.6rem, 4.9vw, 4.5rem);
line-height: 1.06;
margin-bottom: var(--e4);
animation: subir 0.7s ease backwards;
}
.hero__apoio {
color: var(--sec-escuro);
font-size: 1.18rem;
line-height: 1.7;
max-width: 52ch;
margin-bottom: var(--e5);
animation: subir 0.7s ease 0.12s backwards;
}
.hero__acoes {
display: flex;
flex-wrap: wrap;
gap: var(--e3);
animation: subir 0.7s ease 0.24s backwards;
}
/* --- A cena: o cartão de pesquisa e o telemóvel --- */
.hero__direita {
position: relative;
animation: subir 0.8s ease 0.18s backwards;
}
.hero__cena { position: relative; min-height: 600px; }
/* Escondido por omissão só quando há JavaScript a sério (mesma
convenção do [data-reveal], secção 17): sem JS a sequência nunca
corre, e nada chegaria a mostrar-se se o ponto de partida fosse
invisível. Sem JS, a cena aparece já no estado final. */
.hero__frag { position: absolute; }
html.js .hero__frag {
opacity: 0;
transform: translateY(12px) scale(0.975);
}
/* O `html.js` repete-se aqui de propósito. A regra que esconde acima
é `html.js .hero__frag` (um elemento + duas classes); um simples
`.hero__frag.is-on` (duas classes) perde para ela e o fragmento
ficava invisível para sempre, com o JavaScript a correr certo. */
html.js .hero__frag.is-on,
.hero__frag.is-on {
opacity: 1;
transform: none;
transition: opacity 0.58s cubic-bezier(0.2, 0.9, 0.25, 1),
transform 0.58s cubic-bezier(0.2, 0.9, 0.25, 1);
}
/* Píxeis que "dão à luz" cada fragmento quando ele entra: nascem à
volta do cartão/telemóvel e recolhem-se para cima dele. */
.hero__nasce { position: absolute; inset: -14px; pointer-events: none; z-index: -1; }
.hero__nasce b {
position: absolute;
display: block;
background-color: var(--laranja-esc);
opacity: 0;
border-radius: 1px;
}
.hero__nasce.vai b {
animation: hero-nascer 0.95s cubic-bezier(0.25, 0.9, 0.3, 1) var(--d) forwards;
}
@keyframes hero-nascer {
0% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.45); }
22% { opacity: 0.95; transform: translate(calc(var(--dx) * 0.55), calc(var(--dy) * 0.55)) scale(1); }
60% { opacity: 0.8; transform: translate(0, 0) scale(1); }
100% { opacity: 0; transform: translate(0, 0) scale(0.7); }
}
/* ---------- o cartão de pesquisa ---------- */
.hero__busca {
left: 50%;
top: 18px;
width: 408px;
max-width: 100%;
background-color: var(--papel);
border-radius: 11px;
padding: 17px 20px 19px;
box-shadow: var(--sombra);
z-index: 5;
transform: translateX(-50%);
}
html.js .hero__busca { transform: translateX(-50%) translateY(12px) scale(0.975); }
html.js .hero__busca.is-on,
.hero__busca.is-on { transform: translateX(-50%) rotate(-0.8deg); }
.hero__campo {
display: flex;
align-items: center;
gap: 11px;
border: 1.5px solid var(--linha);
border-radius: 26px;
padding: 11px 17px;
background-color: var(--papel);
}
.hero__lupa {
width: 15px; height: 15px;
border: 2px solid var(--sec-claro);
border-radius: 50%;
position: relative;
flex: none;
}
.hero__lupa::after {
content: "";
position: absolute;
right: -6px; bottom: -5px;
width: 8px; height: 2px;
background-color: var(--sec-claro);
transform: rotate(45deg);
}
.hero__campo-texto { font-size: 14.5px; color: var(--tinta); font-weight: 500; white-space: nowrap; }
.hero__caret {
display: inline-block;
width: 1.7px; height: 16px;
background-color: var(--laranja-cla);
vertical-align: -3px;
margin-left: 1px;
animation: hero-pisca 1.05s step-end infinite;
}
@keyframes hero-pisca { 50% { opacity: 0; } }
.hero__resultados {
position: relative;
height: 150px;
margin-top: 14px;
transition: height 0.68s cubic-bezier(0.25, 0.9, 0.3, 1);
}
.hero__estado { position: absolute; left: 0; right: 0; top: 0; transition: opacity 0.45s ease; }
/* Sem scoping a .js de propósito, ao contrário do .hero__frag acima:
"antes" e "depois" partilham o mesmo lugar (position: absolute), e
sem JS têm de ficar só um visível, senão sobrepõem-se. O HTML já
marca "depois" com is-off por omissão, por isso sem JS mostra-se
sempre o "antes" (um resultado de pesquisa parado, sem animação,
continua a fazer sentido sozinho). */
.hero__estado.is-off { opacity: 0; pointer-events: none; }
.hero__concorrente { display: flex; gap: 11px; align-items: center; padding: 9px 0; }
.hero__estado--antes .hero__concorrente,
.hero__estado--antes .hero__mais,
.hero__estado--antes .hero__nos-antes { opacity: 0; transform: translateY(7px); }
.hero__estado--antes .hero__concorrente.is-on,
.hero__estado--antes .hero__mais.is-on,
.hero__estado--antes .hero__nos-antes.is-on {
opacity: 1;
transform: none;
transition: opacity 0.4s cubic-bezier(0.2, 0.9, 0.25, 1),
transform 0.4s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.hero__favicon { width: 26px; height: 26px; border-radius: 6px; background-color: var(--papel-alt); flex: none; }
.hero__linhas { flex: 1; }
.hero__linha { display: block; height: 8px; border-radius: 4px; background-color: var(--tinta); opacity: 0.4; margin-bottom: 6px; }
.hero__linha--b { height: 6px; background-color: var(--sec-claro); opacity: 0.26; margin-bottom: 0; }
.hero__mais { font-size: 11.5px; color: var(--sec-claro); padding: 6px 0 4px; letter-spacing: 0.4px; }
/* a nossa entrada, estado pobre */
.hero__nos-antes { padding: 10px 0 0; border-top: 1px solid var(--linha); }
.hero__url { font-size: 12px; color: var(--sec-claro); font-weight: 500; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.hero__resultado-tit { font-family: var(--f-titulo); font-weight: 400; font-size: 15px; color: var(--sec-claro); margin-bottom: 5px; }
.hero__resultado-desc { font-size: 12.5px; color: var(--sec-claro); line-height: 1.45; }
.hero__aviso { margin-top: 9px; font-size: 11.5px; color: var(--sec-claro); font-style: italic; display: flex; gap: 8px; align-items: center; }
.hero__marcador { width: 10px; height: 10px; border-radius: 2px; background-color: var(--linha-forte); flex: none; }
/* a nossa entrada, estado com site próprio */
.hero__nos-depois { background-color: var(--papel-alt); border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; position: relative; }
.hero__nos-depois .hero__url { color: var(--laranja-cla); font-weight: 700; }
.hero__nos-depois .hero__resultado-tit { font-size: 17.5px; color: var(--tinta); margin-bottom: 6px; line-height: 1.25; }
.hero__nos-depois .hero__resultado-desc { color: var(--sec-claro); font-size: 13px; line-height: 1.5; }
.hero__avaliacao { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 12px; color: var(--sec-claro); }
.hero__estrelas { color: var(--laranja-cla); font-size: 12px; letter-spacing: 1.5px; }
.hero__dados { position: relative; margin-top: 13px; padding-top: 13px; padding-bottom: 2px; border-top: 1px solid var(--linha); }
.hero__dados p { margin: 0 0 8px; font-size: 12.5px; color: var(--sec-claro); display: flex; gap: 9px; align-items: center; }
.hero__dados p:last-of-type { margin-bottom: 0; }
.hero__dados .hero__marcador { background-color: var(--laranja-cla); opacity: 0.85; }
.hero__credito {
font-size: 10.5px; font-weight: 700; color: var(--sec-claro); background-color: var(--papel);
padding: 3px 8px; border-radius: 3px; letter-spacing: 0.2px;
opacity: 0; transform: translateX(-5px);
transition: opacity 0.5s, transform 0.5s;
}
.hero__busca.is-creditado .hero__credito { opacity: 1; transform: none; }
/* píxeis que atravessam o cartão, na transição antes -> depois */
.hero__atravessa { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; border-radius: 11px; }
.hero__atravessa b { position: absolute; display: block; background-color: var(--laranja-cla); opacity: 0; border-radius: 1px; }
.hero__atravessa.vai b { animation: hero-atravessa 1.25s cubic-bezier(0.55, 0, 0.3, 1) var(--d) forwards; }
@keyframes hero-atravessa {
0% { opacity: 0; transform: translateX(-26px) scale(0.5); }
14% { opacity: 0.95; transform: translateX(0) scale(1); }
74% { opacity: 0.9; }
100% { opacity: 0; transform: translateX(var(--dx)) scale(0.6); }
}
/* ---------- telemóvel ---------- */
.hero__telefone { right: 2px; bottom: 0; width: 190px; transform-origin: right center; z-index: 6; }
html.js .hero__telefone.is-on,
.hero__telefone.is-on { transform: rotate(1.6deg); }
.hero__telefone-corpo { background-color: var(--noite-fundo); border-radius: 23px; padding: 7px; box-shadow: var(--sombra); }
.hero__ecra { background-color: var(--papel-alt); border-radius: 17px; overflow: hidden; display: flex; flex-direction: column; height: 312px; }
.hero__status { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px 4px; font-size: 10px; color: var(--tinta); font-weight: 700; }
.hero__sinais { display: flex; gap: 3px; align-items: flex-end; }
.hero__sinais s { width: 2.5px; background-color: var(--tinta); opacity: 0.6; display: block; text-decoration: none; border-radius: 1px; }
.hero__conversa-cabeca { display: flex; align-items: center; gap: 8px; padding: 7px 11px; background-color: var(--papel); border-bottom: 1px solid var(--linha); }
.hero__avatar { width: 24px; height: 24px; border-radius: 50%; background-color: var(--papel-alt); flex: none; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: var(--sec-claro); }
.hero__conversa-cabeca b { display: block; font-size: 11px; color: var(--tinta); }
.hero__conversa-cabeca s { display: block; text-decoration: none; font-size: 8.5px; color: var(--laranja-cla); font-weight: 700; margin-top: 1px; }
.hero__conversa { flex: 1; padding: 10px 9px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.hero__msg {
background-color: var(--papel); border-radius: 11px 11px 11px 3px; padding: 7px 9px; max-width: 90%;
font-size: 10.5px; line-height: 1.4; color: var(--tinta); box-shadow: var(--sombra);
align-self: flex-start;
}
/* Sem JS mostram-se logo as três (é uma conversa já acontecida, sem
necessidade de simular o "a escrever...") */
html.js .hero__msg { opacity: 0; transform: translateY(9px) scale(0.97); }
html.js .hero__msg.is-on,
.hero__msg.is-on { opacity: 1; transform: none; transition: opacity 0.4s cubic-bezier(0.2, 0.9, 0.25, 1), transform 0.4s cubic-bezier(0.2, 0.9, 0.25, 1); }
.hero__msg em { font-style: normal; display: block; font-size: 8px; color: var(--sec-claro); margin-top: 3px; }
.hero__escrever { display: flex; align-items: center; gap: 7px; padding: 7px 10px; background-color: var(--papel); border-top: 1px solid var(--linha); }
.hero__campo-escrita { flex: 1; height: 20px; border-radius: 13px; background-color: var(--papel-alt); }
.hero__enviar { width: 20px; height: 20px; border-radius: 50%; background-color: var(--laranja-cla); flex: none; }
.hero__pontos {
display: flex; gap: 3px; align-self: flex-start; background-color: var(--papel); border-radius: 11px;
opacity: 0; box-shadow: var(--sombra); height: 0; padding: 0 10px; overflow: hidden;
transition: opacity 0.25s, height 0.25s, padding 0.25s, margin 0.25s; margin: 0;
}
.hero__pontos.is-on { opacity: 1; height: 29px; padding: 8px 10px; align-items: center; }
.hero__pontos s { width: 4px; height: 4px; border-radius: 50%; background-color: var(--sec-claro); display: block; text-decoration: none; animation: hero-salta 1.1s ease-in-out infinite; }
.hero__pontos s:nth-child(2) { animation-delay: 0.16s; }
.hero__pontos s:nth-child(3) { animation-delay: 0.32s; }
@keyframes hero-salta { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 0.9; } }
/* ---------- legenda ---------- */
/* Fica FORA de .hero__cena, que está toda aria-hidden por ser
ilustração: esta frase é conteúdo a sério e tem de ser lida.
O max-width deixa livre a faixa onde entra o telemóvel. */
.hero__legenda-linha {
position: absolute;
left: 2px;
bottom: 12px;
max-width: calc(100% - 218px);
}
.hero__legenda {
font-size: 11.5px;
line-height: 1.5;
color: var(--sec-escuro);
margin: 0;
}
/* É uma frase a sério, não decoração: sem JS aparece logo. */
html.js .hero__legenda { opacity: 0; }
html.js .hero__legenda.is-on,
.hero__legenda.is-on { opacity: 0.75; transition: opacity 0.6s; }
/* Abaixo disto a cena não cabe com dignidade: sai, e fica só a coluna
de texto, a toda a largura. O campo de píxeis de fundo mantém-se,
é leve e funciona em qualquer largura. */
@media (max-width: 1040px) {
.hero__grelha { grid-template-columns: 1fr; }
.hero__direita { display: none; }
}
/* ==========================================================================
8. SECÇÕES E TÍTULOS
Cabeças alinhadas à esquerda, com a lombada costurada.
========================================================================== */
/* flex + justify-content:center: quando o min-height (abaixo) sobra
espaço, fica distribuído a igualar em cima e em baixo do conteúdo,
em vez de tudo se acumular no fundo da secção. */
.seccao {
padding-block: var(--seccao);
display: flex;
flex-direction: column;
justify-content: center;
}
.seccao--papel { background-color: var(--papel); }
.seccao--alt { background-color: var(--papel-alt); }
.seccao--noite { color: var(--sec-escuro); }
/* Só dois tamanhos de secção (o hero fica de fora, é sempre diferente):
"grande" para conteúdo dinâmico que precisa de respirar (a timeline
animada, o comparador antes/depois); "pequena" para o resto. Sem
isto, cada secção tinha a altura que o seu conteúdo calhasse a dar,
sem nenhum padrão percetível. min-height é só um piso: nas secções
que já eram mais altas do que o alvo, o conteúdo teve de ser
comprimido à parte (ver Para quem e O que fazemos, mais abaixo). */
#processo { min-height: 45rem; } /* 720px, "grande" */
/* Por ID, e um ID nao sabe em que pagina esta: qualquer outra pagina
que reutilize um destes nomes herda esta altura minima sem querer.
Aconteceu com a politica de seguranca, cuja seccao de contacto se
chamava "contacto" e ficava com 576px de vazio no fim. Ao criar uma
pagina nova, nao reutilizar estes cinco IDs. */
#para-quem, #servicos, #trabalhar, #contacto { min-height: 36rem; } /* 576px, "pequena" */
/* Exemplos fica de fora dos dois pisos: são só os cartões do portefólio,
e com o piso ficava branco a mais em cima e em baixo deles. A altura
vem do conteúdo, com o mesmo respiro e a mesma cabeça das outras. */
.seccao__cabeca {
max-width: 780px;
margin-bottom: var(--gap-cabeca);
}
/* No Trabalhar juntos a tabela ocupa a largura toda, e a cabeça acompanha:
título e lombada numa linha só enquanto couberem, e só partem quando o
ecrã já não chega. */
#trabalhar .seccao__cabeca { max-width: none; }
/* A lombada: rótulo pequeno com uma linha de costura a seguir */
.lombada {
display: flex;
align-items: center;
gap: var(--e3);
margin: 0 0 var(--gap-lombada-titulo);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sec-claro);
}
.lombada--clara { color: var(--sec-escuro); }
.seccao__titulo {
font-size: clamp(2.1rem, 3.4vw, 3.1rem);
margin-bottom: var(--e1);
}
.seccao__titulo--claro { color: var(--papel); }
.seccao__lead {
font-size: 1.14rem;
line-height: 1.7;
color: var(--sec-claro);
max-width: 62ch;
margin-bottom: 0;
}
.seccao--noite .seccao__lead { color: var(--sec-escuro); }
.seccao__acao { margin: var(--e5) 0 0; }
/* ==========================================================================
9. COMPARADOR ANTES/DEPOIS
O argumento de venda num gesto. A camada "antes" é recortada por
--corte, controlado por um input range invisível por cima.
Sem JavaScript: --corte fica a 0%, o "depois" mostra-se por inteiro
e a pega e as etiquetas do antes escondem-se. Nunca há um vazio.
========================================================================== */
.comparar {
/* A montra da secção: sem subtítulo por cima, o comparador é quem
manda na largura. 720px dá um palco de 480px de altura, o teto
da categoria "grande" de secções. */
max-width: 832px;
margin-inline: auto;
/* 20% acima da --sombra do site (opacidade e raio): o comparador é o
único objeto que tem de se descolar do papel da secção sozinho. */
--sombra-comparador: 0 3px 9px rgba(18, 41, 74, 0.13),
0 21px 60px rgba(18, 41, 74, 0.15);
}
/* Sem overflow: é aqui que os factos se penduram para poderem sair
para fora do palco em ecrãs largos. */
.comparar__moldura { position: relative; }
.comparar__palco {
/* O gesto horizontal e o arrasto (main.js, secção 4); o vertical
fica para a página, para se poder fazer scroll com o dedo em cima
do comparador. */
touch-action: pan-y;
/* 3/2 e não 16/10: as capturas exemplo-*.jpg são 1200x800 (3/2
exato); com outro rácio o object-fit cover corta o topo delas */
aspect-ratio: 3 / 2;
overflow: hidden;
background-color: var(--papel-alt);
border: 1px solid var(--linha);
box-shadow: var(--sombra-comparador);
user-select: none;
}
.comparar__palco img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.comparar__antes {
position: absolute;
inset: 0;
clip-path: inset(0 calc(100% - var(--corte, 0%)) 0 0);
}
/* Etiquetas de canto */
.comparar__etiqueta {
position: absolute;
top: 14px;
padding: 0.3rem 0.7rem;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
pointer-events: none;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
/* Quando o corte encosta a um extremo, o lado que desapareceu leva a
etiqueta com ele (classes postas pelo main.js, secção 4) */
.comparar__moldura.esconde-antes .comparar__etiqueta--antes,
.comparar__moldura.esconde-depois .comparar__etiqueta--depois { opacity: 0; visibility: hidden; }
.comparar__etiqueta--antes {
left: 14px;
background-color: rgba(18, 41, 74, 0.85);
color: var(--papel);
}
.comparar__etiqueta--depois {
right: 14px;
background-color: rgba(18, 41, 74, 0.85);
color: var(--papel);
}
/* A linha é uma costura tracejada, como as do resto do site (9/17,
a métrica das .lombada e dos passos) */
.comparar__pega::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -1.5px;
width: 3px;
background-image: repeating-linear-gradient(180deg,
var(--laranja-cla) 0 9px, transparent 9px 17px);
/* A mesma ideia de sombra do punho (queda + desfoque), só que mais
leve, porque a linha é fina e não pode competir com o punho. */
filter: drop-shadow(0 3px 5px rgba(18, 41, 74, 0.5));
}
/* A pega: o punho redondo de terracota com setas */
.comparar__pega {
position: absolute;
top: 0;
bottom: 0;
left: var(--corte, 0%);
width: 0;
z-index: 7;
pointer-events: none;
}
.comparar__punho {
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--laranja-esc);
color: var(--tinta);
box-shadow: 0 0 0 3px var(--papel), 0 9px 24px rgba(18, 41, 74, 0.68), var(--sombra-comparador);
transition: transform 0.15s ease;
}
.comparar__punho svg { width: 20px; height: 20px; }
/* A agarrar: o punho cresce um nada, para responder à mão */
.comparar__palco:has(.comparar__range:active) .comparar__punho {
transform: translate(-50%, -50%) scale(1.09);
}
/* --- Os factos de cada lado ---
Quando um lado domina o corte (>=75%), os seus argumentos entram em
cascata no fundo do palco: os problemas à esquerda, sóbrios em
tinta; o que a Mondra dá à direita, em terracota. Saem sem atraso. */
.comparar__factos {
position: absolute;
bottom: 14px;
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
pointer-events: none;
}
.comparar__factos--antes { left: 14px; align-items: flex-start; }
.comparar__factos--depois { right: 14px; align-items: flex-end; }
.comparar__factos li {
padding: 0.32rem 0.7rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.01em;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.comparar__factos--antes li {
background-color: rgba(18, 41, 74, 0.85);
color: var(--papel);
}
.comparar__factos--depois li {
background-color: var(--laranja-esc);
color: var(--tinta);
}
.comparar__moldura.mostra-antes .comparar__factos--antes li,
.comparar__moldura.mostra-depois .comparar__factos--depois li {
opacity: 1;
transform: none;
}
.comparar__moldura.mostra-antes .comparar__factos--antes li:nth-child(2),
.comparar__moldura.mostra-depois .comparar__factos--depois li:nth-child(2) { transition-delay: 0.09s; }
.comparar__moldura.mostra-antes .comparar__factos--antes li:nth-child(3),
.comparar__moldura.mostra-depois .comparar__factos--depois li:nth-child(3) { transition-delay: 0.18s; }
/* A partir daqui o container já está no seu máximo (1180px, menos os
dois --pad-lateral de 32px), e sobram uns 140px de cada lado do
comparador (832px): espaço que chega para os factos saírem de cima
da fotografia e passarem para fora dela, na mesma posição (mesmo
lado, mesma altura), como dois cartões soltos, à maneira dos
cartões flutuantes do hero. Sem isto, em
ecrãs médios os cartões ficavam cortados pela margem do container. */
@media (min-width: 1200px) {
.comparar__factos {
bottom: 14px;
width: 140px;
gap: 8px;
}
.comparar__factos--antes {
left: auto;
right: calc(100% + 18px);
align-items: flex-end;
text-align: right;
}
.comparar__factos--depois {
right: auto;
left: calc(100% + 18px);
align-items: flex-start;
text-align: left;
}
.comparar__factos li {
background-color: var(--papel);
box-shadow: var(--sombra);
font-size: 0.76rem;
font-weight: 700;
color: var(--tinta);
line-height: 1.3;
}
.comparar__factos--antes li { border-right: 3px solid var(--tinta); }
.comparar__factos--depois li { border-left: 3px solid var(--laranja-cla); }
}
/* --- Ver em grande ---
A dica só existe onde o comparador é pequeno de mais para se julgar
um site; em desktop ele já é grande e a dica seria ruído. */
.comparar__dica { display: none; }
.ampliar {
width: 100vw;
max-width: 100vw;
height: 100vh;
max-height: 100vh;
padding: 0;
border: 0;
background-color: var(--noite);
color: var(--papel);
}
.ampliar::backdrop { background-color: rgba(18, 41, 74, 0.94); }
.ampliar__caixa {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
/* O palco tem aspect-ratio 3/2, por isso basta dar-lhe a largura certa:
a maior que cabe no ecrã sem a altura passar. Em paisagem é onde
isto rende mais, porque o lado comprido do telemóvel é o que a
imagem precisa. */
.ampliar__caixa .comparar__moldura {
width: min(100vw, (100vh - 2 * var(--e5)) * 1.5);
}
.ampliar__caixa .comparar__palco {
border: 0;
box-shadow: none;
}
.ampliar__fechar {
position: absolute;
top: var(--e3);
right: var(--e3);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background-color: rgba(244, 246, 249, 0.14);
color: var(--papel);
cursor: pointer;
}
.ampliar__fechar svg { width: 22px; height: 22px; }
/* O controlo real: cobre o palco todo, invisível mas focável */
.comparar__range {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: ew-resize;
}
/* Foco por teclado: contorno no palco inteiro */
.comparar__palco:has(.comparar__range:focus-visible) {
outline: 3px solid var(--noite);
outline-offset: 4px;
}
/* Sem JavaScript não há interação: esconde os controlos e a etiqueta
do "antes"; fica o "depois" completo, que é a imagem que interessa */
html:not(.js) .comparar__pega,
html:not(.js) .comparar__range,
html:not(.js) .comparar__etiqueta--antes { display: none; }
/* --- Projetos (hoje: a Kukii Store e a Areal) ---
Um cartão por projeto, um por linha, à largura do container e
alinhados com o título, como o resto das secções.
Inteiro é uma ligação para a página do projeto em portefolio/. O
logótipo do cliente vive num quadrado claro, inteiro (contain). */
.projetos {
display: grid;
gap: var(--e3);
}
.projeto {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--e3);
padding: var(--e3);
border: 1.5px solid var(--linha);
border-radius: var(--e2);
background-color: var(--branco);
color: var(--tinta);
text-decoration: none;
transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.projeto:hover {
border-color: var(--linha-forte);
box-shadow: var(--sombra);
}
.projeto__imagem {
display: flex;
align-items: center;
justify-content: center;
width: 5.5rem;
aspect-ratio: 1;
padding: var(--e2);
border-radius: var(--e1);
background-color: var(--papel-alt);
overflow: hidden;
}
.projeto__imagem img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Uma fotografia (e não um logótipo) enche o quadrado todo */
.projeto__imagem--foto { padding: 0; }
.projeto__imagem--foto img { object-fit: cover; object-position: left top; }
.projeto__texto { display: flex; flex-direction: column; gap: var(--e0); }
.projeto__lombada {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sec-claro);
}
.projeto__titulo {
font-family: var(--f-titulo);
font-size: 1.5rem;
line-height: 1.15;
color: var(--noite);
}
/* Duas linhas no máximo: os dois cartões ficam baixos e iguais */
.projeto__resumo {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 0.88rem;
line-height: 1.5;
color: var(--sec-claro);
}
.projeto__seta {
width: 1.4rem;
height: 1.4rem;
margin-right: var(--e2);
color: var(--laranja-cla);
transition: transform 0.18s ease;
}
.projeto:hover .projeto__seta { transform: translateX(4px); }
@media (max-width: 600px) {
.projeto { gap: var(--e3); padding: var(--e2); }
.projeto__imagem { width: 5rem; }
.projeto__titulo { font-size: 1.25rem; }
/* Um por baixo do outro, a secção tem de caber num ecrã: fica o nome */
.projeto__resumo { display: none; }
.projeto__seta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.projeto__seta { transition: none; }
}
/* --- A review do Google ---
Por baixo dos cartões, sem caixa: as estrelas, a frase em letra de
título e quem a escreveu, com a ligação para o perfil no Google. */
/* A mesma distância que separa a cabeça da secção dos cartões
(--gap-cabeca, que no telemóvel também desce): os três blocos
ficam ao mesmo compasso. */
.review {
margin: var(--gap-cabeca) 0 0;
max-width: 46rem;
}
.review__estrelas {
display: flex;
gap: var(--e0);
margin: 0 0 var(--e2);
color: var(--laranja-cla);
}
.review__estrelas svg { width: 1.15rem; height: 1.15rem; }
.review__texto { margin: 0 0 var(--e3); }
.review__texto p {
margin: 0;
font-family: var(--f-titulo);
font-size: clamp(1.3rem, 2.2vw, 1.7rem);
line-height: 1.35;
color: var(--noite);
}
.review__texto p::before { content: "“"; }
.review__texto p::after { content: "”"; }
.review__autor {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--e1) var(--e3);
font-size: 0.92rem;
color: var(--sec-claro);
}
.review__nome { font-weight: 700; color: var(--tinta); }
.review__empresa { font-weight: 400; color: var(--sec-claro); }
.review__fonte {
display: inline-flex;
align-items: center;
gap: var(--e1);
color: var(--sec-claro);
text-decoration: underline;
text-underline-offset: 3px;
}
.review__fonte:hover { color: var(--noite); }
.review__fonte img { width: 16px; height: 16px; }
/* Em ecrã de toque, a ligação tem a altura de um alvo (44px), a crescer
para fora (margem negativa), sem mexer no espaço da secção */
@media (pointer: coarse) {
.review__fonte { padding-block: 0.625rem; margin-block: -0.625rem; }
}
/* ==========================================================================
10. ÍNDICE DE SERVIÇOS
Sem cards: linhas editoriais com ordinais grandes e costura entre si.
========================================================================== */
.indice {
border-top: 1.5px dashed var(--linha-forte);
}
.indice__linha {
display: grid;
grid-template-columns: 110px minmax(0, 5fr) minmax(0, 6fr);
gap: var(--e5);
align-items: center;
/* altura igual em todas as linhas, mesmo quando o texto de uma
ocupa duas linhas (a da gestão contínua é a mais longa).
4.75rem e não 6rem: "O que fazemos" está na categoria "pequena"
de secções (576px); a 6rem passava disso. */
min-height: 4.75rem;
padding: var(--e2) var(--e2);
border-bottom: 1.5px dashed var(--linha-forte);
transition: background-color 0.18s ease;
}
/* Realce de leitura, não de clique: estas linhas são informativas e
não levam a lado nenhum. O hover antigo deslocava o padding-left,
o que (a) obrigava o browser a refazer o layout e fazia o texto
saltar, e (b) prometia uma interação que não existe. Fica só o
tom de fundo, que ajuda a varrer a lista com os olhos. */
.indice__linha:hover { background-color: var(--papel); }
.seccao--papel .indice__linha:hover { background-color: var(--papel-alt); }
.indice__num {
font-family: var(--f-titulo);
font-size: 1.5rem;
color: var(--noite);
opacity: 0.5;
line-height: 1.3;
}
.indice__titulo {
font-size: clamp(1.5rem, 2.2vw, 2rem);
margin: 0;
}
.indice__texto {
margin: 0;
color: var(--sec-claro);
font-size: 1.05rem;
}
/* ==========================================================================
11. BANDA DE VÍDEO
A oficina em movimento, como respiração entre secções. Decorativa:
sem texto, sem som, com um véu azul-noite para assentar na paleta.
========================================================================== */
.banda-video {
position: relative;
height: min(56vh, 540px);
overflow: hidden;
background-color: var(--noite);
}
/* O vídeo do portátil, 15% mais baixo que a banda por omissão. O
recorte já está deslocado para cima (background/object-position
"center 15%", ver mais abaixo), por isso encolher a altura corta a
mais em baixo, não em cima, que era o pedido. */
.banda-video--site { height: min(47.6vh, 459px); }
/* O primeiro frame de cada vídeo, à espera que ele carregue. Sem isto,
o vídeo "salta" para dentro no instante em que arranca (preload é
"none", por isso o browser só tem pixels depois de entrar no ecrã);
o fundo azul-noite da banda tapa a cor mas não esse instante. O frame
entra por background-image, não pelo atributo poster, para não
ser descarregado à toa em ecrãs onde a banda nunca chega a aparecer. */
.banda-video--site { background-image: url("../assets/poster-site.jpg"); background-size: cover; }
.banda-video video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* O vídeo do portátil tem o ecrã perto do topo do enquadramento;
o recorte central por omissão cortava-o a meio. Desloca o recorte
para cima, para o ecrã ficar visível por inteiro. O poster usa o
mesmo enquadramento, senão o frame parado e o vídeo em movimento
não se alinham no instante da troca. */
.banda-video--site { background-position: center 15%; }
.banda-video--site video { object-position: center 15%; }
.banda-video__veu {
position: absolute;
inset: 0;
background-color: rgba(22, 48, 79, 0.38);
background-image:
linear-gradient(rgba(244,246,249,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(244,246,249,0.045) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
}
/* ==========================================================================
12. PARA QUEM
Texto à esquerda, fotografia com marcas à direita.
========================================================================== */
.quem {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
gap: clamp(2.5rem, 6vw, 6rem);
align-items: center;
}
.etiquetas {
display: flex;
flex-wrap: wrap;
gap: var(--e2);
margin-top: var(--e5);
}
/* Etiquetas costuradas, como remendos de oficina */
.etiqueta {
padding: 0.5rem 1.05rem;
border: 1.5px dashed var(--linha-forte);
font-weight: 700;
font-size: 0.92rem;
color: var(--noite);
}
/* ==========================================================================
13. COMO FUNCIONA
Secção azul-noite: quatro passos ligados por costura, números em carimbo.
========================================================================== */
.passos {
display: grid;
grid-template-columns: repeat(4, 1fr);
--gap-passos: var(--e6);
gap: var(--gap-passos);
counter-reset: passo;
}
.passo { position: relative; }
/* A costura que liga um passo ao seguinte, à altura dos carimbos */
.passo:not(:last-child)::after {
content: "";
position: absolute;
top: 25px;
left: 68px;
right: calc(-2.5rem + 8px);
height: 2px;
background-image: repeating-linear-gradient(90deg,
var(--linha-clara) 0 9px, transparent 9px 17px);
}
/* O carimbo: número dentro de um selo com anel */
.passo__carimbo {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: var(--e3);
border: 2px solid var(--papel);
border-radius: 50%;
font-family: var(--f-titulo);
font-size: 1.3rem;
color: var(--papel);
box-shadow: 0 0 0 5px var(--noite), 0 0 0 6.5px rgba(244, 246, 249, 0.35);
background-color: var(--noite);
position: relative;
z-index: 1;
}
.passo--opcional .passo__carimbo { border-style: dashed; }
.passo__titulo {
color: var(--papel);
font-size: 1.35rem;
margin-bottom: var(--e1);
}
.passo__selo {
display: inline-block;
margin-left: 0.5rem;
padding: 0.14rem 0.55rem;
border: 1.5px dashed var(--linha-clara);
font-family: var(--f-texto);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--sec-escuro);
vertical-align: middle;
}
.passo__texto {
color: var(--sec-escuro-mais);
font-size: 0.99rem;
margin: 0;
}
/* O passo 2 leva aos planos: os caminhos possíveis (uma página, serviços,
loja) estão lá, e repeti-los aqui era dizer o mesmo duas vezes */
.passo__planos { margin: var(--e2) 0 0; }
.passo__link {
font-weight: 700;
color: var(--laranja-esc);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1.5px;
}
.passo__link:hover { text-decoration-thickness: 2.5px; }
/* ==========================================================================
14. TABELA DOS PLANOS
Quatro planos, com preço. Antes eram duas formas de trabalhar, numa
tabela estreita ao lado da cabeça; com quatro colunas a tabela precisa
da largura toda, por isso a cabeça passa para cima.
Em ecrã largo, uma tabela para comparar. No telemóvel (600px para
baixo) a tabela esconde-se e entra um cartão por plano, a deslizar
(secção 14b). Os dois saem do mesmo script e usam as mesmas chaves de
texto, por isso cada preço continua escrito num sítio só.
========================================================================== */
/* Sem overflow nesta caixa, de propósito: uma caixa com overflow passa
a ser ela o contentor do sticky, e a linha dos nomes deixava de ficar
presa ao descer a página. */
.compare { position: relative; }
.compare:focus-visible { outline: 2px solid var(--noite); outline-offset: var(--e1); }
.compare__table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
text-align: left;
}
/* As larguras saem da primeira linha (layout fixo): a dos nomes e as
três dos planos, iguais entre si. */
/* 24% e não mais: com a coluna das fases ao lado, a 26% as colunas dos
planos ficavam com 195px e o preço do Completo ("490 € + 20 €/mês")
partia em duas linhas. */
.compare__corner { width: 24%; border: 0; }
/* A linha dos nomes fica presa por baixo da barra do site enquanto se
desce a tabela: a meio das funcionalidades, sabe-se sempre que coluna
é que plano. Leva fundo próprio porque as linhas passam por baixo. */
.compare__table > thead > tr:first-child > * {
position: sticky;
top: var(--altura-nav);
z-index: 3;
background-color: var(--papel-alt);
}
/* Em cima: se um plano voltar a ter um nome em duas linhas
(.compare__plan-extra), os outros ficam alinhados pela primeira. */
.compare__plan {
padding: var(--e3) var(--e2) var(--e1);
vertical-align: top;
text-align: center;
font-family: var(--f-texto);
font-weight: 700;
font-size: 0.98rem;
line-height: 1.3;
color: var(--noite);
}
.compare__plan-extra { display: block; }
/* O Completo é o da casa: é o plano em que a Mondra fica a cuidar do
site depois de o entregar, o mesmo papel que o "Site + Apoio
Contínuo" tinha na tabela antiga. */
/* O nome do destacado, preso, tem de tapar o que passa por baixo: o
tom da coluna vai por cima de um fundo cheio, e não sozinho. */
.compare__table > thead > tr:first-child > .compare__plan--featured {
background: linear-gradient(rgba(22, 48, 79, 0.07), rgba(22, 48, 79, 0.07)), var(--papel-alt);
border-radius: var(--e1) var(--e1) 0 0;
/* Entre este nome (fundo opaco, preso) e o preço por baixo (fundo
transparente) ficava uma fresta de meio píxel, e via-se o fundo da
secção como uma linha clara. Este píxel tapa-a, na cor que o tom da
coluna dá sobre o papel-alt. */
box-shadow: 0 1px 0 rgb(219, 225, 232);
}
.compare__cell--featured,
.compare__topo--featured { background-color: rgba(22, 48, 79, 0.07); }
/* --- Topo de cada plano: preço, para quem é, botão ---
Tudo o que decide a escolha fica junto do nome, à vista logo à
entrada, em vez de no fim de vinte linhas. Cada coisa na sua linha
da tabela, para as quatro colunas ficarem alinhadas entre si. */
.compare__topo {
padding: 0 var(--e2) var(--e2);
text-align: center;
vertical-align: top;
}
.compare__linha-botao > * {
padding-bottom: var(--e4);
border-bottom: 2px solid var(--linha-forte);
}
.compare__linha-botao > .compare__topo--featured { border-bottom-color: var(--noite); }
/* O "Ideal para" são frases, e frases centradas linha a linha leem-se
mal: à esquerda. */
.compare__perfil {
padding-top: var(--e1);
text-align: left;
font-size: 0.88rem;
line-height: 1.4;
color: var(--tinta);
}
.compare__escolher {
width: 100%;
padding: var(--e1) var(--e2);
font-size: 0.92rem;
}
/* Os três que não são o destacado: contorno na cor da noite, que no
fundo claro tem peso de leitura sem competir com o laranja. */
.compare__escolher:not(.btn--acento) {
border-color: var(--noite);
color: var(--noite);
}
.compare__escolher:not(.btn--acento):hover {
background-color: var(--noite);
color: var(--papel);
}
/* --- Fases ---
Cada grupo de linhas (Desenvolvimento, Pós-lançamento) tem a fase
numa coluna própria à esquerda, escrita na vertical e a ocupar as
linhas todas do grupo. Lê-se de baixo para cima, como a lombada de
um livro na prateleira — o mesmo sentido do resto do site.
A largura desta coluna está numa variável porque a coluna dos nomes,
que também fica presa quando a tabela desliza, tem de começar onde
esta acaba. */
.compare { --fase-l: 2.75rem; }
.compare__corner--fase { width: var(--fase-l); }
.compare__fase {
position: sticky;
left: 0;
z-index: 2;
background-color: var(--papel-alt);
padding: var(--e2) var(--e2) var(--e2) 0;
text-align: center;
vertical-align: middle;
border-right: 1.5px solid var(--linha-forte);
}
.compare__fase > span {
display: inline-block;
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
font-family: var(--f-texto);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sec-claro);
}
/* A última linha (exemplos) não tem fase:
a célula existe só para as colunas continuarem alinhadas. */
.compare__fase--vazia { border-right: 0; }
/* O que separa um grupo do seguinte é uma linha cheia por cima da
primeira linha de cada um, por baixo da fase e dos valores. */
.compare__grupo + .compare__grupo > tr:first-child > *,
.compare__fim > tr:first-child > * {
border-top: 1.5px solid var(--linha-forte);
}
/* A última linha de cada fase não leva tracejado: por baixo dela vem
logo a linha cheia da fase seguinte, e viam-se as duas. */
.compare__grupo > tr:last-child > * { border-bottom: 0; }
/* --- Nomes das linhas --- */
.compare__feature {
position: sticky;
left: var(--fase-l);
z-index: 1;
/* Fundo igual ao da secção: presa à esquerda, esta coluna passa por
cima das outras quando a tabela desliza. */
background-color: var(--papel-alt);
padding: var(--e1) var(--e3);
font-weight: 500;
font-size: 0.95rem;
line-height: 1.35;
color: var(--tinta);
border-bottom: 1.5px dashed var(--linha);
}
/* Subtítulos (Identidade digital, Alterações ao site): ocupam só a
coluna dos nomes, e as quatro dos planos levam células vazias, para a
coluna destacada seguir sem buracos de cima a baixo. */
.compare__feature--sub {
padding-top: var(--e2);
font-weight: 700;
}
.compare__sub > * { border-bottom: 0; }
/* A linha do portal leva o ícone da app (o M) depois do nome, e é um link
para a página do portal. O sublinhado fica só nas palavras: debaixo do
ícone parecia um risco solto. O mesmo vale para o Google e o Maps. */
.compare__portal {
display: inline-flex;
align-items: center;
gap: var(--e1);
text-decoration: none;
}
.compare__portal img { flex-shrink: 0; width: 20px; height: 20px; border-radius: 5px; }
/* As linhas da pesquisa Google e do Google Maps levam o logo oficial, do
mesmo tamanho do M do portal. object-fit: o pin do Maps é mais alto
do que largo e não pode ficar esticado. */
.compare__com-icone { display: inline-flex; align-items: center; gap: var(--e1); }
.compare__com-icone img { flex-shrink: 0; width: 20px; height: 20px; object-fit: contain; }
.compare__portal span {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1.5px;
}
.compare__portal:hover span { text-decoration-thickness: 2.5px; }
.compare__feature--filha {
padding-left: var(--e6);
font-weight: 400;
}
.compare__detail {
display: block;
font-weight: 400;
font-size: 0.82rem;
color: var(--sec-claro);
}
/* Com quatro colunas é fácil saltar de linha a meio: a linha por baixo
do rato escurece um pouco. Sombra por dentro e não fundo, para somar
ao tom da coluna destacada em vez de o apagar. A fase fica de fora:
ocupa o grupo todo e acendia-se inteira. */
@media (hover: hover) {
.compare__grupo > tr:not(.compare__sub):hover > :not(.compare__fase),
.compare__fim > tr:hover > :not(.compare__fase) {
box-shadow: inset 0 0 0 100vmax rgba(22, 48, 79, 0.04);
}
}
/* --- Valores --- */
.compare__cell {
padding: var(--e1) var(--e2);
text-align: center;
vertical-align: middle;
border-bottom: 1.5px dashed var(--linha);
}
.compare__cell--texto {
font-size: 0.88rem;
line-height: 1.35;
color: var(--tinta);
}
/* Em bloco e não em linha: em linha, o ícone de 20px sentava-se numa
linha de texto e as linhas com visto ficavam 6px mais altas do que
as de texto, o que dava à tabela um ritmo irregular. */
.compare__check {
display: block;
width: 20px;
height: 20px;
margin: 0 auto;
color: var(--noite);
}
/* Extra opcional (hoje: os pagamentos no Profissional): não está
incluído mas pode juntar-se ao plano, por um preço fixo. Tem de se
distinguir do traço (não incluído) e do "Por orçamento" (texto
simples): é uma pastilha de contorno tracejado em terracota, com um
"+" à frente do preço, e a nota pequena por baixo. */
.compare__extra {
display: inline-flex;
align-items: center;
gap: 0.15em;
padding: 0.12rem 0.6rem;
border: 1.5px dashed var(--laranja-cla);
border-radius: 999px;
font-size: 0.85rem;
font-weight: 700;
line-height: 1.3;
color: var(--tinta);
white-space: nowrap;
}
.compare__extra-mais { color: var(--laranja-cla); }
.compare__extra-nota {
display: block;
margin-top: var(--e0);
font-size: 0.75rem;
line-height: 1.3;
color: var(--sec-claro);
}
/* Não incluído: um traço discreto; o significado real está no texto
escondido para leitores de ecrã */
.compare__cell--no::before {
content: "";
display: block;
width: 14px;
height: 2px;
margin: 0 auto;
background-color: var(--linha-forte);
}
/* Com marcadores, a lista não pode ficar centrada linha a linha: cada
marcador ficava numa posição diferente. Fica alinhada à esquerda por
dentro e é o bloco inteiro que se centra na coluna (inline-block, com
o text-align: center da célula). */
.compare__fim .compare__feature,
.compare__fim .compare__cell {
padding-top: var(--e2);
padding-bottom: var(--e2);
vertical-align: top;
border-bottom: 0;
}
.compare__fim .compare__cell--featured { border-radius: 0 0 var(--e1) var(--e1); }
.compare__exemplos {
display: inline-block;
margin: 0;
padding-left: var(--e3);
list-style: disc;
text-align: left;
}
.compare__exemplos li + li { margin-top: var(--e0); }
.compare__exemplos li::marker { color: var(--sec-claro); }
/* --- Preço (no topo de cada plano) ---
O preço normal riscado por cima, o de abertura por baixo e maior:
lê-se "era isto, agora é isto", que é a ordem em que um desconto se
percebe. O sozinho não é anunciado pelos leitores de ecrã, por
isso cada preço leva o seu nome escondido ("Preço normal:"). */
/* Um degrau mais escuro do que o --sec-claro: sobre o fundo da coluna
destacada, o --sec-claro dava 4.12:1, abaixo dos 4.5 do AA. Misturado
10% com a tinta dá 4.56:1 ali e 5.16:1 nas outras colunas. Sem
color-mix (browsers antigos) fica a tinta, que só é mais escura. */
.compare__antes {
display: block;
font-size: 0.85rem;
color: var(--tinta);
color: color-mix(in srgb, var(--sec-claro) 90%, var(--tinta));
}
.compare__agora {
display: block;
margin-top: var(--e0);
font-family: var(--f-texto);
font-weight: 700;
font-size: 1.6rem;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
line-height: 1.2;
color: var(--noite);
}
/* A mensalidade do Completo, por baixo do preço de entrada: no
mesmo tamanho ficava a parecer outro preço. */
.compare__mensal {
display: block;
font-size: 0.88rem;
font-weight: 700;
color: var(--noite);
}
/* ==========================================================================
14b. CARTÕES DOS PLANOS (só no telemóvel)
Um cartão por plano, numa faixa que desliza para o lado e pára sempre
com um cartão certo (scroll-snap). A faixa sai das margens do container
até à borda do ecrã, e cada cartão é um pouco mais estreito do que o
ecrã: vê-se um pedaço do seguinte, que é o que diz que há mais.
========================================================================== */
.planos { display: none; }
/* position: relative pela mesma razão da tabela antiga: os textos para
leitores de ecrã são position: absolute, e sem isto escapavam ao
recorte da faixa e davam scroll lateral à página inteira. */
.planos__faixa {
position: relative;
display: flex;
gap: var(--e3);
margin-inline: calc(-1 * var(--pad-lateral));
padding: var(--e0) var(--pad-lateral) var(--e1);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--pad-lateral);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.planos__faixa::-webkit-scrollbar { display: none; }
/* Duas colunas: o nome à esquerda e o preço à direita, na mesma linha;
tudo o resto ocupa as duas. */
.plano {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--e2);
align-content: start;
flex: 0 0 calc(100% - var(--e4));
scroll-snap-align: start;
padding: var(--e4) var(--e3);
background-color: var(--papel);
border: 1.5px solid var(--linha);
border-radius: var(--e1);
}
/* O Completo, como na tabela: o mesmo tom, e o contorno na cor da noite */
.plano--featured {
background: linear-gradient(rgba(22, 48, 79, 0.07), rgba(22, 48, 79, 0.07)), var(--papel);
border-color: var(--noite);
}
/* Alinhados entre si ao deslizar: os quatro cartões partilham as mesmas
linhas (subgrid). Sem isto, um "Ideal para" de três linhas empurrava
o botão e a lista inteira desse cartão para baixo dos outros.
O número de linhas (--linhas) vem do HTML, que o script calcula a
partir das linhas da tabela: o da faixa conta o cartão inteiro, o de
cada lista conta só as dela. Browsers sem subgrid ficam com os cartões
lado a lado, só que sem este alinhamento. */
@supports (grid-template-rows: subgrid) {
.planos__faixa {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(var(--linhas), auto);
grid-auto-columns: calc(100% - var(--e4));
column-gap: var(--e3);
row-gap: 0;
}
.plano,
.plano__lista {
display: grid;
grid-template-rows: subgrid;
grid-row: span var(--linhas);
row-gap: 0;
}
}
/* --- Topo: nome, preço, para quem é, botão --- */
.plano__nome {
margin: 0;
font-family: var(--f-texto);
font-size: 1.05rem;
font-weight: 700;
line-height: 1.3;
color: var(--noite);
}
.plano__extra { display: block; }
.plano > * { grid-column: 1 / -1; }
.plano > .plano__nome { grid-column: 1; grid-row: 1; }
/* O preço sobe para a linha do nome, encostado à direita. A linha que
era dele fica vazia e mede zero. */
.plano > .plano__preco {
grid-column: 2;
grid-row: 1;
margin: 0;
text-align: right;
}
.plano__preco .compare__agora { margin-top: 0; }
.plano__perfil {
margin: var(--e2) 0 var(--e3);
font-size: 0.92rem;
line-height: 1.45;
color: var(--tinta);
}
/* --- A lista do que inclui ---
Todas as linhas da tabela, mesmo as que o plano não tem: é o traço
nas que faltam que mostra o que se ganha no plano seguinte. */
.plano__fase {
margin: var(--e3) 0 var(--e0);
padding-top: var(--e2);
border-top: 1.5px solid var(--linha-forte);
font-family: var(--f-texto);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sec-claro);
}
.plano__lista {
margin: 0;
padding: 0;
list-style: none;
}
.plano__item {
display: grid;
grid-template-columns: var(--e4) minmax(0, 1fr);
column-gap: var(--e1);
align-items: start;
padding: var(--e0) 0;
font-size: 0.92rem;
line-height: 1.35;
color: var(--tinta);
}
/* O que o plano não tem fica bem apagado, para o que tem saltar à
vista ao deslizar. Fica abaixo do contraste AA de propósito: a
informação não se perde, porque o traço e o "Não incluído" escondido
(para leitores de ecrã) já dizem que falta. */
.plano__item--no { opacity: 0.4; }
/* Realce ao deslizar: as linhas que mudam em relação ao cartão de onde
se veio (o main.js põe-lhes .is-mudou) acendem em terracota e apagam
devagar, e o visto que aparece entra a crescer. Só acontece com
movimento permitido: o main.js não põe a classe com
prefers-reduced-motion. */
.plano__item {
margin-inline: calc(-1 * var(--e1));
padding-inline: var(--e1);
border-radius: var(--e0);
}
/* Depois da regra de cima, que lhe tirava o recuo */
.plano__item--filha { padding-left: calc(var(--e1) + var(--e3)); }
.plano__item.is-mudou { animation: plano-muda 1.4s ease-out; }
.plano__item.is-mudou .compare__check { animation: plano-visto 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes plano-muda {
0%, 25% { background-color: rgba(222, 116, 64, 0.22); }
100% { background-color: rgba(222, 116, 64, 0); }
}
@keyframes plano-visto {
from { transform: scale(0); }
to { transform: scale(1); }
}
/* O visto e o traço ocupam a mesma caixa, para os textos começarem
todos na mesma vertical. */
.plano__marca {
display: block;
width: 18px;
height: 18px;
margin: 0;
}
.plano__marca--no {
position: relative;
}
.plano__marca--no::before {
content: "";
position: absolute;
top: 50%;
left: 2px;
width: 14px;
height: 2px;
background-color: var(--linha-forte);
}
.plano__texto .compare__detail { display: block; }
/* Extra opcional no cartão: um "+" em terracota no lugar do visto, e a
pastilha do preço com a nota ao lado */
.plano__marca--extra {
font-size: 1.15rem;
font-weight: 700;
line-height: 18px;
text-align: center;
color: var(--laranja-cla);
}
.plano__item--extra .plano__valor { margin-top: var(--e0); }
.plano__item--extra .compare__extra-nota { display: inline; margin: 0 0 0 var(--e1); font-weight: 400; }
.plano__valor {
display: block;
font-size: 0.82rem;
font-weight: 700;
color: var(--noite);
}
.plano__sub {
padding: var(--e1) 0 0;
font-size: 0.92rem;
font-weight: 700;
color: var(--tinta);
}
.plano__exemplos { font-size: 0.92rem; color: var(--tinta); }
/* --- Pontos ---
Um por plano. O alvo de toque é o botão inteiro (44px, o mínimo para
um dedo); o ponto que se vê é só o ::before. */
.planos__pontos {
display: flex;
justify-content: center;
margin-top: var(--e1);
}
.planos__ponto {
position: relative;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.planos__ponto::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
border-radius: 50%;
background-color: var(--linha-forte);
transition: transform 0.18s ease, background-color 0.18s ease;
}
.planos__ponto[aria-current="true"]::before {
background-color: var(--noite);
transform: scale(1.35);
}
.planos__ponto:focus-visible { outline: 2px solid var(--noite); outline-offset: calc(-1 * var(--e1)); }
/* ==========================================================================
15. CONTACTO E FORMULÁRIO
Conversa à esquerda, formulário à direita, sem caixa à volta:
os campos assentam direto no papel, com traço firme.
========================================================================== */
.fala {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: clamp(2.5rem, 6vw, 5.5rem);
align-items: start;
}
.fala__direto {
margin-top: var(--e5);
color: var(--sec-claro);
}
.form {
display: grid;
gap: var(--e4);
}
.form__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--e4);
}
.form__row {
display: flex;
flex-direction: column;
gap: var(--e1);
}
.form__label {
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sec-claro);
}
.form__input {
width: 100%;
padding: 0.85rem 0.95rem;
font-family: var(--f-texto);
font-size: 1rem;
color: var(--tinta);
background-color: var(--branco);
border: 1.5px solid var(--linha-forte);
border-radius: 2px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form__input:focus {
outline: none;
border-color: var(--noite);
box-shadow: 0 0 0 3px rgba(30, 74, 56, 0.16);
}
.form__input:focus-visible {
outline: 3px solid var(--noite);
outline-offset: 2px;
}
.form__textarea {
resize: vertical;
min-height: 140px;
}
/* ==========================================================================
16. RODAPÉ
Azul-noite, rematado por uma linha clara no topo.
========================================================================== */
/* Sem costura no topo: a passagem do contacto (papel) para o rodapé
(azul-noite) já se vê pela mudança de cor, e o tracejado, agora que
não há grelha por baixo, ficava uma linha solta — com píxeis do
campo a atravessá-la por cima. O motivo tracejado mantém-se onde
liga coisas entre si (a timeline do "Como funciona", por exemplo);
o que sai é só este remate. */
.site-footer {
color: var(--sec-escuro);
padding-block: var(--e8);
position: relative;
}
.footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e5);
flex-wrap: wrap;
}
.footer__marca { color: var(--papel); }
.footer__tagline {
margin: var(--e1) 0 0;
font-size: 0.95rem;
color: var(--sec-escuro);
}
/* margin 0: é um que não é o último do rodapé, e a margem de baixo
dos parágrafos (1rem) puxava-o para cima dos outros da linha */
.footer__legal { margin: 0; font-size: 0.85rem; }
.footer__copy { margin: 0; }
.footer__social {
margin: 0;
display: flex;
align-items: center;
gap: var(--e4);
flex-wrap: wrap;
}
.site-footer .link { color: var(--papel); }
.site-footer .link:hover { color: var(--branco); }
.footer__icon { width: 20px; height: 20px; }
/* O selo da Zaask: redondo, já com as cores dela, por isso sem moldura */
.footer__selo { display: block; flex: none; border-radius: 50%; }
.footer__selo img { width: 4.5rem; height: 4.5rem; }
.footer__selo:hover img { opacity: 0.9; }
/* ==========================================================================
17. REVELAÇÃO AO SCROLL
Os elementos com data-reveal sobem suavemente ao entrar no ecrã.
Só com JavaScript (classe .js no html); sem JS fica tudo visível.
========================================================================== */
@keyframes subir {
from { opacity: 0; transform: translateY(22px); }
}
html.js [data-reveal] { opacity: 0; }
html.js [data-reveal].is-visible {
opacity: 1;
animation: subir 0.55s ease backwards;
}
/* Cascata entre irmãos.
Os passos do "Como funciona" saíram daqui: têm sequência própria
(secção 17b), porque a linha tracejada tem de entrar no meio. */
html.js .indice > [data-reveal].is-visible:nth-child(2) { animation-delay: 0.08s; }
html.js .indice > [data-reveal].is-visible:nth-child(3) { animation-delay: 0.16s; }
html.js .indice > [data-reveal].is-visible:nth-child(4) { animation-delay: 0.24s; }
/* ==========================================================================
17b. SEQUÊNCIA DO "COMO FUNCIONA"
A timeline constrói-se em vez de aparecer feita: carimbo 1, o troço
que o liga ao 2, o carimbo 2, e assim por diante. Cada texto entra
pouco depois do seu carimbo, e o link para os planos, no passo 2,
entra logo a seguir ao texto.
O relógio está todo em --t, uma variável por passo. Mudar a cadência
é mexer nesses quatro valores; os deslocamentos internos (texto,
linha, link) são calculados a partir dela.
Cadência: 0.75s entre carimbos. Total, do carimbo 1 ao último texto,
cerca de 3.1s. O passo 4 tem 0.15s de pausa extra e uma entrada mais
suave, para se ler como "e depois, se quiseres" e não como mais um
da lista, sem precisar de cor nova.
Antes de tudo isso, uma pausa de arranque (--t-arranque): a secção
entra no ecrã e fica meio segundo parada antes do primeiro carimbo
acender, para não começar a mexer-se no instante exato em que chega.
Só anima transform e opacity. A linha é um ::after com gradiente,
por isso cresce por scaleX (scaleY em telemóvel, onde é vertical).
Sem JavaScript nada disto se aplica e a secção fica visível e legível.
========================================================================== */
.js .passos--sequencia { --t-arranque: 0.5s; --t-passo: 0.75s; }
.js .passos--sequencia .passo:nth-child(1) { --t: var(--t-arranque); }
.js .passos--sequencia .passo:nth-child(2) { --t: calc(var(--t-arranque) + var(--t-passo)); }
.js .passos--sequencia .passo:nth-child(3) { --t: calc(var(--t-arranque) + var(--t-passo) * 2.01); }
.js .passos--sequencia .passo:nth-child(4) { --t: calc(var(--t-arranque) + var(--t-passo) * 3.23); } /* 2.27 + 0.15 de pausa */
/* Estado de partida */
.js .passos--sequencia .passo__carimbo { opacity: 0; transform: scale(0.8); }
.js .passos--sequencia .passo__titulo,
.js .passos--sequencia .passo__texto { opacity: 0; transform: translateY(10px); }
.js .passos--sequencia .passo__planos { opacity: 0; transform: translateY(8px); }
.js .passos--sequencia .passo:not(:last-child)::after {
transform: scaleX(0);
transform-origin: left;
}
/* Disparo */
.js .passos--sequencia.is-on .passo__carimbo {
animation: passo-carimbo 0.40s cubic-bezier(0.34, 1.4, 0.64, 1) both;
animation-delay: var(--t);
}
.js .passos--sequencia.is-on .passo__titulo,
.js .passos--sequencia.is-on .passo__texto {
animation: passo-entra 0.53s ease both;
animation-delay: calc(var(--t) + 0.15s);
}
.js .passos--sequencia.is-on .passo:not(:last-child)::after {
animation: passo-linha 0.42s ease both;
animation-delay: calc(var(--t) + 0.33s);
}
/* O link para os planos, no passo 2, entra logo depois do texto */
.js .passos--sequencia.is-on .passo__planos {
animation: passo-entra 0.46s ease both;
animation-delay: calc(var(--t) + 0.35s);
}
/* O passo opcional entra mais macio, de mais perto */
.js .passos--sequencia .passo--opcional .passo__carimbo { transform: scale(0.88); }
.js .passos--sequencia.is-on .passo--opcional .passo__carimbo {
animation-name: passo-carimbo-opcional;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes passo-carimbo {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}
@keyframes passo-carimbo-opcional {
from { opacity: 0; transform: scale(0.88); }
to { opacity: 1; transform: scale(1); }
}
@keyframes passo-entra {
to { opacity: 1; transform: translateY(0); }
}
@keyframes passo-linha { to { transform: scaleX(1); } }
@keyframes passo-linha-v { to { transform: scaleY(1); } }
/* ==========================================================================
18. ECRÃS PEQUENOS
O foco desta fase é desktop; aqui garante-se só que nada parte.
========================================================================== */
@media (min-width: 1024px) {
.nav__toggle { display: none; }
.nav__menu {
position: static;
order: 2;
margin-left: auto;
width: auto;
height: auto;
padding: 0;
background: none;
border: 0;
box-shadow: none;
overflow: visible;
transform: none;
visibility: visible;
}
.nav__lang { order: 3; margin-left: 1rem; }
.nav__conta { order: 4; }
.nav__list {
flex-direction: row;
align-items: center;
gap: 0.35rem;
}
.nav__link {
position: relative;
padding: 0.5rem 0.75rem;
font-size: 0.98rem;
color: inherit;
white-space: nowrap;
}
.nav__link:hover { color: inherit; }
/* Sublinhado de costura que cresce no hover e marca a secção ativa */
.nav__link::after {
content: "";
position: absolute;
left: 0.75rem;
right: 0.75rem;
bottom: 2px;
height: 2px;
background-image: repeating-linear-gradient(90deg,
currentColor 0 6px, transparent 6px 11px);
opacity: 0;
transition: opacity 0.18s ease;
}
.nav__link:hover::after,
.nav__link.is-active::after { opacity: 1; }
.nav__link.is-active { color: inherit; font-weight: 700; }
.nav__link--cta {
margin: 0 0 0 0.75rem;
background-color: var(--laranja-esc);
color: var(--tinta);
padding: 0.62rem 1.15rem;
}
.nav__link--cta::after { display: none; }
.nav__link--cta:hover { background-color: var(--laranja-cla); color: var(--tinta); }
/* --- Grupos com painel ---
O botão do grupo parece um link da barra, com uma seta que roda ao
abrir. O painel é um cartão branco por baixo, sempre em tinta, seja
a barra transparente (sobre o hero) ou clara. */
.nav__item--grupo { position: relative; }
.nav__grupo {
width: auto;
margin: 0;
padding: 0.5rem 0.75rem;
font-size: 0.98rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: inherit;
cursor: pointer;
}
.nav__grupo::after { right: calc(0.75rem + 16px); }
.nav__seta { display: block; }
.nav__grupo[aria-expanded="true"] .nav__seta { transform: rotate(180deg); }
.nav__grupo[aria-expanded="true"]::after { opacity: 1; }
/* O grupo da secção à vista (ou da página onde se está) fica marcado
como os links: a negrito e com o tracejado */
.nav__item--grupo:has(.nav__sublink.is-active) > .nav__grupo,
.nav__item--grupo.is-atual > .nav__grupo { font-weight: 700; }
.nav__item--grupo:has(.nav__sublink.is-active) > .nav__grupo::after,
.nav__item--grupo.is-atual > .nav__grupo::after { opacity: 1; }
.nav__painel {
position: absolute;
top: calc(100% + var(--e2));
left: 50%;
z-index: 110;
width: 15rem;
padding: var(--e2);
border: 1px solid var(--linha);
border-radius: var(--e2);
background-color: var(--branco);
box-shadow: 0 2px 6px rgba(18, 41, 74, 0.08), 0 24px 60px rgba(18, 41, 74, 0.18);
color: var(--tinta);
opacity: 0;
visibility: hidden;
transform: translate(-50%, 8px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
/* Ponte invisível entre o botão e o painel: o rato atravessa o espaço
entre os dois sem o painel se fechar */
.nav__painel::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: var(--e2);
}
.nav__item--grupo.is-open > .nav__painel {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
.nav__sublink { padding: var(--e2); }
/* O painel do portal tem duas colunas: as entradas e um cartão */
.nav__painel--portal {
display: grid;
grid-template-columns: minmax(0, 1fr) 11rem;
gap: var(--e2);
width: 28rem;
}
.nav__cartao {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--e2);
padding: var(--e3);
border-radius: var(--e1);
background:
radial-gradient(120% 90% at 100% 0%, rgba(222, 116, 64, 0.35), transparent 60%),
var(--noite);
color: var(--papel);
text-decoration: none;
transition: transform 0.2s ease;
}
.nav__cartao:hover { transform: translateY(-2px); }
.nav__cartao:focus-visible { outline: 2px solid var(--noite); outline-offset: 2px; }
.nav__cartao img { width: 2.75rem; height: 2.75rem; border-radius: var(--e1); }
.nav__cartao-texto { font-family: var(--f-titulo); font-size: 1.05rem; line-height: 1.25; }
.nav__cartao-link { font-size: 0.85rem; font-weight: 700; color: var(--laranja-esc); }
}
@media (max-width: 1023px) {
/* A barra é mais baixa; o respiro das secções já vem da escala. */
:root { --altura-nav: 56px; } /* 44px de conteúdo + 6px em cima e em baixo */
/* Sobre o hero o menu-painel precisa de contraste: o painel é papel,
por isso os links ficam sempre em tinta (já definidos acima) */
}
@media (max-width: 899px) {
.hero { padding-bottom: var(--e8); }
.indice__linha {
grid-template-columns: 64px minmax(0, 1fr);
gap: 0.5rem 1.25rem;
}
.indice__texto { grid-column: 2; }
.quem { grid-template-columns: 1fr; }
.quem__figura { max-width: 420px; }
.passos { grid-template-columns: 1fr; --gap-passos: var(--e6); }
.passo:not(:last-child)::after {
top: 60px;
bottom: calc(var(--gap-passos) * -1);
left: 25px;
right: auto;
width: 2px;
height: auto;
background-image: repeating-linear-gradient(180deg,
var(--linha-clara) 0 9px, transparent 9px 17px);
}
/* Aqui a timeline é vertical, por isso a linha desenha-se de cima
para baixo e não da esquerda para a direita */
.js .passos--sequencia .passo:not(:last-child)::after {
transform: scaleY(0);
transform-origin: top;
}
.js .passos--sequencia.is-on .passo:not(:last-child)::after {
animation-name: passo-linha-v;
}
.fala { grid-template-columns: 1fr; }
.form__grid { grid-template-columns: 1fr; }
.banda-video { height: 40vh; }
}
@media (max-width: 600px) {
/* --- Ajustes de telemóvel pedidos depois de ver no aparelho --- */
/* A sequência do "Como funciona" abria depressa de mais: em ecrã
pequeno os quatro passos ficam empilhados e o olho tem de descer,
não varrer. Só o compasso muda; em desktop fica como estava. */
.js .passos--sequencia { --t-arranque: 0.8s; --t-passo: 1.15s; }
/* "O que fazemos" e "Como funciona" fazem a mesma coisa (uma lista
de quatro) e estavam em corpos diferentes: 24px/16.8px contra
18.4px/14.7px. Aqui igualam-se, e as linhas ganham ar. */
.indice__titulo { font-size: 1.15rem; }
.indice__texto { font-size: 0.92rem; }
.indice__linha { padding-block: var(--e4); min-height: 0; }
/* O vídeo do portátil ficava com o dobro da altura que tem em ecrã
largo, e sem o corte. Metade da altura, cortada por baixo: o que
interessa (o ecrã do portátil) está em cima. */
.banda-video--site { height: 20vh; }
/* Com a faixa mais baixa, o portátil ficava pequeno no meio de muito
ambiente. O zoom aproxima-o sem mexer na altura da faixa: a origem
em 15% mantém o enquadramento no mesmo sítio do object-position, e
como é transform não custa nada a pintar. */
.banda-video--site video { transform: scale(1.55); transform-origin: center 15%; }
/* O primeiro frame entra por background-image na faixa, e não é
afetado pelo transform do vídeo: sem isto via-se o poster ao
tamanho normal e o vídeo a saltar para dentro ao arrancar.
155% da largura dá o mesmo enquadramento que o scale. */
.banda-video--site { background-size: 155% auto; }
/* --- Planos ---
Em 375px as cinco colunas da tabela não cabem: em vez dela, os
cartões (secção 14b). */
.compare { display: none; }
.planos { display: block; }
/* --- Comparador ---
Num palco de ~310px o punho de 48px e as etiquetas de desktop
pesam demais; descem um degrau. */
.comparar__punho { width: 40px; height: 40px; }
.comparar__punho svg { width: 17px; height: 17px; }
.comparar__etiqueta { font-size: 0.68rem; padding: 0.24rem 0.55rem; top: 10px; }
.comparar__etiqueta--antes { left: 10px; }
.comparar__etiqueta--depois { right: 10px; }
.comparar__factos { bottom: 10px; gap: 4px; }
.comparar__factos--antes { left: 10px; }
.comparar__factos--depois { right: 10px; }
.comparar__factos li { font-size: 0.62rem; padding: 0.2rem 0.5rem; }
/* Só aqui o ecrã inteiro rende: a página dá ao comparador a largura
do container menos os 64px de margem, e o ecrã inteiro devolve-os.
Acima dos 600px (tablet, telemóvel deitado) a página já lhe dá
mais espaço do que o ecrã inteiro conseguiria, porque aí é a
ALTURA que limita. */
.comparar__dica {
display: block;
margin: var(--e2) 0 0;
font-size: 0.78rem;
color: var(--sec-claro);
}
.comparar__palco { cursor: zoom-in; }
/* --- Alvos de toque ---
Botões de idioma e links do rodapé com área útil de dedo (~40px) */
.lang__actual { min-height: 40px; padding: 0 var(--e1); }
.lang__btn { min-height: 44px; }
.site-footer .link { padding: var(--e1) 0; }
/* --- Secções à altura do ecrã ---
Em telemóvel cada secção deve caber num ecrã (~810px). A escala
é a mesma, só desce um degrau: a secção passa de --e8 para --e6
e a cabeça de --e7 para --e4. A hierarquia mantém-se
(secção > cabeça > título > lombada). Além disso saem as duas
fotografias decorativas, que valiam 650px sem dizer nada. */
:root { --pad-seccao: var(--e6); --gap-cabeca: var(--e4); }
/* Os dois pisos de altura do desktop (45rem e 36rem) não servem
aqui. Numa coluna de 375px o conteúdo cresce em altura por si, e
onde não cresce o piso inventava espaço: em Exemplos, 470px de
conteúdo dentro de 720px de secção, com 250px de branco repartido
em cima e em baixo do comparador. Em telemóvel a altura vem do
conteúdo. */
#para-quem, #servicos, #processo, #exemplos, #trabalhar, #contacto {
min-height: 0;
}
.seccao__lead { font-size: 0.95rem; }
/* Hero só com texto: título, lead e botões num ecrã.
(.hero__direita já sai a partir dos 1040px, ver secção 7.) */
.hero { padding-top: calc(var(--altura-nav) + var(--e5)); padding-bottom: var(--e6); }
.hero__grelha { gap: 0; }
/* Para quem: fica o texto e as etiquetas; a moldura com vídeo é
decorativa e custava 415px */
.quem__figura { display: none; }
.quem { gap: 0; }
/* Processo: o carimbo passa para o lado do texto (em vez de por
cima), que é o desenho clássico de timeline em telemóvel e
poupa ~55px por passo */
/* --e1 (8px) entre passos deixava o texto de um passo colado ao
carimbo do seguinte: os quatro liam-se como um bloco só. --e3
separa-os e dá à linha tracejada espaço para se ver a ligar. */
.passos { --gap-passos: var(--e5); }
.passo {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
column-gap: var(--e2);
align-items: start;
}
.passo > :not(.passo__carimbo) { grid-column: 2; }
.passo:not(:last-child)::after { top: 44px; left: 19px; bottom: calc(var(--gap-passos) * -1); }
.passo__carimbo { width: 40px; height: 40px; margin-bottom: 0; }
/* O título alinha pelo CENTRO do carimbo, não pelo topo. Ocupa a
altura do carimbo (40px, que é a altura que a primeira linha da
grelha já tinha) e centra-se lá dentro, por isso isto não muda a
altura de nenhum passo. O margin-bottom sai: o espaço até ao texto
passa a vir da folga que a centragem deixa por baixo. */
.passo__titulo {
font-size: 1.15rem;
display: flex;
align-items: center;
flex-wrap: wrap;
min-height: 40px;
margin-bottom: 0;
}
.passo__texto { font-size: 0.92rem; }
/* Contacto: formulário mais compacto */
.fala { gap: var(--e3); }
.fala__direto { margin-top: var(--e1); }
.form, .form__grid { gap: var(--e3); }
.form__input { padding: var(--e1) var(--e2); }
.form__textarea { min-height: 70px; }
}
/* ==========================================================================
19. MOVIMENTO REDUZIDO
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
/* Tudo visível desde o início */
html.js [data-reveal] { opacity: 1; }
/* A timeline do "Como funciona" aparece já construída. O main.js nem
chega a marcar a lista, mas isto garante o estado final mesmo que
a classe lá esteja (por exemplo, se o utilizador ligar a preferência
com a página já aberta). */
.js .passos--sequencia .passo__carimbo,
.js .passos--sequencia .passo__titulo,
.js .passos--sequencia .passo__texto,
.js .passos--sequencia .passo__planos {
opacity: 1;
transform: none;
}
.js .passos--sequencia .passo:not(:last-child)::after { transform: none; }
/* O vídeo é travado no poster pelo main.js; aqui garante-se que
nenhum resto de movimento sobra nos botões */
.btn:hover .btn__icone { transform: none; }
}
/* ==========================================================================
19. PÁGINAS LEGAIS
Documentos longos para ler, não para folhear: coluna estreita, ritmo
vertical generoso, e numeração à vista para se poder citar uma secção
("ver o ponto 4"). Partilha a nav e o rodapé do site.
========================================================================== */
.legal {
padding-block: calc(var(--altura-nav) + var(--e6)) var(--e8);
background-color: var(--papel);
}
.legal__caixa { max-width: 46rem; }
.legal__titulo {
font-size: clamp(1.9rem, 3.4vw, 2.6rem);
line-height: 1.15;
margin: 0 0 var(--e5);
}
/* Ficha de identificação do documento: versão, datas, responsável. */
.legal__ficha {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: var(--e3);
margin: 0 0 var(--e6);
padding: var(--e4);
background-color: var(--papel-alt);
border-left: 3px solid var(--laranja-cla);
}
.legal__ficha dt {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sec-claro);
margin-bottom: 2px;
}
.legal__ficha dd { margin: 0; font-weight: 700; }
.legal__indice {
margin: 0 0 var(--e7);
padding: var(--e4);
border: 1px solid var(--linha);
}
.legal__indice h2 {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sec-claro);
margin: 0 0 var(--e3);
}
.legal__indice ol { margin: 0; padding-left: var(--e4); columns: 2; column-gap: var(--e5); }
.legal__indice li { margin-bottom: var(--e1); break-inside: avoid; }
.legal__indice a { color: var(--tinta); text-decoration: none; }
.legal__indice a:hover { color: var(--laranja-cla); text-decoration: underline; }
.legal section { margin-bottom: var(--e7); scroll-margin-top: calc(var(--altura-nav) + var(--e3)); }
.legal h2 {
font-size: 1.35rem;
line-height: 1.25;
margin: 0 0 var(--e3);
padding-bottom: var(--e2);
border-bottom: 1px solid var(--linha);
}
.legal p { line-height: 1.75; margin: 0 0 var(--e3); }
.legal ul { margin: 0 0 var(--e3); padding-left: var(--e4); }
.legal li { line-height: 1.7; margin-bottom: var(--e2); }
.legal strong { font-weight: 700; }
.legal__contacto { font-size: 1.1rem; font-weight: 700; }
.legal__fim { border: 0; border-top: 1px solid var(--linha); margin: var(--e6) 0 var(--e4); }
.legal__nota { font-size: 0.88rem; color: var(--sec-claro); }
@media (max-width: 600px) {
.legal__indice ol { columns: 1; }
}
/* Lista de definições dentro de um documento legal (ex.: os
subcontratantes nomeados): nome em destaque, descrição por baixo. */
.legal__lista { margin: 0 0 var(--e3); }
.legal__lista > div {
padding: var(--e2) 0 var(--e2) var(--e3);
border-left: 2px solid var(--linha);
margin-bottom: var(--e2);
}
.legal__lista dt { font-weight: 700; margin-bottom: 2px; }
.legal__lista dd { margin: 0; line-height: 1.7; color: var(--sec-claro); }
/* O índice repete o número da secção, para o que se lê nele ser
exatamente o que se lê no título. O marcador automático do
sairia a duplicar, por isso desliga-se. */
.legal__indice ol { list-style: none; padding-left: 0; }
.legal__num { font-weight: 700; color: var(--laranja-cla); }
.legal__idioma { margin: calc(var(--e5) * -1) 0 var(--e5); font-size: 0.9rem; }
/* ==========================================================================
IMPRESSÃO DAS PÁGINAS LEGAIS
Estes documentos são evidência: alguém vai querer guardá-los ou
enviá-los em PDF. Ctrl+P com "Guardar como PDF" passa a dar um
documento apresentável, em vez da página com a barra de navegação.
========================================================================== */
@media print {
.site-header,
.site-footer,
.skip-link,
.pixeis,
.rasto,
.legal__idioma { display: none !important; }
body { background: #fff; color: #000; }
.legal { padding: 0; background: #fff; }
.legal__caixa { max-width: none; padding: 0; }
/* Tinta é cara e o cinzento claro não sai legível em papel. */
.legal p, .legal li, .legal__nota, .legal__lista dd { color: #000; }
.legal__ficha { border-left: 2px solid #000; background: none; }
.legal__indice { border: 1px solid #999; }
.legal__num { color: #000; }
/* Um título nunca fica sozinho no fim de uma página, e uma secção
não se parte a meio se puder evitar-se. */
.legal h2 { break-after: avoid; page-break-after: avoid; }
.legal section { break-inside: avoid-page; margin-bottom: 1.2rem; }
.legal__lista > div { break-inside: avoid; }
/* O endereço de cada link fica à vista: num papel, um link azul
sublinhado não leva a lado nenhum. */
.legal a[href^="http"]::after,
.legal a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
.legal__indice a::after { content: none; }
a { color: #000; text-decoration: none; }
}
@page {
margin: 18mm 16mm;
}