/* Folha de estilos do site. UMA para todas as páginas.
 *
 * O visitante descarrega-a na primeira página e as seguintes já a têm em cache. É por isso
 * que ela vive à parte em vez de estar dentro de cada ficheiro: com vinte páginas, o estilo
 * repetido dentro de cada uma seria vinte vezes o mesmo peso e vinte sítios para corrigir.
 *
 * Sem tipos de letra remotos de propósito: a pilha do sistema desenha instantaneamente e não
 * custa um pedido nem um salto de layout. */

/* ---------- fichas ---------- */
:root{
  --verde:#0aa54e; --verde-esc:#095f43; --verde-mais-esc:#06412e;
  --fundo:#fff; --fundo2:#f2f6f4; --fundo3:#e7eeeb;
  --tinta:#12201a; --tinta2:#48584f; --tinta3:#6f7f76;
  --linha:#dbe4df;
  --raio:10px;
  --coluna:1140px;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{margin:0;background:var(--fundo);color:var(--tinta);line-height:1.6;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--verde-esc)}
p{margin:0}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.02em;line-height:1.12;font-weight:700}
h2{font-size:clamp(1.55rem,3.2vw,2.1rem)}
h3{font-size:1.06rem;letter-spacing:-.01em;line-height:1.3}
:focus-visible{outline:3px solid var(--verde);outline-offset:3px;border-radius:4px}

.col{max-width:var(--coluna);margin:0 auto;padding:0 22px}
.olho{font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--verde-esc)}
.saltar{position:absolute;left:-9999px;top:0;background:#fff;color:var(--verde-esc);
  padding:12px 18px;z-index:99;font-weight:600}
.saltar:focus{left:12px;top:12px}

/* ---------- botões ---------- */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--verde-esc);color:#fff;text-decoration:none;font-weight:600;
  padding:11px 20px;border-radius:var(--raio);font-size:.95rem;
  border:1px solid var(--verde-esc);transition:background .15s}
.botao:hover{background:var(--verde-mais-esc)}
.botao.claro{background:transparent;color:var(--verde-esc);border-color:#b9cdc4}
.botao.claro:hover{background:var(--fundo2)}
.accoes{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.6) blur(8px);border-bottom:1px solid var(--linha)}
.topo .col{display:flex;align-items:center;gap:26px;min-height:66px}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--tinta);
  font-weight:700;letter-spacing:-.02em;font-size:1.06rem;white-space:nowrap}
.marca img{width:34px;height:34px;object-fit:contain}
.topo nav{margin-left:auto;display:flex;align-items:center;gap:24px}
/* ⚠ o :not(.botao) é obrigatório: sem ele esta regra tem mais especificidade do que
   .botao e pinta o texto do botão de cinzento sobre o verde escuro — ilegível, e no
   botão mais importante da página. */
.topo nav a:not(.botao){color:var(--tinta2);text-decoration:none;font-size:.93rem;
  font-weight:500}
.topo nav a:not(.botao):hover,.topo nav a:not(.botao).activa{color:var(--verde-esc)}
.topo nav a.activa{font-weight:600}
@media(max-width:900px){.topo nav a:not(.botao){display:none}}

