/* Fado & Food Group — www.fadoandfood.pt
   ---------------------------------------------------------------------------
   Quarta volta do motor (Adega -> Luso -> Clube -> Grupo). O site do grupo é
   uma one-page clara, preto sobre branco — a identidade do flyer 2026. Os
   NOMES dos tokens mantêm-se do motor; os VALORES são os do grupo.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------- fontes ---*/
/* Plus Jakarta Sans — a fonte do site do grupo (Google/OFL), servida do
   próprio site em woff2 estáticos instanciados da variável. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------- tokens ---*/
:root {
  /* marca (nomes herdados do motor; valores do GRUPO — preto/branco do
     flyer 2026, com um cinza-papel quente para secções alternadas) */
  --wine:       #0A0A0A;   /* o preto do grupo — herói e superfícies escuras */
  --wine-deep:  #161311;
  --cream:      #FFFFFF;   /* fundo do corpo */
  --cream-2:    #F2EFEA;   /* cinza-papel quente — secções alternadas, cartões */
  --ink:        #0A0A0A;   /* texto */
  --olive:      #0A0A0A;   /* (nome herdado) cor de acção — botões pretos */
  --olive-dark: #2E2A28;
  --neon:       #0A0A0A;
  --amber:      #FFFFFF;
  --terra:      #6B5D57;
  --band-bg:    #0A0A0A;
  --band-bg-2:  #14100E;   /* rodapé — castanho quase preto, eco do WP */
  --band-ink:   #F2EFEA;

/* OS NOMES SÃO PAPÉIS E NÃO PERCENTAGENS — o `--ink-70` está a 74% desde que
   existe. O que manda no número é a medição, não o nome.

   O `--ink-55` esteve a 55% e ficava ABAIXO da norma nos três fundos do
   sítio: 4,40:1 no branco, 4,24 no creme e 4,18 no creme escuro, contra os
   4,5:1 que a WCAG AA pede para texto corrido. Não era invisível — era o
   cinzento de todos os rótulos, kickers e cabeçalhos de tabela, e ninguém
   olhava para ele duas vezes. Foi o tools/contraste-texto.py que o mediu, a
   2026-08-27, ao ser escrito por causa de outra coisa.

   58% é o MÍNIMO que passa nos três (4,89 · 4,70 · 4,62). Não se escolheu um
   número redondo mais escuro para ter folga: a folga aqui pagava-se em
   hierarquia, e a hierarquia é o que faz o rótulo ser rótulo. */
  --ink-70:     color-mix(in srgb, var(--ink) 74%, transparent);
  --ink-55:     color-mix(in srgb, var(--ink) 58%, transparent);
  --line:       color-mix(in srgb, var(--ink) 14%, transparent);
  --line-light: color-mix(in srgb, #FFFFFF 22%, transparent);
  --paper-ink-70: var(--ink-70);
  --paper-ink-55: var(--ink-55);
  --paper-line:   var(--line);

  --ff-display: "Plus Jakarta Sans", "Avenir Next", "Futura", sans-serif;
  --ff-deco: "Plus Jakarta Sans", "Georgia", serif;
  --ff-text: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1200px;
  --wrap-text: 760px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --sect: clamp(3.5rem, 7vw, 5.5rem);
  --radius: 10px;
  --head-h: 78px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* A ÂNCORA TEM DE PARAR ABAIXO DO CABEÇALHO.
   A barra é uma pílula fixa (`top: .75rem`), portanto o seu fundo está aos
   78 px da altura MAIS os 12 do respiro — 90. Sem folga nenhuma, uma âncora
   parava com o topo da secção POR BAIXO da barra: o botão «Contacte-nos»
   funcionava e parecia que não, porque o que se via a seguir ao salto era a
   barra por cima do princípio da secção. (2026-08-26)

   A FOLGA PASSOU A VIR DO ALVO E NÃO DO CONTENTOR. (2026-08-27)
   «O botão da barra continua a não estar bem», pela terceira vez. Medido com
   um clique a sério em seis larguras, no Chromium: o `href` está certo e a
   secção parava 12 px abaixo da barra, que é o que se pretende. Não consigo
   reproduzir a falha aqui — o navegador dele é que sabe.

   O que se pode cobrir é a causa mais provável de ela existir noutro sítio: o
   `scroll-padding-top` vive no CONTENTOR, e o Safari tem histórico de o
   ignorar na navegação por fragmento. O `scroll-margin-top` diz a mesma coisa
   a partir do ALVO, e é o caminho que o Safari respeita.

   PÔR AS DUAS ESTAVA ERRADO, e foi a medição que o disse: escrevi no
   comentário anterior que «o navegador usa a maior das duas distâncias, não a
   soma», corri o clique, e a folga tinha passado de 12 px para 114 — somam-se
   mesmo. Ficou uma só, a do alvo, e a folga voltou aos 12 px medidos.

   Se ainda assim o botão continuar mal, o que falta saber é o NAVEGADOR e o
   que se vê depois do salto — não mais uma tentativa às cegas. */
[id] { scroll-margin-top: calc(var(--head-h) + 1.5rem); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--ff-text);
  font-size: clamp(1rem, .965rem + .16vw, 1.0625rem);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; border-radius: 1px; }

/* UMA SÓ MARGEM ESQUERDA NO SITE INTEIRO. (2026-08-26)
   O `.wrap--narrow` era uma coluna de 760 px CENTRADA: a 1280 px começava
   aos 260 px, enquanto o `.wrap` começava aos 40 e o herói aos 80. A página
   inicial alternava as duas — sobre (260), casas (40), profissionais (260),
   galeria (40) — e o que se via era uma margem esquerda aos altos, que é a
   primeira coisa que denuncia um site montado por secções em vez de
   desenhado.
   Agora o contentor é sempre a mesma grelha larga; o que se estreita é o
   TEXTO lá dentro, até à medida de leitura. A coluna mantém a largura que
   tinha, muda de sítio. */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap--narrow > * { max-width: var(--wrap-text); }
.center { text-align: center; }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip { position: absolute; left: -9999px; top: 0; z-index: 200;
        background: var(--ink); color: var(--cream); padding: .8rem 1.25rem; }
.skip:focus { left: .5rem; top: .5rem; }

/* ------------------------------------------------------------ tipografia ---
   A Montecatini traz ligaduras decorativas activas: o par "CO" funde-se num
   glifo único e, em caixa alta, lê-se como ©. Desligadas onde ela é usada. */
h1, h2, h3, .brand, .btn, .hero__tagline {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "hlig" 0;
}

h1 { font-family: var(--ff-display); font-weight: 600; margin: 0 0 .45em; }
h1 { font-size: clamp(2.5rem, 1.3rem + 5.2vw, 5.75rem); line-height: 1.02; letter-spacing: .01em; }
/* v0.4 — títulos de secção como no site oficial: sans geométrica PESADA em
   corpo contido, não display leve em corpo grande. A Garet Book (única
   gordura que temos) a 47px lia-se "fina e esticada"; a Neue Montreal Bold
   a ~34px tem o punch do Plus Jakarta Bold do oficial. */
h2 { font-family: var(--ff-text); font-weight: 600; margin: 0 0 .5em;
     font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.35rem); line-height: 1.14;
     letter-spacing: -.012em; }
h3 { font-family: var(--ff-text); font-weight: 500; font-size: 1.0625rem;
     letter-spacing: .01em; line-height: 1.35; margin: 0 0 .6em; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 500; }
em { font-style: italic; }

/* O título de cada bloco do «como trabalhamos» partilha esta regra em vez de
   ter uma sua: «qual a razão de tamanhos diferentes de letras??» (Nuno,
   2026-08-26). Um rótulo de bloco novo com um tamanho novo seria mais um. */
.kicker,
.ficha > h3 {
  font-size: .7rem; font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-55);
  margin: 0 0 1.4rem;
}
.lede { font-size: clamp(1.075rem, 1rem + .38vw, 1.28rem); line-height: 1.6; color: var(--ink-70); }
.small { font-size: .875rem; color: var(--ink-55); }

/* --------------------------------------------------------------- botões ---*/
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--ff-text); font-weight: 500;
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; padding: .95rem 1.7rem; border-radius: var(--radius);
  background: var(--neon); color: #241512; border: 1px solid var(--neon);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover, .btn:focus-visible { background: var(--olive); border-color: var(--olive); color: var(--cream); }

