/* =========================================================================
   Ana Leonor Marciano — Advogada
   Folha de estilo única. Sem framework, sem runtime de construtor.

   Organização:
     1. Tokens        2. Base        3. Tipografia
     4. Estrutura     5. Cabeçalho   6. Componentes
     7. Secções       8. Rodapé      9. Utilitários
   ========================================================================= */

/* ---------------------------------------------------------- 1. Tokens --- */

:root {
  /* Cor.
     O dourado é o do logótipo e não muda. O resto é a palete "ardósia",
     escolhida pela advogada em setembro de 2026 entre três propostas em
     azul (marinho, petróleo, ardósia). O castanho que havia antes vinha da
     plataforma antiga, e ela disse que "não tem nada a ver com a área".
     A ardósia é um azul dessaturado: mais discreto que o marinho dos
     logótipos que ela mandou (#040f71), e deixa o dourado mandar. */
  --ouro: #c9981a;
  --ouro-claro: #e8c878;
  --ouro-escuro: #a87818;

  /* A cor de acção: botões, sobrelinhas, ícones. 7,6:1 sobre branco e
     6,5:1 sobre o fundo mais fundo; texto branco por cima dá 7,6:1. */
  --principal: #44556b;
  --principal-escura: #2f3d4f;   /* hover dos botões — 11:1 com branco */

  --tinta: #232a33;          /* títulos */
  --tinta-suave: #39434f;    /* ligações, texto forte */
  --texto: #555d68;          /* corpo — 5,7:1 mesmo no fundo mais fundo */

  /* A página desce: cada faixa é um pouco mais funda do que a anterior,
     até ao bloco de contacto. Não é alternância entre dois tons — é uma
     escada, e é o que faz a página parecer que assenta em vez de oscilar.

     Os degraus já foram maiores — L* 93 / 89 / 85 — e a página ficava às
     riscas; as riscas compartimentam. O site de referência que a cliente
     achou mais limpo separa as secções quase só pelo espaço. Estes ficam a
     98 / 96 / 94: a escada mantém-se sem virar pauta.

     Os cartões e os campos do formulário assentam nestas faixas com fundo
     --papel. Não se perdem porque têm todos 1px de --linha: quem os define
     é o contorno, não o contraste do preenchimento. */
  --papel: #ffffff;    /* L* 100  — secções de texto */
  --fundo-1: #f9fafb;  /* L* 98,2 */
  --fundo-2: #f2f4f7;  /* L* 96,1 */
  --fundo-3: #eaeef3;  /* L* 93,9 — bloco de contacto */
  /* O tinte do topo do herói, que desvanece para branco antes dos botões. */
  --tinte: #dae0e8;
  --tinte-suave: #edf0f4;
  --carvao: #232a33;   /* rodapé */

  /* O filete tem de se ver sobre branco e sobre as faixas: fica 8,5 pontos
     de L* abaixo da mais funda. */
  --linha: #d0d6de;

  /* Os três cinzentos do rodapé, sobre o carvão. */
  --rodape-texto: #d0d5dc;   /* ligações e contactos — 9,8:1 */
  --rodape-suave: #979da7;   /* legendas — 5,3:1 */
  --rodape-titulo: #aeb4bd;  /* cabeçalhos das colunas — 6,9:1 */

  /* Tipografia */
  --fonte-titulo: "Playfair Display", Georgia, "Times New Roman", serif;
  /* Uma só sem-serifa, e não duas. O destaque era Poppins — geométrico,
     nos botões, etiquetas e navegação — e o corpo Open Sans. Dois
     sem-serifa a fazer trabalho parecido: isoladamente não se nota, no
     conjunto faz a página parecer menos decidida. O Open Sans é variável
     (300–800), por isso cobre sozinho os pesos que as etiquetas usavam.
     Fica o token com o mesmo nome, que é o que distingue os dois papéis
     caso um dia se queira voltar a separá-los. */
  --fonte-destaque: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --fonte-corpo: "Open Sans", "Helvetica Neue", Arial, sans-serif;

  /* Escala fluida: cresce com o ecrã, sem saltos bruscos */
  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --t-m: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-l: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --t-xl: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
  --t-2xl: clamp(1.875rem, 1.5rem + 1.8vw, 3rem);
  --t-3xl: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem);

  /* Ritmo */
  --gap: clamp(1rem, 0.8rem + 1vw, 1.75rem);
  /* Espaço entre secções. Dava 96px num ecrã de 1290px; a referência que
     a cliente apontou usa 128px em cima e em baixo de cada secção, e com
     as faixas agora quase invisíveis é o espaço que passa a separar os
     blocos. O topo sobe para 8rem e a inclinação acompanha, para bater
     nos 128px por volta dessa largura e não antes — num telemóvel de
     375px fica em 56px, que é o que lá cabe sem empurrar tudo para baixo. */
  --acima: clamp(3.5rem, 2rem + 7.5vw, 8rem);
  --margem: clamp(1rem, 0.5rem + 3vw, 2.5rem); /* goteira lateral */
  --largura: 72rem;
  --largura-texto: 42rem;

  --raio: 4px;
  --raio-grande: 14px;
  --sombra: 0 1px 2px rgb(35 42 51 / 4%), 0 8px 24px -12px rgb(35 42 51 / 14%);
  --sombra-alta: 0 2px 4px rgb(35 42 51 / 5%), 0 18px 44px -18px rgb(35 42 51 / 22%);

  --transicao: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------------------ 2. Base --- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;   /* o cabeçalho fixo não tapa as âncoras */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: var(--t-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* rede de segurança; o layout não deve precisar */
}