/* ---------- herói ---------- */
.heroi{background:linear-gradient(168deg,#06412e 0%,#095f43 55%,#0a7350 100%);color:#fff;
  padding:64px 0 60px}
.heroi .olho{color:#8fe0b4}
.heroi h1{font-size:clamp(2rem,4.9vw,3.25rem);margin:.5rem 0 .7rem;max-width:16ch}
.heroi .entrada{font-size:clamp(1.02rem,1.9vw,1.16rem);color:#d3e8de;max-width:52ch;
  margin-bottom:26px}
.heroi .botao{background:var(--verde);border-color:var(--verde);padding:13px 24px;font-size:1rem}
.heroi .botao:hover{background:#0bb757;border-color:#0bb757}
.heroi .botao.claro{background:rgba(255,255,255,.08);color:#fff;
  border-color:rgba(255,255,255,.34)}
.heroi .botao.claro:hover{background:rgba(255,255,255,.16)}

/* ---------- números ---------- */
.numeros{background:var(--fundo2);border-bottom:1px solid var(--linha)}
.numeros .col{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:24px;padding-top:26px;padding-bottom:26px}
.numeros b{display:block;font-size:1.85rem;font-weight:700;letter-spacing:-.035em;
  line-height:1.05;color:var(--verde-esc);font-variant-numeric:tabular-nums}
.numeros span{font-size:.92rem;color:var(--tinta2)}

/* ---------- blocos ---------- */
section.bloco{padding:66px 0}
section.bloco.cinza{background:var(--fundo2);border-top:1px solid var(--linha);
  border-bottom:1px solid var(--linha)}
.cabecalho{max-width:60ch;margin-bottom:34px}
.cabecalho h2{margin:.35rem 0 .6rem}
.cabecalho p{color:var(--tinta2);font-size:1.03rem}

/* ---------- cartões de serviço ---------- */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px}
.cartao{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px}
section.bloco:not(.cinza) .cartao{background:var(--fundo2);border-color:transparent}
.cartao .marcador{width:26px;height:3px;background:var(--verde);border-radius:2px;margin-bottom:3px}
.cartao p{color:var(--tinta2);font-size:.95rem}

/* ---------- obras ---------- */
.obras{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:20px}
.obra{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;
  display:flex;flex-direction:column}
.obra img{aspect-ratio:3/2;object-fit:cover;width:100%;background:var(--fundo3)}
.obra .dentro{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.obra .local{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--verde-esc)}
.obra h3{margin:0}
.ficha{list-style:none;margin:auto 0 0;padding:0;border-top:1px solid var(--linha);
  padding-top:12px;display:grid;gap:6px}
.ficha li{display:flex;justify-content:space-between;gap:14px;font-size:.88rem;
  color:var(--tinta2)}
.ficha b{color:var(--tinta);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}

/* ---------- quem somos ---------- */
.duas{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start}
@media(max-width:840px){.duas{grid-template-columns:1fr;gap:34px}}
.duas .texto h2{margin:.4rem 0 .8rem}
.duas .texto p{color:var(--tinta2);font-size:1.03rem}
.duas .texto p+p{margin-top:.85em}
.lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--linha)}
.lista li{padding:13px 0;border-bottom:1px solid var(--linha);display:flex;gap:13px;
  font-size:.95rem;color:var(--tinta2)}
.lista li::before{content:"";flex:0 0 7px;height:7px;border-radius:50%;background:var(--verde);
  margin-top:.55em}
.lista b{color:var(--tinta);font-weight:600}

