/* ============================================================
   TERRAROOT — FOLHA DE ESTILOS PARTILHADA
   ------------------------------------------------------------
   Usada por TODAS as páginas do site:
     /                            index.html
     /manutencao-de-websites      manutencao-de-websites.html
     /contacto                    contacto.html
     /trabalhos/codigo-luminoso   trabalhos/codigo-luminoso.html
     (molde)                      modelos/pagina-servico.html

   ✏️ COMO EDITAR:
   1. Cores e tipos de letra: secção "VARIÁVEIS" já a seguir.
      Editadas aqui, mudam no site inteiro.
   2. Textos: nos ficheiros .html, nos comentários ✏️.

   ⚠️ Cada página tem ainda um <style> curto no seu <head>, só
   com o que é dela. O que for usado em mais do que uma página
   pertence a este ficheiro.
   ============================================================ */

/* ===== 0. TIPOS DE LETRA (alojados aqui, não na Google) =====
   ------------------------------------------------------------
   ⚠️ ISTO NÃO É UMA OPÇÃO DE DESEMPENHO — É DE PRIVACIDADE.

   Até 16/08/2026 as duas fontes vinham do Google Fonts. Não punham
   cookies nem identificavam ninguém, mas cada visita fazia um pedido
   a servidores da Google, que via o endereço IP de quem estava a ler.
   Era a ÚNICA ligação a terceiros do site inteiro.

   Passaram para /fontes/. O site deixou de ligar a qualquer servidor
   que não seja o próprio — e é isso que a secção 7 da
   /politica-de-privacidade afirma por escrito.

   ⛔ NÃO voltar a pôr <link> para o Google Fonts em página nenhuma,
   nem que seja "só para testar um peso novo". Se isso acontecer, a
   política passa a mentir e o banner de cookies deixa de ser
   dispensável. Fonte nova = ficheiro novo aqui.

   O domínio da Google não é escrito por extenso em nenhum ficheiro
   servido — nem sequer em comentários. Só vive no
   scripts/descarregar-fontes.sh, que está no .vercelignore. É de
   propósito: assim procurar por esse domínio nos .html/.css/.js e não
   encontrar nada é PROVA de que não se voltou atrás. Um comentário
   que o mencione por extenso — incluindo um a explicar esta regra —
   estraga a prova. Por isso é que esta secção diz "a Google" e nunca
   o endereço.

   COMO ESTES FICHEIROS FORAM PARAR AQUI:
     sh scripts/descarregar-fontes.sh
   O script explica o resto e é o único sítio onde os endereços da
   Google ainda aparecem — para os voltar a descarregar quando as
   fontes forem atualizadas.

   PORQUÊ SEIS FICHEIROS E NÃO DOZE:
   as duas famílias são VARIÁVEIS. Um só ficheiro cobre 400→700, por
   isso o `font-weight: 400 700` é um intervalo, não um engano — não
   é preciso um ficheiro por peso. A divisão em `latin` e `latin-ext`
   é a da própria Google: o `unicode-range` faz o browser descarregar
   o `latin-ext` SÓ se a página tiver mesmo um caracter desse
   intervalo. Em português normal nunca é pedido; fica para nomes
   próprios estrangeiros. Não o apagar por "não estar a ser usado".

   O `font-display:swap` mantém-se: o texto aparece já na fonte de
   sistema e troca quando a definitiva chega. Nunca há texto invisível.
   ------------------------------------------------------------ */

