/* =========================================================
   Pedro Brito — 2026
   1. Base
   2. Marca (logótipo + menu)
   3. Camadas de scroll
   4. Secções
   5. Rodapé
   6. Páginas interiores
   ========================================================= */

/* ---------- 1. Base ---------- */

:root {
  --font-heading: 'Lato', sans-serif;
  --font-body: 'Lato', sans-serif;

  /* o amarelo da casa — véu, faixas e rodapé partilham-no */
  --amarelo: #ffbf00;
  --preto: #000;

  /* altura do painel de menu — medida por JS a partir do conteúdo */
  --menu-h: 0px;

  /* curva única para tudo o que abre e fecha */
  --curva: cubic-bezier(0.65, 0, 0.35, 1);
  --duracao: 0.55s;

  /* espessura do traço: juntas do mosaico e contorno das pastilhas */
  --traco: 1px;

  /* a coluna de conteúdo — título, mosaico, logótipo, menu e rodapé
     medem-se todos por aqui, senão desalinham entre si */
  --largura-max: 1400px;
  --margem: clamp(1.5rem, 4vw, 4rem);

  /* folga extra do logótipo em relação à coluna do título */
  --recuo-logo: 1.25rem;
}

body {
  font-family: var(--font-body);
  padding-top: 0;
}


/* ---------- 2. Marca e painel de menu ----------

   O logótipo está sempre no canto superior esquerdo.
   Ao carregar, o painel branco abre no topo e empurra o site
   para baixo: as secções em fluxo pelo padding do <main>,
   as camadas fixas pelo translate.
   ------------------------------------------------------------ */

/* faixa fixa da largura da janela; o interior alinha o logótipo
   pela mesma coluna do título, em qualquer largura */
.brand {
  --marca: 88px;

  position: fixed;
  top: 1.75rem;
  left: 0;
  right: 0;
  z-index: 10001;
  pointer-events: none;
}

.brand__interior {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.4rem);
  max-width: var(--largura-max);
  margin: 0 auto;
  padding-right: var(--margem);
  /* o logótipo recua um pouco mais do que a coluna do título */
  padding-left: calc(var(--margem) + var(--recuo-logo));
}

/* seta que aponta para o logótipo */
.brand__seta {
  width: clamp(42px, 4.4vw, 70px);
  height: auto;
  opacity: 1;
  pointer-events: none;
  transition: transform 0.35s var(--curva), opacity 0.3s ease;
}

/* enquanto não houver seta própria, usa-se a de baixo rodada */
.brand__seta--rodada {
  width: clamp(63px, 3.5vw, 55px);
  transform: rotate(90deg);
}

/* o movimento: aproxima-se do logótipo quando lá se entra.
   O :hover trata do rato sem precisar de JS; a classe .is-sobre,
   posta pelo JS, acrescenta o teclado. */
.brand__toggle:hover~.brand__seta,
.brand__toggle:focus-visible~.brand__seta,
.brand.is-sobre .brand__seta {
  transform: translateX(-10px);
  opacity: 1;
}

.brand__toggle:hover~.brand__seta--rodada,
.brand__toggle:focus-visible~.brand__seta--rodada,
.brand.is-sobre .brand__seta--rodada {
  /* rodada 90°, o eixo local que anda para a esquerda é o y */
  transform: rotate(90deg) translateY(10px);
}

/* com o menu aberto o convite já foi aceite.
   Especificidade acima da do :hover, senão o rato pousado no
   logótipo mantinha a seta acesa com o painel já aberto. */
body.menu-aberto .brand .brand__seta {
  opacity: 0;
  transform: translateX(14px);
}

body.menu-aberto .brand .brand__seta--rodada {
  transform: rotate(90deg) translateY(-14px);
}

.brand__toggle {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--marca);
  height: var(--marca);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition: transform 0.3s var(--curva), box-shadow 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}

.brand__toggle:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
}

.brand__toggle:focus-visible {
  outline: 2px solid #000;
  outline-offset: 6px;
}

.brand__toggle img {
  display: block;
  width: 64%;
  height: auto;
  transition: transform 0.45s var(--curva);
}

/* rotação discreta a assinalar o estado aberto */
body.menu-aberto .brand__toggle img {
  transform: rotate(-90deg);
}

/* Painel branco que abre no topo */
.menu-panel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
  height: 0;
  overflow: hidden;
  background-color: #fff;
  transition: height var(--duracao) var(--curva);
}

body.menu-aberto .menu-panel {
  height: var(--menu-h);
}

.menu-panel__inner {
  max-width: var(--largura-max);
  margin: 0 auto;
  /* o topo deixa passar o logótipo */
  padding: 8.5rem var(--margem) 3.5rem;
}

.menu-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-panel a {
  display: inline-block;
  color: #000;
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-decoration: none;
  /* entram escalonadas, de baixo para cima */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.3s ease, transform 0.4s var(--curva);
}

body.menu-aberto .menu-panel a {
  opacity: 1;
  transform: translateY(0);
}

body.menu-aberto .menu-panel li:nth-child(1) a {
  transition-delay: 0.10s;
}

body.menu-aberto .menu-panel li:nth-child(2) a {
  transition-delay: 0.16s;
}

body.menu-aberto .menu-panel li:nth-child(3) a {
  transition-delay: 0.22s;
}

body.menu-aberto .menu-panel li:nth-child(4) a {
  transition-delay: 0.28s;
}

body.menu-aberto .menu-panel li:nth-child(5) a {
  transition-delay: 0.34s;
}

.menu-panel a:hover,
.menu-panel a:focus-visible {
  outline: none;
  opacity: 0.45;
}

/* O site desce */
main {
  padding-top: 0;
  transition: padding-top var(--duracao) var(--curva);
}