img, svg, video { display: block; max-width: 100%; height: auto; }
/* o <picture> é só um invólucro para o <source> em WebP: não deve criar
   caixa própria, senão as classes e margens do <img> deixam de funcionar
   dentro das grelhas */
picture { display: contents; }

a { color: var(--tinta-suave); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--principal); }

:focus-visible {
  outline: 2px solid var(--principal);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--ouro-claro); color: var(--tinta); }

/* Saltar para o conteúdo — primeiro tab da página */
.saltar {
  position: absolute;
  left: 0; top: 0;
  padding: 0.75rem 1.25rem;
  background: var(--carvao);
  color: #fff;
  z-index: 200;
  transform: translateY(-120%);
  transition: transform var(--transicao);
}
.saltar:focus { transform: translateY(0); color: #fff; }

/* ------------------------------------------------------ 3. Tipografia --- */

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  color: var(--tinta);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); letter-spacing: -0.015em; }
h2 { font-size: var(--t-2xl); letter-spacing: -0.01em; }
h3 { font-size: var(--t-l); }
h4 { font-family: var(--fonte-destaque); font-size: var(--t-m); font-weight: 600; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { color: var(--tinta-suave); font-weight: 600; }

/* Sobrelinha: a etiqueta pequena que anuncia a secção */
.sobrelinha {
  font-family: var(--fonte-destaque);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--principal);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.sobrelinha::before {
  content: "";
  width: 1.8rem; height: 1px;
  background: var(--ouro);
  flex: none;
}
.centrado .sobrelinha { justify-content: center; }

.chamada {          /* parágrafo de abertura, maior */
  font-size: var(--t-m);
  color: var(--texto);
}

/* ------------------------------------------------------- 4. Estrutura --- */

.env {              /* envelope: largura máxima + goteiras */
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}
.env-estreito { max-width: calc(var(--largura-texto) + var(--margem) * 2); }

.seccao { padding-block: var(--acima); }
.seccao-fundo-1 { background: var(--fundo-1); }
.seccao-fundo-2 { background: var(--fundo-2); }
.seccao-contacto { background: var(--fundo-3); }

/* Centrar tem duas metades, e é fácil esquecer uma.
   O `text-align` centra o TEXTO dentro da caixa; a caixa em si continua
   onde estava. Quando há uma largura máxima pelo meio — .chamada herda
   34rem de `.heroi .chamada`, .cabecalho-seccao tem 46rem — o resultado é
   texto centrado numa caixa encostada à esquerda, fora do eixo de tudo o
   resto.
   Por isso as margens automáticas aplicam-se ao próprio .centrado (para o
   caso de ele ter largura limitada) e aos seus filhos (para o caso de ela
   estar neles). Num bloco que já ocupe a largura toda, `auto` dá 0 e nada
   muda. */
.centrado {
  text-align: center;
  margin-inline: auto;
}
.centrado > * { margin-inline: auto; }
.centrado .prosa-alinhada { text-align: left; }

.cabecalho-seccao { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }

/* Duas colunas que colapsam para uma */
.duas {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
/* Colunas encostadas ao topo em vez de centradas: quando uma é bem mais
   alta que a outra (uma lista longa ao lado de um parágrafo), centrar
   deixava o texto curto a flutuar a meio. Eram style="" no HTML. */
.duas-topo { align-items: start; }
@media (min-width: 56rem) {
  .duas { grid-template-columns: 1fr 1fr; }
  .duas-texto-maior { grid-template-columns: 1.15fr 0.85fr; }
  .duas-inverte > :first-child { order: 2; }
}

/* ------------------------------------------------------- 5. Cabeçalho --- */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(255 255 255 / 92%);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--linha);
}