/* ---- Fraunces (títulos) — redondo ---- */
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("/fontes/fraunces-normal-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("/fontes/fraunces-normal-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---- Fraunces (títulos) — itálico ----
   Não é decorativo: é o que desenha os preços iniciais (.preco-inicial)
   e mais dois blocos. Sem estes dois ficheiros o browser inclinava o
   redondo à força e o resultado é visivelmente pior. */
@font-face{
  font-family:"Fraunces";
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url("/fontes/fraunces-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url("/fontes/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---- Hanken Grotesk (texto) ----
   Só redondo: o site não usa itálico sem serifa em lado nenhum. */
@font-face{
  font-family:"Hanken Grotesk";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("/fontes/hanken-grotesk-normal-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Hanken Grotesk";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("/fontes/hanken-grotesk-normal-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ===== 1. VARIÁVEIS (edite aqui as cores da marca) ===== */
:root{
  --areia:      #F2EDE2;   /* fundo claro (papel/areia)        */
  --areia-2:    #E9E1D0;   /* cartões e blocos suaves          */
  --carvao:     #2A211A;   /* castanho-escuro: texto e fundos  */
  --carvao-2:   #362A21;   /* cartões dentro das secções escuras */
  --terracota:  #C6511D;   /* laranja queimado: acento principal */
  --raiz:       #8F3B10;   /* laranja-terra escuro (a "raiz")  */
  --terracota-botao:#B54818;/* o terracota, escurecido até passar AA em bloco */
  --terracota-claro:#D1784E;/* o terracota, aclarado até passar AA em fundo escuro */
  --oliva:      #8A7F63;   /* legendas GRANDES e elementos decorativos */
  --oliva-texto:#6C634D;   /* o mesmo tom, escurecido até passar AA    */
  --linha:      rgba(42,33,26,.16);      /* linhas finas em fundo claro  */
  --linha-clara:rgba(242,237,226,.18);   /* linhas finas em fundo escuro */

  /* ---- Regra do terracota -------------------------------------------
     --terracota é a cor de ação e o único acento. Mas sobre o cream dá
     3.91:1 — passa em texto grande (≥24px), falha em texto pequeno.
     Por isso: --terracota em preenchimentos, números e títulos;
               --raiz (6.42:1) sempre que for texto pequeno ou link.
     Não são duas cores de ação: é a mesma família, escolhida pelo
     tamanho a que aparece. Medido, não estimado.

     RESOLVIDO (31/07/2026): o .btn--cheio era cream sobre --terracota,
     3.91:1 com o rótulo a 15.7px — falhava o AA de texto normal. Passou a
     --terracota-botao (4.61:1), com hover --raiz (6.42:1).

     Porquê um terceiro laranja e não o --raiz no preenchimento: o --raiz foi
     escolhido para TEXTO pequeno, e em bloco lê como castanho. O
     --terracota-botao é o ponto mais claro da família que ainda passa os
     4.5:1 — a partir de #BA4A18 cai para 4.41 e falha.

     O hover NÃO pode aclarar: os estados também têm de passar. E em fundo
     escuro este laranja separa-se pouco do cartão, por isso lá o botão
     cheio é cream (ver .seccao--escura .btn--cheio).

     RESOLVIDO (07/09/2026): a regra em cima só cobria metade do site. Em
     fundo --carvao o --terracota dá 3.45:1 — chega para texto grande, e
     falha em texto pequeno exatamente como falhava no cream. Não havia
     equivalente do --raiz para esse lado, e a frase do .horizonte
     ("<strong>a terraroot</strong>", clamp de 20px a 27px) estava a
     escrever-se a 3.45:1: acima dos 24px passava, e abaixo — que é o
     telemóvel e o tablet todo — não. O --terracota-claro é a resposta
     simétrica: o mesmo laranja aclarado com cream até dar 4.89:1 sobre
     --carvao (e 4.31:1 sobre --carvao-2, por isso ainda não serve para
     texto pequeno dentro dos cartões escuros).

     A regra passa a ler-se pelos dois lados, e é sempre a mesma ideia —
     a cor escolhe-se pelo tamanho E pelo fundo:
       fundo cream : --terracota grande, --raiz pequeno;
       fundo carvão: --terracota grande, --terracota-claro pequeno.

     O que NÃO mudou, e é decisão: o ✓ dos planos e o +/− das perguntas
     continuam --terracota (3.04:1 e 3.45:1). São glifos de interface,
     não texto corrido — o critério deles é o 1.4.11, que pede 3:1, e
     passam. Aclará-los era pintar o acento todo de salmão para cumprir
     um critério que não se lhes aplica.
     ------------------------------------------------------------------ */

  --fonte-titulo:"Fraunces", Georgia, serif;
  --fonte-texto:"Hanken Grotesk", "Segoe UI", sans-serif;

  /* ---- Escala de espaçamento: múltiplos de 8 ---- */
  --e1:8px;   --e2:16px;  --e3:24px;  --e4:32px;
  --e5:40px;  --e6:48px;  --e8:64px;  --e10:80px;
  --e12:96px; --e16:128px;

  --raio:18px;             /* arredondamento dos cartões */
  --raio-imagem:10px;      /* arredondamento das capturas emolduradas */
  --largura:1120px;        /* largura máxima do conteúdo */
  --medida:68ch;           /* medida máxima de texto corrido */
}

/* ===== 2. BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:90px}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}
body{
  font-family:var(--fonte-texto);
  background:var(--areia);
  color:var(--carvao);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* O cream sobre --terracota dava 3.91:1: texto normal a falhar o AA no
   momento em que alguém arrasta o rato por cima dele. O --terracota-botao
   existe precisamente para o laranja em bloco por baixo de texto — 4.61:1. */
::selection{background:var(--terracota-botao);color:var(--areia)}
:focus-visible{outline:2px solid var(--terracota);outline-offset:3px;border-radius:4px}

.contentor{width:min(var(--largura),92vw);margin-inline:auto}

/* Código postal + localidade que nunca se separam.
   Sem isto, na largura de secretária a linha do rodapé partia em
   "…2260-369 Vila / Nova da Barquinha" — um nome de terra cortado a
   meio, que se lê como erro de composição. É global e não só do rodapé
   porque a morada aparece em dois sítios: a identificação legal de
   todas as páginas e a secção 1 da /politica-de-privacidade.
   São ~200px a 0.78rem, por isso não transborda nem a 375px de largura
   — medido, não estimado. */
.terra{white-space:nowrap}

/* Link de salto — o primeiro elemento focável de todas as páginas.
   Fica fora do ecrã até receber o foco pelo teclado; com o rato nunca
   aparece. Não se esconde com display:none nem visibility:hidden, que
   o tirariam da ordem de tabulação e o tornariam inútil.
   O z-index tem de ser maior do que o do .nav (50), senão sai por baixo
   do cabeçalho colado ao topo. O cream sobre o carvão dá 13.52:1. */
.saltar{
  position:fixed;top:var(--e2);left:var(--e2);z-index:100;
  transform:translateY(-250%);
  background:var(--carvao);color:var(--areia);
  padding:14px 22px;border-radius:999px;
  font-weight:600;font-size:.95rem;
  transition:transform .18s ease;
}
.saltar:focus{transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  .saltar{transition:none}
}

/* O <main> leva tabindex="-1" para o salto mover mesmo o foco (sem isso
   alguns browsers movem só o scroll e o teclado continua no menu). Como
   não é um destino de tabulação normal, não leva contorno de foco. */
main:focus{outline:none}

/* ===== 3. COMPONENTES ===== */

/* Rótulo de secção — estilo "MONOGRAMA / AVATAR" da folha de marca */
.rotulo{
  display:inline-flex;align-items:center;gap:var(--e1);
  font-size:.72rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--oliva-texto);   /* texto pequeno: precisa do tom escuro */
}
.rotulo::before{
  content:"";width:10px;height:10px;border-radius:50%;flex:none;
  background:linear-gradient(180deg,var(--terracota) 0 50%,var(--raiz) 50% 100%);
}

h1,h2,h3{font-family:var(--fonte-titulo);font-weight:550;line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(2.5rem,6vw,4.4rem)}
/* ⚠️ O margin-bottom é o espaço entre um título e o texto que vem por
   baixo dele, e é --e3 em todo o lado. A referência é o par <h1> +
   entrada do topo das páginas de serviço (.servico-topo .subtitulo), que
   já usava --e3: tudo o resto foi alinhado por aí a 4/08/2026. Estava a
   --e1 (8px), e era por isso que o título colava ao texto nas secções e
   se afastava dele no topo da página. */
h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:var(--e2) 0 var(--e3)}
h3{font-size:1.25rem;font-weight:600}

.subtitulo{max-width:56ch;color:color-mix(in srgb,var(--carvao) 78%,var(--oliva));font-size:1.06rem}

/* Botões */
.btn{
  display:inline-flex;align-items:center;gap:var(--e1);
  padding:var(--e2) var(--e3);border-radius:999px;
  font-weight:600;font-size:.98rem;line-height:1;
  border:1px solid transparent;cursor:pointer;
  transition:background .25s ease,border-color .25s ease,transform .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn--cheio{background:var(--terracota-botao);color:var(--areia)}
.btn--cheio:hover{background:var(--raiz)}
/* Em fundo escuro o --raiz quase não se distingue do cartão (1,85:1) e o
   hover --carvao ficaria mais escuro do que ele: ali o botão cheio é cream. */
.seccao--escura .btn--cheio{background:var(--areia);color:var(--carvao)}
.seccao--escura .btn--cheio:hover{background:var(--areia-2)}
.btn--contorno{border-color:var(--linha);color:var(--carvao)}
.btn--contorno:hover{border-color:var(--raiz);color:var(--raiz)}
.btn--claro{background:var(--areia);color:var(--carvao)}
.btn--claro:hover{background:var(--areia-2)}

/* Fila de botões. As variantes (.hero, .caso, .convite, .prova…) ajustam
   o espaçamento e o alinhamento por cima desta base. */
.acoes{display:flex;flex-wrap:wrap;gap:var(--e2)}
/* Um botão logo a seguir a texto corrido ficava colado à última linha e
   lia-se como parte do parágrafo, não como o passo seguinte. Nos outros
   sítios é o contentor que o afasta; aqui o espaço tem de vir da regra.
   O --e5 é o mesmo que o .destaque e a .prova usam quando vêm a seguir
   a texto: é sempre o mesmo degrau entre um bloco e o seguinte. */
.prosa + .acoes{margin-top:var(--e5)}

/* Secções */
.seccao{padding:var(--e12) 0}
.seccao--escura{background:var(--carvao);color:var(--areia)}
.seccao--escura .rotulo{color:color-mix(in srgb,var(--areia) 60%,var(--oliva))}
.seccao--escura .subtitulo{color:color-mix(in srgb,var(--areia) 72%,var(--oliva))}
.cabeca-seccao{max-width:640px;margin-bottom:var(--e3)}

/* ⚠️ O espaço entre a cabeça de uma secção e o bloco que vem a seguir
   vive AQUI, e só aqui.

   Porquê esta regra: cada bloco (.lista-marcada, .faq, .objecoes,
   .passos-numerados, .prova, .destaque, .grelha-tres…) traz o seu
   próprio margin-top, que é o que precisa quando aparece a seguir a
   texto corrido. Quando aparecia a seguir à cabeça da secção, os dois
   espaços somavam-se — e como cada bloco tem o seu valor, cada secção
   ficava com um vão diferente. Medido a 4/08/2026, na mesma página:
   48px antes de um .prosa, 80 antes dos passos, 88 antes de uma lista
   e 96 antes das objeções. A home, onde os blocos não têm margin-top,
   ficava nos 48 — ou seja, duas páginas do mesmo site com ritmos
   diferentes.

   Anular o margin-top do irmão seguinte deixa um só valor em todo o
   site, e mantém o dos blocos intacto para quando NÃO vêm a seguir a
   uma cabeça de secção. O `:not(:has(.subtitulo))` que aqui estava
   (32px em vez de 48) era mais uma exceção a criar vãos diferentes na
   mesma página, e saiu.

   O valor é --e3, o mesmo que separa qualquer título do texto que lhe
   vem por baixo — a referência é o par <h1> + entrada no topo das
   páginas de serviço. Um só degrau, do título à entrada e da entrada ao
   conteúdo. Mudar o ritmo das secções é mudar este --e3. */
.cabeca-seccao + *{margin-top:0}

/* Animação de entrada (desligada se o utilizador preferir menos movimento) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.visivel{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* Cartão genérico — serviços na home, e reutilizável noutras páginas */
/* ⚠️ O .cartao SÓ FUNCIONA EM SECÇÃO CLARA, e isso não está visível
   em lado nenhum a não ser aqui. O fundo dele é cream; o
   .seccao--escura põe `color: var(--areia)` em tudo o que tem dentro,
   por herança, e só o `.cartao p` aqui em baixo declara cor própria.
   Resultado de o pôr numa secção escura: os <h3> e os <li> ficam cream
   sobre cream e desaparecem. Aconteceu a 17/08/2026 na /manutencao.
   Se algum dia for mesmo preciso em fundo escuro, é preciso desenhar a
   variante — não basta usá-lo lá. */
.cartao{
  background:color-mix(in srgb,var(--areia-2) 70%,var(--areia));
  border:1px solid var(--linha);border-radius:var(--raio);
  padding:var(--e4) var(--e3);
  transition:border-color .25s ease,transform .25s ease;
}
.cartao:hover{border-color:var(--terracota);transform:translateY(-3px)}
.cartao .icone{
  width:48px;height:48px;border-radius:14px;
  background:var(--carvao);color:var(--areia);
  display:grid;place-items:center;margin-bottom:20px;
}
.cartao h3{margin-bottom:10px}
.cartao p{font-size:.97rem;color:color-mix(in srgb,var(--carvao) 80%,var(--oliva))}

/* Ligação no fundo de um cartão de serviço, para a página própria desse
   serviço. O --raiz e não o --terracota porque é texto pequeno. */
.ligacao-cartao{
  display:inline-flex;align-items:center;gap:8px;margin-top:var(--e2);
  font-size:.93rem;font-weight:600;color:var(--raiz);
}
/* Alvo tátil (18/08/2026): media 23,8 px de altura — falhava o mínimo
   de 24 do WCAG 2.5.8 por dois décimos. Aqui o <a> é inline-flex, por
   isso o padding conta para a linha e a margem negativa devolve-a. */
.ligacao-cartao{padding-block:3px;margin-block:calc(var(--e2) - 3px) -3px}
.ligacao-cartao svg{transition:transform .25s ease}
.cartao:hover .ligacao-cartao svg{transform:translateX(3px)}
@media (prefers-reduced-motion: reduce){
  .ligacao-cartao svg{transition:none}
  .cartao:hover .ligacao-cartao svg{transform:none}
}

/* ===== 4. NAVEGAÇÃO ===== */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--areia) 92%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linha);
}
.nav .contentor{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:var(--e2);padding-bottom:var(--e2);
}
.marca{display:inline-flex;align-items:center;gap:var(--e1);font-family:var(--fonte-titulo);font-size:1.3rem;font-weight:600;letter-spacing:.01em}
.marca .ponto{width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,var(--terracota) 0 52%,var(--raiz) 52% 100%);flex:none}
.marca em{font-style:normal;color:var(--terracota)}
.nav .links{display:flex;align-items:center;gap:var(--e4);font-weight:500;font-size:.95rem}
.nav .links a:not(.btn){opacity:.85}
.nav .links a:not(.btn):hover{opacity:1;color:var(--raiz)}
.nav-toggle{display:none;background:none;border:1px solid var(--linha);border-radius:10px;padding:8px 10px;cursor:pointer;color:var(--carvao)}

/* ---- Seletor de idioma (17/08/2026) --------------------------------
   Dois links, PT e EN. Vive dentro do .links, e por isso aparece na
   barra em ecrã largo e dentro do ☰ no telemóvel, sem marcação a mais.

   ⚠️ CONTRASTE: o idioma ativo usa --terracota-botao (4.61:1 com o
   cream), e NÃO --terracota. Parecem a mesma cor e não são: o
   --terracota com cream mede 3.91:1 e falha o AA em texto pequeno.
   É a mesma correção que o .btn--cheio levou a 31/07/2026 — está
   explicada no topo deste ficheiro, linhas 37-54. A .etiqueta, que
   nasceu antes dessa correção, continua a usar o terracota claro a
   11px e é a única coisa do site que ainda falha; está por corrigir e
   não se copia daí.

   ⚠️ ALVO TÁTIL DE 44px: os rótulos têm duas letras e sem isto ficavam
   com ~22px de largura. É o critério 2.5.8 do WCAG 2.2 (AA), e num
   seletor que vive dentro de um menu de telemóvel não é teórico.
   -------------------------------------------------------------------- */
.idiomas{display:inline-flex;align-items:center;gap:2px;margin-left:var(--e1)}
.idiomas a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 6px;
  font-size:.78rem;font-weight:600;letter-spacing:.08em;
  border-radius:10px;
  color:var(--carvao);opacity:.75;
}
.idiomas a:hover{opacity:1;color:var(--raiz)}
/* O idioma ativo não é só uma cor diferente: leva fundo, para não
   depender de quem distingue dois tons de castanho. */
