/* =========================================================================
   Mercedes W115 — folha de estilos do site (v2.0, proposta 1 "Ecrã inteiro")
   Escrita de raiz em 2026-10. Todas as cores, tipos de letra, medidas e
   tempos de animação estão nos tokens de :root: mudar ali muda o site todo.
   O site é só escuro (decisão de 2026-10-27), por isso não há tema claro.
   ========================================================================= */

/* ---------- Tipos de letra (servidos pelo site, sem pedidos ao Google) ----------
   "latin" cobre o português e o inglês; "latin-ext" só é descarregado se a página
   tiver caracteres de outras línguas europeias (alemão, por exemplo). */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/oswald-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/oswald-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;

  /* Cores: preto e branco, sem cor de destaque (proposta 1).
     Contraste sobre --cor-fundo: texto 19:1, texto suave 13:1, texto apagado 8:1. */
  --cor-fundo: #0c0c0c;          /* fundo da página */
  --cor-superficie: #171717;     /* faixas e secções alternadas */
  --cor-superficie-2: #212121;   /* cartões e campos sobre --cor-superficie */
  --cor-texto: #ffffff;          /* títulos e texto principal */
  --cor-texto-suave: #d4d4d4;    /* texto corrido */
  --cor-texto-apagado: #a6a6a6;  /* rótulos, legendas, datas */
  --cor-linha: rgba(255, 255, 255, 0.16);
  --cor-linha-forte: rgba(255, 255, 255, 0.4);
  --cor-foco: #ffffff;           /* contorno do foco do teclado */
  --cor-sombra-foco: rgba(0, 0, 0, 0.85);
  --cor-veu: rgba(0, 0, 0, 0.6); /* escurecimento por cima de fotografias */
  --cor-erro: #ff8f87;           /* avisos de erro (contraste 8:1 sobre o fundo) */
  --cor-sucesso: #9bd8a6;        /* confirmação de envio */

  /* Tipos de letra */
  --letra-titulo: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --letra-texto: "Inter", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Escala de tamanhos: cresce com o ecrã entre o telemóvel e o computador */
  --tam-rotulo: 0.8125rem;                          /* 13px, maiúsculas espaçadas */
  --tam-pequeno: 0.9375rem;                         /* 15px */
  --tam-texto: 1.0625rem;                           /* 17px */
  --tam-destaque: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --tam-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --tam-h3: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --tam-h2: clamp(2.125rem, 1.4rem + 3.2vw, 3.875rem);
  --tam-h1: clamp(2.75rem, 1.4rem + 6vw, 6.75rem);

  /* Medidas */
  --largura-maxima: 1440px;
  --largura-leitura: 68ch;
  --margem-lateral: clamp(20px, 4vw, 40px);
  --espaco-secao: clamp(60px, 9vw, 104px);
  --espaco-1: 0.5rem;
  --espaco-2: 1rem;
  --espaco-3: 1.5rem;
  --espaco-4: 2rem;
  --espaco-5: 3rem;
  --raio: 16px;                  /* cantos arredondados (vídeo, a pedido do Pedro) */

  /* Movimento: curvas naturais e durações curtas */
  --curva-saida: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-normal: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-rapida: 180ms;           /* cores e sublinhados */
  --dur-media: 320ms;            /* setas, zoom de fotos */
  --dur-lenta: 520ms;            /* aparecer ao fazer scroll (mais curto: movimento seco, sem arrastar) */
  --dur-abertura: 2400ms;        /* a fotografia de abertura assenta devagar, como num genérico */
  --curva-viagem: cubic-bezier(0.6, 0, 0.2, 1); /* arranca e trava suavemente: a fotografia que viaja entre páginas */
}

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Ligações dentro da página (ex.: "Ver os restauros") descem suavemente;
     o cabeçalho fixo não tapa o destino */
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
  font-family: var(--letra-texto);
  font-size: var(--tam-texto);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* ---------- Tipografia ---------- */
h1,
h2,
h3,
h4 {
  font-family: var(--letra-titulo);
  font-weight: 600;
  color: var(--cor-texto);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.04;
  text-wrap: balance;
}

h1 { font-size: var(--tam-h1); }
h2 { font-size: var(--tam-h2); }
h3 { font-size: var(--tam-h3); line-height: 1.1; }
h4 { font-size: var(--tam-h4); line-height: 1.15; }

p,
li {
  text-wrap: pretty;
}

strong,
b {
  color: var(--cor-texto);
  font-weight: 600;
}

/* Rótulo pequeno em maiúsculas, por cima dos títulos ("Os restauros", "Vídeo"…) */
.rotulo {
  font-family: var(--letra-titulo);
  font-size: var(--tam-rotulo);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cor-texto-apagado);
}

/* Largura e margens laterais comuns a todas as secções */
.largura {
  width: 100%;
  max-width: var(--largura-maxima);
  margin-inline: auto;
  padding-left: max(var(--margem-lateral), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margem-lateral), env(safe-area-inset-right, 0px));
}

/* Texto corrido com largura confortável de leitura */
.leitura {
  max-width: var(--largura-leitura);
}

/* Esconde visualmente, mas mantém para leitores de ecrã */
.so-leitores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Acessibilidade: foco e salto para o conteúdo ---------- */
:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 3px;
  /* Sombra escura à volta, para o contorno branco se ver também sobre fotografias claras */
  box-shadow: 0 0 0 5px var(--cor-sombra-foco);
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: max(12px, env(safe-area-inset-left, 0px));
  top: max(12px, env(safe-area-inset-top, 0px));
  z-index: 2000;
  padding: 10px 16px;
  color: var(--cor-fundo);
  background: var(--cor-texto);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* O conteúdo recebe o foco ao usar o link acima; não precisa de contorno à volta da página toda */
#conteudo:focus {
  outline: none;
  box-shadow: none;
}

/* ---------- Movimento ---------- */

/* Transição suave entre páginas (browsers que a suportam; os outros mudam de página como sempre) */
@view-transition {
  navigation: auto;
}

/* Aparecer ao fazer scroll. Só se aplica quando o JavaScript está ativo (classe "js" no <html>),
   para que, sem ele, o conteúdo esteja sempre visível. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-lenta) var(--curva-saida),
    transform var(--dur-lenta) var(--curva-saida);
  transition-delay: calc(var(--ordem, 0) * 60ms); /* cascata: --ordem é dado pelo site.js */
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Quem pede menos movimento no sistema não vê animações nem transições de página */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================================
   Cabeçalho (v2.0-T3)
   - "sobreposto": transparente, por cima da fotografia da página inicial.
   - "solido": fundo escuro, fica no topo ao fazer scroll (páginas interiores).
   - A partir de 1340px o menu aparece inteiro numa linha; abaixo disso, botão "Menu".
     (Medido com os textos atuais do menu: a metade esquerda ocupa 483px em português e
     511px em inglês. Para o inglês caber, entre 1340 e 1599px os espaços ficam um pouco
     mais apertados; ver o fim do bloco do menu do computador. 1340px mantém o menu inteiro
     nos portáteis de 1366px, muito comuns.
     Textos mais curtos no admin deixariam o menu inteiro caber em ecrãs mais estreitos.)
   ========================================================================= */