.cabecalho-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  min-height: 4.5rem;
}

.marca { display: flex; align-items: center; flex: none; }

.cabecalho-accoes { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.telefone-topo { gap: 0.45rem; white-space: nowrap; }

/* Entre o ponto em que o menu deixa de ser botão (54rem) e os ecrãs
   largos, o logótipo mais o número por extenso mais cinco itens de menu
   não cabem na mesma linha — os itens caíam para uma segunda linha. Nessa
   faixa o botão fica só com o ícone. */
@media (max-width: 68rem) {
  .telefone-numero { display: none; }
  /* .botao.telefone-topo, e não só .telefone-topo: o .botao-pequeno tem a
     mesma força e vem mais abaixo no ficheiro, por isso ganhava com o seu
     padding de 1.1rem dos lados — e o botão, com border-radius de 50%,
     ficava oval (54x37) em vez de redondo. */
  .botao.telefone-topo { padding: 0.6rem; border-radius: 50%; aspect-ratio: 1; justify-content: center; }
}
.marca img { width: 11rem; }

/* O logótipo divide a linha com o botão do telefone e o do menu, e ainda
   assim mantém as 11rem num telemóvel de 375px — sobram lá 54px de folga.
   Só abaixo de 21rem é que encolhe: o nome já vem em letra pequena no
   ficheiro do cliente, e cada décimo que se tira sai da legibilidade. */
@media (max-width: 21rem) {
  .marca img { width: 9rem; }
}

.navegacao ul {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.6rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.navegacao a {
  display: block;
  padding: 0.45rem 0.2rem;
  font-family: var(--fonte-destaque);
  font-size: var(--t-s);
  color: var(--tinta-suave);
  text-decoration: none;
  position: relative;
  white-space: nowrap;   /* "Página Inicial" não se parte a meio */
}
.navegacao a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.1rem;
  height: 1.5px;
  background: var(--ouro);
  transform: scaleX(0);
  transition: transform var(--transicao);
}
.navegacao a:hover::after,
/* `page` é a página aberta; `true` é a secção que a contém (estar-se
   dentro de um artigo marca "Artigos"). Desenham-se igual. */
.navegacao a[aria-current]::after { transform: scaleX(1); }
.navegacao a[aria-current] { color: var(--tinta); }

/* Botão do menu — só aparece em ecrã estreito */
.menu-botao {
  display: none;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--tinta);
}
.menu-botao span,
.menu-botao span::before,
.menu-botao span::after {
  display: block;
  width: 22px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transicao), opacity var(--transicao);
}
.menu-botao span { margin-inline: auto; position: relative; }
.menu-botao span::before, .menu-botao span::after {
  content: "";
  position: absolute; left: 0;
}
.menu-botao span::before { top: -7px; }
.menu-botao span::after { top: 7px; }