.idiomas a[aria-current="true"]{
  background:var(--terracota-botao);color:var(--areia);opacity:1;
}
.idiomas a[aria-current="true"]:hover{color:var(--areia)}


/* ---- Submenu de "Serviços" ----------------------------------------
   Porquê existe: o menu chegou a seis links + botão e não cabiam as
   páginas de serviço que faltam. As páginas de serviço passaram todas
   para dentro deste submenu, o que devolve uma posição à barra e deixa
   lugar para as que vierem sem voltar a mexer na barra. Foi isso que se
   confirmou a 17/08/2026: o submenu passou de três páginas para cinco,
   com o reposicionamento, e a barra não mudou uma vírgula.

   É um "disclosure", não um menubar ARIA: um <button> que abre e fecha
   uma lista de links. Abre por clique (não por hover — hover sozinho não
   funciona em ecrã táctil nem por teclado), fecha com Escape, com clique
   fora e ao seguir um link.
   ------------------------------------------------------------------- */
.tem-submenu{position:relative;display:flex;align-items:center}
.submenu-botao{
  display:inline-flex;align-items:center;gap:7px;
  font:inherit;font-weight:500;color:inherit;opacity:.85;
  background:none;border:0;padding:0;cursor:pointer;
}
.submenu-botao:hover,.submenu-botao[aria-expanded="true"]{opacity:1;color:var(--raiz)}
/* A seta é um canto de quadrado rodado: sem imagem e sem tipo de letra
   de ícones, herda a cor do texto e nunca fica dessincronizada dele. */
.submenu-botao .seta{
  width:7px;height:7px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.submenu-botao[aria-expanded="true"] .seta{transform:translateY(1px) rotate(-135deg)}
@media (prefers-reduced-motion: no-preference){
  .submenu-botao .seta{transition:transform .18s ease}
}
.submenu{
  display:none;
  /* O -20px é a soma do respiro do painel (8px) com o do link (12px):
     assim o texto dos links cai exatamente por baixo do "Serviços",
     em vez de ficar recuado o valor dos dois. */
  position:absolute;top:calc(100% + var(--e2));left:-20px;
  flex-direction:column;min-width:252px;
  background:var(--areia);border:1px solid var(--linha);border-radius:14px;
  padding:var(--e1);
  box-shadow:0 14px 34px rgba(42,33,26,.12);
}
.submenu-botao[aria-expanded="true"] + .submenu{display:flex}
/* O ".nav .links" à frente não é decoração: sem ele a regra genérica
   ".nav .links a:not(.btn)" é mais específica e ganha a opacidade. */
.nav .links .submenu a{display:block;padding:10px 12px;border-radius:9px;opacity:.9;white-space:nowrap}
.nav .links .submenu a:hover{background:var(--areia-2);opacity:1;color:var(--raiz)}
.nav .links .submenu a[aria-current="page"]{background:var(--areia-2);color:var(--raiz);opacity:1}

/* Com "Trabalhos" o menu passou a cinco links + botão: entre os 781px
   (onde o hamburger desaparece) e os 980px o espaço deixa de chegar.
   Com "Manutenção" foram seis links + botão e o aperto começou mais cedo,
   por isso o limite subiu de 980px para 1080px. O submenu voltou a pôr
   cinco, e o limite ficou onde estava.

   ⚠️ SUBIU PARA 1200px A 05/09/2026, e é a terceira vez que este número
   se mexe pela mesma razão: o menu cresceu. O submenu "Serviços"
   desapareceu com o reposicionamento e as páginas que ele escondia
   passaram todas para a barra — são seis links, e um deles é
   "Automação de processos", o rótulo mais longo que este menu já teve.
   O botão passou de "Pedir proposta" a "Marcar um piloto", que também
   não encolheu. Não é gosto: abaixo dos 1200px os seis links e o botão
   deixam de caber na mesma linha sem o corpo mais pequeno. */
@media (max-width:1200px){
  .nav .links{gap:var(--e2);font-size:.9rem}
  .nav .links .btn{padding:12px 20px}
}

@media (max-width:780px){
  .nav .links{display:none}
  .nav-toggle{display:inline-flex}
  .nav.aberto .links{
    display:flex;flex-direction:column;align-items:flex-start;gap:var(--e2);
    position:absolute;left:0;right:0;top:100%;
    background:var(--areia);border-bottom:1px solid var(--linha);
    padding:var(--e3) 4vw var(--e3);
    font-size:.95rem;
  }
  /* No menu móvel o submenu não flutua por cima: abre encaixado por baixo
     do "Serviços", indentado. Um painel a flutuar dentro de outro painel
     já a flutuar não tem para onde ir num ecrã estreito. */
  .tem-submenu{display:block;width:100%}
  .submenu{
    position:static;min-width:0;
    background:none;border:0;box-shadow:none;
    padding:var(--e1) 0 0 var(--e2);
  }
  .nav .links .submenu a{padding:8px 0;white-space:normal}
  .nav .links .submenu a:hover,
  .nav .links .submenu a[aria-current="page"]{background:none}
}

/* ===== 5. RODAPÉ ===== */
.rodape{border-top:1px solid var(--linha);padding:var(--e6) 0 var(--e8)}
.rodape .contentor{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center;justify-content:space-between}
.rodape p{font-size:.88rem;color:var(--oliva-texto)}

/* ---- Linha legal do rodapé ----------------------------------------
   Duas obrigações diferentes, que caem no mesmo sítio:

   1. A IDENTIFICAÇÃO do prestador — nome civil, morada e email —
      exigida pelo artigo 10.º do Decreto-Lei 7/2004 a quem presta
      serviços da sociedade da informação. A terraroot é nome
      comercial de uma pessoa singular: por isso o nome que aqui
      aparece é o do Tiago, e NÃO há denominação social, matrícula,
      capital social nem NIF para pôr. Não são campos em falta — não
      existem. Não os inventar por parecer que falta ali qualquer coisa.

   2. O LINK para a política de privacidade, que o RGPD manda estar
      acessível de qualquer página onde se recolham dados.

   O `flex-basis:100%` empurra o bloco para uma linha só dele: o
   .contentor do rodapé é flex com wrap, e sem isto esta linha
   comprida entrava a disputar espaço com o logótipo.

   ⚠️ Está copiada em todos os .html — como o resto do rodapé.
   Se mudar a morada ou o email, muda em todos.
   -------------------------------------------------------------------- */
.rodape-legal{
  flex-basis:100%;
  border-top:1px solid var(--linha);
  padding-top:var(--e3);
  display:flex;flex-wrap:wrap;gap:var(--e1) var(--e3);
  align-items:baseline;justify-content:space-between;
}
.rodape-legal p{font-size:.78rem;line-height:1.6;max-width:78ch}
.rodape-legal .ligacoes{display:flex;flex-wrap:wrap;gap:var(--e2);font-size:.78rem}
.rodape-legal a{color:var(--oliva-texto);text-decoration:underline;text-underline-offset:3px}

/* ---- Alvo tátil das ligações do rodapé (18/08/2026) ----------------
   Medidas em Chromium, nas 16 páginas: o email tinha 16 px de altura e
   as duas legais 18 px. O mínimo do WCAG 2.5.8 (AA) é 24×24.

   O `padding-block` resolve-o SEM mexer no aspeto, e a razão é a
   diferença entre os dois casos:

   • o email vive num <p> e é uma caixa em linha — o padding vertical de
     uma caixa em linha aumenta a área clicável mas NÃO aumenta a altura
     da linha. Sai de graça.
   • as duas legais vivem num <p class="ligacoes"> que é flex, o que as
     torna itens de flex — aí o padding conta mesmo. A margem negativa
     devolve a altura exterior ao que era.

   Não têm fundo nem contorno, por isso a área maior é invisível.
   ⚠️ Se um dia levarem fundo ou moldura, o padding passa a ver-se e há
   que decidir outra vez. -------------------------------------------- */
.rodape-legal a{padding-block:5px}
.rodape-legal .ligacoes a{margin-block:-5px}
.rodape-legal a:hover{color:var(--raiz)}

/* ===== 6. TRABALHOS ===== */
/* ------------------------------------------------------------
   COMO ACRESCENTAR O 2.º E O 3.º CASO
   Basta juntar mais um <article class="caso"> dentro de
   .trabalhos-lista e acrescentar a classe --grelha ao contentor:

     <div class="trabalhos-lista trabalhos-lista--grelha">

   O markup de cada .caso não muda. Com --grelha, o caso deixa de
   ser horizontal (imagem ao lado do texto) e passa a vertical
   (imagem por cima), e a lista distribui-se em colunas.
   ------------------------------------------------------------ */
.trabalhos-lista{display:grid;gap:var(--e3)}
.trabalhos-lista--grelha{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

/* O cartão lê-se como objeto pousado sobre a página: fundo próprio,
   mais quente do que o cream, e a captura emoldurada lá dentro em vez
   de sangrar até à borda. Mesmo tratamento da página de caso. */
.caso{
  display:grid;grid-template-columns:1.05fr .95fr;
  background:var(--areia-2);
  border:1px solid var(--linha);border-radius:var(--raio);
  overflow:hidden;
  transition:border-color .25s ease;
}
.caso:hover{border-color:color-mix(in srgb,var(--terracota) 55%,var(--linha))}

/* A moldura tem folga à volta da imagem. É essa folga que absorve a
   diferença de altura entre as duas colunas — por isso a captura pode
   manter a proporção real e não é cortada em lado nenhum. */
.caso .imagem{
  display:flex;align-items:center;
  padding:var(--e4);
  background:color-mix(in srgb,var(--carvao) 5%,var(--areia-2));
  border-right:1px solid var(--linha);
}
.caso .imagem img{
  width:100%;height:auto;
  aspect-ratio:1600/829;object-fit:cover;object-position:top center;
  border:1px solid var(--linha);
  border-radius:var(--raio-imagem);
  box-shadow:0 18px 40px -26px rgba(42,33,26,.55);
}

.caso .conteudo{padding:var(--e5) var(--e4);display:flex;flex-direction:column;align-items:flex-start}
.caso .cliente{font-family:var(--fonte-titulo);font-size:1.6rem;font-weight:600;line-height:1.15;letter-spacing:-.01em}
.caso .posicionamento{margin-top:var(--e1);font-size:1rem;color:color-mix(in srgb,var(--carvao) 80%,var(--oliva))}

/* ---- Pills de âmbito ----------------------------------------------
   São metadados, não botões: contorno e cinza-quente neutro. O
   terracota fica reservado para ações. Ver "Regra do terracota".
   -------------------------------------------------------------------- */
.etiquetas{list-style:none;display:flex;flex-wrap:wrap;gap:var(--e1)}
.etiquetas li{
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--oliva-texto);
  background:transparent;
  border:1px solid var(--linha);
  padding:6px 12px;border-radius:999px;
}
.caso .etiquetas{margin-top:var(--e3)}

/* ⚠️ RODAPÉ DE TRANSPARÊNCIA DO CASO — acrescentado a 05/09/2026.
   Diz que o primeiro cliente já era conhecido de antes. É informação que
   ENFRAQUECE a prova, e é exatamente por isso que está lá: uma prova
   social que esconde como se chegou ao cliente não se aguenta à primeira
   pergunta, e quem a faz é sempre o cliente que interessa.
   Mesmo tom da .posicionamento, um degrau abaixo e um degrau mais claro.

   ⚠️ O SELECTOR NÃO É `.caso .transparencia`, e isso é de propósito: o
   mesmo rodapé aparece no cartão do caso, nas duas homes, E na página do
   caso de estudo por baixo da .ficha-caso, onde não há `.caso` nenhum à
   volta. Um só selector serve os dois.

   Contraste MEDIDO nos dois fundos em que assenta, não estimado:
   #493f31 sobre --areia-2 (#E9E1D0) dá 7.92:1, e sobre --areia
   (#F2EDE2) dá 8.82:1. O mínimo AA para texto pequeno é 4.5:1. */
.transparencia{
  margin-top:var(--e2);font-size:.88rem;font-style:italic;
  color:color-mix(in srgb,var(--carvao) 68%,var(--oliva));
}

.caso .acoes{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:auto;padding-top:var(--e4)}
.caso .acoes .btn{padding:12px 20px;font-size:.92rem}

/* Seta dos links que saem do site. Global: usada na home e na página de caso. */
.externo svg{flex:none}

@media (max-width:900px){
  .caso{grid-template-columns:1fr}
  .caso .imagem{padding:var(--e3);border-right:0;border-bottom:1px solid var(--linha)}
  .caso .conteudo{padding:var(--e4) var(--e3)}
}

/* ===== 7. HERO + HORIZONTE (o elemento-assinatura) ===== */
.hero{position:relative;padding:104px 0 140px}
.hero .rotulo{margin-bottom:18px}
.hero h1{max-width:13ch}
.hero .subtitulo{margin:22px 0 34px}
.hero .acoes{display:flex;flex-wrap:wrap;gap:14px}

/* O "sol/semente": círculo dividido pousado na linha do horizonte */
.sol{
  position:absolute;right:7vw;bottom:0;z-index:5;
  width:min(340px,32vw);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(180deg,var(--terracota) 0 52%,var(--raiz) 52% 100%);
  box-shadow:0 34px 70px -32px rgba(143,59,16,.55);
  transform:translateY(50%);
}
@media (prefers-reduced-motion: no-preference){
  .sol{animation:nascer 1.3s cubic-bezier(.22,.8,.35,1) both}
  @keyframes nascer{from{transform:translateY(92%)}to{transform:translateY(50%)}}
}
@media (max-width:780px){
  .hero{padding:72px 0 120px}
  .sol{width:170px;right:6vw}
}

/* Faixa escura: a terra por baixo do horizonte */
.horizonte{background:var(--carvao);color:var(--areia);padding:72px 0 60px}
.horizonte p{
  max-width:34ch;font-family:var(--fonte-titulo);
  font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.35;
}
.horizonte strong{color:var(--terracota-claro);font-weight:600}

/* ===== 8. SERVIÇOS ===== */
.grelha-servicos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e3)}
@media (max-width:900px){.grelha-servicos{grid-template-columns:1fr}}