.topo {
  --altura-topo: 76px;
  z-index: 100;
  color: var(--cor-texto);
}

/* Página inicial: fixo e transparente sobre a fotografia; ao descer, ganha o fundo escuro
   (o site.js junta a classe "topo--rolado"). */
.topo--sobreposto {
  position: fixed;
  inset: 0 0 auto 0;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-media) var(--curva-normal);
}

.topo--sobreposto.topo--rolado {
  border-bottom-color: var(--cor-linha);
}

.topo--solido {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--cor-linha);
}

/* Fica igual de uma página para a outra durante a transição entre páginas */
.topo {
  view-transition-name: topo;
}

/* O fundo e o desfoque ficam numa camada à parte: aplicados ao próprio cabeçalho,
   impediriam o painel do menu de ocupar o ecrã inteiro. */
.topo--solido::before,
.topo--sobreposto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(12, 12, 12, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.topo--sobreposto::before {
  opacity: 0;
  transition: opacity var(--dur-media) var(--curva-normal);
}

.topo--sobreposto.topo--rolado::before {
  opacity: 1;
}

/* Faixa acima do cabeçalho sólido, nos telemóveis com entalhe, pintada com o fundo */
body:has(.topo--solido)::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 101;
  background: var(--cor-fundo);
}

.topo__barra {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--altura-topo);
}

/* Nome do site: ao centro no computador, à esquerda nos ecrãs estreitos */
.topo__marca {
  font-family: var(--letra-titulo);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding-block: 10px;
}

/* Menu do computador: escondido nos ecrãs estreitos */
.topo__nav {
  display: none;
}

.topo__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  list-style: none;
}

.topo__lista--direita {
  justify-content: flex-end;
}

.topo__link {
  position: relative;
  display: inline-block;
  padding-block: 12px;
  font-family: var(--letra-titulo);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.88;
  transition: opacity var(--dur-rapida) var(--curva-normal);
}

/* Sublinhado que cresce da esquerda ao passar o rato; fica inteiro na página atual */
.topo__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-media) var(--curva-saida);
}

.topo__link:hover,
.topo__link:focus-visible,
.topo__link[aria-current="page"] {
  opacity: 1;
}

.topo__link:hover::after,
.topo__link:focus-visible::after,
.topo__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* No cabeçalho sobreposto, uma sombra leve garante a leitura sobre qualquer fotografia */
.topo--sobreposto .topo__marca,
.topo--sobreposto .topo__link,
.topo--sobreposto .topo__botao {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

/* Botão "Menu" (só com JavaScript e só em ecrãs estreitos) */
.topo__botao {
  display: none;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--cor-linha-forte);
  background: transparent;
  font-family: var(--letra-titulo);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--curva-normal), color var(--dur-rapida) var(--curva-normal);
}

.topo__botao:hover {
  background: var(--cor-texto);
  color: var(--cor-fundo);
  text-shadow: none;
}

/* Ícone de duas linhas que se cruzam num X quando o menu está aberto */
.topo__botao-icone {
  position: relative;
  width: 18px;
  height: 10px;
}

.topo__botao-icone::before,
.topo__botao-icone::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-media) var(--curva-saida), top var(--dur-media) var(--curva-saida);
}

.topo__botao-icone::before { top: 0; }
.topo__botao-icone::after { top: calc(100% - 1.5px); }

.menu-aberto .topo__botao-icone::before { top: calc(50% - 0.75px); transform: rotate(45deg); }
.menu-aberto .topo__botao-icone::after { top: calc(50% - 0.75px); transform: rotate(-45deg); }

/* Menu de ecrãs estreitos. Sem JavaScript: lista simples por baixo da barra. */
.menu-movel {
  padding-block: 0 20px;
  padding-left: max(var(--margem-lateral), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margem-lateral), env(safe-area-inset-right, 0px));
}

.menu-movel__lista {
  list-style: none;
  display: grid;
  gap: 2px;
}

.menu-movel__link {
  display: block;
  padding-block: 10px;
  font-family: var(--letra-titulo);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.menu-movel__link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* v2.1: botão de língua "PT · EN".
   Computador: no fim do menu da direita, separado por um traço vertical.
   Telemóvel: no fundo do menu, com os nomes inteiros ("Português", "English"). */
.topo__linguas {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 22px;
}

/* Traço vertical curto a separar do menu (com a altura do texto, não do cabeçalho) */
.topo__linguas::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 16px;
  translate: 0 -50%;
  border-left: 1px solid var(--cor-linha-forte);
}

.linguas__link {
  display: inline-block;
  padding: 12px 2px;
  font-family: var(--letra-titulo);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity var(--dur-rapida) var(--curva-normal);
}

.linguas__link:hover,
.linguas__link:focus-visible,
.linguas__link[aria-current="true"] {
  opacity: 1;
}

.linguas__link[aria-current="true"] {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

.linguas__ponto {
  opacity: 0.5;
}

.topo--sobreposto .linguas__link,
.topo--sobreposto .linguas__ponto {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.menu-movel__linguas {
  display: flex;
  gap: 24px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--cor-linha);
}

.menu-movel__linguas .linguas__link {
  font-size: 1rem;
  min-height: 44px; /* alvo de toque confortável */
}

/* Página inglesa ainda por traduzir: aviso discreto por cima do conteúdo em português */
.aviso-lingua {
  margin-block: 20px 0;
  padding: 12px 16px;
  border: 1px solid var(--cor-linha-forte);
  font-size: var(--tam-pequeno);
  color: var(--cor-texto-suave);
}

/* Com JavaScript: o menu passa a ser um painel de ecrã inteiro que abre com o botão */
.js .topo__botao {
  display: inline-flex;
  position: relative;
  z-index: 2; /* fica por cima do painel, para o fechar */
}

.js .topo__marca {
  position: relative;
  z-index: 2;
}

.js .menu-movel {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  padding-block: calc(var(--altura-topo) + env(safe-area-inset-top, 0px)) calc(32px + env(safe-area-inset-bottom, 0px));
  background: var(--cor-fundo);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-media) var(--curva-normal), visibility 0s linear var(--dur-media);
}

.js .menu-movel__link {
  font-size: clamp(1.75rem, 1.2rem + 3vw, 2.5rem);
  font-weight: 600;
  padding-block: 8px;
  transform: translateY(10px);
  opacity: 0;
  transition: transform var(--dur-lenta) var(--curva-saida), opacity var(--dur-lenta) var(--curva-saida);
}

.js .menu-aberto .menu-movel {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur-media) var(--curva-normal), visibility 0s;
}

.js .menu-aberto .menu-movel__link {
  transform: none;
  opacity: 1;
}