.menu-botao[aria-expanded="true"] span { background: transparent; }
.menu-botao[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.menu-botao[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 54rem) {
  .menu-botao { display: block; }

  .navegacao {
    position: fixed;
    inset: 4.5rem 0 auto;
    background: var(--papel);
    box-shadow: var(--sombra-alta);
    display: grid;
    grid-template-rows: 0fr;
    /* sem o visibility, os cinco links ficavam a 0 de altura mas ainda
       focáveis: cinco paragens de tabulação sem nada visível no ecrã */
    visibility: hidden;
    transition: grid-template-rows var(--transicao),
                visibility var(--transicao);
  }
  .cabecalho[data-aberto="sim"] .navegacao {
    grid-template-rows: 1fr;
    visibility: visible;
  }
  .cabecalho[data-aberto="sim"] .navegacao > ul { border-bottom: 1px solid var(--linha); }

  /* O elemento que colapsa não pode ter padding nem borda própria: a 0fr a
     linha fica sem altura, mas o padding continuava a desenhar-se e via-se
     uma faixa do menu por baixo do cabeçalho. O espaçamento vive nos <li>. */
  .navegacao > ul {
    overflow: hidden;
    min-height: 0;
    padding: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .navegacao li { padding-inline: var(--margem); }
  .navegacao li:last-child { padding-bottom: 0.75rem; }
  .navegacao li + li { border-top: 1px solid var(--linha); }
  .navegacao a { padding: 0.95rem 0; font-size: var(--t-m); }
  .navegacao a::after { display: none; }
  .navegacao a[aria-current] { color: var(--principal); }
}

/* Sem JavaScript o botão do menu não alterna nada — mais vale a navegação
   ficar aberta do que inacessível. */
.sem-js .navegacao { grid-template-rows: 1fr !important; visibility: visible !important; }
.sem-js .menu-botao { display: none !important; }

/* ----------------------------------------------------- 6. Componentes --- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.9rem;
  border: 1.5px solid var(--principal);
  border-radius: 40px;
  background: none;
  color: var(--tinta-suave);
  font-family: var(--fonte-destaque);
  font-size: var(--t-s);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao);
}
.botao:hover {
  background: var(--principal);
  border-color: var(--principal);
  color: #fff;
}
.botao-cheio {
  background: var(--principal);
  border-color: var(--principal);
  color: #fff;
}
.botao-cheio:hover { background: var(--principal-escura); border-color: var(--principal-escura); }

.botoes { display: flex; flex-wrap: wrap; gap: 0.85rem; }
/* o botão que fecha uma secção centrada, a seguir a uma grelha */
.botoes-fim-seccao { justify-content: center; margin-top: 2.5rem; }
.centrado .botoes { justify-content: center; }

/* Grelha de cartões, auto-ajustável */
.grelha {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

/* Empilhamento dos cartões de área.
   As nove áreas têm entre 86 e 505 caracteres de lista, e numa grelha
   normal todos os cartões de uma linha esticam até ao mais alto: sobravam
   ~1400px de branco dentro dos curtos. Aqui cada um fica com a sua altura
   e encaixa no buraco mais próximo.
   Não dá para fazer só com CSS — `columns` preenche por ordem e não pode
   reordenar, o que deixava 585px de desnível entre colunas, e o masonry
   nativo ainda não existe (testado no Chrome 152). O app.js mede e escreve
   os `span`; esta classe só é posta depois de ele medir, senão os cartões
   ficavam todos com uma linha de altura e sobrepunham-se. Sem JavaScript
   fica a grelha normal, que funciona. */
.grelha-empilhada {
  grid-auto-rows: 4px;
  grid-auto-flow: row dense;
  align-items: start;
  row-gap: 0;
}

.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  transition: transform var(--transicao), box-shadow var(--transicao);
  /* O ícone fica ao lado do título, não por cima: lê-se como um cabeçalho
     só, e poupa a linha inteira que ele ocupava — menos 33px por cartão.
     O `start` alinha-o com a primeira linha do título; centrado, nos
     títulos de duas linhas ficava a pairar a meio delas. */
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.7rem;
  align-items: start;
}
.cartao > .cartao-icone { grid-area: 1 / 1; }
.cartao > h2, .cartao > h3 { grid-area: 1 / 2; }
/* tudo o resto ocupa a largura toda, por baixo */
.cartao > *:not(.cartao-icone):not(h2):not(h3) { grid-column: 1 / -1; }
.cartao:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
/* Quem vem da lista de áreas da página inicial aterra a meio de uma grelha
   de nove: sem isto, tinha de procurar em qual dos cartões calhou. */
.cartao:target {
  border-color: var(--principal);
  /* um anel em vez de engrossar a borda: engrossá-la deslocava o cartão
     um pixel e a grelha toda tremia ao seguir a ligação */
  box-shadow: 0 0 0 2px var(--principal), var(--sombra);
}
/* O título do cartão pode ser h2 ou h3 conforme a página (na de Serviços
   cada área é uma secção de topo); o aspecto é o mesmo nos dois casos. */
.cartao h2, .cartao h3 {
  font-family: var(--fonte-destaque);
  font-size: var(--t-m);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  text-wrap: balance;
  margin: 0;
}
/* O marcador da lista nascia a meio do recuo e o texto ainda mais à
   direita: o cartão tinha três margens esquerdas — ícone e título a 35px,
   o ponto a ~40px, o texto a 52px. Agora o ponto alinha com o título e só
   o texto recua, que é o que se espera de uma lista. */
.cartao ul, .cartao p { margin: 0.9rem 0 0; }
.cartao ul { padding-left: 0; list-style: none; }
.cartao li { position: relative; padding-left: 1.05rem; margin-bottom: 0.3rem; }
.cartao li::before {
  content: "";
  position: absolute;
  left: 0.05rem;
  top: 0.62em;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--ouro);
}
/* o último item empurrava o fundo do cartão 5px abaixo do topo */
.cartao li:last-child { margin-bottom: 0; }
.cartao p, .cartao li { font-size: var(--t-s); }

.cartao-icone {
  /* Era uma caixa fixa de 2.6rem para um desenho de 1.625rem: sobravam
     16px mortos por baixo do ícone, que somados à margem o deixavam a 34px
     do título, a flutuar. O flex encolhe a caixa até ao desenho. */
  display: flex;
  margin: 0;
  /* meio pixel para o desenho assentar na linha do título */
  translate: 0 -1px;
  color: var(--ouro);
}

/* Página de um artigo */
.seccao-artigo .artigo-capa {
  /* o dimensionamento vinha de uma regra genérica .artigo-capa, que saiu
     com o cartão de texto do índice antigo; aqui é explícito */
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--raio-grande);
  margin: 1.75rem 0;
}
.seccao-artigo .sobrelinha a { color: inherit; text-decoration: none; }
.seccao-artigo .sobrelinha a:hover { color: var(--principal); }
.seccao-artigo h1 { max-width: var(--largura-texto); }