/* ===== 9. MÉTODO ===== */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4)}
.passo{border-top:1px solid var(--linha);padding-top:22px}
.passo .numero{
  font-family:var(--fonte-titulo);font-style:italic;font-weight:500;
  font-size:2rem;color:var(--terracota);line-height:1;
}
.passo h3{margin:12px 0 8px}
.passo p{font-size:.97rem;color:color-mix(in srgb,var(--carvao) 80%,var(--oliva))}
@media (max-width:900px){.passos{grid-template-columns:1fr;gap:26px}}

/* ===== 10. PLANOS ===== */
/* ⚠️ O margin-top NÃO É DECORATIVO — corrige uma colisão de 05/09/2026.
   O que fica por cima da grelha (a pastilha do pagamento anual e, desde
   o reposicionamento, o .destaque com o preço da construção) não tem
   margem inferior nenhuma, e a grelha não tinha margem superior: o
   espaço entre os dois era ZERO.

   E zero não chega, porque a .etiqueta do plano em destaque é
   `position:absolute; top:-13px` — sobe 13px acima do cartão, para fora
   da caixa dele. Com espaço nenhum, o "MAIS ESCOLHIDO" do Copa encostava
   ao bloco de cima e lia-se como se pertencesse a ele.

   São --e6 (48px) e não --e5 por causa desses 13px: o vazio que fica a
   ver-se por cima da etiqueta é 48-13 = 35px, ainda acima dos 24px do
   `gap` entre os cartões. Com --e5 seriam 27px e a etiqueta voltava a
   ficar mais perto do bloco de cima do que os cartões estão uns dos
   outros, que é o que fazia a colisão ler-se mal.

   ⚠️ Se um dia a .etiqueta mudar de `top`, este número muda com ela. */
.grelha-planos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e3);align-items:stretch;margin-top:var(--e6)}
.plano{
  background:var(--carvao-2);
  border:1px solid var(--linha-clara);border-radius:var(--raio);
  padding:32px 28px;display:flex;flex-direction:column;gap:0;
}
.plano--destaque{border-color:var(--terracota);position:relative}
/* ⚠️ O FUNDO É --terracota-botao E NÃO --terracota, e a diferença não
   é de gosto: era a última falha de contraste do site.

   O rótulo tem 0.7rem (11.2px) e peso 700. Para o WCAG isso é texto
   NORMAL — "texto grande" começa nos 18.66px a negrito —, por isso o
   mínimo AA é 4.5:1 e não 3:1. Com --terracota media 3.91:1 e falhava;
   com --terracota-botao mede 4.61:1 e passa.

   É exatamente a mesma correção que o .btn--cheio levou a 31/07/2026 e
   que o seletor de idioma já nasceu a usar. Os dois tons parecem iguais
   ao lado um do outro e não são: a explicação da família de terracotas
   está no topo deste ficheiro, linhas 37-54.

   ⚠️ Não voltar ao --terracota "porque fica mais vivo". Se algum dia se
   quiser mesmo o tom claro aqui, o caminho é subir a letra para 18.66px
   a negrito — não baixar o contraste. */
.etiqueta{
  position:absolute;top:-13px;left:26px;
  background:var(--terracota-botao);color:var(--areia);
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;
}
/* A mesma pastilha, mas em fluxo em vez de colada ao canto de um cartão
   (17/08/2026). Serve o "dois meses grátis" do pagamento anual, que vale
   para os três planos e por isso não pertence a cartão nenhum — fica por
   cima da grelha, ao pé dos preços, onde a decisão é tomada.
   É variante, não componente novo: herda cor, forma e tipografia da
   .etiqueta e só desfaz o posicionamento absoluto. */
.etiqueta--anual{
  position:static;display:inline-block;
  margin-bottom:var(--e4);letter-spacing:.1em;
}
.plano h3{font-size:1.35rem}
.plano .para-quem{font-size:.9rem;color:color-mix(in srgb,var(--areia) 65%,var(--oliva));margin:6px 0 18px}
.preco{font-family:var(--fonte-titulo);font-size:2.3rem;font-weight:600;line-height:1}
.preco span{font-family:var(--fonte-texto);font-size:.95rem;font-weight:500;color:color-mix(in srgb,var(--areia) 65%,var(--oliva))}

/* ⚠️ AQUI ESTAVAM O .preco-real E O .preco-inicial, e saíram a
   05/09/2026 com o reposicionamento. Não é limpeza de estilo: são regras
   que deixaram de ter elemento nenhum para desenhar.

   O .preco-real era o "com backend, como na maioria das apps
   operacionais" — a leitura honesta do preço quando quase toda a
   aplicação precisava do módulo de backend. O módulo deixou de existir:
   nesta oferta há sempre servidor.

   O .preco-inicial era a caixa tracejada do "+ construção do projeto:
   sob orçamento", repetida nos três cartões. A construção passou a ter
   número — a partir de 6.000 € — e é dito uma vez só, acima da grelha,
   com o .destaque que o site já usava noutros sítios.

   Se um dia voltar a haver um segundo preço por cartão, o que aqui
   estava era: o .preco-real em texto corrido, sem caixa, para não
   competir com o .preco; e o .preco-inicial numa caixa de fundo
   terracota a 16% com bordo tracejado. Ver o histórico do git. */
.plano ul{list-style:none;margin:22px 0 28px;display:grid;gap:11px;font-size:.95rem}
.plano li{display:flex;gap:10px;align-items:flex-start}
.plano li::before{content:"✓";color:var(--terracota);font-weight:700;flex:none}

/* ⚠️ E AQUI ESTAVA O `.plano li.modulo::before`, que trocava o ✓ por um
   "+" na linha do módulo de backend. Saiu a 05/09/2026, com o módulo.

   A razão fica escrita porque o padrão volta a ser preciso no dia em que
   houver outra vez um item com preço próprio dentro de um cartão: o ✓ diz
   "está incluído", e um extra é exatamente o contrário. Um ✓ à frente de
   "+100 a 200 €/mês" é uma contradição dentro da mesma linha, e quem lê
   em diagonal fica com a metade errada. O "+" diz o que a linha é: uma
   soma ao preço de cima. */
.plano .btn{margin-top:auto;justify-content:center}
.nota-planos{margin-top:26px;font-size:.85rem;color:color-mix(in srgb,var(--areia) 60%,var(--oliva))}
@media (max-width:900px){.grelha-planos{grid-template-columns:1fr}}