/* Cascata: cada link do menu aberto entra um pouco depois do anterior */
.js .menu-aberto .menu-movel__lista li:nth-child(2) .menu-movel__link { transition-delay: 40ms; }
.js .menu-aberto .menu-movel__lista li:nth-child(3) .menu-movel__link { transition-delay: 80ms; }
.js .menu-aberto .menu-movel__lista li:nth-child(4) .menu-movel__link { transition-delay: 120ms; }
.js .menu-aberto .menu-movel__lista li:nth-child(5) .menu-movel__link { transition-delay: 160ms; }
.js .menu-aberto .menu-movel__lista li:nth-child(6) .menu-movel__link { transition-delay: 200ms; }
.js .menu-aberto .menu-movel__lista li:nth-child(n+7) .menu-movel__link { transition-delay: 240ms; }

/* Com o menu aberto, a página por baixo não faz scroll */
html.menu-bloqueado {
  overflow: hidden;
}

/* Computador: menu inteiro, dividido à volta do nome do site */
@media (min-width: 1340px) {
  .topo__barra {
    display: grid;
    grid-template-columns: 1fr;
  }

  .topo__marca,
  .js .topo__marca {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .topo__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 290px; /* espaço ao centro para o nome do site (221px) e uma folga */
  }

  .topo__lista {
    flex-wrap: nowrap;
  }

  /* Cada link numa só linha: se o menu não couber, transborda em vez de partir o texto,
     e o site.js deteta-o e mostra o botão "Menu" */
  .topo__link,
  .topo__linguas {
    white-space: nowrap;
  }

  .topo__botao,
  .js .topo__botao,
  .menu-movel,
  .js .menu-movel {
    display: none;
  }
}

/* v2.1: se o menu não couber numa linha (o site.js mede e junta "topo--compacto"),
   o computador fica como o telemóvel: nome do site à esquerda e botão "Menu".
   Sem JavaScript, o menu inteiro continua a aparecer a partir de 1340px. */
@media (min-width: 1340px) {
  .topo--compacto .topo__barra {
    display: flex;
  }

  .topo--compacto .topo__marca {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }

  .topo--compacto .topo__nav {
    display: none;
  }

  .js .topo--compacto .topo__botao {
    display: inline-flex;
  }

  .js .topo--compacto .menu-movel {
    display: flex;
  }
}

/* v2.1: entre 1340 e 1599px, espaços um pouco mais apertados para o menu inglês caber
   numa linha (precisa de 503px de cada lado; a 1340px ficam 505px). O nome do site
   continua com uma folga de 14px de cada lado. */
@media (min-width: 1340px) and (max-width: 1599px) {
  .topo__nav {
    column-gap: 250px;
  }

  .topo__lista {
    column-gap: 22px;
  }
}

/* =========================================================================
   Peças comuns (v2.0-T4): secções, botões, ligações com seta, preto e branco
   ========================================================================= */
.secao {
  padding-block: var(--espaco-secao);
}

.secao--superficie {
  background: var(--cor-superficie);
}

.secao__cabeca {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

/* Fotografias a preto e branco (só na página inicial; nas outras páginas ficam a cores) */
.pb {
  filter: grayscale(1) contrast(1.08);
}

/* Botão com contorno, que se enche de branco ao passar o rato */
.botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid var(--cor-texto);
  font-family: var(--letra-titulo);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cor-texto);
  transition: background-color var(--dur-rapida) var(--curva-normal), color var(--dur-rapida) var(--curva-normal);
}

.botao:hover {
  background: var(--cor-texto);
  color: var(--cor-fundo);
}

/* Ligação com seta que desliza ao passar o rato */
.ligacao-seta {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--cor-linha-forte);
  color: var(--cor-texto);
  text-decoration: none;
  transition: border-color var(--dur-rapida) var(--curva-normal);
}

.ligacao-seta span {
  display: inline-block;
  transition: transform var(--dur-media) var(--curva-saida);
}

.ligacao-seta:hover {
  border-color: var(--cor-texto);
}

.ligacao-seta:hover span {
  transform: translateX(5px);
}

/* =========================================================================
   Página inicial (v2.0-T4)
   ========================================================================= */

/* Abertura: fotografia a ecrã inteiro com o título por cima, em baixo à esquerda.
   Tratamento de cinema: preto e branco com negros profundos, grão fino de película
   (dá textura e disfarça a resolução da imagem atual), cantos escurecidos e a base a
   fundir-se com a faixa de baixo. A fotografia assenta devagar e o título entra
   palavra a palavra, a subir de dentro de uma máscara. */
.abertura {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh; /* no telemóvel, desconta as barras do browser */
  /* Folga para o cabeçalho fixo: se o texto não couber no ecrã, a secção cresce
     em vez de a etiqueta ficar escondida por baixo do cabeçalho */
  /* (--altura-topo só existe dentro do cabeçalho; aqui usa-se o mesmo valor, 76px) */
  padding-top: calc(var(--altura-topo, 76px) + 32px);
  overflow: hidden;
  background: var(--cor-fundo);
  isolation: isolate;
}

/* Camada da fotografia (o GSAP aproxima-a ao fazer scroll) e véu que escurece ao descer */
.abertura__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  transform-origin: 62% 40%;
}

.abertura__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cor-fundo);
  opacity: 0;
  pointer-events: none;
}

.abertura__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 55%;
  filter: grayscale(1) contrast(1.14) brightness(0.84);
  transform-origin: 62% 60%;
  animation: abertura-zoom var(--dur-abertura) var(--curva-saida) both;
}

/* Grão de película: ruído fino gerado por SVG, sem ficheiros extra */
.abertura::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -2;
  pointer-events: none;
  opacity: 0.14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  animation: grao 1s steps(4) infinite;
}

/* Cantos escurecidos, topo escuro (para o menu) e base que se funde com a faixa de baixo */
.abertura::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 60% 45%, transparent 45%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 48%, rgba(12, 12, 12, 0.82) 86%, var(--cor-fundo) 100%);
}

.abertura__texto {
  position: relative;
  padding-block: 0 clamp(56px, 9vh, 96px);
  color: var(--cor-texto);
}

.abertura__rotulo {
  color: var(--cor-texto);
  opacity: 0.9;
  margin-bottom: 18px;
  animation: abertura-surge 700ms var(--curva-saida) 100ms both;
}

.abertura h1 {
  /* O tamanho depende também da altura do ecrã: num portátil largo mas baixo (ex.: 1366×630
     visíveis) o título em 4 linhas não cabia e empurrava a etiqueta para baixo do cabeçalho.
     Em ecrãs altos e no telemóvel fica igual (manda o --tam-h1). */
  font-size: min(var(--tam-h1), 14vh);
  font-size: min(var(--tam-h1), 14svh);
  max-width: 14ch;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}

/* Cada palavra do título sobe de dentro de uma máscara, em cascata */
.palavra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* folga para os acentos e para as letras que descem (ç, p) não serem cortados pela máscara */
  padding-block: 0.08em;
  margin-block: -0.08em;
}