/* "Matéria de Direito Penal." — nenhum dos artigos ligava para o resto
   do site; esta linha fecha o caminho para a área de prática. */
.artigo-area {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linha);
  font-size: var(--t-s);
  color: var(--texto);
}

.lista-outros {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  border-top: 1px solid var(--linha);
}
.lista-outros li { border-bottom: 1px solid var(--linha); }
.lista-outros a {
  display: block;
  padding: 0.85rem 0.25rem;
  font-family: var(--fonte-destaque);
  font-size: var(--t-s);
  text-decoration: none;
  color: inherit;
}
.lista-outros a:hover { color: var(--principal); }

/* Lista de contactos */
.contacto-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
/* no bloco de contacto, a lista vem a seguir a um parágrafo e precisa de ar */
.contacto-lista-afastada { margin-top: 1.75rem; }
.contacto-lista li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.9rem; align-items: start; }
.contacto-lista svg {
  width: 1.15rem; height: 1.15rem;
  color: var(--principal);
  margin-top: 0.28rem;
}
/* o ícone do WhatsApp vem de icone_rede() e não traz width/height */
.contacto-lista > li > svg { flex: none; }


.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Formulário */
.formulario { display: grid; gap: 1.1rem; }
.campos-lado-a-lado { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .campos-lado-a-lado { grid-template-columns: 1fr 1fr; } }