/* ===== 11. CONTACTO ===== */
.contacto{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:start}
.linhas-contacto{display:grid;gap:0;border-top:1px solid var(--linha)}
.linha-contacto{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:20px 2px;border-bottom:1px solid var(--linha);
  font-weight:500;
}
.linha-contacto .tipo{font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--oliva-texto)}
.linha-contacto a:hover{color:var(--raiz)}
@media (max-width:900px){.contacto{grid-template-columns:1fr;gap:36px}}

/* Formulário de pedido de orçamento */
.formulario{display:grid;gap:18px;margin-top:30px}
.campo{display:grid;gap:7px}
.campo label{
  font-size:.74rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--oliva-texto);
}
.campo .opcional{letter-spacing:0;text-transform:none;font-weight:400;font-size:.8rem}
.campo input,.campo select,.campo textarea{
  font-family:var(--fonte-texto);font-size:1rem;color:var(--carvao);
  background:color-mix(in srgb,var(--areia-2) 45%,var(--areia));
  border:1px solid var(--linha);border-radius:12px;
  padding:13px 15px;width:100%;
  transition:border-color .25s ease,background .25s ease;
}
.campo textarea{min-height:130px;resize:vertical;line-height:1.55}
.campo select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A7F63' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:42px;
}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:color-mix(in srgb,var(--terracota) 45%,var(--linha))}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:2px solid var(--terracota);outline-offset:2px;
  border-color:var(--terracota);background:var(--areia);
}
/* ⚠️ O PLACEHOLDER É TEXTO, e o AA não o dispensa. Estava a
   color-mix(--oliva 80%, transparent) sobre o fundo do campo: 2.46:1.
   O --oliva-texto dá 4.87:1 e continua a ler-se como sugestão e não
   como valor escrito — o que a pessoa escreve é --carvao, a 12.92:1,
   e a distância entre os dois é o que faz a diferença ser visível. */
.campo input::placeholder,.campo textarea::placeholder{color:var(--oliva-texto)}
.campo--erro input,.campo--erro select,.campo--erro textarea{border-color:var(--raiz);background:color-mix(in srgb,var(--raiz) 6%,var(--areia))}
.erro{font-size:.85rem;color:var(--raiz);font-weight:500;min-height:0}
.erro:empty{display:none}
.par{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.par{grid-template-columns:1fr}}
.mel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Consentimento RGPD -------------------------------------------
   A caixa que tem de ser marcada antes de enviar. Regras que não são
   de gosto, são da lei (RGPD, art. 4.º/11 e 7.º):

   • NUNCA pré-marcada. Um `checked` no HTML invalida o consentimento —
     o acórdão Planet49 do TJUE é explícito. Se um dia alguém achar
     que "dava jeito", a resposta é não.
   • Tem de ser um ato separado: por isso é uma caixa própria e não
     uma frase debaixo do botão a dizer "ao enviar, aceitam".
   • O texto tem de dizer ao que vem, com o link para a política.

   Porquê classe própria e não .campo: o .campo põe as etiquetas em
   maiúsculas espaçadas, que é o desenho certo para "NOME" ou "EMAIL"
   e ilegível para uma frase de duas linhas.

   O appearance:none troca a caixa do sistema por uma desenhada com as
   cores da marca. Em modo de alto contraste isso apagava a caixa toda,
   por isso o @media forced-colors devolve-a ao sistema.
   -------------------------------------------------------------------- */
.consentimento{
  display:grid;grid-template-columns:auto 1fr;gap:10px var(--e2);
  align-items:start;margin-top:2px;
}
.consentimento input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:22px;height:22px;margin-top:2px;flex:none;
  border:1px solid var(--linha);border-radius:6px;
  background:color-mix(in srgb,var(--areia-2) 45%,var(--areia));
  cursor:pointer;display:grid;place-items:center;
  transition:border-color .2s ease,background .2s ease;
}
.consentimento input[type="checkbox"]:hover{border-color:color-mix(in srgb,var(--terracota) 45%,var(--linha))}
.consentimento input[type="checkbox"]::after{
  content:"";width:11px;height:6px;
  border-left:2.5px solid var(--areia);border-bottom:2.5px solid var(--areia);
  transform:rotate(-45deg) translate(1px,-1px);
  opacity:0;transition:opacity .15s ease;
}
.consentimento input[type="checkbox"]:checked{background:var(--terracota-botao);border-color:var(--terracota-botao)}
.consentimento input[type="checkbox"]:checked::after{opacity:1}
.consentimento label{
  font-size:.9rem;line-height:1.55;font-weight:400;
  letter-spacing:0;text-transform:none;
  color:color-mix(in srgb,var(--carvao) 82%,var(--oliva));
  cursor:pointer;
}
.consentimento label a{color:var(--raiz);text-decoration:underline;text-underline-offset:3px}
/* Alvo tátil: 18 px. Caixa em linha dentro do <label>, padding de graça.
   ⚠️ NÃO confundir com a caixa de seleção ao lado, que fica nos 22 px por
   decisão — o <label for> faz o texto todo alternar a caixa, por isso a
   área que se toca é muito maior do que o quadrado desenhado. */
.consentimento label a{padding-block:4px}
.consentimento label a:hover{color:var(--terracota-botao)}
/* O erro alinha por baixo do texto, não por baixo da caixa */
.consentimento .erro{grid-column:2}
.consentimento--erro input[type="checkbox"]{
  border-color:var(--raiz);
  background:color-mix(in srgb,var(--raiz) 8%,var(--areia));
}
@media (forced-colors: active){
  .consentimento input[type="checkbox"]{appearance:auto;-webkit-appearance:auto}
  .consentimento input[type="checkbox"]::after{display:none}
}

/* ---- Verificação antispam (Turnstile) ------------------------------
   O widget e mais nada. Aqui esteve uma caixa com rótulo, dois parágrafos
   a explicar a Cloudflare e um botão para a ativar; saiu a 07/09/2026, por
   decisão do Tiago: *"nada de explicar, muitos forms têm isso e não é
   preciso explicar"*. Se voltar a fazer falta explicar, o sítio é a
   política de privacidade, não o meio do formulário.

   ⚠️ O widget da Cloudflare vem dentro de uma <iframe> de 300×65 px que
   NÃO se pode estilizar de fora. O que se faz aqui é reservar-lhe a
   altura — para a página não dar um salto quando ele acaba de carregar —
   e deixá-lo encolher em ecrãs estreitos. O resto é dele.
   -------------------------------------------------------------------- */
.verificacao{display:grid;gap:8px}
.verificacao__widget{min-height:65px}
.verificacao__widget iframe{max-width:100%}

.formulario .btn[disabled]{opacity:.6;cursor:progress}
.estado{font-size:.95rem;font-weight:500;line-height:1.5}
.estado:empty{display:none}
.estado--ok{color:var(--carvao);padding-left:14px;border-left:3px solid var(--terracota)}
.estado--falhou{color:var(--raiz);padding-left:14px;border-left:3px solid var(--raiz)}
.alternativa{font-size:.88rem;color:var(--oliva-texto);margin-top:2px}
.alternativa a{color:var(--raiz);text-decoration:underline;text-underline-offset:3px;padding-block:4px}

/* ===== 12. BLOCOS QUE JÁ SERVEM MAIS DO QUE UMA PÁGINA =====
   ------------------------------------------------------------
   Estes três nasceram no <style> local de
   /trabalhos/codigo-luminoso.html. Quando a página de manutenção
   passou a usá-los, mudaram-se para aqui — é a regra do topo deste
   ficheiro: duas cópias já são uma cópia a mais.
   ------------------------------------------------------------ */

/* Migalhas de pão: onde estou, e o caminho de volta */
.migalhas{font-size:.85rem;color:var(--oliva-texto);margin-bottom:var(--e3)}
.migalhas ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--e1)}
/* Mesma correção de alvo tátil do rodapé, e pela mesma razão: as
   migalhas mediam 18 px de altura. Aqui é sempre o caso fácil — o <a>
   é uma caixa em linha dentro do <li>, e o <li> é que é o item de flex,
   por isso o padding não empurra nada. */
.migalhas a{padding-block:4px}
.migalhas a:hover{color:var(--raiz)}
.migalhas li[aria-current]{color:color-mix(in srgb,var(--carvao) 78%,var(--oliva))}
/* O separador não leva cor própria, e a ausência é a correção: a
   color-mix(--oliva 55%, transparent) que aqui estava dava 1.84:1 sobre
   o cream. Herda o --oliva-texto das migalhas (5.10:1). A hierarquia não
   se perde por isso — quem manda nela é o item da página atual, que é
   mais escuro (10.15:1) do que os links e do que a barra. */

/* Texto corrido, limitado à medida de leitura */
.prosa{max-width:var(--medida)}
.prosa p{margin-bottom:var(--e2);font-size:1.05rem;color:color-mix(in srgb,var(--carvao) 82%,var(--oliva))}
.prosa p:last-child{margin-bottom:0}
.prosa strong{font-weight:600;color:var(--carvao)}
.seccao--escura .prosa p{color:color-mix(in srgb,var(--areia) 78%,var(--oliva))}