.palavra > span {
  display: inline-block;
  /* Rápido de propósito (0,8 s no total): o título é o maior elemento ao abrir e o Google mede quando aparece */
  animation: palavra-sobe 650ms var(--curva-saida) calc(40ms + var(--i, 0) * 50ms) both;
}

.abertura__ligacao {
  margin-top: 28px;
  font-size: var(--tam-texto);
  animation: abertura-surge 600ms var(--curva-saida) 550ms both;
}

/* Indicador discreto para descer: uma linha fina por onde corre um traço */
.abertura__descer {
  position: absolute;
  right: max(var(--margem-lateral), env(safe-area-inset-right, 0px));
  bottom: clamp(56px, 9vh, 96px);
  display: grid;
  justify-items: center;
  gap: 12px;
  font-family: var(--letra-titulo);
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  color: var(--cor-texto-suave);
  animation: abertura-surge 600ms var(--curva-saida) 800ms both;
}

.abertura__descer::after {
  content: "";
  width: 1px;
  height: 64px;
  background:
    linear-gradient(180deg, var(--cor-texto) 0 30%, transparent 30%) 0 -64px / 1px 128px no-repeat,
    var(--cor-linha-forte);
  animation: descer 2200ms var(--curva-normal) 1600ms infinite;
}

@keyframes abertura-zoom {
  from { transform: scale(1.14); }
  to { transform: scale(1); }
}

@keyframes abertura-surge {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Mantido para os títulos das páginas interiores */
@keyframes abertura-texto {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes palavra-sobe {
  from { transform: translateY(105%); }
  to { transform: none; }
}

@keyframes grao {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-6%, 4%); }
  50% { transform: translate(5%, -3%); }
  75% { transform: translate(-3%, -6%); }
  100% { transform: translate(0, 0); }
}

@keyframes descer {
  0% { background-position: 0 -64px, 0 0; }
  70%, 100% { background-position: 0 64px, 0 0; }
}

@media (max-width: 820px) {
  .abertura__descer {
    display: none;
  }
}

/* Quem pede menos movimento: grão parado e sem indicador animado */
@media (prefers-reduced-motion: reduce) {
  .abertura::before,
  .abertura__descer::after {
    animation: none;
  }
}

/* Faixa com o texto de abertura, por baixo da fotografia */
.faixa {
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-linha);
  padding-block: clamp(24px, 3vw, 32px);
  text-align: center;
  font-size: var(--tam-destaque);
  color: var(--cor-texto);
}

.faixa p {
  max-width: 62ch;
}

/* Os dois carros: fotografias grandes com o texto por cima, em baixo */
.carros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.carro {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  overflow: hidden;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  text-decoration: none;
}

.carro__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--curva-saida);
}

.carro::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.85) 100%);
}

.carro:hover .carro__foto,
.carro:focus-visible .carro__foto {
  transform: scale(1.04);
}

.carro__info {
  position: absolute;
  left: clamp(18px, 2.4vw, 28px);
  right: clamp(18px, 2.4vw, 28px);
  bottom: clamp(18px, 2.4vw, 26px);
  z-index: 1;
  display: grid;
  gap: 6px;
}

.carro__ano {
  font-family: var(--letra-titulo);
  font-size: var(--tam-rotulo);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.88;
}

.carro__texto {
  font-size: var(--tam-pequeno);
  max-width: 46ch;
  color: var(--cor-texto-suave);
}

/* Explorar: grelha de quatro com linhas finas; enche-se de branco ao passar o rato */
.explorar {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--cor-linha);
  border-left: 1px solid var(--cor-linha);
}

.explorar > li {
  display: flex;
  border-right: 1px solid var(--cor-linha);
  border-bottom: 1px solid var(--cor-linha);
}

.explorar__item {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(22px, 2.4vw, 34px) clamp(18px, 2vw, 28px) clamp(26px, 2.6vw, 40px);
  text-decoration: none;
  transition: background-color var(--dur-media) var(--curva-normal), color var(--dur-media) var(--curva-normal);
}

.explorar__item:hover {
  background: var(--cor-texto);
  color: var(--cor-fundo);
}

.explorar__item:hover h3,
.explorar__item:hover .explorar__n,
.explorar__item:hover .explorar__texto {
  color: var(--cor-fundo);
}

.explorar__n {
  font-family: var(--letra-titulo);
  font-size: var(--tam-rotulo);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cor-texto-apagado);
}

.explorar__item h3 {
  font-size: var(--tam-h4);
  margin: clamp(26px, 3.4vw, 46px) 0 10px;
}

.explorar__texto {
  font-size: var(--tam-pequeno);
}

/* Vídeo: moldura de cantos arredondados (pedido do Pedro) e frase ao lado */
.video {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 56px);
  align-items: center;
}

.video__moldura {
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--cor-fundo);
}

.video__leitor {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--dur-lenta) var(--curva-normal);
}

/* Ao tocar, o vídeo passa a cores (o site.js junta a classe) */
.video__leitor.a-tocar {
  filter: none;
}

.video__texto {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.video__frase {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem);
  font-weight: 500;
  line-height: 1.16;
}

/* Artigos recentes (só aparece quando houver artigos publicados) */
.artigos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}

.artigo-cartao {
  display: grid;
  gap: 10px;
  text-decoration: none;
}

.artigo-cartao__foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: 6px;
}

.artigo-cartao__data {
  font-size: var(--tam-rotulo);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cor-texto-apagado);
}

.artigo-cartao h3 {
  font-size: var(--tam-h4);
}

/* Ecrãs estreitos */
@media (max-width: 820px) {
  .abertura__foto {
    object-position: 80% 50%;
  }

  .faixa {
    text-align: left;
  }

  .carros,
  .video {
    grid-template-columns: minmax(0, 1fr);
  }

  /* No telemóvel, cartões quadrados: o texto por cima não tapa a fotografia toda */
  .carro {
    aspect-ratio: 1 / 1;
  }

  .explorar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================================
   Páginas interiores (v2.0-T5): restauros, história, dados técnicos, etc.
   Título grande e o conteúdo numa coluna de leitura ao centro.
   As fotografias aparecem a cores (decisão de 2026-10-27).
   ========================================================================= */
.pagina {
  --largura-coluna: 760px;
  padding-block: clamp(44px, 7vw, 88px) var(--espaco-secao);
}

/* Cabeça e corpo partilham a mesma coluna, para alinharem à esquerda */
.pagina__cabeca.largura,
.pagina__corpo.largura {
  max-width: calc(var(--largura-coluna) + 2 * var(--margem-lateral));
}

.pagina__cabeca {
  display: grid;
  gap: 16px;
  padding-bottom: clamp(24px, 3vw, 36px);
  margin-bottom: clamp(28px, 4vw, 48px);
  position: relative;
}

/* Linha fina por baixo do título, alinhada com a coluna */
.pagina__cabeca::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: max(var(--margem-lateral), env(safe-area-inset-left, 0px));
  right: max(var(--margem-lateral), env(safe-area-inset-right, 0px));
  height: 1px;
  background: var(--cor-linha);
}