.btn--light { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn--light:hover { background: var(--neon); border-color: var(--neon); color: var(--ink); }

/* ------------------------------------------------------------ cabeçalho ---
   Três zonas com um papel cada: navegar (esq.), marca (centro), agir (dir.).
   A versão anterior repartia os links pelos dois lados do letreiro e o lado
   direito, com botão e idioma, ficava sempre mais pesado. */
/* v0.4 — a barra é uma PÍLULA destacada que flutua sobre o conteúdo, como no
   site oficial: cartão creme arredondado com sombra, não uma faixa de borda a
   borda. O fundo do <header> é transparente; o cartão é o __inner. */
.site-header {
  position: sticky; top: .75rem; z-index: 100;
  padding-inline: var(--gutter);
  pointer-events: none;               /* só o cartão apanha cliques */
}
.site-header__inner {
  pointer-events: auto;
  width: min(100%, 1280px); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: var(--head-h); gap: clamp(1rem, 2.5vw, 2.5rem);
  background: color-mix(in srgb, var(--cream) 97%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-radius: 18px;
  padding-inline: clamp(1.1rem, 2.5vw, 2rem);
  box-shadow: 0 10px 34px rgba(36, 21, 18, .12);
}
.brand { display: block; color: var(--ink); text-decoration: none;
         justify-self: center; padding: .35rem 0; }
.brand svg { width: clamp(168px, 16vw, 210px); height: auto; }
.brand:hover { color: var(--olive); }

.nav-zone--links { justify-self: start; min-width: 0; }
.nav-zone--actions { justify-self: end; display: flex; align-items: center;
                     gap: clamp(.9rem, 1.6vw, 1.5rem); }
.nav-links { display: flex; align-items: center; gap: clamp(.85rem, 1.35vw, 1.35rem); }
.nav-links a {
  text-decoration: none; font-size: .7rem; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink);
  padding: .45rem 0; position: relative; white-space: nowrap;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-zone--actions .btn { padding: .72rem 1.3rem; font-size: .7rem; }

/* selector de idioma */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-size: .72rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink); cursor: pointer;
  background: none; border: 0; padding: .45rem 0;
}
.lang__btn svg { width: 13px; height: 13px; opacity: .6; }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + .6rem); z-index: 10;
  min-width: 168px; padding: .4rem; margin: 0; list-style: none;
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 12px 34px rgba(11,12,0,.13);
}
.lang__menu[hidden] { display: none; }
.lang__menu a {
  display: block; padding: .5rem .75rem; text-decoration: none;
  font-size: .85rem; border-radius: 1px;
}
.lang__menu a:hover { background: var(--cream-2); }
.lang__menu a[aria-current="true"] { font-weight: 500; color: var(--olive); }

.nav-toggle { display: none; }
/* (2026-08-26) O ponto de corte subiu de 1024 para 1200. Com QUATRO itens o
   menu cabia; com CINCO — entraram «Experiências» e «Profissionais» — passava
   por cima do monograma ao centro, e em alemão («Fado-Häuser», «Erlebnisse»,
   «Agenturen») pior ainda. Um menu que colide com a marca não é um menu
   apertado: é um menu que não cabe, e a resposta certa é dá-lo em bolso mais
   cedo, não encolher a tipografia até ninguém o ler. */
@media (min-width: 1200px) {
  .btn--menu { display: none; }
  /* O ITEM QUE SÓ VIVE NO MENU DE BOLSO. (2026-08-26, à noite)
     Na barra larga, os contactos têm um botão só para eles ao lado; a
     etiqueta a dizer o mesmo, duas vezes seguidas, é ruído — e é a quinta
     etiqueta, que é onde o menu começa a bater no monograma. Aqui esconde-se;
     no telemóvel, onde o menu é uma lista e não há botão à vista, aparece. */
  .nav-link--so-menu { display: none; }
}


@media (max-width: 1199px) {
  .site-header__inner { grid-template-columns: auto 1fr auto; }
  .brand { justify-self: start; order: -1; }
  .brand svg { width: 150px; }
  .nav-zone--links { justify-self: end; order: 2; }
  .nav-zone--actions { order: 3; }
  .nav-zone--actions .btn { display: none; }   /* o CTA vive dentro do menu */
  .nav-toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    background: none; border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--ink); font: inherit; font-size: .68rem; font-weight: 500;
    letter-spacing: .15em; text-transform: uppercase; padding: .55rem .95rem;
    cursor: pointer;
  }
  .nav-links {
    /* Um cartão da mesma família da pílula (raio 18px, filete, sombra),
       solto meio rem abaixo dela — não uma folha rectangular colada
       (apanhado pelo Nuno no iPhone, 2026-08-20: "não liga uma coisa
       com a outra"). */
    position: absolute; left: 0; right: 0; top: calc(100% + .5rem);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream);
    border: 1px solid var(--line); border-radius: 18px;
    padding: .5rem 1.25rem 1.25rem;
    box-shadow: 0 10px 34px rgba(36, 21, 18, .12);
    overflow: hidden;
  }
  .nav-links[hidden] { display: none; }
  .nav-links a { padding: .95rem 0; font-size: .95rem; letter-spacing: .1em;
                 border-bottom: 1px solid var(--line); }
  .nav-links a:last-of-type { border-bottom: 0; }
  .nav-links a::after { display: none; }
  .nav-links .btn--menu { margin-top: 1.1rem; justify-content: center;
                          border-bottom: 0; font-size: .78rem; padding: 1rem;
                          background: var(--olive); color: var(--cream); }
}

/* ---------------------------------------------------------------- herói ---
   Como no site oficial: o herói é um CARTÃO recortado com margens à volta e
   cantos de 40px — não um full-bleed. A fotografia fica viva; o véu é mínimo
   e só na zona do texto. */
.hero {
  position: relative; display: grid; align-items: end;
  width: min(100% - (var(--gutter) * 2), 1400px); margin-inline: auto;
  /* A pílula do cabeçalho desce .75rem abaixo do espaço que o <header>
     reserva no fluxo — sem esta folga, ao abrir a página ela cobre o topo
     do cartão do herói (apanhado pelo Nuno no go-live). */
  margin-top: 1.5rem;
  border-radius: 40px; overflow: hidden;
  min-height: min(78vh, 760px); background: var(--ink); color: var(--cream);
}

/* Véu mais forte nos heróis de página: o título âmbar gigante precisa de uma
   zona escura por trás — o véu mínimo da home deixava-o a competir com pedra
   clara. Duas camadas: base para o terço inferior + diagonal na coluna do
   título (como as fotografias escuras do site oficial). */

/* v0.4 — título de página como no oficial: display gigante em âmbar, caixa
   normal, encostado ao fundo-esquerda do cartão do herói. */

.hero .kicker { color: var(--cream); opacity: .95; text-shadow: 0 1px 12px rgba(20,10,6,.55); }
/* O h1 do herói é o letreiro. font-size:0 evita herdar o tamanho de título,
   mas .hero h1 tem max-width:16ch — e ch é relativo ao tipo, portanto com
   font-size:0 a largura máxima passava a 0 e o logótipo desaparecia. */