/* ---- Links dentro de texto corrido --------------------------------
   ⚠️ NÃO EXISTIAM ATÉ 05/09/2026, e a ausência não se via a ler o CSS:
   a regra global da secção 3 é `a{color:inherit;text-decoration:none}`,
   por isso um link no meio de um parágrafo saía com a cor do parágrafo
   e sem sublinhado — lia-se como texto normal. Tinham estilo só os
   links do rodapé legal, do bloco legal, do consentimento e da
   .alternativa; todos os outros, catorze nas vinte páginas, estavam
   invisíveis.
   Foi assim que a /websites se perdeu: os dois únicos links contextuais
   que apontavam para ela, na /sobre e na /en/about, não se viam.
   É o critério 1.4.1 do WCAG — a distinção não pode depender só da cor,
   e aqui nem cor havia. Daí o sublinhado, e não só a cor.
   ⚠️ --raiz e não --terracota, pela Regra do terracota da secção 1: o
   terracota dá 3.91:1 sobre a areia e um link é texto pequeno; o raiz
   dá 6.42:1. Em fundo escuro passa a areia, pela mesma razão que o
   .btn--cheio muda lá — o laranja separa-se pouco do carvão.

   ⚠️ O HOVER NÃO MUDA DE COR, e é de propósito. A primeira versão desta
   regra punha --terracota no hover e desfazia o que a linha de cima
   acabou de decidir: 3.91:1 sobre a areia, e 3.64:1 sobre o fundo do
   .destaque, que é onde vivem os dois links das faixas da home. Um link
   que só falha o contraste enquanto o rato está em cima continua a
   falhar. O --terracota-botao também não serve aqui: dá 4.61:1 sobre a
   areia mas 4.29:1 sobre o .destaque. Engrossar o sublinhado dá o mesmo
   sinal e não toca no contraste em fundo nenhum — e por não mexer na
   cor, deixa de haver o empate de especificidade com a regra do fundo
   escuro, que vinha a seguir e ganhava ao hover.

   ⚠️ OS QUATRO CONTENTORES SÃO A LISTA TODA, e cada um está aqui por
   causa de links que existem hoje: .prosa e .destaque, os .passos-
   numerados (a /automacao-de-processos liga daí ao /piloto e à
   /operacao) e os .subtitulo (a /operacao liga daí ao /#planos). Quem
   escrever um link no meio de texto num bloco que não esteja nesta
   lista está a escrever um link invisível — acrescentar aqui. */
.prosa a:not(.btn),
.lista-marcada a:not(.btn),
.passos-numerados a:not(.btn),
.subtitulo a:not(.btn),
.destaque a:not(.btn){
  color:var(--raiz);text-decoration:underline;text-underline-offset:3px;
}
.prosa a:not(.btn):hover,
.lista-marcada a:not(.btn):hover,
.passos-numerados a:not(.btn):hover,
.subtitulo a:not(.btn):hover,
.destaque a:not(.btn):hover{text-decoration-thickness:2px}
.seccao--escura .prosa a:not(.btn),
.seccao--escura .lista-marcada a:not(.btn),
.seccao--escura .passos-numerados a:not(.btn),
.seccao--escura .subtitulo a:not(.btn),
.seccao--escura .destaque a:not(.btn){color:var(--areia)}
.seccao--escura .prosa strong{color:var(--areia)}

/* Convite final — o CTA que fecha as páginas interiores */
.convite{text-align:center;padding:var(--e12) 0}
.convite h2{max-width:18ch;margin-inline:auto}
.convite .subtitulo{margin:var(--e3) auto var(--e4);text-align:center}
.convite .acoes{display:flex;flex-wrap:wrap;gap:var(--e2);justify-content:center}

/* ===== 13. PÁGINAS DE SERVIÇO =====
   ------------------------------------------------------------
   Blocos desenhados para servirem as quatro páginas de serviço,
   não só a da manutenção. Nenhum deles menciona manutenção,
   backups ou planos: se um bloco daqui só fizer sentido numa
   página, é porque pertence ao <style> dessa página.
   Ver /modelos/pagina-servico.html e /PROXIMAS-PAGINAS.md.
   ------------------------------------------------------------ */

/* Duas secções seguidas com o mesmo fundo: sem isto o vão entre
   elas fica do tamanho de dois espaçamentos e lê-se como um buraco. */
.seccao--continua{padding-top:var(--e5)}

/* ---- Cabeçalho da página de serviço ---- */
.servico-topo{padding:var(--e5) 0 var(--e10)}
.servico-topo h1{font-size:clamp(2.1rem,4.8vw,3.4rem);max-width:20ch}
.servico-topo .rotulo{margin-bottom:var(--e2)}
.servico-topo .subtitulo{margin:var(--e3) 0 var(--e4);font-size:1.12rem;max-width:60ch}
.servico-topo .acoes{display:flex;flex-wrap:wrap;gap:var(--e2)}

/* ---- Lista marcada: "o que está incluído" / "o que não está" -------
   O sinal (✓ ou ✕) é decorativo e leva aria-hidden: quem ouve a
   página percebe pelo <h2> da secção se a lista é do que entra ou
   do que fica de fora. Um ✓ lido em voz alta não diz nada.
   -------------------------------------------------------------------- */
.lista-marcada{list-style:none;display:grid;gap:var(--e4);margin-top:var(--e5)}
.lista-marcada--colunas{grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--e5) var(--e4)}
.lista-marcada li{display:grid;grid-template-columns:auto 1fr;gap:var(--e2);align-items:start}
.lista-marcada .sinal{
  width:26px;height:26px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-size:.85rem;font-weight:700;line-height:1;
  background:color-mix(in srgb,var(--terracota) 14%,transparent);
  color:var(--raiz);
}
.lista-marcada h3{font-size:1.06rem;margin-bottom:6px}
.lista-marcada p{font-size:.97rem;color:color-mix(in srgb,var(--carvao) 80%,var(--oliva))}
.lista-marcada strong{font-weight:600;color:var(--carvao)}
.seccao--escura .lista-marcada .sinal{background:color-mix(in srgb,var(--terracota) 30%,transparent);color:var(--areia)}
.seccao--escura .lista-marcada p{color:color-mix(in srgb,var(--areia) 76%,var(--oliva))}
.seccao--escura .lista-marcada strong{color:var(--areia)}

/* A variante do que fica de fora: sem terracota, que aqui é cor de ação. */
.lista-marcada--nao .sinal{background:transparent;border:1px solid var(--linha);color:var(--oliva-texto)}

/* ---- Passos numerados ----------------------------------------------
   Uma sequência por ordem: a numeração é informação, não decoração,
   por isso é um <ol> a sério e não uma lista com pontos. O
   list-style:none faz o VoiceOver deixar de anunciar isto como lista —
   daí o role="list" no <ol>, que lho devolve.

   Nasceu na /manutencao-de-websites (os passos da migração) e mudou-se
   para aqui a 3/08/2026, quando a /criacao-de-websites passou a usar o
   mesmo bloco para as etapas de um projeto.

   ⚠️ O 1.6rem não é estético: são 25.6px, e é o que põe este número
   acima dos 24px a partir dos quais o AA pede 3:1 em vez de 4.5:1. O
   terracota sobre o carvão dá 3.45:1 — passa como texto grande, falhava
   como texto normal. A 1.4rem (22.4px) estava a falhar. Medido, não
   estimado. Mesma família de regras do topo deste ficheiro.
   -------------------------------------------------------------------- */
.passos-numerados{list-style:none;counter-reset:passo;display:grid;gap:var(--e3);margin-top:var(--e4);max-width:var(--medida)}
.passos-numerados li{counter-increment:passo;display:grid;grid-template-columns:auto 1fr;gap:var(--e2);align-items:baseline}
.passos-numerados li::before{
  content:counter(passo);
  font-family:var(--fonte-titulo);font-style:italic;font-weight:500;
  font-size:1.6rem;line-height:1;color:var(--terracota);
  min-width:1.2em;
}
.passos-numerados h3{font-size:1.06rem;margin-bottom:4px}
.passos-numerados p{font-size:.97rem;color:color-mix(in srgb,var(--carvao) 80%,var(--oliva))}
.seccao--escura .passos-numerados li{color:color-mix(in srgb,var(--areia) 78%,var(--oliva))}
.seccao--escura .passos-numerados p{color:color-mix(in srgb,var(--areia) 76%,var(--oliva))}

/* ---- Destaque: a frase que não pode passar despercebida ---- */
.destaque{
  margin-top:var(--e5);padding:var(--e3) var(--e4);
  max-width:var(--medida);
  border-left:3px solid var(--terracota);
  border-radius:0 var(--raio-imagem) var(--raio-imagem) 0;
  background:color-mix(in srgb,var(--areia-2) 65%,var(--areia));
  font-size:1.02rem;
}
.destaque strong{font-weight:600}
.seccao--escura .destaque{background:var(--carvao-2);color:color-mix(in srgb,var(--areia) 88%,var(--oliva))}
.seccao--escura .destaque strong{color:var(--areia)}

/* ---- Objeções: a pergunta em itálico, a resposta a seguir ----
   Não é uma FAQ e não leva schema. São as frases que aparecem mesmo
   nas conversas, respondidas por extenso. A FAQ, essa, é outra secção.
   -------------------------------------------------------------------- */
.objecoes{display:grid;gap:var(--e6);margin-top:var(--e6)}
.objecao{max-width:var(--medida)}
.objecao h3{
  font-family:var(--fonte-titulo);font-style:italic;font-weight:500;
  font-size:clamp(1.2rem,2.4vw,1.5rem);line-height:1.25;
  margin-bottom:var(--e2);
}
.seccao--escura .objecao h3{color:var(--areia)}

/* ---- FAQ em acordeão ------------------------------------------------
   <details>/<summary> nativos: abrem e fecham por teclado sem uma
   linha de JavaScript, e o conteúdo está sempre no HTML para os
   motores de busca. A Google aceita FAQ atrás de expansores — o que
   não aceita é marcar no JSON-LD perguntas que não estão na página.
   -------------------------------------------------------------------- */
.faq{display:grid;margin-top:var(--e5);border-top:1px solid var(--linha)}
.pergunta{border-bottom:1px solid var(--linha)}
.pergunta summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  padding:var(--e3) 2px;cursor:pointer;
  font-weight:600;font-size:1.05rem;line-height:1.35;
  list-style:none;
}
.pergunta summary::-webkit-details-marker{display:none}
/* A pergunta é um <h3> para o índice da página ficar correto, mas
   lê-se como texto: aqui o serifado dos títulos pesava a mais. */
.pergunta summary h3{font-family:var(--fonte-texto);font-size:1.05rem;font-weight:600;line-height:1.35;letter-spacing:0}
.pergunta summary::after{
  content:"+";flex:none;
  font-size:1.4rem;font-weight:400;line-height:1;
  color:var(--raiz);
  transition:transform .2s ease;
}
.pergunta[open] summary::after{content:"−"}
.pergunta summary:hover{color:var(--raiz)}
.pergunta .resposta{padding:0 2px var(--e3);max-width:var(--medida)}
.pergunta .resposta p{font-size:1rem;color:color-mix(in srgb,var(--carvao) 80%,var(--oliva));margin-bottom:var(--e2)}
.pergunta .resposta p:last-child{margin-bottom:0}
.pergunta .resposta strong{font-weight:600;color:var(--carvao)}
.seccao--escura .faq,
.seccao--escura .pergunta{border-color:var(--linha-clara)}
.seccao--escura .pergunta summary::after{color:var(--terracota)}
.seccao--escura .pergunta summary:hover{color:color-mix(in srgb,var(--areia) 75%,var(--terracota))}
.seccao--escura .pergunta .resposta p{color:color-mix(in srgb,var(--areia) 76%,var(--oliva))}
.seccao--escura .pergunta .resposta strong{color:var(--areia)}