.pagina__titulo {
  font-size: clamp(2.5rem, 1.6rem + 4vw, 4.75rem);
  animation: abertura-texto var(--dur-lenta) var(--curva-saida) both;
}

/* Os blocos empilham-se com um espaço regular entre eles.
   (Em bloco e não em flex: o GSAP precisa disso para acrescentar o espaço das secções presas ao ecrã.) */
.pagina__corpo {
  display: block;
}

.pagina__corpo > * + * {
  margin-top: clamp(28px, 3.4vw, 40px);
}

.pagina__corpo > * {
  min-width: 0;
}

.pagina__voltar {
  margin-top: 12px;
}

/* ---------- Bloco "introdução" ---------- */
.bloco-intro {
  font-size: var(--tam-destaque);
  line-height: 1.6;
  color: var(--cor-texto);
}

/* ---------- Bloco "texto" (escrito em Markdown no admin) ---------- */
.texto-corrido > * + * {
  margin-top: 1.1em;
}

.texto-corrido h2 {
  font-size: var(--tam-h3);
  margin-top: 1.9em;
  scroll-margin-top: 100px; /* ao saltar pelo índice, o título não fica escondido pelo cabeçalho */
}

.texto-corrido h3 {
  font-size: var(--tam-h4);
  margin-top: 1.6em;
}

.texto-corrido h2 + *,
.texto-corrido h3 + * {
  margin-top: 0.7em;
}

.texto-corrido a {
  color: var(--cor-texto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-rapida) var(--curva-normal);
}

.texto-corrido a:hover {
  text-decoration-color: var(--cor-texto-apagado);
}

.texto-corrido ul,
.texto-corrido ol {
  padding-left: 1.3em;
}

.texto-corrido li + li {
  margin-top: 0.4em;
}

.texto-corrido li::marker {
  color: var(--cor-texto-apagado);
}

.texto-corrido blockquote {
  padding-left: 20px;
  border-left: 2px solid var(--cor-texto);
  color: var(--cor-texto);
  font-size: var(--tam-destaque);
}

.texto-corrido hr {
  border: 0;
  height: 1px;
  background: var(--cor-linha);
  margin-block: 2em;
}

.texto-corrido img {
  width: 100%;
  height: auto;
}

/* Tabelas: se forem mais largas que o ecrã, fazem scroll sozinhas, sem alargar a página */
.texto-corrido table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--tam-pequeno);
  font-variant-numeric: tabular-nums;
}

.texto-corrido th,
.texto-corrido td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--cor-linha);
  text-align: left;
  vertical-align: top;
}

.texto-corrido th {
  font-family: var(--letra-titulo);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-texto);
}

/* ---------- Bloco "foto" ---------- */
.foto {
  display: grid;
  gap: 10px;
}

.foto__imagem {
  width: 100%;
  height: auto;
  background: var(--cor-superficie);
}

.foto__legenda {
  font-size: var(--tam-pequeno);
  color: var(--cor-texto-apagado);
}

/* ---------- Bloco "galeria" ---------- */
.galeria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.galeria .foto__imagem {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------- Bloco "linha do tempo" ---------- */
.cronologia {
  display: grid;
  gap: 24px;
}

.cronologia__titulo {
  font-size: var(--tam-h3);
}

.cronologia__lista {
  list-style: none;
  position: relative;
  display: grid;
  gap: 28px;
  padding-left: 32px;
}

/* Linha vertical que liga as etapas: uma faixa ténue por trás e a linha clara
   por cima, que o GSAP desenha à medida que se desce */
.cronologia__corpo {
  position: relative;
}

.cronologia__corpo::before,
.cronologia__linha {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
}

.cronologia__corpo::before {
  background: var(--cor-linha);
}

.cronologia__linha {
  background: var(--cor-texto);
  transform-origin: top;
}

.cronologia__etapa {
  position: relative;
  display: grid;
  gap: 4px;
}

/* Ponto de cada etapa sobre a linha */
.cronologia__etapa::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 0.55em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-texto);
  transition: background-color var(--dur-media) var(--curva-normal), box-shadow var(--dur-media) var(--curva-normal);
}

/* Ponto aceso quando a etapa passa a meio do ecrã */
.cronologia__etapa.acesa::before {
  background: var(--cor-texto);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12);
}

.cronologia__data {
  font-family: var(--letra-titulo);
  font-size: var(--tam-rotulo);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cor-texto-apagado);
}

.cronologia__nome {
  font-size: var(--tam-h4);
}

/* ---------- Bloco "destaque" ---------- */
.destaque {
  display: grid;
  gap: 8px;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--cor-superficie);
  border-left: 2px solid var(--cor-texto);
}

.destaque__rotulo {
  font-family: var(--letra-titulo);
  font-size: var(--tam-rotulo);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cor-texto-apagado);
}

.destaque__texto {
  color: var(--cor-texto);
}

.destaque__texto a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Bloco "factos" ---------- */
/* Linhas finas entre os cartões; uma última linha incompleta fica simplesmente vazia */
.factos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  border-top: 1px solid var(--cor-linha);
  border-left: 1px solid var(--cor-linha);
}

.factos__item {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px 22px 24px;
  border-right: 1px solid var(--cor-linha);
  border-bottom: 1px solid var(--cor-linha);
}

.factos__item dt {
  font-family: var(--letra-titulo);
  font-size: var(--tam-rotulo);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cor-texto-apagado);
}

.factos__item dd {
  font-family: var(--letra-titulo);
  font-size: var(--tam-h4);
  font-weight: 500;
  line-height: 1.2;
  color: var(--cor-texto);
}

/* ---------- Bloco "índice" ---------- */
.indice {
  display: grid;
  gap: 12px;
  padding-block: 20px;
  border-block: 1px solid var(--cor-linha);
}

.indice ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.indice a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--cor-linha-forte);
  font-size: var(--tam-pequeno);
  text-decoration: none;
  color: var(--cor-texto);
  transition: background-color var(--dur-rapida) var(--curva-normal), color var(--dur-rapida) var(--curva-normal);
}

.indice a:hover {
  background: var(--cor-texto);
  color: var(--cor-fundo);
}

@media (max-width: 640px) {
  .galeria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================================
   Rodapé, voltar ao topo e formulário de contacto (v2.0-T6)
   ========================================================================= */

/* Rodapé: nome do site e menu em cima; direitos e privacidade em baixo */
.rodape {
  border-top: 1px solid var(--cor-linha);
  background: var(--cor-fundo);
  color: var(--cor-texto-apagado);
  font-size: var(--tam-pequeno);
}

.rodape__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  padding-block: clamp(36px, 5vw, 56px) 28px;
}

.rodape__marca {
  font-family: var(--letra-titulo);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cor-texto);
}

.rodape__menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
}

.rodape__menu a {
  font-family: var(--letra-titulo);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cor-texto-suave);
  transition: color var(--dur-rapida) var(--curva-normal);
}

.rodape__menu a:hover,
.rodape__menu a[aria-current="page"] {
  color: var(--cor-texto);
}

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 20px calc(28px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--cor-linha);
}