body.menu-aberto main {
  padding-top: var(--menu-h);
}

@media (max-width: 575.98px) {
  .brand {
    --marca: 68px;

    top: 1rem;
  }

  .menu-panel__inner {
    padding: 6.5rem var(--margem) 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .menu-panel,
  .menu-panel a,
  .brand__toggle,
  .brand__toggle img,
  main {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}


/* ---------- 3. Imagens de secção ---------- */

.full-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: grayscale(100%);
}


/* ---------- 5. Rodapé ----------

   Fecha a página no mesmo amarelo das faixas, com a tipografia
   grande e minúscula do resto do site.
   ------------------------------------------------------------ */

/* sangra até às margens da janela — a coluna do título fica
   só para o texto de abertura e os filtros, não para isto */
.rodape {
  margin-top: clamp(3rem, 6vw, 5rem);
  color: var(--preto);
}

.rodape__interior {
  background-color: var(--amarelo);
  padding: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 3.5vw, 3.5rem) 2rem;
}

.rodape__grelha {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

/* --- coluna do contacto --- */

.rodape__chamada {
  margin: 0 0 0.5rem;
  font-size: clamp(0.9rem, 1.2vw, 1.0625rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rodape__email {
  display: inline-block;
  color: var(--preto);
  font-size: clamp(1.75rem, 4.6vw, 3.75rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  text-decoration: none;
  /* sublinhado que cresce ao passar */
  background-image: linear-gradient(var(--preto), var(--preto));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 3px;
  transition: background-size 0.35s var(--curva);
}

.rodape__email:hover,
.rodape__email:focus-visible {
  background-size: 100% 3px;
  outline: none;
}

.rodape__redes {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.rodape__redes a {
  color: var(--preto);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: lowercase;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.rodape__redes a:hover,
.rodape__redes a:focus-visible {
  opacity: 1;
  outline: none;
}

/* --- coluna da navegação --- */

.rodape__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}

.rodape__nav a {
  display: inline-block;
  padding: 0.1em 0;
  color: var(--preto);
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.rodape__nav a:hover,
.rodape__nav a:focus-visible {
  opacity: 0.45;
  outline: none;
}

/* --- rasura a separar --- */

.rodape__rasura {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: clamp(3rem, 6vw, 5rem) 0 1.5rem;
  opacity: 0.85;
}

/* --- linha final --- */

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 1.25rem;
  border-top: 2px solid var(--preto);
  font-size: 0.9375rem;
  font-weight: 700;
}

.rodape__topo {
  color: var(--preto);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.rodape__topo:hover,
.rodape__topo:focus-visible {
  opacity: 1;
  outline: none;
}

@media (max-width: 767.98px) {
  .rodape__grelha {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .rodape__nav ul {
    text-align: left;
  }
}


/* ---------- 6. Páginas interiores ----------

   O índice dos atos e, daqui para a frente, as restantes
   páginas. Sem imagens: a lista é tipográfica, e a capa
   encaixa quando existir sem alterar a estrutura.
   ------------------------------------------------------------ */

.pagina {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 var(--margem);
}

/* --- topo da página --- */

.pagina__topo {
  position: relative;
  /* deixa passar o logótipo fixo */
  padding: clamp(8rem, 14vw, 11rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.pagina__titulo {
  margin: 0;
  font-size: clamp(4rem, 15vw, 13rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.85;
}

.pagina__abertura {
  max-width: 34ch;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
}

.pagina__rasura {
  position: absolute;
  right: 0;
  bottom: clamp(2.5rem, 5vw, 4rem);
  width: clamp(160px, 26vw, 340px);
  height: auto;
  opacity: 0.9;
  pointer-events: none;
}

/* --- filtros --- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 2rem;
}

.filtro {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  border: var(--traco) solid var(--preto);
  border-radius: 999px;
  background-color: transparent;
  color: var(--preto);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.filtro:hover {
  background-color: rgba(0, 0, 0, 0.07);
}

.filtro.is-ativo,
.filtro.is-ativo:hover {
  background-color: var(--amarelo);
  color: var(--preto);
}

.filtro:focus-visible {
  outline: 2px solid var(--preto);
  outline-offset: 3px;
}

/* --- cabeçalho dos atos --- */

.atos__topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  padding: clamp(8rem, 14vw, 11rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.atos__titulo {
  position: relative;
  /* encolhe à volta da palavra, para o manuscrito se lhe colar */
  display: inline-block;
  margin: 0;
  font-size: clamp(4rem, 15vw, 13rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.85;
}

/* o «/ projetos» manuscrito, encavalitado no fim da palavra.
   Medidas em em: acompanham o corpo do título. */
.atos__anotacao {
  position: absolute;
  bottom: -0.34em;
  left: 100%;
  width: 1.0em;
  height: auto;
  margin-left: -0.14em;
  pointer-events: none;
}

.atos__abertura {
  max-width: 46ch;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
}

.atos__grafico {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 460px;
}

.atos__rasura {
  display: block;
  width: 100%;
  height: auto;
}

/* a seta desenhada, a apontar para dentro da rasura */
.atos__seta {
  position: absolute;
  left: 32%;
  bottom: 92%;
  width: clamp(40px, 6vw, 80px);
  height: auto;
}


/* --- mosaico ---

   Grelha de 12 colunas com as juntas a preto: o fundo da lista
   é preto e o espaçamento deixa-o ver-se, o que desenha as
   linhas sem cada cartão ter de ter contorno próprio.
   ------------------------------------------------------------ */

.mosaico {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--traco);
  margin: 0;
  padding: var(--traco);
  list-style: none;
  background-color: var(--preto);
}

.mosaico__item {
  grid-column: span 6;
  min-height: 0;
}

.mosaico__item--largo {
  grid-column: span 12;
}

.mosaico__item--medio {
  grid-column: span 6;
}

.mosaico__item--pequeno {
  grid-column: span 4;
}

.mosaico__item[hidden] {
  display: none;
}

/* --- cartão --- */

.cartao {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 15rem;
  background-color: #ffffff;
  color: var(--preto);
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.mosaico__item--amarelo .cartao {
  background-color: var(--amarelo);
}

.cartao__texto {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.5rem, 2.6vw, 2.5rem);
}

.cartao__titulo {
  margin: 0;
  font-size: clamp(1.375rem, 2.4vw, 2.125rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* sublinhado que se desenha da esquerda para a direita */
.cartao__palavra {
  display: inline;
  background-image: linear-gradient(var(--preto), var(--preto));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 3px;
  transition: background-size 0.45s var(--curva);
}

.cartao__resumo {
  max-width: 46ch;
  margin: 0;
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.5;
}

.cartao__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.4rem 0 0;
}

.cartao__ano,
.cartao__etiqueta {
  padding: 0.3rem 0.9rem;
  border: var(--traco) solid var(--preto);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
}

.cartao__ano {
  border-style: dashed;
}

/* --- imagem --- */

/* proporção fixa por omissão — sem isto, uma capa em retrato
   (alta e estreita) esticava o cartão inteiro pela sua própria
   altura, desequilibrando a fila. O largo abaixo anula isto,
   porque esse usa a altura da própria fila, não uma proporção. */
.cartao__imagem {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.cartao__imagem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
  transition: filter 0.45s ease, transform 0.6s var(--curva);
}

/* nos cartões largos a imagem toma a metade direita */
.mosaico__item--largo .cartao {
  flex-direction: row;
  align-items: stretch;
}

.mosaico__item--largo .cartao__texto {
  flex: 1 1 55%;
  justify-content: center;
}

.mosaico__item--largo .cartao__imagem {
  flex: 1 1 45%;
  aspect-ratio: auto;
}

/* --- o gesto: amarelo, cor, e o sublinhado a crescer --- */

.cartao:hover,
.cartao:focus-visible {
  background-color: var(--amarelo);
  outline: none;
}

.cartao:hover .cartao__palavra,
.cartao:focus-visible .cartao__palavra {
  background-size: 100% 3px;
}

.cartao:hover .cartao__imagem img,
.cartao:focus-visible .cartao__imagem img {
  filter: grayscale(0%) contrast(1);
  transform: scale(1.04);
}

/* --- entrada, quando se filtra --- */

@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.mosaico__item.is-entrando {
  animation: entrar 0.45s var(--curva) both;
}

.mosaico__vazio {
  padding: 3rem 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.mosaico__vazio[hidden] {
  display: none;
}

@media (max-width: 991.98px) {
  .mosaico__item--medio {
    grid-column: span 12;
  }

  .mosaico__item--pequeno {
    grid-column: span 6;
  }
}

@media (max-width: 767.98px) {
  .atos__topo {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .atos__grafico {
    justify-self: start;
    max-width: 320px;
  }

  .mosaico__item,
  .mosaico__item--largo,
  .mosaico__item--medio,
  .mosaico__item--pequeno {
    grid-column: span 12;
  }

  .mosaico__item--largo .cartao {
    flex-direction: column;
  }

  .mosaico__item--largo .cartao__imagem {
    min-height: 12rem;
  }

  .pagina__rasura {
    position: static;
    display: block;
    margin-top: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .cartao,
  .cartao__palavra,
  .cartao__imagem img,
  .filtro {
    transition-duration: 0.01ms !important;
  }

  .mosaico__item.is-entrando {
    animation: none;
  }
}


/* --- linha do tempo da jornada ---

   Espinha central (a régua vertical) com o ano, a duas linhas,
   pousado em cima dela — inspirado numa infografia com uma coluna
   de cor a meio e o ano grande a atravessá-la. Aqui a cor é o
   amarelo da casa, não a original, e as ligações entre o ano e o
   cartão são sempre rectas: nunca curvas, como o resto do site.

   Estrutura: <ol class="linha-tempo"> é uma grelha de 3 colunas
   (esquerda | espinha | direita). Cada <li class="marco"> ocupa a
   grelha inteira e por dentro só usa a coluna que lhe compete —
   ímpares à esquerda, pares à direita — o que dá a alternância,
   com o ano sempre a cair exactamente a meio, seja qual for o
   marco. Em ecrã estreito colapsa para uma coluna só. */

.linha-tempo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr clamp(4.5rem, 9vw, 6.5rem) 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* a régua — posicionamento absoluto, não grid-row: 1 / -1: numa
   grelha com linhas implícitas (que crescem sozinhas com o
   conteúdo, sem grid-template-rows fixo) o "-1" não sabe até onde
   isso vai, e a régua ficava reduzida a uma aresta minúscula */
.linha-tempo::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background-color: var(--preto);
}

.marco {
  display: contents;
}

.marco[hidden] {
  display: none;
}

.marco__ano {
  grid-column: 2;
  position: relative;
  z-index: 1;
  align-self: start;
  justify-self: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 0.2em 0.3em;
  background-color: var(--amarelo);
  color: var(--preto);
  font-size: clamp(1.25rem, 2.6vw, 1.875rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.86;
  text-align: center;
  white-space: pre-line;
}

/* sem ano nenhum: um travessão simples, não duas linhas vazias */
.marco__ano--vazio {
  padding: 0.4em 0.6em;
  font-size: 1.25rem;
}

.marco__cartao {
  position: relative;
  grid-row: span 1;
  align-self: start;
  max-width: 34rem;
  margin-top: clamp(1.9rem, 3.8vw, 2.85rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ímpares à esquerda da espinha, pares à direita */
.marco:nth-child(odd) .marco__cartao {
  grid-column: 1;
  justify-self: end;
  padding-right: clamp(1.5rem, 3vw, 2.5rem);
  text-align: right;
}

.marco:nth-child(even) .marco__cartao {
  grid-column: 3;
  justify-self: start;
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}

/* a linha recta entre o ano e o cartão */
.marco__cartao::before {
  content: '';
  position: absolute;
  top: 0.85em;
  width: clamp(1.5rem, 3vw, 2.5rem);
  height: 2px;
  background-color: var(--preto);
}

.marco:nth-child(odd) .marco__cartao::before {
  right: 0;
}

.marco:nth-child(even) .marco__cartao::before {
  left: 0;
}

.marco__titulo {
  margin: 0;
  font-size: clamp(1.375rem, 2.8vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* só as etapas com página própria (ou link externo) ficam
   clicáveis — as outras mostram-se em texto simples, sem fingir
   ser ligação */
.marco__titulo a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--preto), var(--preto));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size 0.3s var(--curva);
}

.marco__titulo a:hover,
.marco__titulo a:focus-visible {
  background-size: 100% 2px;
  outline: none;
}

.marco__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
  font-size: 0.875rem;
}

.marco:nth-child(odd) .marco__meta {
  justify-content: flex-end;
}

.marco__tipo {
  padding: 0.15rem 0.7rem;
  border: 1px solid var(--preto);
  border-radius: 999px;
  font-weight: 700;
}

.marco__lugar {
  padding: 0.15rem 0;
  font-weight: 400;
  opacity: 0.7;
}

.marco__descricao {
  margin: 0.85rem 0 0;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.5;
}

.jornada__vazio {
  grid-column: 1 / -1;
  padding: 3rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}

.jornada__vazio[hidden] {
  display: none;
}

@media (max-width: 767.98px) {
  .linha-tempo {
    grid-template-columns: clamp(3.5rem, 16vw, 4.5rem) 1fr;
    justify-content: start;
  }

  .linha-tempo::before {
    left: calc(clamp(3.5rem, 16vw, 4.5rem) / 2);
  }

  .marco__ano {
    grid-column: 1;
    font-size: 1.0625rem;
  }

  .marco:nth-child(odd) .marco__cartao,
  .marco:nth-child(even) .marco__cartao {
    grid-column: 2;
    justify-self: start;
    padding-right: 0;
    padding-left: clamp(1.25rem, 5vw, 2rem);
    text-align: left;
  }

  .marco:nth-child(odd) .marco__cartao::before,
  .marco:nth-child(even) .marco__cartao::before {
    left: 0;
    right: auto;
  }

  .marco:nth-child(odd) .marco__meta {
    justify-content: flex-start;
  }
}

/* --- mapa da jornada (Leaflet + OpenStreetMap) ---

   Opcional a sério: só se pede o CSS/JS do Leaflet, e só existe
   este elemento, quando alguma etapa tem coordenadas (ver
   jn_pontos_mapa() em includes/jornada.php). O contentor é um
   rectângulo simples — sem cantos arredondados, para condizer com
   o resto da casa —, mesmo que o mapa lá dentro seja tudo curvas. */

.jornada-mapa {
  height: clamp(16rem, 32vw, 24rem);
  margin: 1.5rem 0 2rem;
  border: 2px solid var(--preto);
  /* enquanto o Leaflet não inicializa (ou falha a carregar do CDN),
     fica pelo menos um retângulo do cinza da casa, não um buraco */
  background-color: #f2f2f2;
}

.jornada-mapa--etapa {
  height: clamp(14rem, 26vw, 18rem);
  margin-top: 0;
}

.jornada-mapa .leaflet-popup-content-wrapper {
  border-radius: 4px;
}

.jornada-mapa .leaflet-popup-content a {
  color: var(--preto);
}

.etapa-pagina__lugar {
  margin: 1rem 0 0;
  font-size: 1rem;
  font-weight: 700;
  opacity: 0.75;
}

@media (max-width: 767.98px) {
  .etapa {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}


/* --- destaque, no topo do manifesto --- */

.destaque {
  display: block;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background-color: var(--amarelo);
  color: var(--preto);
  text-decoration: none;
  transition: transform 0.25s var(--curva);
}

.destaque:hover,
.destaque:focus-visible {
  transform: translateX(clamp(0.5rem, 1.5vw, 1rem));
  outline: none;
}

.destaque__etiqueta {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.destaque__titulo {
  display: block;
  margin-top: 0.6rem;
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.destaque__nota {
  display: block;
  margin-top: 0.75rem;
  font-size: 1rem;
  font-weight: 400;
}

/* --- título de secção --- */

.seccao__titulo {
  margin: 0 0 1.5rem;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 900;
  letter-spacing: -0.03em;
}

/* --- lista de crónicas --- */

.cronicas {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--preto);
}

.cronica {
  border-bottom: 2px solid var(--preto);
}

.cronica[hidden] {
  display: none;
}

.cronica__ligacao {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(1rem, 4vw, 2.5rem);
  color: var(--preto);
  text-decoration: none;
  transition: background-color 0.25s ease;
}

.cronica__ligacao:hover,
.cronica__ligacao:focus-visible {
  background-color: var(--amarelo);
  outline: none;
}

.cronica__texto {
  min-width: 0;
  flex: 1 1 auto;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
  transition: padding-left 0.25s var(--curva);
}

.cronica__ligacao:hover .cronica__texto,
.cronica__ligacao:focus-visible .cronica__texto {
  padding-left: clamp(2rem, 4.5vw, 3.25rem);
}

.cronica__imagem {
  width: clamp(11rem, 30vw, 22rem);
  min-height: 9rem;
  align-self: stretch;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.cronica__etiquetas {
  margin-top: 0.75rem;
}

.cronica__etiquetas li {
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem;
}

.cronica__data {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.cronica__titulo {
  max-width: 26ch;
  margin: 0.5rem 0 0;
  font-size: clamp(1.375rem, 3vw, 2.25rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.cronica__excerto {
  max-width: 62ch;
  margin: 0.7rem 0 0;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width: 575.98px) {
  .cronica__ligacao {
    flex-direction: column;
    align-items: flex-start;
  }

  .cronica__imagem {
    width: 100%;
    height: 12rem;
    align-self: stretch;
  }
}

/* --- barra de filtros do blogue --- */

.filtro-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  padding-bottom: 1.25rem;
}

.filtro-campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}

.filtro-campo label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.filtro-campo select {
  min-width: 12rem;
  padding: 0.55rem 2.25rem 0.55rem 1rem;
  border: var(--traco) solid var(--preto);
  border-radius: 999px;
  background-color: #fff;
  color: var(--preto);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  /* a seta desenhada à mão, para o select não ficar com o aspecto
     de sistema no meio de tudo o resto */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.7rem;
  -webkit-appearance: none;
  appearance: none;
}

.filtro-campo select:focus-visible {
  outline: 2px solid var(--preto);
  outline-offset: 3px;
}

/* com JavaScript, mudar o dropdown já submete — o botão deixa de
   ser preciso, mas fica no HTML para quem não o tenha */
.filtro-barra.tem-js .filtro-barra__accao {
  display: none;
}

.filtro-barra__limpar {
  padding-bottom: 0.6rem;
  color: var(--preto);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.7;
}

.filtro-barra__limpar:hover {
  opacity: 1;
}

/* as etiquetas são muitas — corpo mais pequeno que os filtros
   normais, para caberem sem tomar conta da página */
.filtros--etiquetas {
  gap: 0.4rem;
  padding-bottom: 1rem;
}

.filtros--etiquetas .filtro {
  padding: 0.3rem 0.8rem;
  border-style: dashed;
  font-size: 0.8125rem;
  font-weight: 400;
}

.filtros--etiquetas .filtro.is-ativo {
  border-style: solid;
  font-weight: 700;
}

.filtro-resultado {
  margin: 0;
  padding-bottom: 2rem;
  font-size: 0.875rem;
  font-weight: 700;
  opacity: 0.6;
}

@media (max-width: 575.98px) {
  .filtro-campo,
  .filtro-campo select {
    width: 100%;
  }
}

.cronicas__vazio,
.cronicas__mais {
  padding: 2rem 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.cronicas__vazio[hidden] {
  display: none;
}

.cronicas__mais a,
.cronicas__vazio a {
  color: var(--preto);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}



/* ---------- 8. Galeria de ilustração ----------

   Colunas em masonry (CSS puro, sem JS de layout): cada imagem
   mantém a sua proporção natural, nunca é cortada. É isso que
   "apreciar a imagem" pede — ao contrário dos cartões dos
   atos, aqui não há grayscale por omissão: a cor é o conteúdo.
   ------------------------------------------------------------ */

.ilustracao {
  column-count: 4;
  column-gap: var(--traco);
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0 var(--traco);
  list-style: none;
}

.ilustracao__item {
  margin-bottom: var(--traco);
  break-inside: avoid;
}

.ilustracao__item[hidden] {
  display: none;
}

.ilustracao__item.is-entrando {
  animation: entrar 0.45s var(--curva) both;
}

.ilustracao__botao {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  -webkit-appearance: none;
  appearance: none;
}

.ilustracao__botao:focus-visible {
  outline: 2px solid var(--preto);
  outline-offset: -2px;
}

.ilustracao__botao img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.35s var(--curva);
}

.ilustracao__botao:hover img,
.ilustracao__botao:focus-visible img {
  transform: scale(1.015);
}

.ilustracao__vazio {
  padding: 3rem 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.ilustracao__vazio[hidden] {
  display: none;
}

.ilustracao__vazio code {
  padding: 0.15rem 0.4rem;
  background-color: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  font-size: 0.9em;
}

@media (max-width: 991.98px) {
  .ilustracao {
    column-count: 3;
  }
}

@media (max-width: 767.98px) {
  .ilustracao {
    column-count: 2;
  }
}

@media (max-width: 575.98px) {
  .ilustracao {
    column-count: 1;
  }
}

/* --- ecrã de observação (a imagem em grande) --- */

.observador {
  position: fixed;
  /* top/right/bottom/left a par do inset — Safari só suporta
     inset a partir da versão 14.1 */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  background-color: rgba(0, 0, 0, 0.92);
}

.observador[hidden] {
  display: none;
}

.observador__moldura {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.observador__imagem {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  object-fit: contain;
}

.observador__legenda {
  max-width: 60ch;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
}

.observador__fechar,
.observador__seta {
  position: fixed;
  border: 0;
  background: none;
  color: #fff;
  font-size: 2.25rem;
  line-height: 1;
  padding: 0.75rem;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.observador__fechar:hover,
.observador__seta:hover,
.observador__fechar:focus-visible,
.observador__seta:focus-visible {
  opacity: 1;
}

.observador__fechar {
  top: 0.5rem;
  right: clamp(0.5rem, 3vw, 1.5rem);
  font-size: 2.5rem;
}

.observador__seta--anterior {
  left: clamp(0.25rem, 2vw, 1rem);
  top: 50%;
  transform: translateY(-50%);
}

.observador__seta--seguinte {
  right: clamp(0.25rem, 2vw, 1rem);
  top: 50%;
  transform: translateY(-50%);
}

body.observador-aberto {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .ilustracao__botao img {
    transition-duration: 0.01ms !important;
  }
}


/* ---------- 9. Corpo de uma crónica ----------

   O texto corrido de um artigo — só entra em jogo na página de
   uma crónica isolada (/lugar-de-fala/{slug}/). A lista usa
   .cronica__excerto, que já existia; isto é para o artigo inteiro.
   ------------------------------------------------------------ */

.cronica-corpo {
  max-width: 68ch;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.75;
}

.cronica-corpo p,
.cronica-corpo ul,
.cronica-corpo ol,
.cronica-corpo blockquote,
.cronica-corpo figure {
  margin: 0 0 1.5em;
}

.cronica-corpo h2,
.cronica-corpo h3 {
  margin: 1.75em 0 0.75em;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.cronica-corpo h2 {
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
}

.cronica-corpo h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
}

.cronica-corpo img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- destaque: a citação puxada para fora do texto --- */

.cronica-corpo blockquote {
  margin: 2.5em 0;
  padding: 0 0 0 clamp(1.25rem, 3vw, 2rem);
  border-left: 5px solid var(--amarelo);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.cronica-corpo blockquote p:last-child {
  margin-bottom: 0;
}

.cronica-corpo a {
  color: inherit;
}

/* --- letra capitular ---

   Só entra quando lf_tem_capitular() aprova o primeiro parágrafo
   (ver includes/blog.php): tem de ser mesmo um parágrafo de texto,
   começado por letra e com corpo que chegue. */

.cronica-corpo.tem-capitular > p:first-of-type::first-letter {
  float: left;
  margin: 0.02em 0.08em 0 0;
  color: var(--preto);
  font-size: 4.2em;
  font-weight: 900;
  line-height: 0.78;
  /* o browser tem de saber que isto é a primeira linha, senão em
     Safari a capitular arrasta o espaçamento do parágrafo todo */
  -webkit-initial-letter: 3;
  initial-letter: 3;
}

/* uma capitular a 4.2em num ecrã de telemóvel come metade da
   coluna — encolhe, mas não desaparece */
@media (max-width: 575.98px) {
  .cronica-corpo.tem-capitular > p:first-of-type::first-letter {
    font-size: 3.2em;
  }
}

/* --- destaques e sublinhados dentro do texto --- */

/* o realce a marcador, como quem sublinha a papel — o amarelo da
   casa, atrás do texto, sem caixa nem contorno */
.cronica-corpo mark {
  padding: 0.05em 0.15em;
  background-color: var(--amarelo);
  color: var(--preto);
}

/* sublinhado a sério: fica por baixo das descidas das letras (p, g,
   q), em vez de as cortar a meio como o text-decoration por omissão */
.cronica-corpo u,
.cronica-corpo ins {
  text-decoration: underline;
  text-decoration-color: var(--amarelo);
  text-decoration-thickness: 0.18em;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.12em;
}

.cronica-corpo ins {
  text-decoration-line: underline;
}

.cronica-corpo strong,
.cronica-corpo b {
  font-weight: 900;
}

/* a entrada do texto, quando o autor a marca — o parágrafo de
   abertura em corpo maior, à maneira do lead de jornal */
.cronica-corpo .lead,
.cronica-corpo > p.lead:first-of-type {
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.55;
}

/* --- palavras-chave, no fim da crónica --- */

.cronica-chave {
  max-width: 42rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: var(--traco) solid var(--preto);
}

.cronica-chave__titulo {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

.cronica-chave__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cronica-chave__lista a {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border: var(--traco) dashed var(--preto);
  border-radius: 999px;
  color: var(--preto);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease, border-style 0.2s ease;
}

.cronica-chave__lista a:hover,
.cronica-chave__lista a:focus-visible {
  border-style: solid;
  background-color: var(--amarelo);
  outline: none;
}

/* nos cartões da listagem, as etiquetas distinguem-se das
   categorias por serem mais leves e tracejadas */
.cronica-etiquetas .etiqueta--chave {
  border-style: dashed;
  font-weight: 400;
  opacity: 0.75;
}

.cronica-corpo figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  opacity: 0.7;
}

/* etiquetas de categoria no topo de uma crónica */
.cronica-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.cronica-etiquetas li {
  border: var(--traco) solid var(--preto);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
}

.cronica-etiquetas a {
  display: block;
  padding: 0.3rem 0.85rem;
  color: inherit;
  text-decoration: none;
}

.cronica-etiquetas a:hover {
  background-color: rgba(0, 0, 0, 0.07);
  border-radius: 999px;
}


/* ---------- 10. Admin (/lugar-de-fala/admin/) ----------

   Ferramenta interna de um utilizador só — herda tipografia e
   cores da casa, sem ambição de design a mais do que isso.
   ------------------------------------------------------------ */

.admin {
  max-width: 48rem;
  margin: 0 auto;
  padding: clamp(6rem, 10vw, 8rem) var(--margem) 4rem;
}

.admin h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.03em;
}

.admin h2 {
  margin: 2.5rem 0 1rem;
  font-size: 1.25rem;
  font-weight: 900;
}

.admin table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.admin th,
.admin td {
  padding: 0.6rem 0.5rem;
  border-bottom: var(--traco) solid var(--preto);
  text-align: left;
  font-size: 0.9375rem;
  vertical-align: top;
}

.admin form p,
.admin form .campo {
  margin: 0 0 1rem;
}

/* --- barra de botões do editor de HTML --- */

.editor-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.editor-barra[hidden] {
  display: none;
}

.editor-barra button {
  padding: 0.3rem 0.75rem;
  border: var(--traco) solid var(--preto);
  border-radius: 999px;
  background-color: #fff;
  color: var(--preto);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.editor-barra button:hover {
  background-color: var(--amarelo);
}

.editor-barra button:focus-visible {
  outline: 2px solid var(--preto);
  outline-offset: 2px;
}

/* --- painel de ajuda do HTML --- */

.editor-ajuda {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border: var(--traco) solid var(--preto);
  border-radius: 4px;
  font-size: 0.9375rem;
}

.editor-ajuda summary {
  font-weight: 700;
  cursor: pointer;
}

.editor-ajuda[open] summary {
  margin-bottom: 0.75rem;
}

.editor-ajuda p {
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

.editor-ajuda table {
  margin: 0 0 0.75rem;
}

.editor-ajuda td,
.editor-ajuda th {
  font-size: 0.875rem;
  line-height: 1.45;
}

.editor-ajuda code {
  padding: 0.1rem 0.35rem;
  background-color: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  font-size: 0.9em;
  word-break: break-word;
}

.editor-ajuda .aviso {
  padding: 0.6rem 0.85rem;
  border: var(--traco) solid var(--preto);
  border-radius: 4px;
  background: rgba(255, 191, 0, 0.2);
}

.admin label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 700;
}

.admin input[type="text"],
.admin input[type="email"],
.admin input[type="password"],
.admin select,
.admin textarea {
  width: 100%;
  padding: 0.6rem;
  border: var(--traco) solid var(--preto);
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
}

.admin textarea {
  min-height: 16rem;
  font-family: ui-monospace, monospace;
  font-size: 0.9375rem;
}

.admin .admin-categorias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin .admin-categorias label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
}

.admin .erro {
  padding: 0.75rem 1rem;
  margin: 0 0 1.5rem;
  border: var(--traco) solid var(--preto);
  border-radius: 4px;
  font-weight: 700;
}

.admin .aviso {
  padding: 0.75rem 1rem;
  margin: 0 0 1.5rem;
  border: var(--traco) solid var(--preto);
  border-radius: 4px;
  background: rgba(255, 191, 0, 0.2);
}

.admin .accoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.admin .accoes form {
  display: inline;
}


/* ---------- 11. Comentários (na página de uma crónica) ---------- */

.comentarios {
  max-width: 42rem;
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 2px solid var(--preto);
}

.comentarios__titulo {
  margin: 0 0 1.5rem;
  font-size: 1.125rem;
  font-weight: 900;
  text-transform: lowercase;
}

.comentarios__lista {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
}

.comentario {
  padding: 1.25rem 0;
  border-bottom: var(--traco) solid rgba(0, 0, 0, 0.2);
}

.comentario__cabecalho {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  margin: 0 0 0.4rem;
}

.comentario__autor {
  font-weight: 700;
}

.comentario__data {
  font-size: 0.8125rem;
  opacity: 0.6;
}

.comentario__corpo {
  margin: 0;
  line-height: 1.6;
}

.comentarios__novo-titulo {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 900;
}

.comentarios__form p {
  margin: 0 0 1rem;
}

.comentarios__form label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.comentarios__form input[type="text"],
.comentarios__form input[type="email"],
.comentarios__form textarea {
  width: 100%;
  padding: 0.6rem;
  border: var(--traco) solid var(--preto);
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
}

.comentarios__form textarea {
  min-height: 8rem;
}

.comentarios__aviso {
  padding: 0.75rem 1rem;
  border: var(--traco) solid var(--preto);
  border-radius: 4px;
  background: rgba(255, 191, 0, 0.2);
}

.comentarios__erro {
  font-weight: 700;
}

/* a armadilha: fora do ecrã, não display:none — alguns bots
   ignoram display:none mas continuam a preencher isto */
.campo-armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ---------- 12. Rodapé de uma crónica: voltar, partilhar, relacionadas ---------- */

.cronica-voltar {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: inherit;
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  font-weight: 700;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.cronica-voltar:hover {
  opacity: 1;
  text-decoration: underline;
}

.cronica-partilhar {
  max-width: 42rem;
  margin: clamp(3rem, 6vw, 4rem) 0 0;
}

.cronica-partilhar__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.cronica-relacionadas {
  max-width: 42rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
}

.cronica-relacionadas .cronica__titulo {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
}


/* ---------- 13. Ajustes de admin: categorias e imagens do editor ---------- */

.admin-linha {
  display: flex;
  gap: 0.5rem;
}

.admin-linha input[type="text"] {
  flex: 1 1 auto;
}

.admin-imagens {
  margin: 2rem 0;
}

.admin-imagens h2 {
  margin: 0 0 1rem;
}

.admin-imagens-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-imagens-lista li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.admin-imagens-lista img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border: var(--traco) solid var(--preto);
  flex-shrink: 0;
}

.admin-imagens-lista code {
  font-size: 0.8125rem;
  word-break: break-all;
  user-select: all;
}


/* ---------- 14. Contacto: dados oficiais e newsletter ---------- */

.contacto-oficiais {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  max-width: 42rem;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
}

.contacto-oficiais li {
  margin: 0 0 0.5rem;
}

.contacto-oficiais a {
  color: inherit;
}

.contacto-newsletter {
  max-width: 42rem;
  margin: clamp(3rem, 6vw, 4rem) 0 0;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background-color: var(--amarelo);
}

.contacto-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.contacto-newsletter__form input[type="email"] {
  flex: 1 1 16rem;
  padding: 0.6rem;
  border: var(--traco) solid var(--preto);
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
}


/* ---------- 15. Capa (página inicial) ----------

   Lida como uma capa de revista, de ponta a ponta a amarelo —
   sem branco a interromper. Caixas com régua grossa por cima
   e réguas finas a separar, no topo; a manchete com chamadas
   de linha reta — nunca curva, de propósito, ao contrário do
   resto do site que usa var(--curva) para tudo o que anima.
   ------------------------------------------------------------ */

.capa {
  background-color: var(--amarelo);
}

/* --- tira de destaques, no topo: cada item é a sua própria
   "caixa", com a régua grossa por cima e uma fina a separar --- */

.capa-topo {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: clamp(8rem, 14vw, 11rem) var(--margem) 0;
}

.capa-topo__lista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--traco) solid var(--preto);
}

.capa-topo__item {
  position: relative;
  padding: 0 1.5rem 1.5rem 1.5rem;
  border-left: var(--traco) solid var(--preto);
}

.capa-topo__item:first-child {
  padding-left: 0;
  border-left: 0;
}

/* a régua grossa da "caixa" — curta, só sobre o próprio item */
.capa-topo__item::before {
  content: '';
  display: block;
  width: 7.25rem;
  height: 7px;
  margin-bottom: 0.9rem;
  background-color: var(--preto);
}

.capa-topo__item a {
  display: block;
  color: var(--preto);
  text-decoration: none;
}

.capa-topo__etiqueta {
  display: block;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.capa-topo__titulo {
  display: block;
  margin-top: 0.4rem;
  font-size: clamp(0.875rem, 1.1vw, 1rem);
  font-weight: 700;
  line-height: 1.3;
  transition: opacity 0.2s ease;
}

.capa-topo__item a:hover .capa-topo__titulo,
.capa-topo__item a:focus-visible .capa-topo__titulo {
  opacity: 0.55;
}

.capa-topo__item a:focus-visible {
  outline: 2px solid var(--preto);
  outline-offset: 4px;
}

.capa-topo__pagina {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.4;
}

@media (max-width: 767.98px) {
  .capa-topo__lista {
    grid-template-columns: 1fr 1fr;
  }

  .capa-topo__item:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .capa-topo__item:nth-child(even) {
    padding-left: 1.5rem;
    border-left: var(--traco) solid var(--preto);
  }

  .capa-topo__item:nth-child(n+3) {
    margin-top: 1.5rem;
  }
}

/* --- bloco editorial: nome, frase e retrato, um sobre o outro ---

   O retrato é grande de propósito, em qualquer ecrã — inclusive
   no telemóvel, onde toma a maior parte da largura. O texto e o
   botão ficam por cima dele (z-index maior): a silhueta pode
   passar-lhes por trás, nunca tapa nada que se precise de ler ou
   clicar. Não há uma versão "segura" para ecrãs estreitos — é a
   mesma composição sobreposta do maior ao mais pequeno, só a
   escala muda. */

.capa-editorial {
  position: relative;
  max-width: var(--largura-max);
  margin: 0 auto;
  /* sem padding em baixo, de propósito — o retrato fica apoiado
     mesmo no fundo da secção, rente à barra branca a seguir */
  padding: clamp(2rem, 4vw, 3rem) var(--margem) 0;
  /* reserva espaço para o retrato, que é absoluto e por isso não
     empurra a altura da secção sozinho — acompanha a largura dele
     (clamp(240px, 72vw, 640px)) à razão do recorte actual, ~3:2 */
  min-height: clamp(22rem, 108vw, 60rem);
}

.capa-editorial__texto {
  position: absolute;
  /* acima do retrato — texto e botão ficam sempre legíveis e
     clicáveis por cima da imagem, nunca tapados por ela */
  z-index: 3;
  top: clamp(2rem, 4vw, 3rem);
  left: var(--margem);
  max-width: min(68%, 40rem);
}

.capa-editorial__data {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.6;
}

.capa-editorial__nome {
  margin: 0;
  color: var(--preto);
  font-size: clamp(2.75rem, 7.5vw, 6rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.88;
}

.capa-editorial__abertura {
  margin: 1rem 0 0;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.45;
}

/* maior do que o nome, de propósito — é a manchete, não uma
   legenda; a coluna estreita (9ch) é que a obriga a quebrar em
   várias linhas curtas, como um título de capa de revista.
   Linhas coladas (line-height < 1) para ler como um bloco só. */
.capa-editorial__frase {
  position: relative;
  z-index: 6;
  max-width: 9ch;
  margin: clamp(1.5rem, 1.5vw, 2.5rem) 0 0;
  color: #fff;
  font-size: clamp(2.5rem, 9vw, 6.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.85;
  hyphens: auto;
}

/* maiúscula só na primeira letra — o conteúdo fica em minúsculas
   na fonte, como o resto da casa, mas a manchete lê-se como frase */
.capa-editorial__frase::first-letter {
  text-transform: uppercase;
}

/* o botão-cápsula, logo a seguir à frase — herda o z-index do
   .capa-editorial__texto (já acima do retrato) */
.capa-editorial__cta {
  display: inline-block;
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  padding: 0.7em 1.6em;
  border-radius: 999px;
  background-color: var(--preto);
  color: #fff;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  font-weight: 700;
  text-decoration: none;
  text-transform: lowercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.capa-editorial__cta:hover,
.capa-editorial__cta:focus-visible {
  background-color: #fff;
  color: var(--preto);
  outline: none;
}

/* o retrato fica por baixo do texto (z-index mais baixo) —
   encostado à direita e ao fundo, apoiado na barra branca a
   seguir à capa, largo o bastante para a sua própria silhueta
   invadir a coluna do texto. Sem sombra: o recorte fica plano
   sobre o amarelo, não flutua sobre ele. */
.capa-editorial__retrato {
  display: block;
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 0;
  width: clamp(240px, 72vw, 640px);
}

.capa-editorial__imagem {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .capa-topo__titulo {
    transition-duration: 0.01ms !important;
  }
}