/* ---- Grelha de três cartões (planos, etapas, o que quiser) ---- */
.grelha-tres{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e3);margin-top:var(--e5)}
@media (max-width:900px){.grelha-tres{grid-template-columns:1fr}}
.grelha-tres .cartao ul{list-style:none;margin-top:var(--e2);display:grid;gap:10px;font-size:.95rem}
.grelha-tres .cartao li{display:flex;gap:10px;align-items:flex-start}
/* ⚠️ O MARCADOR É UM CÍRCULO DESENHADO, não o caractere "·".
   Um "·" é desenhado pelo tipo de letra e sai com o tamanho que a fonte
   lhe dá — fica minúsculo e não há font-weight que o salve. Desenhado,
   o tamanho é nosso. É o mesmo marcador de 7px da .lista-legal e da
   lista do relatório: um gesto só, repetido.
   O margin-top centra-o na PRIMEIRA linha, não a meio do item — nos
   itens que dobram, sem ele a bola descia para o meio do parágrafo. */
.grelha-tres .cartao li::before{
  content:"";flex:none;
  width:7px;height:7px;border-radius:50%;margin-top:.58em;
  background:var(--terracota);
}

/* ---- Fila de botões que precisa de respirar acima ----
   A .acoes base não traz margem, de propósito, para não a impor a todos
   os sítios onde aparece. Esta variante é para quando a fila fecha um
   bloco que já tem peso próprio — um .destaque, uma grelha de planos —
   e sem ela o botão fica colado à caixa de cima.

   Nasceu no <style> da /contacto e mudou-se para aqui a 17/08/2026,
   quando a /aplicacoes-moveis passou a precisar dela. É a regra do topo
   deste ficheiro: o que serve mais do que uma página vive aqui. */
.acoes--afastadas{margin-top:var(--e4)}

/* ---- Ligação para um caso de estudo, dentro de uma página de serviço ---- */
.prova{
  margin-top:var(--e5);padding:var(--e5) var(--e4);
  border:1px solid var(--linha);border-radius:var(--raio);
  background:color-mix(in srgb,var(--areia-2) 70%,var(--areia));
}
.prova h3{font-size:1.2rem;margin-bottom:var(--e1)}
.prova p{font-size:1rem;color:color-mix(in srgb,var(--carvao) 82%,var(--oliva));max-width:var(--medida)}
.prova .acoes{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e3)}
.prova .acoes .btn{padding:12px 20px;font-size:.92rem}

/* Abaixo dos 380px o ecrã não tem folga nenhuma: as caixas com
   moldura passam a respirar menos para o texto não ficar espremido. */
@media (max-width:400px){
  .destaque{padding:var(--e2) var(--e3)}
  .prova{padding:var(--e4) var(--e3)}
  .servico-topo .acoes .btn{width:100%;justify-content:center}
}


/* ===== 14. PÁGINAS LEGAIS =====
   ------------------------------------------------------------
   ⚠️ ESTES BLOCOS VIVERAM NO <style> DA /politica-de-privacidade até
   18/08/2026, e mudaram-se para aqui no dia em que nasceu a segunda
   página legal, os /termos-e-condicoes. É a regra do topo deste
   ficheiro: o que serve mais do que uma página vive aqui.

   Servem as duas páginas legais nas duas línguas — quatro no total —
   e nenhuma delas tem <style> próprio. Se uma terceira nascer, não há
   nada a mover: já está tudo cá.

   ⚠️ As páginas legais NÃO entram em menu nenhum e não têm convite
   final. Chega-se lá pelo rodapé, que é onde o RGPD manda que estejam
   acessíveis de qualquer página.
   ------------------------------------------------------------ */

/* A data de atualização, logo abaixo do título. É a primeira coisa
   que se procura numa política: diz se ainda é válida. */
.data-legal{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.82rem;font-weight:500;
  color:var(--oliva-texto);
  border:1px solid var(--linha);border-radius:999px;
  padding:8px 16px;
}
.data-legal::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--terracota);flex:none;
}
/* A mesma etiqueta, repetida no fim da página. Quem lê uma política
   até ao fim não devia ter de subir ao topo para ver a data. */
.data-legal--fim{margin-top:var(--e3)}

/* Índice: nove secções são muitas para se procurar à rolagem.
   É uma lista de links normais — funciona sem JavaScript. */
.indice-legal{
  border:1px solid var(--linha);border-radius:var(--raio);
  padding:var(--e4);margin-top:var(--e6);
  background:color-mix(in srgb,var(--areia-2) 40%,var(--areia));
}
.indice-legal h2{font-size:.74rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--oliva-texto)}
.indice-legal ol{
  list-style:none;counter-reset:secao;
  margin-top:var(--e3);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:10px var(--e4);
}
.indice-legal li{counter-increment:secao;font-size:.95rem}
.indice-legal a{display:flex;gap:10px;align-items:baseline;padding:2px 0}
.indice-legal a::before{
  content:counter(secao) ".";
  font-family:var(--fonte-titulo);font-weight:600;
  color:var(--terracota);flex:none;min-width:1.4em;
}
.indice-legal a:hover{color:var(--raiz)}

/* Cada secção numerada. O número é grande e serifado como os .numero
   do método — é o mesmo gesto, não um estilo novo. */
.corpo-legal{max-width:var(--medida);counter-reset:legal}
.bloco-legal{
  counter-increment:legal;
  padding-top:var(--e8);margin-top:var(--e8);
  border-top:1px solid var(--linha);
  scroll-margin-top:100px;
}
.bloco-legal:first-child{padding-top:0;margin-top:var(--e8);border-top:0}
.bloco-legal h2{
  font-size:clamp(1.35rem,2.6vw,1.7rem);
  display:grid;grid-template-columns:auto 1fr;gap:var(--e2);align-items:baseline;
}
.bloco-legal h2::before{
  content:counter(legal);
  font-size:.95rem;font-weight:600;font-family:var(--fonte-texto);
  color:var(--terracota);
  border:1px solid color-mix(in srgb,var(--terracota) 40%,var(--linha));
  border-radius:50%;width:30px;height:30px;
  display:grid;place-items:center;
  transform:translateY(-2px);
}
/* O bloco final ("Alterações a esta política") não é uma das nove
   secções numeradas do índice: não incrementa o contador nem mostra
   bola. Sem isto aparecia lá um "10." que o índice não tem. */
.bloco-legal--sem-numero{counter-increment:none}
.bloco-legal--sem-numero h2{grid-template-columns:1fr}
.bloco-legal--sem-numero h2::before{content:none}

/* Alvo tátil das páginas legais (18/08/2026): todas as ligações delas
   mediam 21 px. São caixas em linha dentro de parágrafos e de listas de
   definições, por isso o padding aumenta a área que se toca e não mexe
   na altura da linha nem no espaçamento do texto.

   Podiam ter ficado como estavam — o WCAG 2.5.8 dispensa alvos "dentro
   de uma frase" — mas há duas que não estão dentro de frase nenhuma: o
   email do bloco de contacto e os das definições, que são o parágrafo
   todo. Em vez de andar a decidir uma a uma quais é que a exceção cobre,
   passam todas. Não custou nada. */
.bloco-legal a,
.ficha-legal a,
.contacto-legal a{padding-block:2px}

.bloco-legal > p,
.bloco-legal > ul,
.bloco-legal > ol,
.bloco-legal > .ficha-legal{margin-top:var(--e3)}
.bloco-legal p{font-size:1.02rem;color:color-mix(in srgb,var(--carvao) 82%,var(--oliva))}
.bloco-legal strong{font-weight:600;color:var(--carvao)}
.bloco-legal a:not(.btn){color:var(--raiz);text-decoration:underline;text-underline-offset:3px}
.bloco-legal a:not(.btn):hover{color:var(--terracota-botao)}

/* Ficha de dados: "campo → o que é". Duas colunas em ecrã largo,
   empilhadas no telemóvel. É um <dl> porque é mesmo uma lista de
   termos e definições — quem ouve a página percebe o emparelhamento. */
.ficha-legal{display:grid;gap:0;border-top:1px solid var(--linha)}
.ficha-legal > div{
  display:grid;grid-template-columns:minmax(150px,1fr) 2fr;
  gap:var(--e2) var(--e3);
  padding:16px 2px;border-bottom:1px solid var(--linha);
}
.ficha-legal dt{
  font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oliva-texto);padding-top:3px;
}
.ficha-legal dd{font-size:.98rem;color:color-mix(in srgb,var(--carvao) 82%,var(--oliva))}
.ficha-legal dd strong{font-weight:600;color:var(--carvao)}
@media (max-width:640px){
  .ficha-legal > div{grid-template-columns:1fr;gap:6px}
}

/* Listas de texto corrido dentro das secções.

   ⚠️ O MARCADOR É POSICIONADO, NÃO É ITEM DE GRELHA — e isso não é
   preferência, é a correção de um bug real (16/08/2026).

   Estava `display:grid;grid-template-columns:auto 1fr` no <li>. Parecia
   funcionar e não funcionava: num item escrito assim —

       <li><strong>Acesso</strong> — saber que dados vossos...</li>

   a grelha faz TRÊS itens, não dois. O ::before é um, o <strong> é
   outro, e o texto solto a seguir ao </strong> vira um item anónimo.
   Resultado: ::before e <strong> ocupavam a primeira linha, o texto
   descia para a coluna 1 da linha seguinte, e como essa coluna é
   `auto` esticava-se ao tamanho da frase inteira — empurrando o
   <strong> para a direita da página. Os nomes dos direitos apareciam
   encostados à margem direita, longe do marcador.

   Com `position:absolute` o conteúdo do <li> fica em fluxo de texto
   normal: negrito e frase correm juntos, como uma linha só. E fica
   imune ao mesmo erro no futuro — se alguém acrescentar um <em> ou
   mais texto solto a um item, nada se parte.

   O `top:.62em` centra a bola de 7px na PRIMEIRA linha (com
   line-height 1.6). Não é `top:50%`: em itens de duas ou três linhas
   isso punha o marcador a meio do parágrafo. */