.rodape__base a {
  color: var(--cor-texto-suave);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.rodape__base a:hover {
  color: var(--cor-texto);
}

/* Os links da direita afastam-se do botão «voltar ao topo» (fixo no canto, 48px),
   para não ficarem por baixo dele quando se chega ao fim da página */
.rodape__base p:last-child {
  margin-right: 56px;
}

/* Separador entre «Política de privacidade» e o crédito «Site por Dinis» (v2.2) */
.rodape__ponto {
  margin-inline: 10px;
  color: var(--cor-texto-apagado);
}

/* Botão "voltar ao topo": círculo discreto no canto, aparece depois de descer */
.voltar-topo {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--cor-linha-forte);
  border-radius: 50%;
  background: var(--cor-superficie-2);
  color: var(--cor-texto);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity var(--dur-media) var(--curva-normal),
    transform var(--dur-media) var(--curva-saida),
    visibility 0s linear var(--dur-media),
    background-color var(--dur-rapida) var(--curva-normal),
    color var(--dur-rapida) var(--curva-normal);
}

.voltar-topo.show {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--dur-media) var(--curva-normal),
    transform var(--dur-media) var(--curva-saida),
    visibility 0s,
    background-color var(--dur-rapida) var(--curva-normal),
    color var(--dur-rapida) var(--curva-normal);
}

.voltar-topo:hover {
  background: var(--cor-texto);
  color: var(--cor-fundo);
}

/* Botão cheio (branco), para a ação principal de um formulário */
.botao--cheio {
  background: var(--cor-texto);
  color: var(--cor-fundo);
}

.botao--cheio:hover {
  background: transparent;
  color: var(--cor-texto);
}

.botao:disabled {
  cursor: progress;
  opacity: 0.75;
}

/* ---------- Formulário de contacto ---------- */
.formulario {
  display: grid;
  gap: 22px;
}

.formulario__linha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.campo {
  display: grid;
  gap: 8px;
  align-content: start;
}

.campo label {
  font-family: var(--letra-titulo);
  font-size: var(--tam-rotulo);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cor-texto);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--cor-linha-forte);
  border-radius: 0;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: 1rem; /* 16px: evita o zoom automático do iPhone ao tocar no campo */
  transition: border-color var(--dur-rapida) var(--curva-normal), background-color var(--dur-rapida) var(--curva-normal);
}

.campo textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--cor-texto-apagado);
  opacity: 1;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover {
  border-color: var(--cor-texto-suave);
}

/* No campo onde se está a escrever: borda branca (o contorno de foco geral também aparece com o teclado) */
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--cor-texto);
  background: var(--cor-superficie-2);
  outline: none;
}

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
}

/* Campo assinalado como em falta ou inválido */
.campo [aria-invalid="true"] {
  border-color: var(--cor-erro);
}

.campo__erro {
  font-size: var(--tam-pequeno);
  color: var(--cor-erro);
}

/* Anti-spam (v2.2): a caixa do Cloudflare está quase sempre escondida (altura 0), mas o lugar
   dela soma mais um espaço de 22px do formulário. O botão sobe esses 22px (fica com os 6px de
   sempre). Quando a caixa aparece, o botão fica 6px abaixo dela. */
.formulario__antispam + .formulario__envio {
  margin-top: -16px;
}

.formulario__envio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 6px;
}

.formulario__nota {
  font-size: var(--tam-pequeno);
  color: var(--cor-texto-apagado);
}

/* Enquanto envia: um ponto a pulsar antes do texto do botão */
.a-enviar .formulario__botao-texto::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  animation: a-enviar 900ms var(--curva-normal) infinite alternate;
}