.campo { display: grid; gap: 0.4rem; }
.campo label {
  font-family: var(--fonte-destaque);
  font-size: var(--t-s);
  font-weight: 500;
  color: var(--tinta-suave);
}
.campo input, .campo textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel);
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--t-base);
}
.campo textarea { min-height: 9rem; resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible {
  /* o outline:none anterior deixava o foco assinalado só por uma mudança
     de bordo, invisível no modo de alto contraste do Windows */
  outline: 2px solid var(--principal);
  outline-offset: 2px;
  border-color: var(--principal);
}

/* --------------------------------------------------------- 7. Secções --- */

.heroi {
  position: relative;
  padding-block: clamp(3rem, 4vw + 2rem, 6rem) var(--acima);
  background: linear-gradient(180deg, var(--tinte-suave) 0%, var(--papel) 100%);
  overflow: hidden;
}
.heroi h1 { margin-bottom: 0.7rem; }
.heroi .chamada { max-width: 34rem; }
.heroi .botoes { margin-top: 2rem; }

.heroi-retrato {
  width: min(100%, 26rem);
  margin-inline: auto;
  filter: drop-shadow(0 22px 40px rgb(35 42 51 / 14%));
}

/* Os três valores resumem a biografia logo acima, por isso vivem na mesma
   secção e no mesmo fundo. Em faixa própria ficavam entre dois fundos
   quase da mesma cor e a mudança lia-se como mancha, não como corte. */
/* A margem e o fio eram para quando isto vivia dentro da secção do texto,
   pendurado no fim dele como um rodapé. Passou a secção própria com fundo
   próprio: separa-se sozinha e a página ganha a descida tonal que o resto
   do site já faz — branco, --fundo-1, --fundo-3 do contacto. */
/* `margin: 0` aqui parecia inofensivo e desalinhava a secção inteira: o
   .env centra-se com `margin-inline: auto`, e a forma abreviada anulava-o.
   Só o que era do arranjo antigo é que se reposiciona — o de cima. */
.resumo-valores { margin-block: 0; padding-top: 0; border-top: 0; }
.resumo-valores .sobrelinha { justify-content: center; margin-bottom: 2rem; }

.valores { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.valor { text-align: center; }
.valor svg { width: 2.4rem; height: 2.4rem; margin-inline: auto; color: var(--ouro); margin-bottom: 0.9rem; }
.valor h3 { font-family: var(--fonte-destaque); font-size: var(--t-m); font-weight: 600; margin-bottom: 0.35rem; }
.valor p { font-size: var(--t-s); }

/* Retrato com a ilustração ao lado */
.retrato-moldura { position: relative; }
.retrato-moldura img { width: 100%; border-radius: var(--raio-grande); }

/* ---------------------------------------------------------- 8. Rodapé --- */

.rodape {
  background: var(--carvao);
  color: var(--rodape-titulo);
  padding-block: clamp(3rem, 5vw, 4.5rem) 2rem;
  font-size: var(--t-s);
}
.rodape h2 {
  font-family: var(--fonte-destaque);
  font-size: var(--t-s);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.1rem;
}
.rodape a { color: var(--rodape-texto); text-decoration: none; }
.rodape a:hover { color: var(--ouro-claro); text-decoration: underline; }
/* --tinta-suave desapareceria sobre o carvão */
.rodape strong { color: #fff; font-weight: 600; }
.rodape small { color: var(--rodape-suave); }

.rodape-grelha {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) { .rodape-grelha { grid-template-columns: 1fr 1fr; } }
/* A coluna dos escritórios leva duas moradas com linhas longas — a de
   Lisboa tem "Avenida do Atlântico, Lote 1.19.2, Escritório 7.13" — e com
   1fr ficava a partir palavras a meio. Leva mais do que as outras. */
@media (min-width: 64rem) { .rodape-grelha { grid-template-columns: 1.2fr 0.8fr 1.5fr 1.2fr; } }

/* Duas moradas seguidas com 0.6rem entre elas liam-se como um bloco só.
   O nome do escritório é que tem de marcar o início de cada uma. */
.rodape address ul { gap: 1.1rem; }
.rodape address strong { display: block; margin-bottom: 0.15rem; }

/* 5.5rem e não 7rem: as 7rem vinham do monograma antigo, que era o "AM"
   deitado, 2:1 — dava 96x48px. O novo é quadrado, e às mesmas 7rem ficava
   com 112x111px, mais do dobro da altura, a dominar a coluna. */
.rodape-marca img { width: 5.5rem; margin-bottom: 1.1rem; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

/* Três itens: copyright, redes, política. Com `space-between` o do meio
   caía onde sobrava espaço — 113px à direita do eixo, porque o copyright
   é muito mais largo que o link da direita. Uma grelha de 1fr-auto-1fr
   põe as redes no centro verdadeiro. */
.rodape-fim {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 12%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.9rem 1.5rem;
  font-size: var(--t-xs);
  color: var(--rodape-suave);
}
.rodape-fim > :last-child { justify-self: end; }

/* a margem inferior dos parágrafos desalinhava o copyright 7px em relação
   ao resto (o da direita escapava por ser :last-child) */
.rodape-fim p { margin: 0; }

@media (max-width: 44rem) {
  .rodape-fim {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .rodape-fim > :last-child { justify-self: center; }
  /* em coluna, as redes ficam melhor no meio da pilha */
  .rodape-fim .redes { order: -1; margin-bottom: 0.4rem; }
}

/* Ícones das redes no rodapé. O site antigo tinha estes botões a apontar
   para as raízes do facebook.com e do twitter.com — sem conta nenhuma,
   logo sem destino. Estes são os perfis reais. */
/* `.rodape ul` (0,1,1) tem mais especificidade que `.redes` (0,1,0) e
   impunha `display:grid`, que empilhava os ícones em coluna. */
.rodape .redes {
  display: flex;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rodape .redes a {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  color: var(--rodape-texto);
  transition: background var(--transicao), border-color var(--transicao),
              color var(--transicao);
}
.rodape .redes a:hover,
.rodape .redes a:focus-visible {
  background: var(--ouro);
  border-color: var(--ouro);
  color: var(--carvao);
}
.rodape .redes svg { width: 1.05rem; height: 1.05rem; }

/* ----------------------------------------------------- 9. Utilitários --- */

.so-leitores {           /* visível só para tecnologias de apoio */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.prosa > * + * { margin-top: 1.15em; }
.prosa h2 { margin-top: 2em; }
.prosa ul, .prosa ol { padding-left: 1.3rem; }
.prosa li { margin-bottom: 0.4rem; }

@media print {
  .cabecalho, .rodape, .menu-botao, .botoes { display: none; }
  body { color: #000; }
}

/* ------------------------------------------ 10. Acrescentos posteriores --- */

/* Lista de áreas de prática na página inicial: nomes com ligação à página
   de Serviços, onde cada área é detalhada. */
/* Índice das áreas: uma lista com filetes, não nove caixas. Mais leve
   do que a grelha de cartões da secção dos Artigos, logo a seguir, e
   deixa o olho percorrer os nomes de uma vez. */
.areas {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linha);
}
.areas li { border-bottom: 1px solid var(--linha); }
.areas a {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  align-items: center;
  gap: 0.95rem;
  padding: 1.05rem 0.25rem;
  font-family: var(--fonte-destaque);
  /* São as nove áreas de prática: a substância do que ela faz. Estavam a
     15px e leves de mais para o peso que têm na página. */
  font-size: var(--t-m);
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
  transition: color var(--transicao), padding var(--transicao);
}
.areas a:hover { color: var(--principal); padding-left: 0.6rem; }
.areas svg { color: var(--ouro); flex: none; }
/* A seta estava invisível até se passar o rato. Num telemóvel não há rato:
   as nove áreas ficavam sem indício nenhum de que se podia tocar nelas. */
.area-seta {
  display: grid;
  place-items: center;
  color: var(--principal);
  opacity: 0.45;
  transform: rotate(-90deg);
  transition: opacity var(--transicao), transform var(--transicao);
}
.areas a:hover .area-seta { opacity: 1; transform: rotate(-90deg) translateY(3px); }
.areas a:focus-visible .area-seta { opacity: 1; }

.areas-intro .botoes { margin-top: 1.75rem; }

.botao-pequeno { padding: 0.55rem 1.1rem; font-size: var(--t-xs); }

.nota-pequena { margin-top: 1rem; font-size: var(--t-xs); }


.form-nota { font-size: var(--t-xs); margin-top: 0.25rem; }

/* Resposta ao envio do formulário. Anunciada por aria-live no HTML. */
.form-estado {
  margin: 0;
  padding: 0.85rem 1.1rem;
  border-radius: var(--raio);
  font-size: var(--t-s);
}
.form-estado[data-tipo="a-enviar"] { background: var(--fundo-1); }
.form-estado[data-tipo="sucesso"] { background: #eef5ee; color: #2f5138; }
.form-estado[data-tipo="erro"] { background: #fbeceb; color: #7d2f29; }

/* Escritórios e mapas
   As moradas têm números de linhas diferentes (Lisboa três, Almada duas),
   o que empurrava um mapa 28px abaixo do outro. Cada escritório é uma
   coluna flexível em que a lista absorve a folga, por isso os mapas
   ficam encostados ao fundo — e, com as colunas à mesma altura, alinhados. */
.escritorios { align-items: stretch; }

.escritorio { display: flex; flex-direction: column; }
.escritorio h2 { font-size: var(--t-l); }
.escritorio .contacto-lista { flex: 1 0 auto; }

.mapa {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-top: 1.5rem;
  margin-bottom: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  overflow: hidden;
  background: var(--fundo-1);
}
.mapa .leaflet-container { width: 100%; height: 100%; font: inherit; }
/* Os tiles do OSM são bastante mais saturados do que o resto do site.
   Baixar a saturação e subir um pouco o contraste aproxima-os da paleta
   sem esconder nada do mapa. */
/* Os tiles ficam como o OpenStreetMap os serve, sem filtro.
   Passaram por `sepia()` (tom de areia) e por dessaturação neutra: as duas
   combinavam melhor com a paleta e liam-se pior como mapa. Um mapa vale
   pela legibilidade — o verde é parque, o azul é água — e essa informação
   perde-se ao tirar-lhe a cor. A cor do site fica no alfinete, que é o que
   ali interessa destacar. */
.mapa .alfinete { filter: drop-shadow(0 2px 3px rgb(35 42 51 / 30%)); }
.mapa-sem-js { display: grid; place-items: center; height: 100%; padding: 1rem; }

/* o Leaflet traz os seus próprios tipos de letra e cantos */
/* Os controlos do Leaflet vêm com o aspecto de origem e denunciam-se à
   distância. Passam para a paleta e para o mesmo raio de canto do site. */
.mapa .leaflet-bar { border: 0; box-shadow: 0 1px 3px rgb(35 42 51 / 12%); }
.mapa .leaflet-bar a {
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-size: 17px;
  background: var(--papel);
  border-bottom-color: var(--linha);
  color: var(--texto) !important;
}
.mapa .leaflet-bar a:first-child { border-radius: 8px 8px 0 0; }
.mapa .leaflet-bar a:last-child { border-radius: 0 0 8px 8px; border-bottom: 0; }
.mapa .leaflet-bar a:hover { background: var(--fundo-1); color: var(--principal) !important; }

.mapa .leaflet-control-attribution {
  background: rgb(255 255 255 / 80%);
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 6px 0 0 0;
  color: var(--texto);
}
.mapa .leaflet-control-attribution a { color: var(--principal); text-decoration: none; }



/* Cartão de artigo na página inicial: dá o suficiente para decidir, e
   manda ler o texto completo a /artigos — que é onde ele vive. */
/* A página inicial mostra seis artigos: duas linhas de três em ecrã largo.
   Num telemóvel não há linhas — seriam seis cartões empilhados, quase
   quatro ecrãs só de artigos antes de se chegar ao contacto. Aí ficam
   três, e o resto está a um toque no "Ver todos os artigos". */
@media (max-width: 47rem) {
  .grelha-destaques > .cartao-artigo:nth-child(n + 4) { display: none; }
}

.cartao-artigo {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.cartao-artigo:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.cartao-artigo a { display: block; text-decoration: none; color: inherit; height: 100%; }
.cartao-artigo .artigo-capa { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.cartao-artigo-texto { padding: 1.35rem 1.5rem 1.6rem; }
.cartao-artigo :is(h2, h3) {
  font-family: var(--fonte-destaque);
  font-size: var(--t-base);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.cartao-artigo p { font-size: var(--t-s); margin-bottom: 1rem; }
.ler-mais {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--fonte-destaque); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--principal);
}
.ler-mais svg { transform: rotate(-90deg); transition: transform var(--transicao); }
.cartao-artigo a:hover .ler-mais svg { transform: rotate(-90deg) translateY(3px); }

address { font-style: normal; }

/* ------------------------------------------- 11. Herói sem imagem --------- */

/* Numa página que existe para listar coisas, o herói não deve empurrar a
   lista para fora do ecrã. Era o que a ilustração do martelo fazia:
   ocupava meia dobra sem acrescentar informação. */
.heroi-curto { padding-block: clamp(2.5rem, 3vw + 1.5rem, 4rem) clamp(2rem, 3vw, 3rem); }

/* A frase de abertura do texto do escritório é o título da secção.
   Ocupa o lugar que era da ilustração da balança — é uma posição, não
   uma etiqueta, e não custa um único byte a transferir.
   Não leva filete: com o tamanho de título já tem peso que chegue, e o
   traço fá-la-ia parecer uma citação de outra pessoa. */
.tese {
  margin: 0;
  font-size: var(--t-xl);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-wrap: pretty;
  max-width: 20ch;
}

/* Os dois canais de resposta num <fieldset>: são alternativos, não dois
   campos independentes, e a legenda tem de o dizer a quem usa leitor de
   ecrã tanto como a quem vê. */
.campos-contacto {
  margin: 0;
  padding: 0;
  border: 0;
}
.campos-contacto legend {
  padding: 0;
  margin-bottom: 0.6rem;
  font-family: var(--fonte-destaque);
  font-size: var(--t-s);
  font-weight: 500;
  color: var(--tinta-suave);
}

/* No estado de erro o aviso deixa de ser uma frase e passa a ter acções */
.form-estado .botoes { margin-top: 0.85rem; }
.form-estado p { margin: 0; }