.lista-legal{list-style:none;display:grid;gap:14px;margin-top:var(--e3)}
.lista-legal li{
  position:relative;
  padding-left:calc(7px + var(--e2));
  font-size:1.02rem;line-height:1.6;
  color:color-mix(in srgb,var(--carvao) 82%,var(--oliva));
}
.lista-legal li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;
  background:color-mix(in srgb,var(--terracota) 70%,transparent);
}
.lista-legal strong{font-weight:600;color:var(--carvao)}

/* Caixa de aviso: usada onde a política diz alguma coisa que o
   leitor tem mesmo de reparar (transferência para fora do EEE). */
.aviso-legal{
  margin-top:var(--e3);
  border-left:3px solid var(--terracota);
  background:color-mix(in srgb,var(--terracota) 6%,transparent);
  border-radius:0 12px 12px 0;
  padding:var(--e3);
}
.aviso-legal p{font-size:.97rem}
.aviso-legal p + p{margin-top:12px}

/* Subtítulo dentro de uma secção — na 6, um por cada fornecedor */
.sub-legal{margin-top:var(--e5);font-size:1.12rem}

/* Bloco de contacto para exercer direitos — fecha as secções 7 e 8 */
.contacto-legal{
  margin-top:var(--e5);
  border:1px solid var(--linha);border-radius:var(--raio);
  padding:var(--e4);
  background:color-mix(in srgb,var(--areia-2) 40%,var(--areia));
}
.contacto-legal h3{font-size:1.1rem;margin-bottom:12px}
.contacto-legal p{font-size:.98rem}
.contacto-legal .segunda{margin-top:12px}
.contacto-legal .btn{margin-top:var(--e3)}


/* ===== 15. PÁGINAS DE CASO DE ESTUDO =====
   ------------------------------------------------------------
   ⚠️ ESTES BLOCOS VIVERAM NO <style> DA /trabalhos/codigo-luminoso até
   18/08/2026, e mudaram-se para aqui quando nasceu a versão inglesa do
   mesmo caso. É a regra do topo deste ficheiro: o que serve mais do que
   uma página vive aqui. Um caso de estudo novo já não traz CSS nenhum
   atrás — copia a marcação e está feito.
   ------------------------------------------------------------ */

/* As .migalhas mudaram-se para /estilos.css (secção 12) quando a página
   /manutencao-de-websites passou a usá-las também. */

/* ---- Herói: texto à esquerda, ficha técnica à direita --------------
   A ficha alinha pelo fundo da coluna esquerda, ou seja, pela última
   linha do parágrafo de entrada. O herói fica assimétrico mas com as
   duas colunas assentes na mesma linha.
   -------------------------------------------------------------------- */
.caso-topo{padding:var(--e5) 0 0}
.caso-heroi{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--e8);align-items:end}
.caso-topo .rotulo{margin-bottom:var(--e2)}
.caso-topo h1{font-size:clamp(2.2rem,5vw,3.6rem);max-width:14ch}
.caso-topo .posicionamento{
  margin:var(--e3) 0 0;max-width:var(--medida);font-size:1.1rem;
  color:color-mix(in srgb,var(--carvao) 82%,var(--oliva));
}

/* Ficha técnica: pares label-em-cima / valor-em-baixo, 2x2, com os
   divisores que a secção já usava.

   ⚠️ O NOME É .ficha-caso, e não .ficha, por uma razão que custou a
   descobrir. Havia duas `.ficha` diferentes — esta e a das páginas
   legais, na secção 14 — e enquanto viveram em <style> de páginas
   separadas nunca se viram. No dia em que passaram as duas para este
   ficheiro (18/08/2026), esta, por vir depois, ganhava e desalinhava
   as fichas das quatro páginas legais.

   A primeira correção foi prendê-la ao .caso-topo. Funcionava e era um
   remendo: bastava alguém reutilizar `.ficha` numa página nova para
   apanhar os estilos errados sem perceber porquê. A causa não era o
   sítio, era o NOME GENÉRICO num ficheiro partilhado. Nomes próprios
   resolvem-no de vez, e não dependem de onde o bloco é usado. */
.ficha-caso{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--linha)}
.ficha-caso > div{padding:var(--e2) 0 var(--e2) var(--e3);border-bottom:1px solid var(--linha);border-left:1px solid var(--linha)}
.ficha-caso > div:nth-child(odd){padding-left:0;border-left:0}
.ficha-caso dt{font-size:.68rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--oliva-texto);margin-bottom:6px}
.ficha-caso dd{font-size:.98rem;font-weight:500;line-height:1.4}
/* O âmbito ocupa a linha toda: são as pills, e são metadados como o resto. */
.ficha-caso .ambito{grid-column:1 / -1;padding-left:0;border-left:0}
.ficha-caso .ambito .etiquetas{margin-top:2px}

@media (max-width:900px){
  .caso-heroi{grid-template-columns:1fr;gap:var(--e5);align-items:start}
  .caso-topo h1{max-width:none}
}
@media (max-width:520px){
  .ficha-caso{grid-template-columns:1fr}
  .ficha-caso > div{padding-left:0;border-left:0}
}

/* ---- Enquadramento das capturas ------------------------------------
   Um só tratamento, usado na captura principal e em todos os crops de
   detalhe: borda de 1px, cantos arredondados, sombra difusa e legenda
   discreta em maiúsculas pequenas.
   -------------------------------------------------------------------- */
.enquadrado{margin:0}
.enquadrado img{
  width:100%;height:auto;
  border:1px solid var(--linha);
  border-radius:var(--raio-imagem);
  box-shadow:0 22px 50px -30px rgba(42,33,26,.55);
}
.enquadrado figcaption{
  margin-top:var(--e2);
  font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oliva-texto);
}
/* Sobre o marrom-café, a borda e a legenda invertem-se. */
.seccao--escura .enquadrado img{border-color:var(--linha-clara);box-shadow:0 22px 50px -30px rgba(0,0,0,.6)}
.seccao--escura .enquadrado figcaption{color:color-mix(in srgb,var(--areia) 62%,var(--oliva))}

.mostra{margin-top:var(--e6)}
.mostra img{aspect-ratio:1600/829;object-fit:cover;object-position:top center}

/* A .prosa mudou-se para /estilos.css (secção 12) — é usada nas duas páginas. */

/* ---- As decisões, em linhas alternadas ------------------------------
   Cada linha é: número + título + texto de um lado, crop de detalhe do
   outro. O lado troca a cada linha com crop.

   As linhas SEM crop passam sozinhas a largura única, limitadas à
   medida de leitura. Não há espaços vazios à espera de imagem: quando
   um crop for acrescentado, a linha muda de forma sozinha — o :has()
   trata disso, sem tocar no CSS.
   -------------------------------------------------------------------- */
.linhas{display:grid;gap:var(--e10);margin-top:var(--e6)}
/* ⚠️ align-items:start, e NÃO center (18/08/2026).
   Esteve em `center` e produzia um efeito que se lia como avaria: as
   imagens do caso são altas (720×760) e o texto ao lado é curto, por
   isso a imagem centrada começava muito acima da primeira linha de
   texto — vista a meio do ecrã, parecia uma figura solta num vazio, sem
   nada por perto que a explicasse.
   Com `start`, o texto e a imagem começam à mesma altura e a linha lê-se
   como um par. */
.linha{display:grid;gap:var(--e6);align-items:start}
.linha:has(.media){grid-template-columns:1fr 1fr}
.linha:not(:has(.media)) .texto{max-width:var(--medida)}
/* Alterna o lado acrescentando "linha--inverte" no HTML da linha seguinte
   com crop. É explícito de propósito: contar irmãos com :nth-child partia-se
   assim que uma linha ganhasse um segundo crop. */
.linha--inverte .texto{grid-column:2;grid-row:1}
.linha--inverte .media{grid-column:1;grid-row:1}

.linha .numero{
  font-family:var(--fonte-titulo);font-style:italic;font-weight:500;
  font-size:2rem;color:var(--terracota);line-height:1;
}
.linha h3{margin:var(--e2) 0 var(--e1);font-size:1.35rem}
.linha p{font-size:1rem;color:color-mix(in srgb,var(--areia) 78%,var(--oliva));margin-bottom:var(--e2)}
.linha p:last-child{margin-bottom:0}
.linha strong{color:var(--areia);font-weight:600}
.linha ul{list-style:none;margin-top:var(--e2);display:grid;gap:var(--e1);font-size:.97rem;color:color-mix(in srgb,var(--areia) 78%,var(--oliva))}
.linha li{display:flex;gap:10px;align-items:flex-start}
/* Mesmo marcador desenhado dos outros blocos — ver o comentário na
   secção 10, junto ao .grelha-tres. */
.linha li::before{
  content:"";flex:none;
  width:7px;height:7px;border-radius:50%;margin-top:.58em;
  background:var(--terracota);
}

/* A faixa de termos é larguíssima e baixa: espremida numa coluna ficava
   ilegível. Atravessa a linha inteira, dentro da mesma decisão que a
   explica, para se ler como parte dela e não como um item solto. */
.faixa-larga{grid-column:1 / -1}

@media (max-width:900px){
  .linhas{gap:var(--e8)}
  .linha:has(.media){grid-template-columns:1fr}
  .linha--inverte .texto,
  .linha--inverte .media{grid-column:1;grid-row:auto}
}

/* ---- O resultado ---- */
.resultado .prosa{margin-bottom:var(--e6)}
.ganhos{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e4);max-width:none}
.ganhos li{border-top:1px solid var(--linha);padding-top:var(--e2)}
.ganhos h3{font-size:1.05rem;margin-bottom:6px}
.ganhos p{font-size:.97rem;color:color-mix(in srgb,var(--carvao) 82%,var(--oliva))}
@media (max-width:760px){.ganhos{grid-template-columns:1fr;gap:var(--e3)}}

/* ---- Fecho do caso: acaba o caso antes de começar a venda ---- */
.fecho-caso{
  margin-top:var(--e10);padding-top:var(--e5);
  border-top:1px solid var(--linha);
  display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center;
}

/* O .convite mudou-se para /estilos.css (secção 12) — fecha as duas páginas. */