@keyframes a-enviar {
  from { opacity: 0.25; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* Enviado: um visto antes do texto do botão */
.enviado .formulario__botao-texto::before {
  content: "✓";
  margin-right: 8px;
}

.formulario__estado:empty {
  display: none;
}

.formulario__estado {
  padding: 14px 16px;
  border-left: 2px solid var(--cor-texto);
  background: var(--cor-superficie);
  color: var(--cor-texto);
}

.formulario__estado--erro {
  border-color: var(--cor-erro);
}

.formulario__estado--sucesso {
  border-color: var(--cor-sucesso);
}

.formulario__privacidade {
  font-size: var(--tam-pequeno);
  color: var(--cor-texto-apagado);
}

.formulario__privacidade a {
  color: var(--cor-texto-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Campo anti-robôs: fora do ecrã e fora da navegação por teclado */
.botcheck {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

@media (max-width: 640px) {
  .formulario__linha {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================================
   Acabamento (v2.0, pedido do Dinis): transições entre páginas,
   destaque nas imagens ao passar o cursor, capa dos restauros, "continuar a ler"
   ========================================================================= */

/* ---------- Transição entre páginas ----------
   A página que sai desvanece e sobe ligeiramente; a que entra aparece de baixo.
   O cabeçalho fica no lugar. A fotografia de um carro passa do cartão da página
   inicial para o topo da página do restauro (mesmo view-transition-name). */
::view-transition-old(root) {
  animation: pagina-sai 180ms var(--curva-normal) both;
}

::view-transition-new(root) {
  animation: pagina-entra 380ms var(--curva-saida) both;
}

::view-transition-group(*) {
  animation-duration: 480ms;
  animation-timing-function: var(--curva-viagem);
}

/* As duas imagens de uma viagem mantêm a proporção (cortam em vez de esticar),
   para não deixar um rasto da imagem antiga durante a passagem */
::view-transition-old(*),
::view-transition-new(*) {
  height: 100%;
  object-fit: cover;
  overflow: clip;
}

/* Durante a viagem da fotografia, a imagem antiga (a preto e branco) dá lugar à nova (a cores) */
::view-transition-old(*):only-child,
::view-transition-new(*):only-child {
  animation-duration: 480ms;
}

@keyframes pagina-sai {
  to { opacity: 0; transform: translateY(-8px); }
}

@keyframes pagina-entra {
  from { opacity: 0; transform: translateY(14px); }
}

/* ---------- Destaque nas imagens ao passar o cursor ----------
   Aproximação lenta e um pouco mais de luz. Só em aparelhos com cursor
   (num ecrã tátil o "passar por cima" não existe e o efeito ficaria preso). */
.foto__moldura {
  overflow: hidden;
  background: var(--cor-superficie);
}

.foto__imagem {
  transition:
    transform 900ms var(--curva-saida),
    filter 600ms var(--curva-normal);
}

.foto__legenda {
  transition: color var(--dur-media) var(--curva-normal);
}

.carro__moldura {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.carro__foto {
  transition:
    transform 900ms var(--curva-saida),
    filter 600ms var(--curva-normal);
}

@media (hover: hover) and (pointer: fine) {
  .foto:hover .foto__imagem {
    transform: scale(1.035);
    filter: brightness(1.08) contrast(1.03);
  }

  .foto:hover .foto__legenda {
    color: var(--cor-texto-suave);
  }

  /* Nos cartões dos carros: aproxima, ganha luz e o véu escuro aligeira */
  .carro:hover .carro__foto,
  .carro:focus-visible .carro__foto {
    transform: scale(1.05);
    filter: grayscale(1) contrast(1.08) brightness(1.12);
  }

  .carro::after {
    transition: opacity var(--dur-lenta) var(--curva-normal);
  }

  .carro:hover::after {
    opacity: 0.8;
  }

  .pagina__capa-moldura:hover .pagina__capa-imagem {
    transform: scale(1.025);
    filter: brightness(1.06);
  }
}

/* A seta dos cartões dos carros aparece ao passar o cursor */
.carro h3::after {
  content: " →";
  display: inline-block;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--dur-media) var(--curva-normal), transform var(--dur-media) var(--curva-saida);
}

.carro:hover h3::after,
.carro:focus-visible h3::after {
  opacity: 1;
  transform: none;
}

/* ---------- Capa das páginas dos restauros ---------- */
.pagina__capa.largura {
  max-width: calc(var(--largura-coluna) + 2 * var(--margem-lateral));
  margin-bottom: clamp(28px, 4vw, 48px);
}

.pagina__capa-moldura {
  overflow: hidden;
  background: var(--cor-superficie);
}

.pagina__capa-imagem {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 900ms var(--curva-saida), filter 600ms var(--curva-normal);
}

/* ---------- Continuar a ler: página anterior e seguinte ---------- */
.continuar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: var(--espaco-secao);
}

.continuar.largura {
  max-width: calc(var(--largura-coluna) + 2 * var(--margem-lateral));
}

.continuar__ligacao {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--cor-linha);
  text-decoration: none;
  transition: background-color var(--dur-media) var(--curva-normal), color var(--dur-media) var(--curva-normal), border-color var(--dur-media) var(--curva-normal);
}

.continuar__ligacao--seguinte {
  grid-column: 2;
  text-align: right;
}

.continuar__rotulo {
  font-family: var(--letra-titulo);
  font-size: var(--tam-rotulo);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cor-texto-apagado);
}

.continuar__titulo {
  font-family: var(--letra-titulo);
  font-weight: 600;
  font-size: var(--tam-h4);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--cor-texto);
}

.continuar__ligacao:hover {
  background: var(--cor-texto);
  border-color: var(--cor-texto);
}

.continuar__ligacao:hover .continuar__rotulo,
.continuar__ligacao:hover .continuar__titulo {
  color: var(--cor-fundo);
}

@media (max-width: 640px) {
  .continuar {
    grid-template-columns: minmax(0, 1fr);
  }

  .continuar__ligacao--seguinte {
    grid-column: 1;
  }
}

/* Quem pede menos movimento: sem zoom nem deslizes */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .foto:hover .foto__imagem,
  .carro:hover .carro__foto,
  .pagina__capa-moldura:hover .pagina__capa-imagem {
    transform: none;
  }
}

/* =========================================================================
   Animações com GSAP e Lenis (src/scripts/animacoes.js)
   ========================================================================= */

/* Regras do Lenis (scroll suave), copiadas do lenis.css da versão 1.3.26 */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

/* Com o GSAP ativo, é ele que anima a entrada: as transições CSS saem do caminho */
.animacoes-prontas [data-reveal] {
  transition: none;
}

/* Parallax: a camada é maior do que o cartão, para haver margem para deslizar */
.carro__parallax {
  position: absolute;
  inset: -8% 0;
}

.carro__parallax .carro__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Linhas dos títulos divididas pelo SplitText: a máscara não pode cortar os acentos */
.secao__cabeca h2 > div,
.texto-corrido h2 > div,
.cronologia__titulo > div,
.video__frase > div {
  padding-block: 0.06em;
  margin-block: -0.06em;
}

/* =========================================================================
   História em capítulos e texto de abertura (v2.0, pedido do Dinis)
   As animações (ligadas ao scroll) estão em src/scripts/animacoes.js.
   ========================================================================= */

/* ---------- Texto de abertura da página inicial (as palavras acendem-se ao descer) ---------- */
.manifesto {
  padding-block: clamp(90px, 14vw, 200px);
  background: var(--cor-fundo);
}

.manifesto__texto {
  font-family: var(--letra-titulo);
  font-weight: 500;
  font-size: clamp(1.875rem, 1.1rem + 3vw, 3.75rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--cor-texto);
  max-width: min(1100px, 100%);
  text-wrap: balance;
}

/* ---------- Capítulo ----------
   Mais largo do que a coluna de leitura: sai dela para os dois lados. */
.capitulo {
  --largura-capitulo: min(1240px, calc(100vw - 2 * var(--margem-lateral)));
  margin-inline: calc((100% - var(--largura-capitulo)) / 2);
  padding-block: clamp(56px, 8vw, 120px);
  border-top: 1px solid var(--cor-linha);
}

.capitulo__cabeca {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

/* Número grande em contorno: "01", "02"… */
.capitulo__numero {
  font-family: var(--letra-titulo);
  font-weight: 700;
  font-size: clamp(4.5rem, 3rem + 6vw, 9rem);
  line-height: 0.82;
  color: transparent;
  -webkit-text-stroke: 1px var(--cor-linha-forte);
  margin-bottom: 6px;
}

.capitulo__titulo {
  font-size: var(--tam-h2);
  scroll-margin-top: 100px;
}

.capitulo__texto {
  margin-top: 8px;
}

.capitulo__foto {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.capitulo__moldura {
  overflow: hidden;
  background: var(--cor-superficie);
}

.capitulo__imagem {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 900ms var(--curva-saida), filter 600ms var(--curva-normal);
}

.capitulo__legenda {
  font-size: var(--tam-pequeno);
  color: var(--cor-texto-apagado);
}

@media (hover: hover) and (pointer: fine) {
  .capitulo__foto:hover .capitulo__imagem {
    transform: scale(1.035);
    filter: brightness(1.08) contrast(1.03);
  }
}

/* "Ao lado": texto à esquerda, fotos à direita. Se o texto couber no ecrã, fica parado
   enquanto as fotos passam (o JavaScript junta a classe "cabe" só nesse caso). */
.capitulo--lado {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}

.capitulo--lado .capitulo__cabeca.cabe {
  position: sticky;
  top: 110px;
}

.capitulo--lado .capitulo__pista {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
}

/* "Em fila": as fotos deslizam na horizontal. No computador, o GSAP prende a fila
   ao ecrã e desloca-a enquanto se desce; no telemóvel, desliza-se com o dedo. */
.capitulo--fila .capitulo__cabeca {
  max-width: 760px;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.capitulo--fila .capitulo__fotos {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 12px;
}

.capitulo--fila .capitulo__pista {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  width: max-content;
}

.capitulo--fila .capitulo__foto {
  flex: none;
  width: min(80vw, 560px);
  scroll-snap-align: start;
}

.capitulo--fila .capitulo__imagem {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Com o GSAP a deslocar a fila, a barra de scroll horizontal deixa de ser precisa;
   a fila fica centrada no ecrã enquanto desliza */
.fila-presa .capitulo__fotos {
  overflow: hidden; /* as fotos deslizam dentro da coluna, cortadas nas margens */
  padding-bottom: 0;
}

/* ---------- Índice lateral dos capítulos (só em ecrãs largos) ---------- */
.capitulos-nav {
  display: none;
}

/* Só a partir de 1600px, onde a margem à esquerda chega para o índice sem tocar no texto */
@media (min-width: 1600px) {
  .capitulos-nav {
    display: block;
    position: fixed;
    left: max(28px, env(safe-area-inset-left, 0px));
    top: 50%;
    z-index: 40;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-media) var(--curva-normal), visibility 0s linear var(--dur-media);
  }

  /* Aparece só enquanto se está dentro da história */
  .capitulos-nav.visivel {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-media) var(--curva-normal), visibility 0s;
  }

  .capitulos-nav ol {
    list-style: none;
    display: grid;
    gap: 6px;
  }

  .capitulos-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block: 4px;
    text-decoration: none;
    color: var(--cor-texto-apagado);
    transition: color var(--dur-rapida) var(--curva-normal);
  }

  /* Um traço que cresce no capítulo atual */
  .capitulos-nav a::before {
    content: "";
    width: 14px;
    height: 1px;
    background: currentColor;
    transition: width var(--dur-media) var(--curva-saida);
  }

  .capitulos-nav__n {
    font-family: var(--letra-titulo);
    font-size: var(--tam-rotulo);
    letter-spacing: 0.12em;
  }

  /* O título do capítulo só aparece ao passar o cursor ou no capítulo atual */
  .capitulos-nav__t {
    font-family: var(--letra-titulo);
    font-size: var(--tam-rotulo);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--dur-media) var(--curva-normal), transform var(--dur-media) var(--curva-saida);
  }

  .capitulos-nav a:hover,
  .capitulos-nav a:focus-visible,
  .capitulos-nav a.atual {
    color: var(--cor-texto);
  }

  .capitulos-nav a.atual::before {
    width: 32px;
  }

  /* O título aparece só ao passar o cursor (ou com o teclado), com fundo próprio,
     para não se misturar com o texto do capítulo por trás */
  .capitulos-nav__t {
    padding: 3px 8px;
    background: var(--cor-fundo);
    border: 1px solid var(--cor-linha);
  }

  .capitulos-nav a:hover .capitulos-nav__t,
  .capitulos-nav a:focus-visible .capitulos-nav__t {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Ecrãs estreitos: tudo numa coluna ---------- */
@media (max-width: 900px) {
  .capitulo--lado {
    grid-template-columns: minmax(0, 1fr);
  }

  .capitulo--lado .capitulo__cabeca.cabe {
    position: static;
  }
}

/* Zoom das cortinas (animacoes.js): usa a propriedade "scale", que se soma ao "transform"
   do destaque ao passar o cursor em vez de o substituir */
.foto__imagem,
.capitulo__imagem {
  scale: var(--zoom, 1);
}

.capitulo__titulo > div {
  padding-block: 0.06em;
  margin-block: -0.06em;
}

/* =========================================================================
   Capítulo "um ecrã" e diário completo (v2.0-T6e)
   ========================================================================= */
/* O capítulo fica com a largura da coluna (é ele que o GSAP prende ao ecrã);
   o ecrã lá dentro é que se alarga para os dois lados. Se o alargamento ficasse no capítulo,
   perdia-se quando o GSAP o envolve para o prender. */
.capitulo--ecra {
  margin-inline: 0;
  padding-block: 0;
  border-top: 0;
}

.capitulo--ecra .capitulo__ecra {
  width: var(--largura-capitulo);
  margin-left: calc((100% - var(--largura-capitulo)) / 2);
}

/* O ecrã do capítulo: texto à esquerda, palco das fotos à direita */
.capitulo__ecra {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: 110px 56px;
  transform-origin: 50% 0%;
}

.capitulo__resumo {
  margin-top: 6px;
  max-width: 44ch;
  font-size: var(--tam-destaque);
  line-height: 1.6;
  color: var(--cor-texto-suave);
}

.capitulo__contador {
  margin-right: 12px;
  font-family: var(--letra-titulo);
  letter-spacing: 0.14em;
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
}

/* Palco, sem animações (sem JavaScript ou com "reduzir movimento"): fotos numa fila que se desliza com o dedo */
.capitulo__palco {
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.capitulo__palco .capitulo__pista {
  display: flex;
  gap: 12px;
  width: max-content;
}

.capitulo__palco .capitulo__foto {
  flex: none;
  width: min(85vw, 680px);
  scroll-snap-align: start;
}

.capitulo__palco .capitulo__imagem {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Com as animações (computador e, desde a correção urgente, também telemóvel):
   as fotos empilham-se no mesmo sítio e o GSAP troca-as ao descer */
.palcos-ativos .capitulo__palco {
  overflow: visible;
}

.palcos-ativos .capitulo__palco .capitulo__pista {
  display: grid;
  width: auto;
}

.palcos-ativos .capitulo__palco .capitulo__foto {
  grid-area: 1 / 1;
  width: auto;
}

.palcos-ativos .capitulo__palco .capitulo__imagem {
  max-height: 64vh;
}

@media (max-width: 900px) {
  .capitulo__ecra {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-block: clamp(48px, 10vw, 72px);
    border-top: 1px solid var(--cor-linha);
  }
}

/* ---------- "Ler o diário completo": o texto original, fechado por omissão ---------- */
.diario {
  border-block: 1px solid var(--cor-linha);
}

.diario__abrir {
  position: relative;
  display: grid;
  gap: 4px;
  padding-block: 26px;
  padding-right: 48px;
  list-style: none;
  cursor: pointer;
}

.diario__abrir::-webkit-details-marker {
  display: none;
}

/* Sinal "+" que roda para "×" quando está aberto */
.diario__abrir::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--letra-titulo);
  font-size: 2rem;
  line-height: 1;
  color: var(--cor-texto);
  transition: rotate var(--dur-media) var(--curva-saida);
}

.diario[open] .diario__abrir::after {
  rotate: 45deg;
}

.diario__titulo {
  font-family: var(--letra-titulo);
  font-weight: 600;
  font-size: var(--tam-h4);
  text-transform: uppercase;
  color: var(--cor-texto);
}

.diario__nota {
  font-size: var(--tam-pequeno);
  color: var(--cor-texto-apagado);
}

.diario__abrir:hover .diario__titulo {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

.diario__corpo {
  display: grid;
  gap: 48px;
  padding-block: 8px 48px;
}

.diario__capitulo h3 {
  margin: 6px 0 14px;
}

/* Capítulo "um ecrã" sem resumo (ex.: 240D): o texto completo, um pouco maior do que o corrido,
   para ficar próximo dos resumos do 220D e ainda caber no ecrã */
.capitulo--ecra .capitulo__texto {
  max-width: 46ch;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--cor-texto-suave);
}