/* ---------- contacto ---------- */
.contacto{background:var(--verde-mais-esc);color:#fff;padding:58px 0}
.contacto h2{color:#fff;margin:.4rem 0 0}
.contacto .olho{color:#8fe0b4}
.contacto .grelha{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
@media(max-width:840px){.contacto .grelha{grid-template-columns:1fr;gap:28px}}
.contacto p{color:#c8e3d7;max-width:48ch;margin-top:.7rem}
.morada{font-size:.95rem;line-height:1.7;color:#c8e3d7}
.morada strong{color:#fff;display:block;font-size:1rem;margin-bottom:.3rem}
.morada a{color:#8fe0b4}

/* ---------- morada com ligação ao mapa -------------------------------------------------
 * A morada aparece em 21 páginas e é ligação em todas elas. O endereço vive UMA vez, na
 * constante MAPA do build.mjs; aqui vive o aspecto, também uma vez.
 *
 * ⭐ Herda a cor do texto à volta em vez de a impor. Uma morada é informação, não uma
 * chamada à acção: se ficasse verde-berrante no rodapé escuro competia com o «Pedir
 * orçamento», que é o que ali interessa de facto. O sublinhado ténue basta para se perceber
 * que é clicável, e escurece ao passar o rato.
 * ⚠ A área de toque tem de dar para o dedo: `display:inline-block` no telemóvel, senão a
 * ligação parte-se em duas linhas com metades pequenas demais para acertar. */
a.mapa{color:inherit;text-decoration:underline;text-decoration-style:dotted;
  text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:currentColor;opacity:.95;transition:opacity .15s}
a.mapa:hover,a.mapa:focus-visible{opacity:1;text-decoration-style:solid}
@media (max-width:560px){
  a.mapa{display:inline-block;padding:2px 0}
}

/* ---------- rodapé ---------- */
/* ⚠⚠ O ESPAÇO EM BAIXO NÃO É DECORATIVO — é o que impede que o fim da página fique debaixo
 * de duas coisas que flutuam: o botão de WhatsApp (56 px + 18 de margem) e, quando está
 * aberta, a faixa de cookies (`--h-consent`, medida ao vivo pelo JavaScript).
 * No fundo da página já não há para onde percorrer: o que cair nesta faixa fica escondido
 * para sempre, e uma das ligações que aqui vivem é a de GERIR COOKIES, que tem de estar
 * sempre acessível. Medido: sem isto, o botão assentava por cima do rodapé.
 * 🪤 Reduzir os 90 px obriga a reduzir o botão primeiro, não ao contrário. */
footer{background:#0b1512;color:#8b9b93;font-size:.88rem;
  padding:34px 0 calc(90px + var(--h-consent, 0px))}
footer .col{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:center}
footer a{color:#8b9b93;text-decoration:none}
footer a:hover{color:#fff}

/* bloco de identificação da entidade, por baixo das ligações */
footer .entidade{display:block;margin-top:22px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.10);font-size:.82rem;line-height:1.7}
footer .entidade p{margin:0;color:#7b8b83}
footer .entidade strong{color:#a9b8b1;font-weight:600}

/* ================= blocos das páginas interiores ================= */

/* herói mais curto: nas interiores o conteúdo é que manda, não a capa */
.heroi.interior{padding:52px 0 46px}
.heroi.interior h1{font-size:clamp(1.8rem,4.2vw,2.7rem);max-width:20ch}

/* imagem larga de abertura */
.lead-foto{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--raio);
  background:var(--fundo3)}

/* etapas numeradas — só onde a ordem é mesmo informação */
.etapas{list-style:none;margin:0;padding:0;counter-reset:e;display:grid;gap:16px}
.etapas>li{counter-increment:e;background:#fff;border:1px solid var(--linha);
  border-radius:var(--raio);padding:22px 24px;display:grid;
  grid-template-columns:40px 1fr;gap:0 18px}
section.bloco:not(.cinza) .etapas>li{background:var(--fundo2);border-color:transparent}
.etapas>li::before{content:counter(e);width:32px;height:32px;border-radius:50%;
  background:var(--verde-esc);color:#fff;font-weight:700;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.etapas h3{margin:0 0 .45em}
.etapas p{color:var(--tinta2);font-size:.95rem}

/* lista de pormenores dentro de um bloco */
.marcas{list-style:none;margin:.7em 0 0;padding:0;display:grid;gap:8px}
.marcas li{display:flex;gap:11px;font-size:.94rem;color:var(--tinta2)}
.marcas li::before{content:"";flex:0 0 6px;height:6px;border-radius:50%;
  background:var(--verde);margin-top:.6em}

/* ficha técnica: pares chave/valor */
.tecnica{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--linha);border:1px solid var(--linha);border-radius:var(--raio);
  overflow:hidden;margin-top:26px}
.tecnica div{background:#fff;padding:16px 18px}
section.bloco.cinza .tecnica div{background:var(--fundo)}
.tecnica dt{font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta3);margin:0}
.tecnica dd{margin:4px 0 0;font-size:1.02rem;font-weight:600;color:var(--tinta)}
.tecnica small{display:block;font-weight:400;font-size:.86rem;color:var(--tinta2);
  margin-top:3px;letter-spacing:0;text-transform:none}

/* dias de formação */
.dias{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px}
.dia{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:22px}
section.bloco:not(.cinza) .dia{background:var(--fundo2);border-color:transparent}
.dia .rotulo{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--verde-esc);display:block;margin-bottom:.6em}

/* lotes de preço */
.lotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:16px}
.lote{border:1px solid var(--linha);border-radius:var(--raio);padding:20px;background:#fff;
  display:flex;flex-direction:column;gap:4px}
.lote .quando{font-size:.84rem;color:var(--tinta2)}
.lote .valor{font-size:1.7rem;font-weight:700;letter-spacing:-.03em;color:var(--verde-esc);
  font-variant-numeric:tabular-nums;line-height:1.1}
.lote .iva{font-size:.84rem;color:var(--tinta2)}
.lote .nome{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta3)}

/* aviso discreto */
.nota{background:var(--fundo3);border-radius:var(--raio);padding:15px 18px;font-size:.92rem;
  color:var(--tinta2);margin-top:22px;max-width:70ch}
.nota strong{color:var(--tinta)}

/* par imagem + texto */
.parimg{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
@media(max-width:840px){.parimg{grid-template-columns:1fr;gap:24px}}
.parimg img{border-radius:var(--raio);aspect-ratio:3/2;object-fit:cover;width:100%;
  background:var(--fundo3)}
.parimg p{color:var(--tinta2);font-size:1.02rem}
.parimg p+p{margin-top:.8em}

/* um cartão que leva a uma página inteira tem de parecer clicável */
.cartao h3 a{color:inherit;text-decoration:none;background-image:linear-gradient(var(--verde),var(--verde));
  background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .18s}
.cartao h3 a:hover{background-size:100% 2px}
.cartao h3 a::after{content:" \2192";color:var(--verde-esc);font-weight:400}

/* ================= abertura com fotografia =================
   O gradiente por cima não é decoração: sem ele o texto branco cai em cima de céu claro
   e deixa de se ler. É o mesmo verde do herói simples, para as duas aberturas do site
   pertencerem à mesma família. */
.heroi.foto{position:relative;background:#06412e;padding:0;overflow:hidden}
.heroi.foto>img,.heroi.foto>video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%}
/* ⭐ A ANIMAÇÃO DA ABERTURA. Só existe na página inicial, e só quando o JavaScript a
 * acrescenta — ver a nota longa no fim de src/paginas/index.html, que explica PORQUE não
 * vem escrita no HTML. Aqui só interessa uma coisa: entra POR CIMA da fotografia (é o
 * elemento seguinte no documento) e POR BAIXO do véu, que o `::after` desenha sempre em
 * último. O primeiro quadro do vídeo É a fotografia, portanto não há salto no arranque; o
 * desvanecimento existe só para tapar a diferença de compressão entre JPEG e H.264.
 * ⚠ Quem pediu menos movimento não chega aqui — o JavaScript nem cria o elemento. Esta
 * regra é o cinto: se algum dia o vídeo passar a vir no HTML, continua a não aparecer. */
.heroi.foto>video{opacity:0;transition:opacity .4s ease}
.heroi.foto>video.visivel{opacity:1}
@media (prefers-reduced-motion:reduce){.heroi.foto>video{display:none}}
.heroi.foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(6,65,46,.94) 0%, rgba(6,65,46,.86) 34%,
    rgba(9,95,67,.60) 62%, rgba(9,95,67,.30) 100%)}
.heroi.foto .col{position:relative;z-index:1;padding-top:74px;padding-bottom:30px}
@media(max-width:760px){
  /* no telemóvel a coluna de texto ocupa tudo: o véu tem de fechar por completo */
  .heroi.foto::after{background:linear-gradient(180deg,
    rgba(6,65,46,.90) 0%, rgba(6,65,46,.84) 55%, rgba(9,95,67,.72) 100%)}
  .heroi.foto .col{padding-top:54px}
}

/* linha que credita a obra da fotografia — sem isto a imagem é só um fundo bonito */
.credito{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.18);
  margin-top:30px;padding:14px 0 26px;font-size:.88rem;color:#bcd9cc;
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
.credito b{color:#fff;font-weight:600}
.credito span{white-space:nowrap}
.credito .sep{color:rgba(255,255,255,.32)}

/* ================= texto legal =================
   Prosa longa lê-se mal em linha larga. Aqui a medida aperta para ~68 caracteres e a
   hierarquia é dada por espaço, não por caixas — um contrato não é um painel. */
.legal{max-width:68ch}
.legal h2{font-size:1.28rem;margin:2.2em 0 .7em;padding-top:1.5em;
  border-top:1px solid var(--linha)}
.legal h2:first-of-type{margin-top:.4em;padding-top:0;border-top:0}
.legal h3{font-size:1.02rem;margin:1.6em 0 .5em;color:var(--verde-esc)}
.legal p{color:var(--tinta2);margin-bottom:1em}
.legal ul{color:var(--tinta2);padding-left:20px;margin:0 0 1.2em}
.legal li{margin-bottom:.55em}
.legal strong{color:var(--tinta);font-weight:600}
.legal .aviso{background:var(--fundo2);border-radius:var(--raio);padding:16px 19px;
  font-size:.94rem;margin:1.4em 0}
.legal .aviso p:last-child{margin-bottom:0}

/* uma entrada da lista que leva a uma página */
.lista a{color:inherit;text-decoration:none;border-bottom:2px solid var(--verde)}
.lista a:hover{color:var(--verde-esc)}

/* o bloco "a preencher" dentro de texto legal precisa de respirar como o resto */
.legal .porfazer{margin:0 0 2em}
.legal ol{color:var(--tinta2);padding-left:22px;margin:0 0 1.2em}
.legal ol li{margin-bottom:.55em}

/* ================= tabela =================
   Rola dentro do seu próprio contentor: numa tabela larga o que NÃO pode acontecer é a
   página inteira passar a rolar de lado no telemóvel. */
.tab{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--raio);background:#fff}
section.bloco.cinza .tab{background:var(--fundo)}
.tab table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:640px}
.tab th{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--tinta3);
  text-align:left;padding:12px 15px;font-weight:600;border-bottom:1px solid var(--linha);
  white-space:nowrap}
.tab td{padding:11px 15px;border-bottom:1px solid var(--linha);color:var(--tinta2)}
.tab tr:last-child td{border-bottom:none}
.tab td.n,.tab th.n{text-align:right;white-space:nowrap;color:var(--tinta);
  font-variant-numeric:tabular-nums}
.tab td b{color:var(--tinta);font-weight:600}

/* ================= artigo do blogue ================= */
.artigo{max-width:66ch}
.artigo .meta{font-size:.88rem;color:var(--tinta3);display:flex;flex-wrap:wrap;
  gap:6px 16px;margin-bottom:2em;padding-bottom:1.2em;border-bottom:1px solid var(--linha)}
.artigo .meta .marca{color:var(--verde-esc);font-weight:600}
.artigo h2{font-size:1.34rem;margin:2em 0 .6em}
.artigo h3{font-size:1.04rem;margin:1.5em 0 .4em}
.artigo p{color:var(--tinta2);margin-bottom:1em}
.artigo ul,.artigo ol{color:var(--tinta2);padding-left:20px;margin:0 0 1.2em}
.artigo li{margin-bottom:.5em}
.artigo strong{color:var(--tinta);font-weight:600}
.artigo .aviso{background:var(--fundo2);border-radius:var(--raio);padding:16px 19px;
  font-size:.95rem;margin:1.5em 0}
.artigo .aviso p:last-child{margin-bottom:0}

/* lista de artigos */
.artigos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.cartao-artigo{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  padding:24px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;
  transition:border-color .15s}
.cartao-artigo:hover{border-color:var(--verde)}
.cartao-artigo .etiq{font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--verde-esc)}
.cartao-artigo h3{margin:0;font-size:1.1rem}
.cartao-artigo p{color:var(--tinta2);font-size:.94rem;margin:0}
.cartao-artigo .rodape{margin-top:auto;padding-top:12px;font-size:.85rem;color:var(--tinta3);
  border-top:1px solid var(--linha)}

/* ---------- consentimento de cookies ----------------------------------------------
 * ⚠⚠ ISTO É UMA PEÇA LEGAL, NÃO DECORATIVA. Três regras não se mexem sem quem responde
 * juridicamente:
 *
 * 1. ⭐ «Aceitar» e «Recusar» têm de ser VISUALMENTE IDÊNTICOS. Não é gosto: um botão de
 *    recusar mais apagado, mais pequeno ou em segundo nível é um «dark pattern» e torna o
 *    consentimento inválido — o que é pior do que não ter banner, porque dá aparência de
 *    conformidade sem a substância. Por isso os dois usam a MESMA classe e nenhum leva
 *    destaque de cor.
 * 2. Não é um muro. O visitante continua a ler e a percorrer a página sem decidir nada.
 *    Nunca pôr aqui um fundo que cubra o ecrã nem impedir o scroll.
 * 3. ⚠ A faixa é fixa e fica POR CIMA do conteúdo. Ao navegar por teclado, o elemento que
 *    recebe o foco pode acabar escondido debaixo dela — é a falha «Focus Not Obscured» das
 *    WCAG 2.2 (critério 2.4.11). Resolve-se com `scroll-padding-bottom`, que o JavaScript
 *    põe na raiz com a altura real da faixa enquanto ela está visível: o navegador passa a
 *    percorrer a página deixando esse espaço livre em baixo.
 *    ⭐ A MESMA medição é publicada em `--h-consent`, na raiz, e é dela que o botão de
 *    WhatsApp se serve para subir enquanto a faixa está aberta (ver mais abaixo). Uma
 *    medição, dois consumidores. Se mexer na altura da faixa, não há segundo sítio a
 *    corrigir. (Durante um tempo este comentário prometia esta variável sem ela existir —
 *    agora existe mesmo. Um comentário que descreve código inexistente é pior do que
 *    nenhum: faz a próxima pessoa procurar durante meia hora o que nunca lá esteve.) */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;
  border-top:1px solid var(--linha);box-shadow:0 -6px 24px rgba(18,32,26,.10)}
.consent[hidden]{display:none}
.consent .col{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding-top:16px;
  padding-bottom:16px}
.consent .texto{flex:1 1 420px;min-width:0;font-size:.92rem;color:var(--tinta2);line-height:1.5}
.consent .texto strong{color:var(--tinta);font-weight:600}
.consent .accoes{flex:0 0 auto;gap:10px}
/* ⭐ Os dois botões partilham TUDO. Se algum dia alguém quiser «destacar» um deles, leia a
   regra 1 acima antes. */
.consent .accoes button{font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;
  padding:10px 22px;border-radius:var(--raio);min-width:118px;
  background:#fff;color:var(--verde-esc);border:1.5px solid var(--verde-esc);
  transition:background .15s}
.consent .accoes button:hover{background:var(--fundo2)}
@media (max-width:560px){
  .consent .col{gap:12px}
  .consent .accoes{width:100%}
  .consent .accoes button{flex:1 1 0}
}

/* ---------- botão de WhatsApp -----------------------------------------------------
 * Redondo, fixo no canto inferior direito, em todas as páginas. A marcação vive no
 * layout.html e o número em build.mjs.
 *
 * ⚠ O VERDE É O DO WHATSAPP (#25d366) E NÃO O DA CASA. É a única cor deste sítio que não
 *   vem das fichas do :root, de propósito: o ícone é uma marca de terceiro e, pintado com
 *   outro verde, deixa de ser reconhecido de relance — passa a ler-se como uma bolha de
 *   conversa qualquer, e um botão que precisa de ser lido para ser entendido não serve
 *   para nada. Não «harmonizar» com o #0aa54e.
 *
 * ⭐ SOBE COM O AVISO DE COOKIES. O `--h-consent` é posto na raiz pelo JavaScript com a
 *   altura REAL da faixa (com tecto de segurança). Num telemóvel a faixa é alta e tapava
 *   o botão por completo — e quem está a ver a faixa é quem chegou agora, ou seja quem
 *   mais provavelmente quer falar connosco. O `0px` por omissão garante que, sem
 *   JavaScript ou se a variável desaparecer, o botão fica no lugar normal.
 *
 * ⭐ 56 px de lado: alvo de toque confortável (as WCAG 2.2 exigem 24, as recomendações da
 *   Apple e da Google pedem 44 a 48). Não encolher abaixo de 44.
 *
 * 🪤 O `:focus-visible` da base arredonda o contorno a 4 px, o que num círculo desenha um
 *   quadrado à volta dele. Aqui repete-se com 50%. */
.zap{position:fixed;right:18px;bottom:calc(18px + var(--h-consent, 0px));z-index:50;
  width:56px;height:56px;border-radius:50%;background:#25d366 url("/img/whatsapp.svg")
  center/29px 29px no-repeat;box-shadow:0 6px 20px rgba(18,32,26,.28);
  transition:bottom .2s ease, transform .15s ease}
.zap:hover{transform:scale(1.07)}
/* ⭐⭐ ANEL DE FOCO DE DOIS TONS — branco por dentro, verde escuro por fora. Não é enfeite:
 * este botão é FIXO e passa por cima de tudo — página branca, blocos cinza, fotografia de
 * capa e rodapé quase negro. Nenhuma cor única passa os 3:1 das WCAG 1.4.11 contra todos
 * esses fundos: medi o verde escuro sobre o rodapé #0b1512 e dá 2,4:1, insuficiente.
 * Com dois tons há sempre um deles a contrastar — o branco sobre o rodapé escuro dá 18:1,
 * o verde escuro sobre página branca dá 7,7:1.
 * 🪤 Tem de repetir a sombra de elevação: o `box-shadow` substitui, não acumula. */
.zap:focus-visible{outline:none;
  box-shadow:0 6px 20px rgba(18,32,26,.28), 0 0 0 3px #fff, 0 0 0 6px var(--verde-esc)}
@media (max-width:560px){
  .zap{right:14px;width:52px;height:52px;background-size:27px 27px}
}
@media (prefers-reduced-motion:reduce){
  .zap{transition:none}
  .zap:hover{transform:none}
}
@media print{.zap{display:none}}