.hero__title { margin: 0 0 1.5rem; font-size: 0; line-height: 0; }
.hero__lockup { width: clamp(260px, 38vw, 520px); color: var(--neon); }
.hero__tagline {
  font-family: var(--ff-deco); font-size: clamp(1.2rem, 1rem + 1vw, 1.9rem);
  color: var(--cream); margin: 0 0 1.5rem; line-height: 1.3;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* estado de abertura */

/* -------------------------------------------------------------- secções ---*/
.section { padding-block: var(--sect); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* DUAS SECÇÕES QUE SÃO UM BLOCO. (2026-08-26)
   A ficha das três casas, sala a sala, vem logo a seguir aos cartões e fala
   das mesmas três casas: são dois títulos dentro do mesmo assunto. Cola-se à
   de cima — mesmo fundo, sem respiro entre elas — em vez de abrir uma secção
   nova. Antes tinha um `style="padding-top:0"` no HTML e fundo branco: uma
   caixa branca colada por baixo de uma cinzenta, que é o que se vê quando
   alguém corrige a distância e se esquece da cor. */

/* A banda que fecha todas as páginas. Oliva ESCURA de propósito: o oliva da
   marca (#81803c) dá 3,6:1 de contraste com o creme — chumba no AA para
   texto corrido. O tom fundo (#6a6930) dá 5,0:1 e mantém-se da família. */

/* ---------------------------------------------------------------- rodapé ---
   v0.4 — laranja como no oficial (o rodapé deles é a assinatura mais
   reconhecível do site), com o letreiro em creme e texto escuro quente. */
.site-footer { background: var(--band-bg-2); color: var(--band-ink);
               padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--cream); }
.footer-lockup { width: 190px; color: var(--cream); margin-bottom: 2rem; }

/* =================================================== CAMADA DO GRUPO ======
   One-page preto/branco. O herói é um cartão PRETO com o lockup gigante —
   sem fotografia, como o flyer. As secções alternam branco e cinza-papel;
   o tríptico fotográfico faz a ponte para as casas. */

/* cabeçalho: pílula branca com filete sobre qualquer fundo */
.site-header__inner { background: var(--cream); border: 1px solid var(--line);
                      box-shadow: 0 10px 34px rgba(10, 10, 10, .10); }
.brand svg { width: 148px; height: auto; }
@media (min-width: 1024px) { .brand svg { width: 128px; } }

/* botões — pretos; o secundário é contornado */
.btn { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.btn:hover, .btn:focus-visible { background: var(--olive-dark); border-color: var(--olive-dark); color: #FFFFFF; }
.btn--light { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--light:hover { background: var(--ink); color: #FFFFFF; }

/* herói do grupo: cartão preto, tipografia como no flyer */
.hero--group { background: var(--wine); color: #FFFFFF;
               min-height: min(72vh, 700px); align-items: center;
               margin-top: 1.5rem; }
/* O kicker era branco a 62% e é a peça que chumbava. Passa a branco: o
   `.hero .kicker` já lhe põe opacity .95 e o letter-spacing já o faz ler-se
   como rótulo — não precisava de ser transparente também para ser discreto,
   precisava de ser legível. */
.hero--group .kicker { color: #FFFFFF; }
/* A MARCA DEIXA DE ESMAGAR A PROPOSTA. (2026-08-27, visto no Chrome)
   O lockup ocupava 420 px de largura e 240 de altura no primeiro ecrã, e a
   seguir a manchete — «Três casas históricas de fado. Um único parceiro em
   Lisboa.» — vinha a 1,6 rem, mais pequena. O que dominava o ecrã de entrada
   era o NOME da empresa, que a barra do cabeçalho já diz, e não o que a
   empresa faz.
   Num sítio de marca, isso está certo. Num sítio comercial que existe para
   um agente decidir se vale a pena escrever, está ao contrário: a manchete é
   o argumento e tem de ser a primeira coisa a ler-se.
   O lockup passa a 300 px — continua a assinar o ecrã e deixa de o ocupar —
   e a manchete sobe a 2,25 rem, que é a medida a que ela ganha o plano. */
.hero--group .hero__lockup { width: min(300px, 62vw); height: auto; color: #FFFFFF;
                             margin-block: 1.2rem 1.9rem; }
.hero--group .hero__tagline { font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.25rem);
                              font-weight: 600; letter-spacing: -.015em;
                              line-height: 1.18; margin: 0 0 .85rem; }
.hero--group .hero__sub { max-width: 34em; color: color-mix(in srgb, #FFFFFF 78%, transparent);
                          margin: 0 0 2rem; }
.hero--group .hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero--group .btn--light { border-color: #FFFFFF; color: #FFFFFF; }
.hero--group .btn--light:hover { background: #FFFFFF; color: var(--ink); }
.hero--group .btn { background: #FFFFFF; border-color: #FFFFFF; color: var(--ink); }
.hero--group .btn:hover { background: var(--cream-2); border-color: var(--cream-2); }

/* UM SÓ TÍTULO DE SECÇÃO. (2026-08-26)
   Havia dois: o `.display` (600, até 43 px) na página inicial e o `h2` (700,
   até 37,6 px) na /trade. Mesma letra, dois pesos e dois tamanhos, sem regra
   que dissesse qual era qual — duas páginas do mesmo site com duas vozes.
   O `.display` desapareceu; o `h2` passou a 600 e é o título de secção em
   todo o lado. O tamanho grande fica para o que abre uma página: o herói e o
   `.page-head__title`. */
/* A GRELHA DE DUAS COLUNAS. (2026-08-26)
   Uma coluna de texto encostada à esquerda deixa, numa janela de 1200 px,
   quase quatrocentos px de nada à direita — lê-se como uma página a meio de
   carregar. Centrar a coluna tapava o vazio e trazia de volta o defeito
   anterior: as secções largas (cartões, galeria) começam na goteira e as de
   texto começariam 200 px mais para dentro, com duas margens esquerdas na
   mesma página.
   A saída é uma grelha: o título na coluna da esquerda, encostado à mesma
   goteira dos cartões; o texto na da direita, com a sua medida de leitura, a
   acabar onde a grelha acaba. Uma só linha vertical por onde todos os
   títulos começam, e nenhum lado vazio.
   O 960 é onde as duas colunas deixam de caber: abaixo disso volta a ser
   título e texto por baixo. */
/* Numa só coluna (abaixo dos 960) a medida de leitura tem de vir daqui: o
   contentor e a grelha larga, e sem isto o texto corria os 900 px todos. */
.faixa__t, .faixa__c { max-width: var(--wrap-text); }
.faixa__t .kicker { margin-bottom: .9rem; }
.faixa__t h1, .faixa__t h2 { margin: 0; }
.faixa__t { margin-bottom: 1.4rem; }
@media (min-width: 960px) {
  .faixa { display: grid; align-items: start;
           grid-template-columns: minmax(0, 1fr) minmax(0, var(--wrap-text));
           column-gap: clamp(2rem, 4vw, 4.5rem); }
  .faixa__t, .faixa__c { max-width: none; }
  .faixa__t { margin-bottom: 0; }
  .faixa__c > *:first-child { margin-top: 0; }

  /* O TÍTULO ACOMPANHA O TEXTO. (2026-08-27, depois de ver no Chrome)
     A grelha de duas colunas resolveu a margem esquerda aos altos, e com os
     blocos curtos da página antiga não se via mais nada. Com os blocos do
     roteiro vê-se: a tabela da comparação tem 700 px de altura, a ficha dos
     grupos outros tantos — e ao lado, uma coluna de 455 px com duas linhas
     de título e o resto vazio. Meia página de nada, sete vezes seguidas.
     A saída não é encher o vazio com decoração: é dar-lhe função. O título
     fica preso ao topo enquanto a secção passa — que é o que um documento
     longo faz com os seus cabeçalhos — e quem chega a meio da tabela
     continua a ver a que pergunta ela responde.
     `align-self: start` é obrigatório: sem ele o item de grelha estica-se
     até à altura da linha e o `sticky` não tem folga para deslizar. */
  .faixa__t { position: sticky; align-self: start;
              top: calc(var(--head-h) + 2rem); }
}
.section-head.faixa { margin-bottom: clamp(2rem, 4.5vw, 3.25rem); }


/* sobre */

/* tríptico fotográfico — faixa de três, sangrada até às bordas */
@media (max-width: 700px) {
}

/* casas — três cartões sobre cinza-papel */
/* Os dois botões ao CENTRO do cartão, e não encostados à esquerda — pedido do
   Nuno a 2026-08-26. Os três cartões têm textos de comprimentos diferentes; o
   `margin-top: auto` já punha os botões todos à mesma altura, e o centro
   acaba de os alinhar também na horizontal. */

/* serviços/experiências — cartaz + texto */
.servicos-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 820px) { .servicos-grid { grid-template-columns: 1fr 1fr; } }
/* Na /experiencias os cartazes vivem dentro da medida do texto (760px), e
   não na largura toda: a página lê-se numa só margem esquerda, e dois cartões
   lado a lado a 348px deixavam o texto com 176px de largura — três palavras
   por linha. Empilhados, cada um tem a imagem a 220 e o texto a 500. */
.servicos-grid--coluna { grid-template-columns: 1fr; }
.servico-card { display: grid; grid-template-columns: minmax(150px, 220px) 1fr;
                gap: 1.4rem; align-items: center;
                background: var(--cream-2); border-radius: 18px;
                padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.servico-card__media img { width: 100%; border-radius: 10px; }
.servico-card__body h3 { margin: 0 0 .4rem; font-size: 1.2rem; font-weight: 600; }
.servico-card__body p { margin: 0; color: var(--ink-70); }
@media (max-width: 540px) { .servico-card { grid-template-columns: 1fr; } }

/* contacto — texto à esquerda, fotografia 5:6 à direita */
.section--contacto { background: var(--wine); color: #FFFFFF; padding-block: var(--sect); }
.section--contacto .lede { color: color-mix(in srgb, #FFFFFF 78%, transparent); }
.contacto-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 880px) { .contacto-grid { grid-template-columns: 1.1fr .9fr; } }
.contacto-meios { margin-top: 1.75rem; display: grid; gap: .45rem; }
/* O sublinhado do email é o `border-bottom`, não o do navegador — e isso tem
   de viajar com a classe. Enquanto o `text-decoration: none` esteve só no
   `.contacto-meios`, o mesmo telefone escrito fora dele aparecia sublinhado e
   o mesmo email com dois traços. (2026-08-26) */
.contacto-meios a { text-decoration: none; }
.contacto-tel { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); font-weight: 600;
                text-decoration: none; }
.contacto-mail { font-size: 1.05rem; border-bottom: 1px solid currentColor;
                 text-decoration: none; }
.contacto-mail:hover { border-color: transparent; }
/* UMA FRASE INVISÍVEL, EM PRETO SOBRE PRETO. (2026-08-27)
   Esta regra estava presa ao `.contacto-meios`, e havia um `p.small` FORA
   dele — a frase que diz que a mesa se reserva na página da casa. Esse caía
   no `.small` genérico da linha 172, que é `var(--ink-55)`: preto a 55% por
   cima do fundo escuro da secção. Estava lá, ocupava o espaço, e não se lia.
   Sobreviveu ao dia em que esta secção foi refeita por causa do contraste —
   o commit chama-se «o cinzento seguia-se ao cinzento» — porque o olho salta
   o que não vê, e a revisão foi feita a olho.
   Passa a estar presa à SECÇÃO, que é onde o fundo escuro é decidido: assim
   apanha qualquer `.small` que lá venha a entrar, e não só os dois de hoje. */
.section--contacto .small { color: color-mix(in srgb, #FFFFFF 100%, transparent); }
.contacto-social { display: flex; gap: 1.25rem; margin-top: 1rem; }
.contacto-social a { display: inline-flex; align-items: center; gap: .5rem;
                     text-decoration: none; font-size: .82rem; letter-spacing: .08em;
                     text-transform: uppercase; }
.contacto-social a:hover { opacity: .75; }

/* rodapé */
.site-footer { background: var(--band-bg-2); color: var(--band-ink);
               padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { opacity: .8; }
.site-footer__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem);
                     padding-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-lockup { width: 150px; height: auto; color: #FFFFFF; margin-bottom: 1.25rem; }
.site-footer__h { font-family: var(--ff-text); font-size: .7rem; font-weight: 500;
                  letter-spacing: .22em; text-transform: uppercase;
                  margin: 0 0 1.1rem; opacity: .95; }
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin-bottom: .55rem; }
.footer-social { display: flex; gap: .9rem; }
/* A faixa do fundo: legais à esquerda, entidade e NIPC à direita — o mesmo
   padrão das três casas. (2026-08-26) Antes o legal era uma COLUNA da grelha,
   ao lado das casas e dos contactos, e o grupo era o único dos quatro sítios
   assim. Quatro documentos jurídicos não competem por atenção com as casas. */
.site-footer__legal { border-top: 1px solid var(--line-light);
                      padding-block: 1.5rem; display: flex; flex-wrap: wrap;
                      align-items: baseline; gap: .8rem 1.4rem; }
.site-footer__legal ul { list-style: none; margin: 0; padding: 0;
                         display: flex; flex-wrap: wrap; gap: .7rem 1.4rem;
                         font-size: .875rem; }
.site-footer__legal .small { opacity: .65; margin: 0 0 0 auto; }

/* A MORADA NO RODAPÉ ESTAVA ILEGÍVEL. (2026-08-26)
   A classe .small pinta com --ink-55, que é tinta escura para fundo claro. No
   rodapé o fundo é #14100E e o texto ficava cinzento-escuro sobre quase-preto:
   dá para ver que lá está alguma coisa, não dá para ler a rua. Só apareceu
   numa captura de ecrã da página inteira — a olho, num rodapé, ninguém repara
   no que não consegue ler. */
.site-footer .small { color: color-mix(in srgb, var(--band-ink) 62%, transparent); }
@media (max-width: 640px) { .site-footer__legal .small { margin-left: 0; } }

/* legais sobre fundo claro */
.page-head__title { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); font-weight: 600;
                    letter-spacing: -.015em; margin: .2em 0 .3em; }

/* Corpo dos documentos legais: linhas curtas e respiradas — são para ler.
   (2026-08-26) O build escrevia `class="legal-prose"` nas 24 páginas legais
   deste sítio e o CSS não tinha uma única regra com esse nome: o texto saía
   à largura toda do `wrap--narrow` e com a entrelinha do corpo. O Café Luso
   tem estas três linhas desde sempre — mais uma diferença entre casas que
   ninguém tinha comparado, e que o tools/comparar.py pôs à vista. */
.legal-prose { max-width: 68ch; }
.legal-prose h2 { margin-top: 2.5rem; }
.legal-prose p, .legal-prose li { line-height: 1.75; }

/* --------------------------------------------------------------- galeria ---*/

.gallery { display: grid; gap: clamp(.5rem, 1.2vw, .9rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery figure { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--cream-2); }
.gallery figure[hidden] { display: none; }
.gallery img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
               transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.gallery figure:hover img { transform: scale(1.045); }

/* lightbox da galeria */
.gallery__link { display: block; cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column;
  background: rgba(11, 12, 0, .94); backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox__stage { flex: 1; display: flex; align-items: center; justify-content: center;
                   min-height: 0; padding: clamp(.75rem, 3vw, 2rem); }
.lightbox__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto;
                       border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox__bar { display: flex; align-items: center; gap: 1rem; justify-content: space-between;
                 padding: .9rem clamp(1rem, 3vw, 2rem); color: var(--cream); }
.lightbox__caption { font-size: .85rem; opacity: .8; min-width: 0;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox__count { font-size: .75rem; letter-spacing: .12em; opacity: .6;
                   font-variant-numeric: tabular-nums; }
.lightbox button {
  background: none; border: 1px solid var(--line-light); border-radius: 999px;
  color: var(--cream); cursor: pointer; width: 42px; height: 42px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem; line-height: 1; transition: background .15s ease;
}
.lightbox button:hover { background: rgba(243, 242, 226, .14); }
.lightbox__prev { position: absolute; left: clamp(.5rem, 2vw, 1.5rem); top: 50%;
                  transform: translateY(-50%); }
.lightbox__next { position: absolute; right: clamp(.5rem, 2vw, 1.5rem); top: 50%;
                  transform: translateY(-50%); }

/* cartões de contacto */

/* mapa estático + redes sociais (página de contactos).
   O mapa é uma IMAGEM com link externo — a Política de Cookies exclui
   mapas interactivos embebidos, e é também mais leve e mais rápido. */

/* ligações para redes sociais — ícones inline, cor herdada */

/* horário — a apresentação única, em tabela pequena (ver horario_html) */

/* a noite passo a passo (página de reservas) */

/* perguntas frequentes */

/* ------------------------------------------------ v0.2: herói com a arte ---
   Duas colunas: lockup+texto | a ilustração da fadista (a laje preta vazia
   nos ecrãs largos foi apanhada pelo Nuno, 2026-08-20). A arte tem fundo
   preto — funde-se com o cartão sem costura. */
.hero--group { min-height: 0; }
/* O HERÓI PASSA A SER O FILME. (2026-08-26, à noite)
   Primeiro pusemos o filme num rectângulo ao lado do título, com um botão de
   play. O Nuno viu e disse o óbvio: «causa muito mais impacto do que um
   rectângulo pequeno que temos que dar play». Tem razão — e a resposta são
   DOIS ficheiros, não um.

   Por trás do título corre a ABERTURA: 18 segundos, mudos, em ciclo. Mudos
   não por gosto: nenhum browser deixa um vídeo com som arrancar sozinho, e
   um filme de fado sem som não é o filme — é papel de parede. Por isso o
   filme inteiro, com o fado cantado, continua a existir e abre com o botão.

   O ciclo tem 1,8 MB e o último segundo funde no primeiro, para não dar um
   salto de cada vez que volta ao princípio. */
.hero--filme {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center; background: var(--ink);
  /* DE MARGEM A MARGEM, e não dentro do cartão arredondado do herói antigo.
     «acho que isto merecia ser um hero completo» — Nuno, 2026-08-26. O resto
     do sítio mantém a goteira; só esta secção a atravessa. */
  width: 100%; max-width: none; margin-inline: 0; margin-top: 0;
  border-radius: 0; min-height: min(88vh, 820px);
}
.hero__fundo { position: absolute; inset: 0; z-index: -2; }
.hero__ciclo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* O VÉU. Sem ele o texto preto do herói ficava sobre imagem em movimento, que
   é a maneira mais fiável de tornar um título ilegível: o contraste muda a
   cada fotograma. O texto passa a claro e o véu garante-lhe o fundo. */
/* No computador o texto vive na coluna da esquerda e o filme respira à
   direita — por isso aqui o gradiente continua a ser um gradiente. O que
   mudou a 27/08 foi o lado do texto: era 88%/74% e o filme desaparecia
   debaixo dele. 68%/60% chega para 5.4:1 e deixa ver a montra. */
.hero--filme::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
              rgba(11, 10, 9, 0.68) 0%,
              rgba(11, 10, 9, 0.6) 42%,
              rgba(11, 10, 9, 0.34) 72%,
              rgba(11, 10, 9, 0.24) 100%);
}
/* NO TELEMÓVEL O VÉU ESTAVA A COMER O FILME. (2026-08-26)
   Era um escuro quase uniforme de 78% a 92% — o texto lia-se e o filme não se
   via, que é o contrário do que ele veio cá fazer. «em mobile o filme quase
   que não se vê com o filtro preto que tem em cima», Nuno.
   Passou a um gradiente de verdade: quase limpo em cima, onde estão as três
   portas, e a escurecer só onde o texto assenta.

   E ISSO PARTIU-SE A 2026-08-27, quando o herói mudou de texto. O kicker
   subiu para os 7% da altura — a zona que o gradiente deixava a 16% — e ficou
   a 1.66:1 contra os 4.5:1 da norma. Ninguém deu por isso porque a guarda que
   mede exactamente isto, o tools/contraste-heroi.py, NÃO ESTAVA NO DEPLOY.
   Passou a estar.

   O VÉU PASSA A SER QUASE UNIFORME, e é por medição e não por gosto. O
   gradiente antigo tinha o problema ao contrário nas duas pontas: 16% em
   cima, onde o texto não se lia, e 88% em baixo, onde o filme dava luminância
   26 em 255 — preto, na prática. Uniforme a 56%–58%, o texto lê-se a 5.4:1 e
   o filme aparece em toda a altura. «acho que o vídeo continua muito escuro»
   — Nuno, 2026-08-27, e os números davam-lhe razão.

   NÃO SE AFINA ISTO A OLHO. Correr:  python3 tools/contraste-heroi.py */
@media (max-width: 899px) {
  .hero--filme::after {
    background: linear-gradient(180deg,
                rgba(11, 10, 9, 0.58) 0%,
                rgba(11, 10, 9, 0.56) 12%,
                rgba(11, 10, 9, 0.56) 30%,
                rgba(11, 10, 9, 0.56) 62%,
                rgba(11, 10, 9, 0.58) 100%);
  }
}
.hero__conteudo { position: relative; padding-block: clamp(3rem, 8vw, 6rem);
                  max-width: min(100% - 2 * var(--gutter), 640px);
                  margin-inline: 0; padding-inline: var(--gutter); }
@media (min-width: 900px) {
  /* O `wrap` já dá a goteira; o padding-inline por cima dela empurrava o
     texto do herói para os 80 px, quando as secções todas começam aos 40.
     (2026-08-26) */
  .hero__conteudo { margin-inline: auto; max-width: var(--wrap);
                    padding-inline: 0; }
  .hero__conteudo > * { max-width: 620px; }
}

/* MOVIMENTO A MENOS, PARA QUEM O PEDIU. Não é uma cortesia: é a preferência
   do sistema operativo de quem tem enxaqueca vestibular ou epilepsia
   fotossensível, e um ciclo de 18 s por trás de um título é exactamente o
   que ela existe para travar. Fica o cartaz, que é o primeiro fotograma. */
@media (prefers-reduced-motion: reduce) {
  .hero__ciclo { display: none; }
  .hero__fundo { background: var(--ink) center / cover no-repeat
                 url("/video/cartaz.webp"); }
}
/* E o cartaz em pé, no telemóvel — a mesma largura de corte que o guião usa
   para escolher o filme (ECRA_ALTO no build.py). Sem isto, quem pede menos
   movimento num telemóvel ficava com o plano largo cortado a um terço, que é
   exactamente o que a versão vertical veio resolver. */
@media (prefers-reduced-motion: reduce) and (max-width: 700px) {
  .hero__fundo { background-image: url("/video/cartaz-alto.webp"); }
}

/* Saíram daqui, a 2026-08-26 à noite, o terceiro botão do herói (.btn--filme,
   com o triângulo de play) e a janela do filme completo (.filme-janela e o
   que ia lá dentro). Foi o Nuno a perguntar se a versão longa era precisa:
   não era. O herói tem dois botões e o filme é o ciclo que corre por trás. */

/* galeria do grupo: grelha 3x3, cartões arredondados sobre cinza-papel */
.section--galeria { background: var(--cream-2); padding-block: var(--sect); }
.gallery--grupo { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 820px) { .gallery--grupo { grid-template-columns: repeat(3, 1fr); } }
.gallery--grupo figure { margin: 0; border-radius: 14px; overflow: hidden; }
.gallery--grupo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
                      transition: transform .5s ease; display: block; }
.gallery--grupo a:hover img { transform: scale(1.04); }

/* cartazes das experiências */
.servico-card__media img { width: 100%; border-radius: 10px; display: block; }
/* (2026-08-26) …e o cartaz que passou a ser SVG embutido, que não é um
   <img> e por isso não apanhava nenhuma destas regras. Um <svg> com
   viewBox e sem width fica ao critério do browser — aqui diz-se. */
.servico-card__media svg { width: 100%; height: auto; display: block;
                           border-radius: 10px; background: #0A0A0A; }

/* O v0.3 — «herói claro com o tile», texto em tinta sobre fundo claro — saiu a
   2026-08-26 à noite, quando o herói passou a ter o filme por trás. Deixá-lo
   punha texto preto por cima de imagem escura em movimento: o pior contraste
   possível, e a mudar a cada fotograma. O herói volta ao desenho de cima —
   letras claras sobre escuro — que é o que o véu do .hero--filme garante.
   O tile da gravura desapareceu com ele; a ilustração vive na /experiencias. */
.hero--group .hero__lockup { width: min(300px, 62vw); }

/* pílula: o monograma no lugar do lockup empilhado (a pílula foi desenhada
   para logótipos horizontais; o monograma é a marca à escala de ícone) */
.brand svg.brand__iso, .brand .brand__iso { width: auto; height: 46px; }

/* cartaz FIB temporário: recorte da gravura (object-position no rosto) */
.servico-card__media--crop img { aspect-ratio: 1 / 1; object-fit: cover;
                                 object-position: 50% 12%; }
.servico-card__media img { background: #0A0A0A; }

/* ============================================ /experiencias e /trade (26/08) ==
   Duas páginas com o mesmo esqueleto das legais — cabeçalho `page-head` e
   corpo em `wrap--narrow` — mais quatro peças que a one-page não tinha: uma
   tabela de leitura, uma frase-chave, uma lista com marca, e o bloco de
   contacto comercial. As faixas `--alt` e `--band` foram REPOSTAS: saíram a
   2026-08-26 por não terem página nenhuma, e voltam agora porque passaram a
   ter. É a diferença entre apagar por medição e apagar por opinião.
   ========================================================================== */
.section--alt  { background: var(--cream-2); }

/* A tabela é para LER, não para decorar: sem grelha, com uma linha por baixo
   de cada registo e os números alinhados pela unidade.

   A TABELA SÓ EXISTE A PARTIR DOS 701 px. (2026-08-28)
   Esteve aqui, até hoje, um segundo desenho para o telemóvel: a `min-width`
   caía abaixo dos 560 px e a tabela apertava-se — letra a .82rem, menos
   respiro, etiquetas mais estreitas. Saiu com a razão que o justificava: a
   `.cmp-lista` toma conta de tudo abaixo dos 700 px, e uma regra que só se
   aplica a uma tabela que já não é desenhada é uma regra que ninguém volta a
   ler. O `overflow-x` fica, para o caso de uma tradução comprida ainda
   precisar dele entre os 701 px e a largura em que a tabela folga. */
.tabela-rolo { overflow-x: auto; margin: 1.75rem 0 0; }
.tabela { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .95rem; }
.tabela th, .tabela td { text-align: left; padding: .7rem 1rem .7rem 0;
                         border-bottom: 1px solid var(--line); vertical-align: baseline; }
.tabela thead th { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
                   font-weight: 500; color: var(--ink-55); }
.tabela tbody th { font-weight: 400; color: var(--ink-55); width: 34%; }
.tabela td { font-variant-numeric: tabular-nums; }

/* A linha do total, na tabela da /trade: é a linha que o leitor procura, e
   estava com o mesmo peso das outras cinco. */
.tabela__total th, .tabela__total td { border-top: 1px solid var(--ink);
                                       border-bottom: 0; font-weight: 500;
                                       padding-top: .9rem; }
.tabela__total th { color: var(--ink); }



/* «COMO TRABALHAMOS» — UMA FICHA TÉCNICA, E NÃO NOVE MARCAS. (2026-08-27)
   «Não gosto nada de como está a secção como trabalhamos, está uma confusão,
   não está apelativa» (Nuno). Eram nove `lista-marcada li` com um <strong> à
   cabeça: o mínimo de um grupo, o autocarro e as condições de cancelamento
   todos com o mesmo peso, numa coluna só. Nada dizia onde é que um assunto
   acabava e o outro começava.

   Passa a três blocos — antes de marcar, a chegada, a noite — pela ordem em
   que as perguntas de um agente chegam. Dentro de cada um, termo à esquerda
   e resposta à direita. NÃO SÃO TRÊS COLUNAS: a `faixa__c` tem 760px, e três
   colunas aqui dentro dariam 215px cada — o texto das mesas partia-se em
   sete linhas. Os blocos empilham-se; o que se divide em dois é cada linha,
   que é onde a leitura ganha.

   O `dt`/`dd` é o elemento certo e não decoração: isto é uma lista de termos
   e definições, e um leitor de ecrã anuncia-a como tal. O `strong` da
   `lista-marcada` saiu com os nove pontos que o usavam. */
   AS REGRAS VIVEM MAIS ABAIXO, no bloco do «Roteiro B2B». Estavam aqui
   TAMBÉM, declaradas duas vezes com valores diferentes — a coluna dos termos
   a 13rem aqui e a 10rem lá — e a segunda ganhava por ordem de cascata. Um
   ficheiro que declara a mesma regra duas vezes é um ficheiro onde a próxima
   pessoa muda a que não conta. Fica o comentário, que é a história da peça;
   as declarações são uma só. */

/* A galeria perdeu a frase de entrada — «acho que as casas em imagens não
   precisa depois daquela frase» (Nuno, 2026-08-27). Sem a metade direita, a
   `faixa` deixava de ter as duas metades que a `verifica_grelha` exige, e um
   título sozinho não precisa de grelha nenhuma. */
.section-head--so-titulo { margin-bottom: clamp(2rem, 4.5vw, 3.25rem); }
.section-head--so-titulo h2 { margin: 0; }

/* O botão do press kit estava a ser escrito com uma classe que não existia em
   selector nenhum — a `css-morto` deu-a como INERTE. Sobrou da secção do
   convite, apagada a 2026-08-26; o parágrafo ficou e a regra foi com ela.
   Uma classe escrita no HTML que não liga a nada lê-se, a quem vem a seguir,
   como uma decisão de desenho — e não era nenhuma. */
/* DOIS BOTÕES SEPARADOS POR UM ESPAÇO DE TEXTO. (encontrado a 2026-08-27)
   Isto era só `margin-top`. Os dois botões de cada casa — «pedir proposta» e
   «visitar o site oficial» — ficavam colados: a única coisa entre eles era o
   caractere de espaço que está no HTML, três pixéis. Medido no build a 1440:
   um acaba aos 889 e o outro começa aos 892.
   No telemóvel era pior, porque empilham: sem row-gap ficavam encostados um
   ao outro, e com larguras diferentes (331 e 243) davam uma escada. */
.convite-cta { margin-top: 1.75rem; display: flex; flex-wrap: wrap;
               gap: .75rem; align-items: center; }

/* E NO TELEMÓVEL OS BOTÕES OCUPAM A LARGURA TODA. Um par de botões empilhados
   com larguras diferentes lê-se como dois objectos desalinhados, não como
   duas opções — e a largura de um botão passa a depender do comprimento da
   palavra, que em alemão é outra. À largura toda ficam iguais em todas as
   línguas, e o alvo do dedo passa a ser o ecrã inteiro. */
@media (max-width: 560px) {
  .convite-cta, .hero__actions, .fim-cta { display: flex; flex-direction: column;
                                           align-items: stretch; gap: .7rem; }
  .convite-cta .btn, .hero__actions .btn, .fim-cta .btn { width: 100%;
                                                          justify-content: center; }
}


/* ==========================================================================
   OS BLOCOS DO «ROTEIRO DE REVISÃO DO SITE B2B». (2026-08-27)
   ==========================================================================
   Catorze secções, pela ordem do documento. O desenho não é novo — é a mesma
   grelha `faixa` de duas colunas, os mesmos dois tamanhos de letra e o mesmo
   par de botões que a página já tinha. O que mudou foi o que cada secção diz
   e por que ordem.

   O que entra aqui são cinco peças que não existiam: a faixa das provas, a
   lista de segmentos, a ficha de termo-e-definição (que substitui a
   `.fichas` de três blocos, apagada com a secção que a usava), os passos
   numerados, e a fotografia de cada casa na coluna do título. */

/* A FAIXA DAS PROVAS. Cinco factos numa linha, logo a seguir ao herói: é a
   primeira coisa que um agente lê e tem de se ler sem parágrafos. Números
   grandes, rótulos pequenos, e uma linha por cima de cada um em vez de
   caixas — caixas fariam disto um painel de estatísticas de startup. */
.section--provas { padding-block: clamp(2rem, 4vw, 3rem); background: var(--cream-2); }
.provas { display: grid; gap: 1.25rem 2rem;
          grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
/* O RÓTULO FICA ENCOSTADO AO FUNDO, e não colado ao número. «Alfama +
   Bairro Alto» ocupa duas linhas onde «475» ocupa uma, e com os rótulos a
   seguir ao valor a linha de baixo ficava aos degraus. Cada prova é uma
   grelha de duas linhas: o valor cresce para cima, o rótulo alinha-se com os
   outros quatro. */
.prova { border-top: 1px solid var(--ink); padding-top: .7rem;
         display: grid; grid-template-rows: 1fr auto; }
.prova__v { display: block; font-size: clamp(1.35rem, 2.4vw, 1.75rem);
            font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.prova__r { display: block; margin-top: .35rem; font-size: .7rem;
            font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
            color: var(--ink-55); }

/* OS SEGMENTOS, e as categorias de grupos e eventos. Uma lista para o leitor
   se RECONHECER, não para ler de uma ponta à outra — por isso corre em
   linhas e não em coluna, e cada item é uma etiqueta com um traço à frente. */
.segmentos { list-style: none; margin: 1.4rem 0 0; padding: 0;
             display: flex; flex-wrap: wrap; gap: .5rem .55rem; }
.segmentos li { border: 1px solid var(--line); border-radius: 2rem;
                padding: .38rem .95rem; font-size: .875rem;
                color: var(--ink-70); }

/* A FICHA. Termo à esquerda, definição à direita — é a peça que o «como
   trabalhamos» estreou a 2026-08-27 e que agora serve três blocos: o que
   dizemos em cada pedido, as razões de compra, e a ficha de cada casa.
   `dt`/`dd` é o elemento certo e não decoração: um leitor de ecrã anuncia
   isto como a lista de termos e definições que é. */
.ficha { border-top: 1px solid var(--ink); padding-top: .85rem;
         margin-top: 1.6rem; }
.ficha > h3 { margin: 0 0 1.1rem; }
/* NO TELEMÓVEL O TERMO E A RESPOSTA TÊM DE FICAR JUNTOS. (2026-08-27)
   A `dl` é uma coluna só abaixo dos 640 px, e com um `gap` igual entre todos
   os itens o `dt` ficava tão longe do seu `dd` como do par seguinte: lia-se
   como uma lista de doze coisas soltas em vez de seis pares. O espaço passa
   a estar no `dt`, e não entre tudo. */
.ficha dl { margin: 0; display: grid; gap: 0; }
.ficha dt + dd { margin-top: .15rem; }
.ficha dd + dt { margin-top: 1.25rem; }
.ficha dt { font-weight: 500; color: var(--ink); }
.ficha dd { margin: .2rem 0 0; color: var(--ink-70); font-size: .95rem; }
/* O QUE VEM A SEGUIR À FICHA NÃO ENCOSTA A ELA. Na página de cada casa, o
   parágrafo da história começava em cima do último `dd` — «Privatização /
   Sala privada, ou a casa inteira.» e logo abaixo, sem respiro nenhum,
   «Abriu em 1927…». Lia-se como se a história fosse mais uma linha da
   tabela: nem a `dl` nem o `.ficha` têm margem inferior por omissão. */
.ficha + * { margin-top: 1.8rem; }

@media (min-width: 640px) {
  .ficha dl { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
              gap: 1.1rem 1.75rem; }
  .ficha dd, .ficha dt + dd, .ficha dd + dt { margin: 0; }
}

/* A ficha de uma CASA é mais curta e mais densa — seis linhas de números —
   e por isso a coluna dos termos aperta e o respiro diminui. */
@media (min-width: 640px) {
  .ficha--casa dl { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
                    gap: .7rem 1.5rem; }
}

/* OS QUATRO PASSOS. O que se vende neste bloco é simplicidade operacional, e
   um número grande a abrir cada passo é o que a torna visível de relance. */
.passos { list-style: none; margin: 1.6rem 0 0; padding: 0;
          display: grid; gap: 1.5rem; }
.passos li { display: grid; gap: .1rem .9rem; align-items: baseline;
             grid-template-columns: auto 1fr; }
.passo__n { grid-row: span 2; font-size: .78rem; font-weight: 500;
            letter-spacing: .1em; color: var(--ink-55);
            font-variant-numeric: tabular-nums; }
.passo__t { font-weight: 500; }
.passo__p { grid-column: 2; color: var(--ink-70); font-size: .95rem; }

/* A FOTOGRAFIA DE CADA CASA, na coluna do título. Ao trocar os cartões pelos
   blocos do roteiro, a página ficou com catorze secções de texto seguidas —
   nem o tríptico nem os cartões sobreviveram. A coluna da esquerda da
   `faixa` tinha o título e mais nada; passa a ter também a imagem, o que
   resolve as duas coisas ao mesmo tempo. */
.casa-foto { margin-top: 1.5rem; }
/* A fotografia era um retrato de 1.25 numa coluna de 420 px — 525 px de
   altura, mais alta do que o texto ao lado, e com o terço de baixo em sombra
   em duas das três casas. Passa a 4:5 e a coluna aperta: continua a ser um
   retrato, deixa de ser uma torre. */
.casa-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
                 border-radius: var(--radius); }
@media (min-width: 960px) { .casa-foto { max-width: 22rem; } }

/* O botão vazado, para o CTA secundário de cada casa: o «pedir proposta» é a
   acção que o roteiro quer, e o «visitar o site oficial» não pode competir
   com ele em peso. */
.btn--vazio { background: transparent; color: var(--ink);
              border: 1px solid var(--ink); }
.btn--vazio:hover { background: var(--ink); color: var(--cream); }

/* A fotografia do bloco de contactos. Vivia numa classe do desenho antigo
   (`contacto-grid__media`, apagada com os cartões); o nome novo diz o que é. */
.contacto-foto img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover;
                     border-radius: var(--radius); }

/* AS TRÊS CASAS SÃO TRÊS SECÇÕES SEGUIDAS, e sem isto liam-se como três
   páginas: cada `.section` traz o seu `padding-block`, e entre duas casas
   isso dava o dobro do respiro que há entre qualquer outro par de blocos.
   A partir da segunda, o espaço de cima é o de uma linha e não o de uma
   secção nova, e uma régua fina diz onde uma casa acaba e a outra começa. */
.section--casa + .section--casa { padding-top: clamp(2rem, 4vw, 3rem); }
.section--casa + .section--casa > .faixa { border-top: 1px solid var(--line);
                                           padding-top: clamp(2rem, 4vw, 3rem); }

/* ==========================================================================
   AS DOBRAS. (2026-08-28)
   ==========================================================================
   Uma só peça, usada em dois sítios, e uma só regra para decidir onde:

     DOBRA-SE O QUE TEM OUTRA CASA ABERTA NA MESMA PÁGINA, ou o que está
     entre um argumento e o botão que ele pede.

   É por isso que dobram a comparação das três casas no telemóvel (os cinco
   pares dobrados estão todos, abertos, na ficha do bloco de cada casa) e a
   ficha do «essencial para preparar um grupo» (1172 px de detalhe entre o
   argumento e o «Enviar briefing» — num telemóvel, o botão ficava a ecrã e
   meio da frase que o justifica). E é por isso que NÃO dobram as fichas dos
   blocos das casas: essas são a casa aberta dos mesmos factos, e uma página
   em que todos os números estão atrás de um toque não é uma página curta, é
   uma página vazia.

   `<details>` e não um interruptor nosso: é teclado, é leitor de ecrã, é o
   Ctrl+F do navegador a encontrar texto dentro da dobra fechada, e são zero
   linhas de JavaScript para funcionar. O JavaScript aqui serve só para
   escolher o estado inicial no telemóvel — ver o assets/site.js. */
.dobra > summary {
  list-style: none; cursor: pointer; position: relative;
  min-height: 44px; padding-right: 2.25rem;
}
.dobra > summary::-webkit-details-marker { display: none; }
.dobra > summary:focus-visible { outline: 2px solid var(--ink);
                                 outline-offset: 3px; }

/* A SETA, desenhada com duas arestas e uma rotação — sem SVG e sem tipo de
   letra de ícones. Os dois `translateY` diferentes não são um capricho: um
   quadrado rodado 45° e outro rodado -135° não têm o mesmo centro visual, e
   sem isto a seta salta meio pixel ao abrir.

   NÃO SE TOCA NO `display` DO `summary`. Um `display: flex` aqui também
   tirava o triângulo do navegador — e tirava-o partindo o `summary` em
   Safari antigo. A lição é de ontem, noutro sítio: a correcção que mexe no
   `display` de um elemento resolve o que se vê e destapa o que não se via. */
.dobra > summary::after {
  content: ""; position: absolute; right: .45rem; top: var(--seta, 50%);
  width: .5rem; height: .5rem;
  border-right: 1.5px solid var(--ink-55);
  border-bottom: 1.5px solid var(--ink-55);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease;
}
.dobra[open] > summary::after { transform: translateY(-20%) rotate(-135deg); }

/* A ficha dobrável: o respiro que era do `.ficha` passa para o `summary`,
   para que a área que responde ao dedo seja a área que se vê. */
.ficha.dobra { padding-top: 0; }
/* `width: max-content` para que a seta fique ao lado do titulo e nao a mil
   pixeis dele: no computador esta ficha ocupa a coluna toda da `faixa`, e um
   puxador encostado a margem direita nao se le como o puxador daquele
   titulo. Mexe-se na LARGURA do `summary`, nunca no `display`. */
.ficha.dobra > summary { padding-block: .85rem 1.1rem;
                         width: max-content; max-width: 100%; }
.ficha.dobra > summary > h3 { margin: 0; }
.ficha.dobra > dl { padding-bottom: .3rem; }

/* ==========================================================================
   A COMPARAÇÃO NO TELEMÓVEL: TRÊS CASAS DOBRADAS. (2026-08-28)
   ==========================================================================
   O QUE ESTAVA AQUI ATÉ HOJE. Abaixo dos 700 px a tabela desmontava-se em
   três fichas — `display: contents` nos `tr`, `order` nas células, o rótulo
   de cada linha num `::before` a partir do `data-rotulo`. A razão escrita
   era boa e continua a ser: «espremer é pior do que rolar, e rolar é pior do
   que empilhar». O que faltava à decisão era uma medida.

   A MEDIDA, a 390 px: 3087 px só esta secção. Três ecrãs e meio, para uma
   comparação que numa coluna já não compara nada — o «185 lugares» de uma
   casa e o «160» da outra ficam a mil píxeis de distância. E a página voltava
   a imprimir os mesmos sete números, uma secção abaixo, na ficha de cada
   casa.

   O QUE PASSA A ESTAR. A tabela continua a ser uma tabela a partir dos
   701 px, com as três colunas lado a lado, que é onde comparar é possível.
   Abaixo disso entra uma lista de três dobras — markup próprio, escrito pelo
   mesmo `b2b_comparar()` e a partir dos mesmos dados, não um contorcionismo
   de CSS sobre a tabela. Fechada, cada casa mostra o que decide (nome,
   bairro e ano, perfil, lotação, mínimo de grupo) e dobra o detalhe; as três
   passam a caber num ecrã, que é a única forma de comparar num telemóvel.

   AS DUAS NUNCA APARECEM AO MESMO TEMPO, e é `display: none` de um lado ou
   do outro — não `visibility`, não `opacity`: o que está fora não é lido por
   um leitor de ecrã nem conta para a altura. */
.cmp-lista { display: none; }

@media (max-width: 700px) {
  .tabela-rolo { display: none; }
  .cmp-lista { display: grid; gap: 1.1rem; margin-top: 1.75rem; }
}

.cmp { border-top: 1px solid var(--ink); --seta: 1.9rem; }
.cmp > summary { padding-block: .9rem; }
/* A GRELHA VIVE NUM `span` DENTRO DO `summary`, e nao no `summary`. Um
   `display: grid` no proprio `summary` funciona nos navegadores de hoje e
   tem historia de partir o proprio puxador em Safari antigo — e a peca que
   nao abre e pior do que a peca sem grelha. */
.cmp__cab { display: grid; gap: .15rem; }

.cmp__n { font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em;
          line-height: 1.15; }
.cmp__l { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
          color: var(--ink-55); }
.cmp__p { margin-top: .35rem; color: var(--ink); }

/* OS DOIS NÚMEROS QUE DECIDEM, em grelha de rótulo e valor — a mesma que a
   ficha usa a partir dos 640 px, para que a peça fechada se leia como as
   outras fichas da página e não como um cartão de outro sítio. */
.cmp__k { margin-top: .5rem; display: grid;
          grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
          gap: .2rem 1rem; align-items: baseline; }
.cmp__r { color: var(--ink-55); font-size: .82rem; }
.cmp__v { font-variant-numeric: tabular-nums; }

/* O QUE ESTÁ ATRÁS DA DOBRA. Mesma grelha do `.cmp__k`, meio ponto mais
   discreta: é detalhe de quem já escolheu. */
.cmp > dl { margin: 0 0 1.1rem; display: grid;
            grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
            gap: .55rem 1rem; align-items: baseline; }
.cmp > dl dt { color: var(--ink-55); font-size: .82rem; font-weight: 400; }
.cmp > dl dd { margin: 0; font-size: .95rem; color: var(--ink-70); }

/* ==========================================================================
   A RONDA DE ACABAMENTO. (2026-08-27, à tarde)
   ========================================================================== */

/* O BLOCO DO BAIRRO ALTO — o argumento que só o grupo pode fazer.
   «Direção visual: número grande + mapa / distância + 3 a 5 casos de
   utilização. Evitar esconder este argumento no meio do texto.»

   É a única secção da página que não passa pela `faixa()`: a `faixa` põe o
   título numa coluna e o texto corrido noutra, e um número que tem de ser
   visto ao passar não é texto corrido. Aqui a coluna da esquerda é o número
   e a da direita é o argumento — a mesma grelha, com outro conteúdo à
   esquerda, para que o bloco não pareça vindo de outro sítio.

   O fundo escuro é o que faz o trabalho de «protagonismo visual» sem
   inventar um estilo novo: é o mesmo preto do herói e do rodapé, e é a
   segunda vez que aparece na página. */
.section--ba { background: var(--band-bg); color: var(--band-ink); }
.ba { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 900px) {
  .ba { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
        align-items: start; }
  /* O número acompanha a leitura da lista, como o título das outras
     secções — ver `.faixa__t`. */
  .ba__numero { position: sticky; top: calc(var(--head-h) + 2rem); }
}
.ba__n { display: block; font-family: var(--ff-display);
         font-size: clamp(4.5rem, 13vw, 8.5rem); line-height: .85;
         letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ba__r { display: block; margin-top: .9rem; max-width: 14em;
         font-size: .95rem; line-height: 1.4;
         color: color-mix(in srgb, var(--band-ink) 80%, transparent); }
.ba__casas { display: block; margin-top: 1.1rem; padding-top: .8rem;
             border-top: 1px solid var(--line-light);
             font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
             color: color-mix(in srgb, var(--band-ink) 72%, transparent); }
.ba__texto > h2 { margin-top: 0; }
.ba__texto .lede { color: color-mix(in srgb, var(--band-ink) 88%, transparent); }
.casos { list-style: none; margin: 1.6rem 0 0; padding: 0;
         display: grid; gap: .05rem; }
.casos li { padding: .8rem 0; border-top: 1px solid var(--line-light);
            font-size: .95rem;
            color: color-mix(in srgb, var(--band-ink) 82%, transparent); }
.ba__frase { margin-top: 1.6rem; font-family: var(--ff-display);
             font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.3;
             letter-spacing: -.01em; max-width: 28em; }
/* O BOTÃO INVERTIDO, NAS DUAS SECÇÕES ESCURAS DA PÁGINA.
   O `.btn` é preto sobre preto — nas secções de fundo escuro ficava um
   rectângulo invisível com letras brancas dentro, que é exactamente o
   aspecto de um link mal formatado. Apanhou-o o screenshot do bloco de
   contactos, não a leitura do CSS: o botão do §9 é NOVO ali, e o herói (que
   também é escuro) já usava a sua própria classe. */
.section--ba .btn, .section--contacto .btn {
  background: var(--cream); border-color: var(--cream); color: var(--ink); }
.section--ba .btn:hover, .section--ba .btn:focus-visible,
.section--contacto .btn:hover, .section--contacto .btn:focus-visible {
  background: var(--band-ink); border-color: var(--band-ink); color: var(--ink); }

/* A FICHA DE CADA EXPERIÊNCIA. Mesma grelha da `.ficha` das casas, mais
   apertada porque vive dentro de um cartão e não de uma coluna. */
.exp-ficha { margin: 1.4rem 0 0; display: grid; gap: 0;
             border-top: 1px solid var(--line); padding-top: .9rem; }
.exp-ficha dt { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
                color: var(--ink-55); }
.exp-ficha dd { margin: .1rem 0 0; font-size: .95rem; color: var(--ink-70); }
.exp-ficha dd + dt { margin-top: .8rem; }
@media (min-width: 620px) {
  .exp-ficha { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
               row-gap: .55rem; align-items: baseline; }
  .exp-ficha dd, .exp-ficha dd + dt { margin: 0; }
}
/* A linha que substituiu os sete campos «a validar» — ver o porquê no
   build.py, junto ao _exp_ficha(). Não é uma nota de rodapé: é a resposta à
   pergunta que os campos vazios faziam, e por isso lê-se como texto. */
.exp-consulta { margin: 1rem 0 0; font-size: .95rem; color: var(--ink-70); }

/* OS MATERIAIS PARA PROFISSIONAIS. Um só download, hoje. A lista existe
   porque vai crescer — as fichas por casa, as capacidades, as plantas. */
.materiais { list-style: none; margin: 1.5rem 0 0; padding: 0;
             display: grid; gap: .05rem; }
/* A LINHA TEM DE PARECER UM DOWNLOAD. A primeira versão era um título e
   uma legenda por baixo de uma régua — e lia-se como um subtítulo da
   secção, não como uma coisa em que se carrega. A seta à direita é o que
   diz «isto descarrega», e é a única coisa nesta página que o diz. */
/* AS CÉLULAS TÊM DE SER COLOCADAS À MÃO. (corrigido a 2026-08-27)
   A primeira versão declarava duas colunas e mandava a seta para a segunda,
   contando que o título e a legenda se arrumassem sozinhos na primeira. Não
   se arrumam: a colocação automática pôs a legenda na coluna da seta e a seta
   numa terceira linha, e no telemóvel o título ficou espremido numa coluna de
   um terço com a legenda ao lado. Lia-se como uma tabela partida.
   Enviei isto sem voltar a olhar para o bloco depois de acrescentar a seta —
   o defeito esteve publicado umas horas. */
.material { display: grid; gap: .2rem 1.5rem; padding: 1.1rem .2rem;
            grid-template-columns: minmax(0, 1fr) auto;
            grid-template-areas: "titulo seta" "nota seta";
            align-items: center; border-top: 1px solid var(--ink);
            text-decoration: none; color: inherit;
            transition: background .2s ease; }
.material:hover, .material:focus-visible { background: var(--cream-2); }
.material:hover .material__t, .material:focus-visible .material__t {
  text-decoration: underline; text-underline-offset: .2em; }
.material__t { grid-area: titulo; font-weight: 500; align-self: end; }
.material__n { grid-area: nota; font-size: .8rem; color: var(--ink-55);
               align-self: start; }
.material__seta { grid-area: seta; align-self: center; font-size: 1.1rem;
                  line-height: 1; }

/* O FECHO. O §9 dá 7/10 à conversão e pede duas coisas: a frase que separa
   as duas audiências, e um botão que não se confunda com um link. */
.fim-frase { margin-top: 1.8rem; font-family: var(--ff-display);
             font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.3;
             letter-spacing: -.01em; max-width: 22em; }
.fim-cta { margin-top: 1.2rem; }
.btn--grande { font-size: .9rem; padding: 1.15rem 2.4rem; }

/* A subheadline do cartão de experiência e o parágrafo colavam um ao outro:
   o `.servico-card__body p` zera a margem para os cartões antigos, que só
   tinham um parágrafo. Com a headline do §7 são dois, e sem respiro entre
   eles a promessa e a explicação lêem-se como uma frase só. */
.servico-card__body .lede + p { margin-top: .7rem; }

/* ==========================================================================
   ALVOS DE TOQUE. (2026-08-27, §13.1 da auditoria final)
   ==========================================================================
   «CTAs e alvos de toque ≥ 44 px.» Medido nas nove larguras que o §13 nomeia:
   os botões do sítio já estavam a 54 px, mas os CONTROLOS não — o botão do
   menu a 38, o do idioma a 34, e as ligações das redes sociais a 22.

   Vinte e dois píxeis é metade de um dedo. E são precisamente os elementos
   que uma pessoa carrega com o telemóvel numa mão, de pé, à porta de uma
   casa — não é um caso de laboratório.

   A altura ganha-se com `min-height` e não com padding solto, para que o
   alvo cresça sem que a letra ou o espaçamento do desenho se mexam. */
.nav-toggle, .lang__btn { min-height: 44px; }
.nav-toggle { font-size: .72rem; }
.contacto-social a { min-height: 44px; }
.contacto-mail, .contacto-tel { display: inline-flex; align-items: center;
                                min-height: 44px; }
/* O menu do idioma abre uma lista: cada linha é um alvo, e são as menores
   de todas — a sigla de duas letras não dá altura nenhuma sozinha. */
.lang__menu a { min-height: 44px; display: flex; align-items: center; }

/* E O RODAPÉ, que é onde estão os alvos mais pequenos de todos: as três
   casas, os contactos, as redes e os quatro documentos legais, todos em
   listas de uma linha, todos a 18–22 px. Uma lista empilhada não é texto
   corrido — cada item é um destino, e a norma não os dispensa.
   O `min-height` também lhes dá o respiro que uma lista de ligações
   precisa para não se ler como um parágrafo partido. */
.site-footer li > a, .site-footer p > a, .footer-social a {
  display: inline-flex; align-items: center; min-height: 44px; }

/* Os itens do menu no computador estavam a 33 px, e o §13.1 pede 44.

   ESTA REGRA NÃO TOCA NO `display`, E A RAZÃO CUSTOU DUAS AVARIAS.
   A primeira versão era `.nav-links a { display: inline-flex; min-height:
   44px }`. Um selector de dois níveis vence o `display: none` de um selector
   de um nível — e dentro do `.nav-links` há TRÊS coisas escondidas no
   computador: o `.btn--menu` e os dois `.nav-link--so-menu`.

   Destapou-as a todas. O botão apareceu preto sobre preto (o `.nav-links a`
   da linha 252 também manda na cor) e foi apanhado pelo contraste-texto.py
   a medir 1.00:1. Os dois itens do menu de bolso apareceram legíveis — e
   por isso nenhuma guarda os viu: foram parar por cima do monograma, e foi
   o Nuno que os viu numa captura de ecrã.

   Pôr `:not()` para cada classe escondida é jogar à apanhada: a próxima
   classe escondida rebenta outra vez. A altura ganha-se com `padding-block`,
   que num item de flex dá exactamente o mesmo alvo de toque e não tem
   opinião nenhuma sobre quem está visível. */
.nav-links a { padding-block: 1rem; }