/* ============================================================
Escola HL — Escola de Condução, Faro
O desenho vem do mundo do cliente: as chapas de matrícula
portuguesas. Campo âmbar, faixa escura com o "P", e o código da
categoria em letra pesada. É por isso que este site não se parece
com o da Barbearia Lusa apesar de sair da mesma arquitetura.
⚠️ REGRA QUE NÃO SE PODE QUEBRAR: o âmbar #FFBB00 sobre fundo claro
dá 1,7 de contraste, e o mínimo legível é 4,5. O âmbar NUNCA é cor
de letra neste site — é sempre um campo, com texto escuro por cima
(aí dá 12,6). Se alguém escrever "color: var(--ambar)" num texto,
está a partir a acessibilidade do site.
============================================================ */
/* ---------- Tipos de letra, servidos por nós ----------
Ver fonts/LEIA-ME.txt. Nunca pôr sem .btn) e que
entre os 769px e os 1024px ela nao cabe — esta no historico do git. */
/* ---------- Redes no cabecalho ----------
⚠️ SEM MOLDURA, por pedido da escola a 18 de setembro de 2026 —
escreveram "s/ linhas a volta" com uma seta a apontar para aqui. Ate
ai eram botoes quadrados de filete visivel.
O ALVO DE TOQUE NAO ENCOLHEU: o elemento continua com 2,35rem por
2,35rem, so deixou de ter risco a marcar onde acaba. Nao trocar isto
por um solto — o dedo precisa da caixa, mesmo sem a ver.
O foco tambem nao se perdeu: quem navega de teclado continua a ver o
anel preto da regra ":focus-visible" la em cima, que e desenhada por
fora do elemento e nao depende do filete. Confirmado com Tab. */
.nav-redes { display: flex; align-items: center; gap: 0.4rem; }
/* ⚠️ O :not(.btn) da regra ".site-nav a" ja apanha estes links e da-lhes
a cor grafite do menu — e o que se quer. O que e preciso e desmontar o
"display: block" que a versao de telemovel poe em ".site-nav a", senao
os botoes esticavam a largura toda do menu. */
.rede-ic-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.35rem;
height: 2.35rem;
flex: none;
padding: 0;
border: 2px solid transparent;
border-radius: 5px;
transition: transform var(--dur) var(--ease),
background-color var(--dur) var(--ease),
color var(--dur-rapido) var(--ease);
}
/* Um bocadinho maior agora que nao ha moldura a dar-lhe corpo: sem o
filete, o simbolo sozinho parecia mais pequeno do que era. */
.rede-ic-btn .rede-ic { width: 1.2rem; height: 1.2rem; }
/* Sem filete, o hover passou a ser um fundo. E preciso alguma coisa:
um icone que nao responde ao rato nao parece clicavel. */
.rede-ic-btn:hover,
.rede-ic-btn:focus-visible {
background: rgba(28, 30, 33, 0.07);
color: var(--asfalto);
transform: translateY(-2px);
}
.rede-ic-btn:active { transform: translateY(0); transition-duration: var(--dur-rapido); }
/* ---------- O WhatsApp do cabecalho, a verde ----------
📌 Pedido do Pedro a 27 de setembro de 2026: quadrado verde com o
simbolo a branco, que e como toda a gente o reconhece no telemovel.
📌 E a 21 de outubro de 2026, outra vez pedido dele: O MESMO VERDE DO
BOTAO DO TOPO (ver "O botão de WhatsApp, no topo"), para nao ficarem
dois verdes no mesmo ecra. Se um mudar, mudar o outro.
📌 A 27 de outubro de 2026 os dois voltaram ao VERDE ORIGINAL do
WhatsApp (#25D366, hover #1ebe5b), pedido do Pedro. Entre 21 e 27 de
outubro tinham estado no verde escuro #15803d.
O hover escurece o verde em vez de por o fundo cinzento dos outros
icones, que o apagava. */
/* ⚠️ O "a." no selector nao e enfeite: a regra ".site-nav a:not(.btn)"
pinta todos os links do menu de grafite e pesa mais do que uma classe
sozinha. Assim empata, e ganha por vir depois. */
.site-nav a.rede-ic-btn--wapp {
background: #25d366;
color: #fff;
}
.site-nav a.rede-ic-btn--wapp:hover,
.site-nav a.rede-ic-btn--wapp:focus-visible,
.site-nav a.rede-ic-btn--wapp:active {
background: #1ebe5b;
color: #fff;
}
.menu-toggle { display: none; }
/* ---------- Botões ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--asfalto);
color: var(--branco);
border: 2px solid var(--asfalto);
border-radius: 5px;
padding: 0.62rem 1.1rem;
font-family: 'Public Sans', sans-serif;
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
text-align: center;
transition: transform var(--dur-rapido) var(--ease),
background-color var(--dur-rapido) var(--ease),
box-shadow var(--dur-rapido) var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
/* Encolhe ao ser premido: no telemovel e a unica confirmacao de que o
toque foi registado, porque nao ha rato para mostrar o hover. */
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.06s; }
.btn-grande { padding: 0.88rem 1.5rem; font-size: 1.02rem; }
.btn-sm { padding: 0.45rem 0.9rem; font-size: 0.88rem; }
/* ---------- O botao de ligar, com o numero ----------
📌 PEDIDO DO PEDRO, 27 DE SETEMBRO DE 2026: o numero volta ao
cabecalho, num botao preto, em TODAS as larguras. Desfaz a decisao de
22 de setembro, em que este botao saia do computador.
🛑 UM LINK "tel:" NUM COMPUTADOR NAO FAZ NADA — nao abre, nao avisa,
nao da erro. Por isso num aparelho com rato carregar COPIA o numero e
diz que o copiou (js/main.js, seccao "O telefone num computador"). No
telemovel liga, como sempre.
No telemovel vive dentro do menu que abre: a 375px nao ha lugar para
ele ao lado da marca e do botao do menu. E a barra fixa de baixo tem o
seu proprio "Ligar".
⚠️ Nunca parte em duas linhas: "289 821 921" com espacos partia-se a
meio do numero. */
.btn-ligar { white-space: nowrap; }
/* ---------- A confirmacao de que o numero foi copiado ----------
📌 Em baixo a ESQUERDA: em baixo ao centro vive a barra do telemovel.
(Em baixo a direita vivia o botao flutuante do WhatsApp, que saiu a 27
de setembro de 2026.)
⚠️ Nao se esconde com [hidden] nem com visibility: fica sempre no
documento, com opacidade zero e sem texto. E o que permite ao
aria-live="polite" anunciar o que la aparece — um elemento criado no
momento do clique nao e anunciado por leitor de ecra nenhum. */
.aviso-copia {
position: fixed;
left: 1rem;
bottom: calc(1rem + env(safe-area-inset-bottom));
z-index: 200;
margin: 0;
max-width: calc(100vw - 2rem);
padding: 0.7rem 1rem;
border: 1px solid var(--linha);
/* 5px, como os botoes e as pastilhas das redes. Uma forma so no site. */
border-radius: 5px;
background: var(--branco);
color: var(--asfalto);
box-shadow: var(--sombra-alta);
font-size: 0.92rem;
font-weight: 600;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.aviso-copia.a-mostrar { opacity: 1; transform: translateY(0); }
/* Quando o copiar FALHA, a caixa mostra so o numero e passa a poder ser
selecionada com o rato — e o unico caminho que resta a pessoa. Quando
corre bem nao apanha cliques nenhuns: nao ha nada para selecionar e nao
deve tapar o que esta por baixo. */
.aviso-copia.manual { pointer-events: auto; user-select: text; }
/* O botão de linha é transparente com contorno — usa-se ao lado do
principal para não haver duas acções com o mesmo peso. */
.btn-linha {
background: transparent;
color: var(--asfalto);
}
.btn-linha:hover { background: var(--branco); }
/* O botão âmbar é o campo, com texto escuro. Nunca o contrário. */
.btn-ambar {
background: var(--ambar);
border-color: var(--asfalto);
color: var(--asfalto);
}
.btn-ambar:hover { background: var(--ambar-premido); }
/* ---------- Sobrancelhas e cabeçalhos de secção ---------- */
.sobrancelha {
font-family: 'Archivo', sans-serif;
font-size: 0.74rem;
font-weight: 700;
font-stretch: 88%;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--grafite);
margin: 0 0 1rem;
}
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section-branca { background: var(--branco); }
.section-escura {
background: var(--asfalto);
color: var(--betao);
}
.section-escura .sobrancelha { color: #9aa1a9; }
.section-cab { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-lead { color: var(--grafite); font-size: 1.06rem; }
/* ---------- Topo ---------- */
.hero {
position: relative;
overflow: hidden;
padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(4rem, 8vw, 6.5rem);
}
/* O conteudo em cima do fundo animado. O z-index aqui e o que faz o
sublinhado ambar do titulo (que usa z-index -1) ficar por tras do
texto mas a frente das marcas de estrada. */
.hero-inner { position: relative; z-index: 1; }
/* ---------- As marcas de estrada do topo ----------
🛑 ISTO JA FORAM DUAS RISCAS QUE NINGUEM VIA, e vale a pena saber
porque, para nao se repetir: estavam a 7% de opacidade (1,14:1 de
contraste contra o fundo), andavam a 10 pixeis por segundo, e tinham
"border-radius: 9px" numa linha de 9px de altura — o que faz de cada
traco uma CAPSULA de pontas redondas. Liam-se como manchas cinzentas.
O que se mudou, por ordem de efeito: pontas direitas, cinco marcas em
vez de duas, espessuras e opacidades diferentes, e tres velocidades.
Continua tudo a ser CSS: nem uma imagem, nem uma linha de JavaScript. */
.hero-fundo {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
/* As marcas esbatem-se junto ao cabecalho e junto ao fim da seccao em
vez de serem cortadas a direito. Ganha-se de caminho a sensacao de
distancia: a marca de cima desaparece por cima, como uma estrada a
perder-se ao longe. */
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}
/* O que as cinco marcas tem em comum.
⚠️ O ANGULO BAIXOU DE -6deg PARA -3deg, e nao foi gosto. A -6deg, e
com 220% de largura, cada marca subia 330px da esquerda para a direita
— as marcas CRUZAVAM-SE umas com as outras e o resultado lia-se como
riscos soltos espalhados, que e exatamente a queixa. A -3deg sobem 100px
e ficam paralelas em qualquer largura. Nao voltar a subir sem refazer
esta conta: e preciso que a subida seja MENOR do que o espaco entre
marcas vizinhas (hoje 15% da altura do topo). */
.marca {
position: absolute;
left: -60%;
width: 220%;
/* 🛑 PONTAS DIREITAS. E a correcao com mais efeito de todas: e ela
que transforma capsulas em marcas de estrada. NAO voltar a 9px. */
border-radius: 1px;
transform: rotate(-3deg) translateX(0);
}
/* --- As duas linhas continuas, que sao os limites da estrada ---
⚠️ NAO se animam, de proposito. Uma linha continua a deslizar de lado
e indistinguivel de uma linha parada: so gastava bateria e uma camada
na placa grafica. Numa estrada a serio e igual — o que parece mexer sao
os picotados, nunca as linhas do lado. */
.marca-guia-alta,
.marca-guia-baixa {
height: 3px;
background: rgba(28, 30, 33, 0.05);
}
.marca-guia-alta { top: 13%; }
.marca-guia-baixa { top: 79%; }
/* --- Os tres picotados ---
Todos com o mesmo periodo (220px) e proporcoes diferentes dentro dele.
O periodo igual e o que permite UMA animacao so para os tres, com o
ciclo a fechar sem salto; as proporcoes diferentes sao o que os faz
parecer marcas diferentes em vez de tres copias.
📌 Quem e mais grosso e mais escuro anda mais depressa. E o truque
de profundidade do parallax, aqui de graca: da a sensacao de haver
varias distancias sem desenhar nada a mais. */
.marca-traco-alto,
.marca-eixo,
.marca-traco-baixo {
will-change: transform;
animation: marcas-correm linear infinite;
}
.marca-traco-alto {
top: 29%;
height: 7px;
background: repeating-linear-gradient(90deg,
rgba(28, 30, 33, 0.10) 0 95px,
transparent 95px 220px);
animation-duration: 14s;
}
/* A marca principal do desenho: a mais grossa, a mais escura e a mais
rapida. 🛑 A opacidade dela NAO sobe acima de 0.12 — ver o aviso
aqui em baixo. */
.marca-eixo {
top: 46%;
height: 13px;
background: repeating-linear-gradient(90deg,
rgba(28, 30, 33, 0.12) 0 150px,
transparent 150px 220px);
animation-duration: 9s;
}
.marca-traco-baixo {
top: 63%;
height: 8px;
background: repeating-linear-gradient(90deg,
rgba(28, 30, 33, 0.09) 0 60px,
transparent 60px 220px);
animation-duration: 18s;
}
/* 🛑 O TETO DE 12% NAO E GOSTO, E UMA MEDICAO.
O texto cinzento do topo (a sobrancelha, o subtitulo e as provas, todos
em var(--grafite) = #555b63) passa por cima destas marcas. Medido no
browser, pixel a pixel e so onde ha letras, a 375, 768, 1024, 1280 e
1440px — o pior caso deu SEMPRE o mesmo, 4,63:1, que e o subtitulo por
cima desta marca:
sobre o fundo limpo ... 5,85:1 ✅
marca a 10% .......... 4,82:1 ✅
marca a 11% .......... 4,72:1 ✅
marca a 12% .......... 4,63:1 ✅ <- onde esta, e passa
marca a 13% .......... 4,54:1 ✅ o ultimo valor que ainda passa
marca a 14% .......... 4,44:1 ❌ reprova
marca a 16% .......... 4,26:1 ❌ reprova
O minimo e 4,5:1. Escurecer mais faz o texto do topo reprovar em
acessibilidade, e nao ha aviso nenhum a dizer isso — fica simplesmente
ilegivel para quem ve mal. A intensidade que faltava veio da FORMA
(pontas direitas), do NUMERO de marcas e da VELOCIDADE, nao da cor.
📌 E porque e que a largura do ecra nao muda este numero: as marcas
rodam em torno do MEIO da pagina, e o texto vive dentro do .container,
que tem 1140px no maximo e e centrado. A 3 graus, dentro desses 1140px
uma marca sobe no maximo 30px — e as marcas vizinhas estao a 105px umas
das outras. Nunca se cruzam por cima do texto, em largura nenhuma, e por
isso 12% e mesmo o valor maximo que alguma letra apanha. Se o angulo
subir ou o espacamento apertar, esta conta tem de ser refeita: duas
marcas sobrepostas dariam 20% e reprovavam. */
/* ⚠️ As marcas param quando o topo sai do ecra. Sao animacoes INFINITAS,
e sem isto continuavam a correr durante a pagina toda — com
"will-change: transform" a manter-lhes uma camada propria na placa
grafica — para ninguem as ver.
A classe e posta pelo vigia do topo, no main.js ("O vigia do topo"),
e para tambem o reflexo dos farois da matricula. */
.hero-fora .marca { animation-play-state: paused; }
/* O deslocamento e exatamente o periodo do padrao (220px), por isso o
ciclo fecha sem salto visivel. */
@keyframes marcas-correm {
to { transform: rotate(-3deg) translateX(-220px); }
}
.hero-inner {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.hero h1 { margin-bottom: 1.1rem; }
/* O realce é um sublinhado âmbar por baixo da linha, não letra âmbar.
É a forma de usar a cor da marca num título sem partir o contraste. */
.realce {
position: relative;
display: inline-block;
}
.realce::after {
content: '';
position: absolute;
left: -0.06em;
right: -0.06em;
bottom: 0.07em;
height: 0.24em;
background: var(--ambar);
z-index: -1;
border-radius: 2px;
}
/* O sublinhado desenha-se da esquerda para a direita, um instante
depois de o titulo entrar. E o momento de abertura da pagina. */
.js-anim .realce::after {
transform: scaleX(0);
transform-origin: 0 50%;
}
.js-anim h1.visivel .realce::after {
transform: scaleX(1);
transition: transform 0.65s var(--ease) 0.35s;
}
.hero-sub {
font-size: clamp(1.05rem, 2vw, 1.2rem);
color: var(--grafite);
max-width: 34rem;
margin-bottom: 1.8rem;
}
.hero-accoes {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 2rem;
}
/* Em colunas, nao numa linha com tracos a separar. Com tracos, quando
a lista partia a linha ficava um traco solto no inicio da segunda —
parecia um erro. O alinhamento separa melhor do que a decoracao. */
.hero-provas {
list-style: none;
margin: 0 0 1.5rem;
padding: 1.1rem 0 0;
border-top: 1px solid var(--linha);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
gap: 0.55rem 1.6rem;
font-size: 0.9rem;
color: var(--grafite);
}
/* A coluna da chapa estica a altura toda do topo: e nela que o rato
inclina a matricula, e assim a zona nao e so a chapa. */
.hero-chapa {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
align-self: stretch;
}
/* So a chapa da 404.html usa isto desde 30 de setembro de 2026. */
.chapa-xl { font-size: clamp(2.6rem, 6vw, 4.2rem); border-width: 3px; border-radius: 9px; }
/* ---------- A matricula do topo ----------
📌 Desde 30 de setembro de 2026: matricula portuguesa a serio, com o
logotipo da escola no campo. A razao e o que cada peca faz estao no
comentario do index.html, ao lado do HTML.
TUDO EM "em": a chapa inteira cresce e encolhe com o font-size do
.matricula-palco, e so esse numero decide o tamanho. Medido: ~370px de
largura a 1280px, ~280px a 375px.
⚠️ DUAS CAIXAS, E TEM DE SER. A entrada ("a chapa assenta", mais abaixo
em "O momento de abertura") e a inclinacao com o rato mexem as duas no
transform. No mesmo elemento, a animacao de entrada ganhava para sempre
e a chapa nunca inclinava. Por isso a entrada e do .matricula-palco e a
inclinacao da .matricula. */
.matricula-palco {
font-size: clamp(0.95rem, 0.5rem + 1vw, 1.25rem);
perspective: 50em;
}
.matricula {
position: relative;
display: flex;
height: 9.6em;
background: var(--branco);
border: 0.19em solid var(--asfalto);
border-radius: 0.7em;
overflow: hidden;
box-shadow:
0 1px 1px rgba(28, 30, 33, 0.08),
0 0.4em 0.9em -0.25em rgba(28, 30, 33, 0.18),
0 1.4em 2.5em -1.1em rgba(28, 30, 33, 0.28);
/* A inclinacao: sem rato, sem JavaScript ou com menos movimento
pedido, as duas variaveis ficam a 0 e a chapa fica direita. */
transform: rotateX(var(--incl-x, 0deg)) rotateY(var(--incl-y, 0deg));
transition: transform 0.45s var(--ease);
}
/* O js/main.js diz em que zona esta o rato, de -2 a 2, e aqui cada zona
ganha o seu angulo — o JavaScript nao escreve estilos (regra do site,
por causa da politica de seguranca). O lado da chapa mais perto do
rato afunda, como se o rato carregasse nele. No maximo 7 graus de lado
e 5,6 de cima a baixo: mais do que isso e o logotipo deixa de se ler. */
.matricula[data-incl-x="-2"] { --incl-y: -7deg; }
.matricula[data-incl-x="-1"] { --incl-y: -3.5deg; }
.matricula[data-incl-x="1"] { --incl-y: 3.5deg; }
.matricula[data-incl-x="2"] { --incl-y: 7deg; }
.matricula[data-incl-y="-2"] { --incl-x: 5.6deg; }
.matricula[data-incl-y="-1"] { --incl-x: 2.8deg; }
.matricula[data-incl-y="1"] { --incl-x: -2.8deg; }
.matricula[data-incl-y="2"] { --incl-x: -5.6deg; }
/* A faixa da UE: as doze estrelas em cima, o P em baixo. As estrelas sao
o ambar da marca, que e quase o amarelo da bandeira. */
.matricula-ue {
flex: none;
width: 3.1em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 0.85em 0 0.7em;
background: var(--ue-azul);
color: var(--branco);
}
.matricula-estrelas { width: 2.15em; height: 2.15em; fill: var(--ambar); }
.matricula-p {
font-family: 'Archivo', sans-serif;
font-weight: 700;
font-stretch: 80%;
font-size: 1.75em;
line-height: 1;
}
/* O logotipo. ⚠️ O width/height do . */
.equipa-frase .sem-quebra { white-space: nowrap; }
/* O espaco minimo por cima da frase fica por baixo da lista, e nao
dentro da frase: senao o filete ambar comecava antes das letras. */
.equipa-hab { margin-bottom: 1.1rem; }
.equipa-frase-falta {
padding: 0.7rem 0.8rem;
font-size: 0.86rem;
border: 1px dashed var(--grafite);
border-radius: 6px;
font-style: normal;
color: var(--grafite);
}
/* ---------- Testemunhos ----------
Opinioes verdadeiras do Google. Ver o comentario grande da seccao no
index.html — e la que estao as regras que nao se desfazem (nada nos
dados estruturados, sem a nota escrita, sem estrelas, sem datas).
O DESENHO: uma pilha de cartoes em leque, que troca sozinha de 6 em 6
segundos e ao clique. Escolhido pelo Pedro a 13 de setembro de 2026.
🛑 A PILHA SO EXISTE DENTRO DE ".js-anim". Sem JavaScript, ou com menos
movimento pedido no sistema, fica a lista de tres cartoes parados que
esta aqui em baixo — e le-se na mesma. Mesmo principio do anim.js.
============================================================ */
/* Duas colunas: o titulo a esquerda, a pilha a direita. E o mesmo desenho
do ".escola-inner" e do ".contacto-inner".
📌 Porque nao um cartao a ocupar a largura toda: dava linhas de 1100px,
longas demais para os olhos voltarem ao inicio da linha seguinte. */
.testemunhos-inner {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
/* ---- O estado base: tres cartoes parados, um debaixo do outro ----
E o que fica sem JavaScript. Tambem e a base por cima da qual a pilha
se monta, por isso o cartao em si desenha-se aqui uma vez so. */
.testemunhos {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1.1rem;
}
.testemunhos > li {
background: var(--betao);
border: 1px solid var(--linha);
/* O filete ambar fica, do desenho anterior. Ambar como campo, nunca
como cor de letra — e a regra do topo deste ficheiro. */
border-left: 3px solid var(--ambar);
border-radius: 10px;
padding: 1.45rem 1.5rem;
box-shadow: var(--sombra);
}
.testemunhos blockquote {
margin: 0;
font-size: 1.02rem;
line-height: 1.7;
}
/* Mesmo tratamento do .equipa-funcao: e a mesma ideia de legenda por
baixo de um bloco, e tem de ser o mesmo gesto. */
.testemunho-quem {
margin: 0.85rem 0 0;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--grafite);
}
/* ---- A pilha ---- */
/* ⚠️ A folga lateral nao e enfeite: os cartoes de tras rodam e desviam-se
para fora, e sem ela transbordavam a largura da pagina — que no
telemovel da scroll horizontal. */
.testemunhos-pilha { padding: 0.5rem 1.5rem 0.75rem; }
.js-anim .testemunhos-pilha { cursor: pointer; }
/* 📌 O TRUQUE QUE EVITA NUMEROS MAGICOS: os tres cartoes ocupam a MESMA
celula da grelha. A altura da pilha passa a ser sozinha a do cartao
mais alto, em qualquer largura de ecra, sem ninguem a adivinhar. */
.js-anim .testemunhos > li {
grid-area: 1 / 1;
transition: transform var(--dur-lento) var(--ease);
}
/* 🛑 OS CARTOES SAO OPACOS, E TEM DE CONTINUAR A SER. Ja se tentou
esbate-los com "opacity" no inteiro e o resultado foi mau: durante
a troca via-se o texto de um ATRAVES do outro, e ficavam duas citacoes
sobrepostas e ilegiveis. Um cartao a serio nao e transparente.
O que desvanece e o CONTEUDO dos que estao atras, nao o cartao. Assim o
da frente tapa sempre o que vem por baixo, e dos outros so se ve a
aba — que e exatamente o que faz isto parecer uma pilha.
⚠️ Usa-se "opacity: 0" e NAO "visibility: hidden" nem "display: none":
com opacity o texto continua no HTML e continua a ser lido pelos
leitores de ecra e pelo Google. Esconde-se aos olhos, nao a todos. */
.js-anim .testemunhos > li > * {
transition: opacity var(--dur) var(--ease);
}
.js-anim .testemunhos > li.atras-1 > *,
.js-anim .testemunhos > li.atras-2 > * { opacity: 0; }
/* ⚠️ A sombra muda de degrau mas NAO entra na transicao: so se animam
"transform" e "opacity". A troca da sombra acontece no instante em que
as classes mudam, com o cartao ja em movimento — nao se ve. */
.js-anim .testemunhos > li.na-frente {
transform: none;
z-index: 3;
box-shadow: var(--sombra-alta);
}
.js-anim .testemunhos > li.atras-1 {
transform: rotate(2deg) translate(10px, 6px) scale(0.97);
z-index: 2;
}
.js-anim .testemunhos > li.atras-2 {
transform: rotate(-3deg) translate(-10px, 12px) scale(0.94);
z-index: 1;
}
/* Em ecra largo o leque abre mais: ha espaco, e com a aba de 8px que os
valores de cima davam muita gente nao percebia que havia mais cartoes
por baixo. No telemovel fica o leque contido — la a folga lateral e
curta e abrir mais dava scroll horizontal. */
@media (min-width: 62rem) {
.js-anim .testemunhos > li.atras-1 {
transform: rotate(2.5deg) translate(16px, 9px) scale(0.975);
}
.js-anim .testemunhos > li.atras-2 {
transform: rotate(-3.5deg) translate(-16px, 18px) scale(0.95);
}
}
/* A linha que diz de onde vem isto, na coluna do titulo. */
.testemunhos-fonte {
margin: clamp(1.4rem, 3vw, 2rem) 0 0;
font-size: 0.92rem;
color: var(--grafite);
}
.testemunhos-fonte a {
color: var(--asfalto);
font-weight: 600;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: opacity var(--dur-rapido) var(--ease);
}
.testemunhos-fonte a:hover { opacity: 0.7; }
.testemunhos-fonte a:active { opacity: 0.55; }
/* ---- As bolinhas ----
O alvo tem 44px como manda a regra do toque; a bolinha desenhada e
pequena e vive dentro dele. */
.testemunhos-pontos {
display: flex;
gap: 0.15rem;
margin: 0.6rem 0 0;
}
.testemunhos-pontos button {
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.testemunhos-pontos button::before {
content: '';
width: 11px;
height: 11px;
border-radius: 50%;
border: 2px solid var(--grafite);
transition: transform var(--dur) var(--ease);
}
/* ⚠️ A BOLINHA ATIVA LEVA AMBAR COM ARO ESCURO POR FORA, e o aro nao e
enfeite: o ambar sozinho sobre branco da 1,7 de contraste e um
indicador precisa de 3,0. E o ARO que carrega a informacao; o ambar
carrega a marca. Tirar o aro parte a acessibilidade da seccao. */
.testemunhos-pontos button[aria-current="true"]::before {
background: var(--ambar);
border-color: var(--asfalto);
transform: scale(1.25);
}
.testemunhos-pontos button:hover::before { transform: scale(1.25); }
.testemunhos-pontos button:active::before { transform: scale(1.05); }
/* ---------- Contacto ---------- */
/* 📌 DUAS COLUNAS desde 30 de setembro de 2026, a pedido do Pedro: a
esquerda todo o texto (morada, botoes, email, redes, horario), a
direita so o mapa. "stretch" e o que estica a coluna do mapa ate a
altura da do texto. Abaixo dos 960px passa a uma coluna so (regra em
"Ecras medios"). */
.contacto-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: stretch;
}
.section-escura .btn {
background: var(--ambar);
border-color: var(--ambar);
color: var(--asfalto);
}
.section-escura .btn:hover { background: var(--ambar-premido); border-color: var(--ambar-premido); }
.section-escura .btn-linha {
background: transparent;
border-color: #4a4f56;
color: var(--betao);
}
.section-escura .btn-linha:hover { background: #24272b; border-color: var(--betao); }
.contacto-accoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.3rem; }
.contacto-email a { color: var(--betao); }
/* ---------- Redes sociais ----------
Pastilhas com o logotipo da rede e o nome escrito. O nome fica visivel
de proposito: um icone sozinho obriga a pessoa a adivinhar, e nem toda
a gente reconhece um simbolo pequeno.
⚠️ O ambar nao entra aqui como cor de letra — entra so como filete no
hover, que e decoracao e nao informacao. */
.redes {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
margin: 1.4rem 0 0;
}
.rede {
display: inline-flex;
align-items: center;
gap: 0.55rem;
/* 0.75rem em cima e em baixo poe a pastilha nos 44px de altura, que e
a medida confortavel para o dedo no telemovel. */
padding: 0.75rem 1.1rem 0.75rem 0.9rem;
/* O mesmo cinzento do contorno do botao "Abrir no Google Maps", logo
aqui ao lado — os dois sao contornos sobre fundo escuro e nao ha
razao para falarem linguas diferentes. */
border: 1px solid #4a4f56;
border-radius: 999px;
color: var(--betao);
text-decoration: none;
font-weight: 600;
font-size: 0.94rem;
line-height: 1;
/* So transform, opacity e cores — nunca transition: all. */
transition: transform var(--dur) var(--ease),
background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
.rede-ic { width: 1.15rem; height: 1.15rem; flex: none; }
.rede:hover,
.rede:focus-visible {
transform: translateY(-2px);
background: #26292d;
border-color: var(--ambar);
}
.rede:active { transform: translateY(0); transition-duration: var(--dur-rapido); }
/* ⚠️ Correcao de acessibilidade, nao gosto pessoal. O contorno de foco
do site inteiro e "3px solid var(--asfalto)" — quase preto. Nesta
seccao o fundo TAMBEM e asfalto, por isso quem navega por teclado
perdia o contorno de vista exatamente aqui, onde estao o telefone, o
email e agora as redes. Sobre fundo escuro o contorno passa a claro. */
.section-escura :focus-visible { outline-color: var(--betao); }
.contacto-horario { margin-top: 2rem; }
.horario { width: 100%; border-collapse: collapse; margin-top: 1.2rem; }
.horario th, .horario td { text-align: left; padding: 0.85rem 0; border-top: 1px solid #34383d; vertical-align: top; }
.horario th { font-weight: 600; color: var(--betao); padding-right: 1rem; }
.horario td { color: #9aa1a9; }
/* ---------- O mapa ----------
Entrou a 28 de setembro de 2026, pedido pela escola. Por dentro e da
Google e nao se pode mudar; o que e nosso e a caixa. Cantos de 10px,
iguais aos dos cartoes, e o mesmo filete escuro das linhas do horario,
para o mapa claro parecer pousado aqui de proposito e nao colado.
Desde 30 de setembro tem a coluna da direita so para ele: a caixa a
volta (.contacto-mapa) e esticada pela grelha ate a altura da coluna
do texto, e o mapa enche-a. Nunca fica mais baixo do que 24rem. */
.contacto-mapa {
display: flex;
min-height: 24rem;
}
.mapa {
display: block;
flex: 1;
width: 100%;
border: 1px solid #34383d;
border-radius: 10px;
background: #2a2d31;
}
/* Numa coluna so, o mapa vem por baixo do horario com altura propria:
ja nao ha coluna ao lado para lhe dar a altura. */
@media (max-width: 60rem) {
.contacto-mapa { min-height: 20rem; }
}
@media (max-width: 48rem) {
.contacto-mapa { min-height: 17.5rem; }
}
/* ---------- Página de erro (404.html) ----------
Uma coluna estreita e centrada. Quem cai aqui enganou-se no endereço:
o que precisa é de uma saída, não de uma página cheia. */
.erro-inner {
max-width: 34rem;
margin-inline: auto;
text-align: center;
/* Empurra o rodapé para baixo do ecrã em vez de o deixar a meio da
página, que faz a página parecer truncada. */
padding-block: clamp(1rem, 6vw, 4rem);
}
/* A chapa fica maior do que a do topo da página principal: aqui é o
assunto, não um acompanhamento. */
.erro-chapa { margin: 1.1rem 0 1.8rem; font-size: clamp(3rem, 9vw, 5rem); }
.erro-titulo {
font-family: 'Archivo', sans-serif;
font-size: clamp(1.6rem, 4vw, 2.3rem);
font-weight: 800;
font-stretch: 82%;
letter-spacing: -0.02em;
margin: 0 0 0.7rem;
}
.erro-texto {
color: var(--grafite);
font-size: 1.06rem;
margin: 0 0 1.8rem;
}
/* Os botões vêm de .hero-accoes, que é flex e alinha à esquerda. Aqui
centram-se, para acompanharem o resto da coluna. */
.erro .hero-accoes { justify-content: center; }
.erro-atalhos {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.5rem 1.1rem;
margin: 0;
padding-top: 1.6rem;
border-top: 1px solid var(--linha);
font-size: 0.92rem;
color: var(--grafite);
}
/* ---------- O index.html que reencaminha ----------
Desde 27 de outubro de 2026 o site vive no escola.php, e o index.html
só leva para lá. Isto só se vê se o reencaminhamento falhar: uma frase
com o link, com o mesmo ar do resto do site. */
.reencaminhar {
padding-block: clamp(2rem, 8vw, 5rem);
text-align: center;
color: var(--grafite);
}
/* ---------- Rodapé ---------- */
.site-footer {
background: var(--betao);
border-top: 1px solid var(--linha);
padding: 2.5rem 0 6rem;
font-size: 0.9rem;
color: var(--grafite);
}
.footer-inner { display: flex; flex-direction: column; gap: 0.9rem; }
.footer-marca {
display: flex;
align-items: center;
gap: 0.6rem;
font-family: 'Archivo', sans-serif;
font-weight: 700;
color: var(--asfalto);
margin: 0;
}
.footer-marca .logo-mark { width: auto; height: 2.1rem; }
.footer-morada { margin: 0; }
.footer-id { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0; }
.footer-copy { margin: 0; font-size: 0.84rem; }
/* O fundo do rodapé: o © à esquerda e o crédito da Fylux à direita, com
um filete por cima. Pedido do Pedro a 27 de outubro de 2026, a partir
de um rodapé de referência. Quando não cabem lado a lado (telemóvel),
o crédito desce para baixo do © sozinho, encostado à esquerda. */
.footer-base {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 0.4rem 1.5rem;
margin-top: 0.6rem;
padding-top: 1.1rem;
border-top: 1px solid var(--linha);
}
.footer-credito { margin: 0; font-size: 0.84rem; }
/* O nome é o link: mais escuro e mais pesado do que a frase, sem
sublinhado em repouso, que é como na referência. O sublinhado aparece
ao passar o rato, para se perceber que se carrega.
⚠️ Sem margem à esquerda: o espaço entre "por" e o nome já vem do
HTML, e no telemóvel, onde o nome desce para a linha de baixo, uma
margem deixava-o 3px desalinhado do resto do rodapé (medido). */
.footer-credito a {
display: inline-flex;
align-items: center;
gap: 0.3em;
font-weight: 600;
color: var(--asfalto);
text-decoration: none;
text-underline-offset: 0.2em;
}
.footer-credito a:hover { text-decoration: underline; }
.footer-credito a:active { opacity: 0.7; }
/* ⚠️ A seta leva também width="12" height="12" no HTML, e é de propósito:
a 27 de outubro de 2026 o servidor ficou com um styles.css antigo, sem
esta regra, e a seta sem tamanho esticou até à largura da página —
1140px no ecrã de um computador. Com os atributos, se o CSS falhar ela
fica com 12px. Quando o CSS está lá, esta regra ganha aos atributos. */
.footer-credito-ic { width: 0.85em; height: 0.85em; flex: none; }
/* ---------- Barra fixa no telemóvel ---------- */
.barra-movel { display: none; }
/* ---------- Passagem entre páginas ----------
O site tem quatro páginas e, ao mudar de uma para a outra, dava um
flash branco. Com isto o browser atravessa-as, e o CABEÇALHO FICA
QUIETO: tem nome próprio, por isso o browser percebe que é o mesmo
elemento dos dois lados e não o faz desaparecer e voltar.
⚠️ São três linhas e ZERO JavaScript. Onde não houver suporte
(Firefox, por agora), fica o flash de antes — não parte nada, e é a
mesma situação da barra de progresso do topo.
Fica dentro do "no-preference" de propósito: quem pediu menos
movimento no sistema não deve receber páginas a atravessarem-se. */
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
}
.site-header { view-transition-name: cabecalho; }
.progresso { view-transition-name: progresso; }
/* ---------- O momento de abertura ----------
A chapa gigante do topo assenta, uma vez, quando a página carrega:
entra maior e pousa, como uma chapa a ser montada no carro.
É o único sítio do site onde o movimento chama atenção a sério, e é
de propósito — é a coisa que a marca toda tem em cima. Uma vez só;
não se repete nem fica a pulsar. (O reflexo dos faróis, que se repete,
é outra coisa e vive em "A matricula do topo".)
Na página inicial a animação é do .matricula-palco e NÃO da
.matricula: a inclinação com o rato precisa do transform da chapa
livre. Ver o aviso "DUAS CAIXAS" em "A matricula do topo".
Está atrás de ".js-anim", que só existe quando ninguém pediu menos
movimento no sistema. */
.js-anim .matricula-palco,
.js-anim .erro-chapa {
animation: chapa-assenta 0.85s var(--ease) both;
}
.js-anim .hero-chapa-legenda {
animation: chapa-legenda 0.7s var(--ease) 0.3s both;
}
@keyframes chapa-assenta {
from { opacity: 0; transform: scale(1.13) translateY(-12px); }
to { opacity: 1; transform: none; }
}
@keyframes chapa-legenda {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
/* ---------- Revelação ao scroll ----------
Só esconde depois de o anim.js pôr a classe no . Sem
JavaScript, ou com movimento reduzido pedido no sistema, o conteúdo
aparece todo normalmente. Anima-se só transform e opacity. */
.js-anim [data-revelar] {
opacity: 0;
transform: translateY(var(--subida));
}
.js-anim [data-revelar].visivel {
opacity: 1;
transform: none;
transition: opacity var(--dur-entrada) var(--ease),
transform var(--dur-entrada) var(--ease);
}
/* As chapas entram de lado, como sinais que se passam ao conduzir.
É o movimento com mais carácter do site, e por isso é o que vem de
mais longe: uma vez e meia o que os outros sobem. */
.js-anim .chapas [data-revelar] { transform: translateX(calc(var(--subida) * -1.5)); }
.js-anim .chapas [data-revelar].visivel { transform: none; }
/* As secções escuras entram de baixo e mais devagar. O contraste de
ritmo é o que faz a página parecer composta em vez de uniforme: uma
secção que entra a outro tempo lê-se como um capítulo novo. */
.js-anim .section-escura [data-revelar] { transform: translateY(calc(var(--subida) * 1.35)); }
.js-anim .section-escura [data-revelar].visivel {
transition-duration: calc(var(--dur-entrada) * 1.3);
}
/* Entram uma a seguir à outra, não todas ao mesmo tempo. Feito aqui e
não em JavaScript: o site não usa estilos embutidos, e escrevê-los a
partir do script seria contornar essa regra em vez de a cumprir. */
.js-anim .chapas > li:nth-child(2).visivel { transition-delay: 90ms; }
.js-anim .chapas > li:nth-child(3).visivel { transition-delay: 180ms; }
.js-anim .chapas > li:nth-child(4).visivel { transition-delay: 270ms; }
.js-anim .chapas > li:nth-child(5).visivel { transition-delay: 360ms; }
/* O topo entra por ordem: sobrancelha, titulo, texto, botoes, provas.
E o "fade-up stagger" do brief, feito so com atrasos em CSS. */
.js-anim .hero-texto > [data-revelar]:nth-child(2).visivel { transition-delay: 110ms; }
.js-anim .hero-texto > [data-revelar]:nth-child(3).visivel { transition-delay: 220ms; }
.js-anim .hero-texto > [data-revelar]:nth-child(4).visivel { transition-delay: 320ms; }
.js-anim .hero-texto > [data-revelar]:nth-child(5).visivel { transition-delay: 420ms; }
.js-anim .hero-texto > [data-revelar]:nth-child(6).visivel { transition-delay: 520ms; }
.js-anim .equipa > li:nth-child(2).visivel { transition-delay: 90ms; }
.js-anim .equipa > li:nth-child(3).visivel { transition-delay: 180ms; }
.js-anim .equipa > li:nth-child(4).visivel { transition-delay: 270ms; }
/* O retrato entra um instante depois do cartão e cresce até ao tamanho
certo. A cara é o assunto do cartão, e assim chega como tal em vez de
aparecer com o resto. Só escala: não mexe no espaço que ocupa, por
isso nada salta à volta. */
.js-anim .equipa > li .equipa-retrato { transform: scale(0.88); }
.js-anim .equipa > li.visivel .equipa-retrato {
transform: none;
transition: transform calc(var(--dur-entrada) * 1.15) var(--ease) 0.12s;
}
/* ---------- Ecrãs médios ---------- */
@media (max-width: 60rem) {
.hero-inner,
.escola-inner,
.testemunhos-inner,
.contacto-inner { grid-template-columns: 1fr; }
.hero-chapa { align-items: flex-start; }
.hero-chapa-legenda { text-align: left; }
}
/* ---------- A faixa apertada, entre o telemóvel e o ecrã largo ----------
Dos 768px aos 1024px o cabeçalho leva tudo ao mesmo tempo: marca, quatro
links, as duas redes e o botão de ligar. Sem isto não cabia — e foi o que
aconteceu quando as redes entraram: "Quanto custa" e "A escola" passaram a
duas linhas cada um. Aperta-se o espaçamento e encolhem-se os ícones, que é
o que se pode ceder sem partir nada. */
@media (min-width: 48.0625rem) and (max-width: 64rem) {
.site-nav ul { gap: 1rem; }
.nav-redes { gap: 0.3rem; }
.rede-ic-btn { width: 2.1rem; height: 2.1rem; }
/* A linha "Escola de Condução · Faro" por baixo da marca é a primeira a
sair: está escrita por extenso no rodapé e nos contactos. */
.logo-texto small { display: none; }
}
/* 🛑 DOS 769px AOS 960px, O NUMERO NAO CABE AO LADO DO NOME DA ESCOLA.
Medido a 27 de setembro de 2026, quando o botao do telefone voltou ao
cabecalho com "289 821 921" escrito. O menu inteiro pede 685px; aos
769px, com a barra de scroll do Windows, sobram ~545px ao lado da marca
com o nome. Sem isto o menu passava por cima do "Escola HL" e saia 2px
do ecra — nada partia em duas linhas, por isso nao se via a medir so
isso. Foi apanhado a comparar as caixas.
Nesta faixa (que e sobretudo tablets ao alto) cede-se, por esta ordem:
o espacamento entre links, um pouco de letra do menu, e o NOME escrito
ao lado do simbolo. O simbolo HL fica, e o nome continua la para os
leitores de ecra — escondido pelo mesmo metodo do .sr-only, e nunca
com display:none, senao o link da marca ficava sem nome nenhum (a
imagem tem alt vazio de proposito).
⚠️ Se entrar mais alguma coisa no cabecalho, medir outra vez aos 769px:
a folga ai e de poucos pixeis. */
@media (min-width: 48.0625rem) and (max-width: 60rem) {
.site-nav ul { gap: 0.6rem; }
.site-nav a:not(.btn) { font-size: 0.875rem; }
.btn-ligar { padding-inline: 0.7rem; }
.logo-texto {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
}
/* 🛑 E FICA ESCONDIDA MAIS UM BOCADO, ATÉ AOS 1088px.
A razão é de 18 de setembro de 2026, quando os links do menu ganharam
contorno. Aos 1025px passavam a acontecer duas coisas na mesma largura:
os contornos entravam (pedem ~118px) e esta linha voltava (pede ~87px).
A folga entre a marca e o menu caía de 135px para DEZASSEIS — cabia,
mas qualquer palavra nova no menu partia o cabeçalho outra vez.
Com esta regra são ~100px nessa faixa. A linha volta aos 1088px, onde
já há espaço para as duas coisas. */
@media (min-width: 64.0625rem) and (max-width: 68rem) {
.logo-texto small { display: none; }
}
/* ---------- Telemóvel ---------- */
@media (max-width: 48rem) {
html { scroll-padding-top: 4.75rem; }
.header-inner { min-height: 4rem; }
.logo-texto small { display: none; }
.menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.6rem;
height: 2.6rem;
padding: 0;
background: transparent;
border: 2px solid var(--linha);
border-radius: 5px;
cursor: pointer;
transition: border-color var(--dur-rapido) var(--ease);
}
.menu-toggle:hover { border-color: var(--asfalto); }
.menu-barras,
.menu-barras::before,
.menu-barras::after {
content: '';
display: block;
width: 1.1rem;
height: 2px;
background: var(--asfalto);
border-radius: 2px;
transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.menu-barras { position: relative; }
.menu-barras::before { position: absolute; top: -6px; }
.menu-barras::after { position: absolute; top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-barras { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-barras::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-barras::after { transform: translateY(-6px) rotate(-45deg); }
.site-nav {
position: absolute;
left: 0;
right: 0;
top: 100%;
background: var(--branco);
border-bottom: 1px solid var(--linha);
box-shadow: var(--sombra);
display: none;
}
.site-nav.aberto { display: block; }
.site-nav ul {
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0.5rem 1.25rem 1.25rem;
}
.site-nav li { border-top: 1px solid var(--linha); }
.site-nav li:first-child { border-top: 0; }
.site-nav a { display: block; padding: 0.9rem 0; font-size: 1rem; }
.site-nav .btn { margin-top: 0.9rem; padding: 0.75rem 1rem; }
/* No menu aberto, as redes ficam numa linha so, lado a lado, em vez de
duas filas de icone sozinho a ocupar a largura toda.
Os 2.75rem sao os 44px de alvo para o dedo — no telemovel o menu e
mesmo para tocar, e aqui ha espaco de sobra para os dar. */
/* ---------- O menu da pagina de erro ----------
A 404.html nao tem botao de menu — nao faz sentido esconder duas
ligacoes atras de um hamburguer. Aqui o menu fica sempre a vista,
numa linha.
⚠️ O seletor leva as DUAS classes (".site-nav.erro-nav") de
proposito: as regras do menu normal, aqui em baixo, tem a mesma
forca e ganhavam pela ordem. Com duas classes ganham estas,
esteja isto onde estiver no ficheiro. */
.site-nav.erro-nav {
position: static;
display: block;
background: none;
border: 0;
box-shadow: none;
}
.site-nav.erro-nav ul { flex-direction: row; align-items: center; gap: 1.1rem; padding: 0; }
.site-nav.erro-nav li { border-top: 0; }
.site-nav.erro-nav a { display: inline-block; padding: 0; font-size: 0.92rem; }
.site-nav.erro-nav .btn { margin-top: 0; padding: 0.6rem 1.1rem; }
.nav-redes { padding: 0.85rem 0; gap: 0.55rem; }
.rede-ic-btn { width: 2.75rem; height: 2.75rem; }
.site-nav .rede-ic-btn { display: inline-flex; padding: 0; }
.hero-provas { grid-template-columns: 1fr; gap: 0.5rem; }
.barra-movel {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
display: flex;
gap: 0.6rem;
padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
background: #ecedef;
background: color-mix(in srgb, var(--betao) 94%, transparent);
backdrop-filter: blur(10px);
border-top: 1px solid var(--linha);
}
.barra-movel .btn { flex: 1; padding: 0.75rem 0.6rem; }
.barra-movel .btn-linha { background: var(--branco); }
/* O botao do convite ocupa a largura toda no telemovel: e a accao
principal da seccao, e assim fica facil de acertar com o dedo. */
.convite-accoes .btn { width: 100%; }
}
/* ---------- Quem pediu menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
/* ⚠️ Sem isto, uma animacao "infinite" com 0.01ms de duracao passa a
repetir-se milhares de vezes por segundo — pior do que a animacao
original. Aplica-se as marcas de estrada. */
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* ⚠️ AS MARCAS DE ESTRADA JA NAO DESAPARECEM AQUI, e foi de proposito.
Enquanto eram duas riscas invisiveis nao fazia diferenca; hoje sao um
elemento de desenho do topo, e quem pediu menos movimento no sistema
nao tem de ficar com a pagina inicial vazia. Ficam PARADAS: as regras
aqui em cima ja lhes cortam a animacao. */
.progresso { display: none; }
}