/* ═══════════════════════════════════════════════════════════════
   Miss Cabo Verde Luxembourg — main.css · v0.2 (estética premium escura)
   Fundo --noir-velours · texto marfim · destaques em ouro.
   Tipografia: Jost (títulos e números) + DM Sans (texto) — locais.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens globais ─────────────────────────────────────── */
:root {
  /* Paleta oficial do projeto (Relatório Técnico §8.1). */
  /* Direção da cliente (2026-08-12, WhatsApp): «para não ficar muito
     escuro, podemos jogar com aquela cor azul?» — o preto sai, o azul do
     site assume os fundos. Valores medidos: murmure 4,51:1 no corpo (AA);
     nos painéis o murmure falha (3,94) e cede o lugar ao marfim-voile.
     Os valores pretos anteriores: velours #0B0B0E · tissage #131318. */
  --noir-velours:   #101B2A;
  --noir-tissage:   #17273A;
  --indigo-couture: #142130;
  --or-champagne:   #C8A96A;
  --or-clair:       #D4B77E;
  --marfim-soie:    #F4EFE6;
  --marfim-voile:   #B5AC9C;
  --fil-indigo:     #2A3A5E;
  --grenat:         #7E1B2C;

  --murmure: #8A8172;                       /* metadados sobre escuro */
  --hairline: rgba(42, 58, 94, .55);        /* fil-indigo translúcido  */

  --font-titulo: "Jost", "Segoe UI", sans-serif;
  --font-texto:  "DM Sans", "Segoe UI", sans-serif;

  /* Banda divisória em ouro — transição da secção escura para a clara. */
  --pano-tile-ouro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='40'%3E%3Cg fill='none' stroke='%23C8A96A' stroke-opacity='.55'%3E%3Cpath d='M14 9 L23 20 L14 31 L5 20 Z' stroke-width='1.1'/%3E%3Cpath d='M14 15 L18.5 20 L14 25 L9.5 20 Z' stroke-width='.8'/%3E%3Cpath d='M0 20 H5 M23 20 H28' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E");

  /* Motivo do panu (losangos + fios retos) como fundo, traço fil-indigo. */
  --pano-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='40'%3E%3Cg fill='none' stroke='%232A3A5E'%3E%3Cpath d='M14 9 L23 20 L14 31 L5 20 Z' stroke-width='1.1'/%3E%3Cpath d='M14 15 L18.5 20 L14 25 L9.5 20 Z' stroke-width='.8'/%3E%3Cpath d='M0 20 H5 M23 20 H28' stroke-width='.8'/%3E%3Cpath d='M0 3.5 H28 M0 36.5 H28' stroke-width='.6' stroke-opacity='.55'/%3E%3C/g%3E%3C/svg%3E");

  /* Tile das placas sem fotografia (§6.3 b): o mesmo motivo em or-champagne,
     com a opacidade baixíssima aplicada no próprio pattern (0.05). */
  --pano-tile-carta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='40'%3E%3Cg fill='none' stroke='%23C8A96A' stroke-opacity='.05'%3E%3Cpath d='M14 9 L23 20 L14 31 L5 20 Z' stroke-width='1.1'/%3E%3Cpath d='M14 15 L18.5 20 L14 25 L9.5 20 Z' stroke-width='.8'/%3E%3Cpath d='M0 20 H5 M23 20 H28' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── 2 · Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--noir-velours);
  color: var(--marfim-soie);
  font-family: var(--font-texto);
  font-weight: 300;
  /* 17px: a base da escala do plano (§tipografia). O público inclui
     famílias e institucionais, não só 18-35 — e a queixa real era esta:
     ilhas de texto pequeno num oceano escuro. */
  font-size: 17px;
  line-height: 1.7;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-titulo); font-weight: 400; }
p, figure { margin: 0; }
ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--or-champagne);
  outline-offset: 3px;
}
::selection { background: var(--grenat); color: var(--marfim-soie); }

.salto {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--grenat); color: var(--marfim-soie);
  padding: .6rem 1rem; font-size: .85rem;
}
.salto:focus { left: 1rem; top: 1rem; }

.molde { max-width: 1240px; margin-inline: auto; padding-inline: clamp(1.2rem, 4vw, 3.4rem); }

/* Destinos de âncora: o cabeçalho é fixo (111px em repouso, 91px encolhido),
   por isso um salto sem margem deixaria o título por baixo dele. */
[id="conteudo"], [id="concurso"], [id="como-entra"], [id="palmares"] {
  scroll-margin-top: 7.5rem;
}
.k {
  font-family: var(--font-titulo); font-weight: 400;
  text-transform: uppercase; letter-spacing: .34em;
  font-size: .66rem; color: var(--or-champagne);
}

/* ── 3 · Fólio e masthead ───────────────────────────────────── */
.folio {
  font-family: var(--font-titulo); text-transform: uppercase; letter-spacing: .24em;
  font-size: .6rem; color: var(--marfim-voile);
  border-bottom: 1px solid var(--hairline);
}
.folio .molde { display: flex; justify-content: space-between; gap: 1rem; padding-block: .2rem; }
/* O fólio é uma barra fina, mas o email é tocável: alvo acima do mínimo. */
.folio a { display: inline-block; padding-block: .5rem; }
.folio b { color: var(--or-clair); font-weight: 400; }
.folio .linguas { margin-left: 1rem; }
.folio .linguas ul { display: inline-flex; gap: .5rem; }
.folio .linguas .current-lang a { color: var(--or-champagne); }

.mast {
  position: sticky; top: 0; z-index: 100;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 20px 0;
  background: rgba(16, 27, 42, .9);
  border-bottom: 1px solid var(--hairline);
  transition: background-color 0.4s ease, padding 0.4s ease, backdrop-filter 0.4s ease;
}
header.is-scrolled {
  background-color: rgba(23, 39, 58, .86) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 10px 0 !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
@media (prefers-reduced-motion: reduce) { .mast { transition: none; } }
.mast .molde {
  position: relative; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: .55rem; padding-block: 0;
}
/* Menu e seletor de língua na mesma fila, sem quebrar linha. */
.fila-nav {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: nowrap; gap: 1.4rem;
}
.masthead { line-height: .95; }
.masthead .m1 {
  font-family: var(--font-titulo); font-weight: 400; font-size: 1.3rem;
  letter-spacing: .22em; text-transform: uppercase; display: block;
  color: var(--marfim-soie);
}
.masthead .m2 {
  font-family: var(--font-titulo); text-transform: uppercase; letter-spacing: .56em;
  font-size: .54rem; color: var(--or-champagne); display: block; margin-top: .35rem;
}
/* A coroa sobre o nome, entre dois fios de ouro — a referência da
   cliente. O anchor tem a largura do nome, por isso os fios morrem
   exatamente nas pontas do wordmark, a qualquer tamanho. */
.masthead .m-coroa {
  display: flex; align-items: center; gap: .4rem; margin-bottom: .32rem;
}
.masthead .m-coroa .fio {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 169, 106, .65));
}
.masthead .m-coroa .fio:last-child {
  background: linear-gradient(270deg, transparent, rgba(200, 169, 106, .65));
}
.masthead .m-coroa img { width: 25px; height: auto; display: block; }
.mnav ul { display: flex; flex-wrap: nowrap; gap: clamp(1rem, 1.3vw, 1.5rem);
  list-style: none; margin: 0; padding: 0; }
.mnav a {
  font-family: var(--font-titulo); text-transform: uppercase; letter-spacing: .14em;
  font-size: .75rem; color: var(--marfim-voile); white-space: nowrap;
  padding-block: .3rem; border-bottom: 1px solid transparent;
}
.mnav a:hover,
.mnav .current-menu-item a { color: var(--marfim-soie); border-bottom-color: var(--or-champagne); }

/* Seletor de língua — minimalista, FR | PT. */
.linguas-mast ul {
  display: flex; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.linguas-mast li + li { border-left: 1px solid var(--hairline); }
.linguas-mast a {
  display: block; padding: .2rem .6rem;
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .18em; font-size: .68rem;
  color: var(--marfim-voile);
}
.linguas-mast a:hover { color: var(--marfim-soie); }
.linguas-mast .current-lang a { color: var(--or-champagne); }
/* Base = telemóvel: o seletor vive no painel, não no masthead. */
.fila-nav { display: contents; }
.linguas-mast { display: none; }
.linguas-panel {
  display: block;
  border-bottom: 1px solid var(--hairline);
  padding: .2rem clamp(1.2rem, 4vw, 3.4rem);
}
.linguas-panel ul { display: flex; list-style: none; margin: 0; padding: 0; }
.linguas-panel li + li { border-left: 1px solid var(--hairline); }
.linguas-panel a {
  display: flex; align-items: center; min-height: 44px; padding-inline: .8rem;
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .18em; font-size: .74rem; color: var(--marfim-voile);
}
.linguas-panel .current-lang a { color: var(--or-champagne); }

/* Alternador (hambúrguer) — o estado base da navegação. */
.nav-toggle {
  display: flex; flex-shrink: 0; align-items: center; justify-content: center; gap: .6rem;
  min-height: 44px; min-width: 44px;
  background: none; border: 1px solid rgba(200, 169, 106, .45);
  color: var(--or-champagne); padding: .55rem .9rem; cursor: pointer;
}
.nav-toggle .rotulo {
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .24em; font-size: .62rem;
}
.nav-toggle .tracos { display: flex; flex-direction: column; gap: 5px; width: 20px; }
.nav-toggle .tracos i {
  display: block; height: 1px; background: var(--or-champagne);
  transition: transform .2s ease;
}
.nav-toggle[aria-expanded="true"] .tracos i:first-child { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .tracos i:last-child { transform: translateY(-3px) rotate(-45deg); }

/* Base = telemóvel: marca à esquerda, hambúrguer à direita, menu em painel. */
.mast .molde {
  flex-direction: row; flex-wrap: nowrap; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.mnav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--noir-tissage);
  border-block: 1px solid var(--hairline);
}
.mnav.aberta { display: block; }
.mnav ul {
  flex-direction: column; gap: 0;
  padding: .4rem clamp(1.2rem, 4vw, 3.4rem) .8rem;
}
.mnav li { border-bottom: 1px solid var(--hairline); }
.mnav li:last-child { border-bottom: 0; }
.mnav a {
  display: flex; align-items: center; min-height: 44px;
  padding-block: .5rem; font-size: .85rem; border-bottom: none;
}
@media (prefers-reduced-motion: reduce) { .nav-toggle .tracos i { transition: none; } }

/* Telemóvel estreito: o fólio perde a linha institucional e a marca encolhe. */
.folio .molde > span:first-child { display: none; }
.folio .molde { justify-content: center; }
.masthead .m1 { font-size: .95rem; letter-spacing: .14em; }
.masthead .m-coroa img { width: 20px; }
.masthead .m-coroa { margin-bottom: .26rem; }
.nav-toggle .rotulo { display: none; }

@media (min-width: 601px) {
  .folio .molde > span:first-child { display: block; }
  .folio .molde { justify-content: space-between; }
  .masthead .m1 { font-size: 1.3rem; letter-spacing: .22em; }
  .masthead .m-coroa img { width: 25px; }
  .nav-toggle .rotulo { display: block; }
}

/* Ecrã largo: a navegação sai do painel e volta a ser uma fila horizontal. */
/* 1280px e não 1121: com a marca à esquerda, o menu de dez itens deixa de
   caber a 1121 e a página transbordava; a 1240 cabia mas sem folga. Abaixo
   deste ponto vale o hambúrguer, que já servia bem. */
@media (min-width: 1280px) {
  /* Marca à esquerda, navegação à direita (pedido do cliente, 2026-08-19).
     Antes era coluna centrada; em fila ganha-se altura de ecrã e a leitura
     passa a começar onde o olho ocidental começa. */
  .mast .molde {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3.5rem);
  }
  /* flex-shrink:0 + nowrap: sem isto o flex esprememe a marca e ela parte
     em «MISS / CABO / VERDE». O menu é que cede espaço, nunca o nome. */
  .masthead { text-align: left; flex-shrink: 0; }
  .masthead .m1 { white-space: nowrap; }
  /* O cabeçalho respira mais largo que o corpo: o texto continua a 1240px
     de medida, a barra de navegação vai até 1600. É o que dá folga real
     entre a marca e o menu em ecrãs grandes. */
  .mast .molde { max-width: 1600px; }

  /* Valores FIXOS, sem vw: o contentor tem largura máxima, então um menu
     dimensionado em vw cresce enquanto o espaço não cresce — era por isso
     que a folga piorava a 1600 e 1917. Medido: marca 244 + línguas 68. */
  .fila-nav { flex-wrap: nowrap; min-width: 0; gap: 1.2rem; }
  .mnav ul { flex-wrap: nowrap; gap: .95rem; }
  .mnav a { font-size: .72rem; letter-spacing: .1em; }
  .linguas-mast a { padding-inline: .45rem; }
  .nav-toggle { display: none; }
  .mnav {
    display: block; position: static; background: none; border-block: 0;
  }
  .mnav ul { flex-direction: row; gap: clamp(1rem, 1.3vw, 1.5rem); padding: 0; }
  .mnav li { border-bottom: 0; }
  .mnav a {
    display: inline-block; min-height: 0;
    padding-block: .3rem; font-size: .75rem;
    border-bottom: 1px solid transparent;
  }
  .fila-nav { display: flex; }
  .linguas-mast { display: block; }
  .linguas-panel { display: none; }
}

/* ── 4 · Hero ───────────────────────────────────────────────── */
.hero {
  position: relative; border-bottom: 1px solid var(--hairline); overflow: hidden;
  /* respiro radial na família do azul — profundidade sem voltar ao preto */
  background: radial-gradient(120% 95% at 50% -12%, #1A2C44 0%, var(--noir-velours) 62%);
}
/* a urdidura: fios verticais em fil-indigo, dissolvendo antes do divisor */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    rgba(42, 58, 94, .34) 0 1px, transparent 1px 18px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 94%);
          mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 94%);
}
/* Base = telemóvel: uma coluna. O retrato/teada é uma FAIXA de altura
   limitada — sem limite, o SVG cai no seu rácio intrínseco de 1:4 e
   ocupa 1,7 ecrãs de ornamento entre o botão e o conteúdo. */
.hero-grelha {
  position: relative;
  display: grid;
  gap: clamp(1.2rem, 4vw, 4rem);
}
.h-texto {
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.1rem, 2.6vw, 2rem);
  padding-block: clamp(1.8rem, 6vw, 4.2rem);
}
.h-foto {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding-bottom: clamp(1.8rem, 6vw, 4.2rem);
}
.h-foto > img { width: 100%; height: 100%; min-height: clamp(260px, 40vh, 520px); }
.h-foto > img {
  object-fit: cover; object-position: top center;
  -webkit-mask-image: radial-gradient(115% 115% at 50% 42%, #000 55%, transparent 98%);
          mask-image: radial-gradient(115% 115% at 50% 42%, #000 55%, transparent 98%);
}
/* A coroa do comité no lugar da tira geométrica (cliente, 2026-08-12).
   Não flutua solta: está À CABEÇA DE UM FIO — o mesmo gesto da teada
   antiga («a coroa, à cabeça da tira») e do fio do tempo da História.
   O fio desce da coroa e dissolve-se rumo ao divisor dourado, ancorando
   o emblema à composição em vez de o deixar boiar no vazio. */
.h-brasao {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding-top: clamp(1rem, 3vw, 2rem);
}
/* o halo, em duas camadas: um núcleo curto e uma auréola larga */
.h-brasao::before {
  content: ""; position: absolute;
  width: min(78%, 32rem); aspect-ratio: 1;
  background:
    radial-gradient(circle, rgba(255, 217, 138, .10) 0%, transparent 34%),
    radial-gradient(circle, rgba(200, 169, 106, .07) 0%, transparent 64%);
}
/* O fio nasce sob a coroa e entrega a palavra da presidente. */
.h-palavra {
  position: relative; margin: 0 auto; max-width: 44ch;
  text-align: center;
  padding-top: clamp(2.4rem, 6vh, 4rem);
}
.h-palavra::before {
  content: ""; position: absolute;
  left: 50%; top: 0; height: clamp(1.8rem, 4.5vh, 3rem);
  width: 1px; background: rgba(200, 169, 106, .38);
}
.h-palavra p {
  font-family: var(--font-texto); font-weight: 300;
  font-size: clamp(.95rem, 1.15vw, 1.08rem); line-height: 1.85;
  color: var(--marfim-soie);
}
.h-palavra cite {
  display: block; margin-top: clamp(.9rem, 2vh, 1.3rem);
  font-style: normal; font-family: var(--font-titulo);
  text-transform: uppercase; letter-spacing: .22em; font-size: .64rem;
  color: var(--or-champagne);
}
.h-brasao img {
  position: relative;
  width: clamp(200px, 30vw, 400px); height: auto;
  /* O gesto do logótipo: a coroa pousada de lado, como na cabeça da
     figura da marca. O charme está na inclinação, não na simetria. */
  transform: rotate(-14deg);
  transform-origin: 50% 72%;
  filter: drop-shadow(0 6px 26px rgba(16, 27, 42, .55))
          drop-shadow(0 0 30px rgba(245, 183, 73, .16));
}
.kicker {
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .36em; font-size: .72rem; color: var(--marfim-voile);
}
.kicker b { color: var(--or-clair); font-weight: 400; }
.h-ed {
  font-family: var(--font-titulo); font-weight: 300;
  text-transform: uppercase; letter-spacing: .3em;
  font-size: clamp(1.2rem, 2.6vw, 1.9rem); line-height: 1; margin-bottom: .5rem;
  color: var(--marfim-voile);
}
/* O ano: nasce em branco fosco, o contador percorre o palmarés e,
   ao pousar, uma varredura contínua pinta os glifos de ouro. */
.h-ano {
  position: relative;
  font-family: var(--font-titulo); font-weight: 300;
  line-height: .9; letter-spacing: .02em;
  font-size: clamp(5rem, 13.5vw, 12.5rem); margin-left: -.03em;
  font-variant-numeric: tabular-nums;
}
.h-ano .visual { display: flex; }
.h-ano .oco {
  color: transparent;
  -webkit-text-stroke: 1px var(--marfim-voile);
  transition: -webkit-text-stroke-color 2.4s ease;
}
.h-ano [data-sfx] {
  color: transparent;
  background: linear-gradient(100deg,
    var(--marfim-soie) 0%, var(--marfim-soie) 38%,
    var(--or-champagne) 55%, var(--or-clair) 100%);
  background-size: 260% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text; background-clip: text;
  transition: background-position 2.6s ease;
}
.h-ano.dourado .oco { -webkit-text-stroke-color: var(--or-champagne); }
.h-ano.dourado [data-sfx] { background-position: 100% 0; }
@media (prefers-reduced-motion: reduce) {
  .h-ano .oco, .h-ano [data-sfx] { transition: none; }
}

/* Leitores de ecrã: o ano completo, estático. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Entrada escalonada do hero — só com movimento permitido;
   sem JS ou com movimento reduzido, tudo visível à partida. */
@media (prefers-reduced-motion: no-preference) {
  .sobe {
    opacity: 0; transform: translateY(14px);
    animation: mcvl-sobe .8s cubic-bezier(.22, .61, .36, 1) forwards;
  }
  .d1 { animation-delay: .1s; }
  .d3 { animation-delay: 2.4s; }
  .d4 { animation-delay: 2.65s; }
  @keyframes mcvl-sobe { to { opacity: 1; transform: none; } }
}
/* O itálico existia para sinalizar citação; com a divisa fora deste slot
   deixou de ter referente. E a frase que remata o contador não pode ficar
   em cor de legenda — é o argumento de abertura do site. */
.lema {
  font-family: var(--font-texto); font-weight: 300;
  font-size: 1.12rem; line-height: 1.6; color: var(--marfim-soie);
}
.h-cta { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.btn {
  display: inline-block; background: var(--grenat); color: var(--or-clair);
  font-family: var(--font-texto); font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  font-size: .88rem; padding: 1.1rem 2.6rem;
  border: 1px solid transparent;
  cursor: pointer; transition: background .2s ease, color .2s ease;
}
.btn:hover, .btn:focus-visible { background: #93293C; color: var(--marfim-soie); }
/* .88rem/1.8 não é capricho: a ligação inline herda a caixa de linha,
   e é assim que ela passa dos 24px de alvo sem padding a partir a prosa. */
.h-nota { font-size: .88rem; color: var(--marfim-voile); max-width: 34ch; line-height: 1.8; }
/* Padding num elemento inline transborda sem mexer no fluxo do texto:
   é o que aumenta a área de toque sem partir a frase em que a ligação vive. */
.h-nota a {
  color: var(--marfim-soie);
  border-bottom: 1px solid var(--hairline);
  padding-block: .25rem;
  transition: border-color .2s ease;
}
.h-nota a:hover { border-bottom-color: var(--or-champagne); }
/* A partir do tablet: duas colunas, a teada volta a ser coluna vertical. */
@media (min-width: 861px) {
  .hero-grelha {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    min-height: min(82vh, 860px);
  }
  .h-foto { padding-block: clamp(1.8rem, 6vw, 4.2rem); }
}

/* ── 5 · Divisor de secção — motivo do panu ─────────────────── */
.divisor-pano {
  width: 100%;
  height: 40px;
  background-image: var(--pano-tile);
  background-repeat: repeat-x;
  background-position: center;
}
.divisor-pano.ouro { background-image: var(--pano-tile-ouro); }

/* ── 6 · Spread «O Concurso» — secção de respiro, em claro ──── */
.spread-banda {
  background: var(--marfim-soie);
  color: var(--noir-velours);
  border-block: 1px solid rgba(42, 58, 94, .25);
}
/* Prosa à esquerda (o que se ganha), ficha de serviço à direita (como se entra).
   Proibições permanentes nesta secção, e não são estéticas:
   · nenhum algarismo ornamental — se um número aparecer, é um facto;
   · nenhum <b> a fazer de hierarquia — quem destaca é a linha .destaque;
   · a ficha NÃO fecha em caixa (sem filete na última linha): o conjunto
     não é exaustivo, e desenhá-lo fechado seria mentir sobre isso;
   · nada de animar a ficha linha a linha;
   · o motivo do panu não entra aqui — já corre nas duas bandas divisórias. */
/* Base = telemóvel: prosa, depois ficha. A ordem é a que a leitora precisa —
   o que se ganha antes de como se entra. A costura não existe numa coluna só. */
.mandato {
  display: grid;
  row-gap: 2.2rem;
  padding-block: clamp(2.4rem, 7vw, 5.6rem);
}
.junta { display: none; }

/* linha corrente — DM Sans itálico: registo deliberadamente distinto do .k */
.m-corrente {
  border-top: 1px solid rgba(42, 58, 94, .28);
  padding-top: .55rem; max-width: 46ch;
  font-family: var(--font-texto); font-style: italic;
  font-size: .82rem; line-height: 1.5;
  color: rgba(11, 11, 14, .68);
}
.m-frase {
  font-weight: 300; color: var(--noir-velours);
  font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.08;
  letter-spacing: -.005em; text-wrap: balance;
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
}
.m-abre {
  font-family: var(--font-titulo); font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: .02em;
  margin-top: clamp(1.3rem, 2.6vw, 1.9rem);
}
.m-corpo { margin-top: 1.1rem; max-width: 58ch; }
.m-corpo p { font-size: 1rem; line-height: 1.75; color: rgba(11, 11, 14, .8); }
.m-corpo p + p { margin-top: 1rem; }

/* a ficha de serviço */
.como {
  border-top: 1px solid var(--grenat);                /* granada só como superfície */
  background: rgba(42, 58, 94, .045);
  padding: 1.2rem 1rem 1.3rem;
}
.como-tit {
  font-family: var(--font-titulo); font-weight: 400;
  text-transform: uppercase; letter-spacing: .22em; font-size: .72rem;
  color: var(--noir-velours); margin-bottom: 1rem;
}
.como-lista { margin: 0; }
.como .l { border-top: 1px solid rgba(42, 58, 94, .22); padding: .62rem 0; }
.como .l:first-child { border-top: 0; padding-top: 0; }
/* 12px é o piso: abaixo disto um rótulo em versaletes com espaçamento
   deixa de se ler à distância a que se segura um telemóvel. */
.como dt {
  font-family: var(--font-titulo); font-weight: 400;
  text-transform: uppercase; letter-spacing: .14em; font-size: .75rem;
  color: rgba(11, 11, 14, .72);
}
.como dd { margin: .25rem 0 0; font-size: .95rem; line-height: 1.6; color: rgba(11, 11, 14, .85); }

/* O mecanismo de hierarquia que substitui o <b> ao nível do caractere:
   muda de linha sem se tocar numa declaração. Uma só, nunca duas.
   A sangria acompanha exatamente o padding do cartão em cada medida. */
.como .destaque {
  margin-inline: -1rem; padding: .85rem 1rem;
  background: rgba(126, 27, 44, .06); border-top-color: var(--grenat);
}
.como .destaque dd {
  font-size: 1.12rem; font-weight: 500; line-height: 1.45; color: var(--noir-velours);
}

/* botão para fundo claro — o .btn (ouro sobre transparente) daria 1,96:1.
   Em telemóvel ocupa a largura toda: é o alvo de toque principal da secção. */
.btn-grenat {
  display: block; width: 100%; text-align: center;
  margin-top: 1.3rem; min-height: 48px;
  background: var(--grenat); color: var(--marfim-soie);
  font-family: var(--font-titulo); font-weight: 400;
  text-transform: uppercase; letter-spacing: 2px; font-size: 12.5px;
  padding: 16px 30px; border: 1px solid var(--grenat);
  transition: background .2s ease, border-color .2s ease;
}
.btn-grenat:hover { background: var(--noir-velours); border-color: var(--noir-velours); }

.como-remate { margin-top: 1rem; font-size: .82rem; line-height: 1.7; color: rgba(11, 11, 14, .7); }
.como-remate a {
  display: inline-block; padding-block: .35rem;      /* alvo de toque */
  color: var(--noir-velours);
  border-bottom: 1px solid var(--grenat);
  transition: border-color .2s ease;
}
.como-remate a:hover { border-bottom-color: var(--noir-velours); }

/* A partir do tablet: seis teadas, prosa e ficha lado a lado, costura à vista. */
@media (min-width: 861px) {
  .mandato {
    grid-template-columns: repeat(6, minmax(0, 1fr));  /* seis teadas */
    column-gap: clamp(1.4rem, 3vw, 3rem);
    align-items: start;                                /* topos desalinhados de propósito */
  }
  .m-texto { grid-column: 1 / span 3; }
  .junta {                                             /* a costura, na quarta teada */
    display: block; grid-column: 4; justify-self: center; align-self: stretch;
    width: 1px; background: rgba(42, 58, 94, .28);
  }
  .como {
    grid-column: 5 / span 2; margin-top: clamp(2.4rem, 7vw, 6rem);
    padding: 1.4rem 1.3rem 1.5rem;
  }
  .como .destaque { margin-inline: -1.3rem; padding: .9rem 1.3rem; }
  .btn-grenat { display: inline-block; width: auto; }
}

/* ── 7 · Acervo das Misses — grade 6→2 ──────────────────────── */
.palm .molde { padding-block: clamp(2.8rem, 6vw, 4.6rem); }
.palm .cab {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.palm .cab h2 { font-weight: 300; font-size: clamp(1.8rem, 3.8vw, 2.7rem); margin-top: .6rem; }
.palm .cab a {
  display: inline-flex; align-items: center; min-height: 44px;   /* alvo de toque */
  font-family: var(--font-titulo); text-transform: uppercase; letter-spacing: .26em;
  font-size: .68rem; color: var(--or-champagne);
  border-bottom: 1px solid var(--or-champagne); white-space: nowrap;
}
.palm .cab a:hover { color: var(--marfim-soie); border-color: var(--marfim-soie); }

.acervo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* base: duas teadas */
  border-top: 1px solid rgba(42, 58, 94, .35);
  border-left: 1px solid rgba(42, 58, 94, .35);
}
/* Seis teadas, como o panu — nunca seis espremidas num telemóvel. */
@media (min-width: 861px) { .acervo { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.placa {
  position: relative;
  background: var(--noir-tissage);
  aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  padding: .9rem .95rem;
  overflow: hidden;
  border-right: 1px solid rgba(42, 58, 94, .35);
  border-bottom: 1px solid rgba(42, 58, 94, .35);
}
.placa .foto { position: absolute; inset: 0; }
.placa .foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
/* Véu de leitura. Antes de haver fotografias o texto estava centrado sobre
   fundo liso; com fotografias tem de descer para onde o véu é opaco, ou o
   ouro sobre uma imagem clara deixa de se ler. */
.placa .foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(16, 27, 42, .18) 0%, rgba(16, 27, 42, .30) 45%, rgba(16, 27, 42, .93) 100%);
}
.placa.com-foto { justify-content: flex-end; }
.placa.com-foto .ano, .placa.com-foto .nome { text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.placa .ano {
  position: relative;
  font-family: var(--font-titulo); font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1;
  color: var(--or-champagne);
}
.placa .nome {
  position: relative;
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .26em; font-size: .68rem; color: var(--marfim-soie);
  margin-top: .35rem;
}
/* Miss registada, sem fotografia (§6.3 b): placa tecida com o motivo
   em opacidade mínima + borda dourada + micro-apelo de recolha. */
.placa.motivo {
  border-bottom-color: var(--or-champagne);
  background-image: var(--pano-tile-carta);
  background-repeat: repeat;
  background-position: center;
}
.placa .apelo {
  position: relative;
  font-style: italic; font-size: .62rem; line-height: 1.5;
  color: var(--marfim-voile);
  margin-top: .5rem; max-width: 17ch;
}
/* Ano sem edição registada (§6.3 a): sem ornamento nenhum. */
.placa.sem-registo .ano { color: var(--murmure); font-size: 1.15rem; }
.placa.sem-registo .nota {
  position: relative; font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--murmure); margin-top: .3rem;
}
/* Interação: os cartões são ligações. */
a.placa {
  transition: box-shadow .25s ease, border-color .25s ease;
}
a.placa:hover, a.placa:focus-visible {
  z-index: 1;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .4);
  border-bottom-color: var(--or-champagne);
}
@media (prefers-reduced-motion: no-preference) {
  a.placa { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  a.placa:hover, a.placa:focus-visible { transform: translateY(-6px); }
}

/* Edição corrente: destaque com borda dourada completa. */
.placa.aberta {
  outline: 1px solid var(--or-champagne); outline-offset: -1px;
  border-color: transparent;
}
.placa.aberta .ano { color: var(--or-clair); }
.placa.aberta .nome { color: var(--or-clair); letter-spacing: .14em; }
.palm .nota, .vazio { margin-top: 1.2rem; font-size: .8rem; color: var(--marfim-voile); }

/* ── 8 · Faixa da diáspora ──────────────────────────────────── */
/* Sobre o corpo azul, o couture já não destaca: a faixa sobe um degrau. */
.dias { background: #182A3F; border-block: 1px solid var(--hairline); }
/* A tese em display; os números são prova e vivem no aparato, em corpo pequeno.
   O objeto de display é a COMPARAÇÃO, não uma das duas grandezas.
   Proibições permanentes nesta faixa: nenhum gráfico, barra, escala ou linha
   cortada; nenhum contador a subir no 491 233 (um número sobre um povo emigrado
   não é uma slot machine — Plano §9); nenhum algarismo em corpo de display.
   NOTA DE TOKEN: --murmure (#8A8172) dá 4,24:1 sobre --indigo-couture e falha AA.
   Sobre esta faixa usa-se --marfim-voile (7,25:1). */
.dias-pagina { padding-block: clamp(3rem, 7vw, 5.2rem); }

.dias-tese {
  font-weight: 300; color: var(--marfim-soie);
  font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.2; letter-spacing: .004em;
  max-width: 20ch;
  text-wrap: balance;
}
.dias-coda {
  margin-top: 1.4rem;
  font-size: 1.02rem; line-height: 1.7; color: var(--marfim-voile);
}

/* O aparato: duas medidas debaixo de um filete, cada uma a dizer de que lado
   da conta fala. Sem chamadores e sem numeração — o rótulo é a referência. */
.dias-notas {
  margin: clamp(2.4rem, 5vw, 3.8rem) 0 0;
  padding-top: 1rem; border-top: 1px solid rgba(181, 172, 156, .3);
}
.dias-notas .dn + .dn { margin-top: 1.1rem; }
.dias-notas dt {
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .2em; font-size: .62rem; color: var(--or-champagne);
}
.dias-notas dd {
  margin: .3rem 0 0;
  font-size: .84rem; line-height: 1.65; color: var(--marfim-voile);
}
.dias-notas .cifra { color: var(--marfim-soie); font-variant-numeric: tabular-nums; }

/* Em ecrã largo a tese recua e a medida aperta: outra medida, outro assunto. */
@media (min-width: 821px) {
  .dias-tese, .dias-coda { margin-left: clamp(0rem, 6vw, 6.5rem); }
  .dias-tese { max-width: 22ch; }
  .dias-coda { max-width: 42ch; }
  .dias-notas { max-width: 34rem; }
}

/* ── 9 · Arquivos genéricos ─────────────────────────────────── */
.arquivo { padding-block: clamp(2.6rem, 6vw, 4.4rem); }
.arquivo-cab { margin-bottom: 1.8rem; }
.lista { display: flex; flex-direction: column; }
.ficha { border-top: 1px solid var(--hairline); padding-block: 1.1rem; }
.ficha h2 { font-weight: 400; font-size: 1.25rem; letter-spacing: .03em; }
.ficha p { color: var(--marfim-voile); font-size: .92rem; margin-top: .3rem; }

/* ── 9b · «O Tear» — arquivo das Misses ─────────────────────────
   Uma teada vertical a descer a página, uma linha por ano desde 1998.
   Regras que não se negoceiam nesta secção:
   · a urdidura é UM elemento contínuo, nunca repetida linha a linha —
     repetida, o arredondamento de subpíxel produz costuras visíveis;
   · o ano sem registo não leva ornamento NENHUM: nem placeholder, nem
     silhueta, nem «brevemente». O vazio é o conteúdo;
   · o tecido está parado — nada aqui anima. */
/* Cabeçalho iluminado — o respiro claro antes da exposição.
   Regra de cor herdada da home: no marfim o ouro dá 1,96:1 e não se usa
   como texto; os acentos passam a granada (8,81:1). */
.tear-cab {
  background: var(--marfim-soie);
  color: var(--noir-velours);
  border-bottom: 1px solid rgba(42, 58, 94, .2);
}
.tear-cab .molde { padding-block: clamp(3.5rem, 8vw, 6.25rem); }   /* até 100px */
.tear-cab .k { color: var(--grenat); }
/* O divisor senta na aresta inferior da secção, sem respiro entre eles. */
.tear-cab .divisor-pano { margin-bottom: -1px; }
.tear-cab h1 {
  font-weight: 300; font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.05; margin-top: .7rem;
}
.tear-intro {
  margin-top: 1.1rem; max-width: 54ch;
  color: rgba(16, 27, 42, .82); font-size: 1.06rem; line-height: 1.7;
}
.tear-nota {
  margin-top: 1.2rem; max-width: 52ch;
  font-size: .88rem; line-height: 1.7; color: rgba(16, 27, 42, .66);
}
.tear-conta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  margin-top: 1.8rem;
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .18em; font-size: .68rem; color: rgba(16, 27, 42, .7);
}
.tear-conta b { color: var(--grenat); font-weight: 400; font-size: 1.3rem; letter-spacing: 0; }

/* A exposição: fundo escuro declarado — as fotografias exigem o contraste. */
.tear-secao {
  background: var(--noir-velours);
  padding-block: clamp(2.4rem, 6vw, 4rem) clamp(3rem, 8vw, 5rem);
}
/* RF-05: ano com Miss mas sem fotografia visível não deixa buraco preto —
   leva o motivo do panu a 5 %, a mesma textura das placas da home. */
.fio.sem-imagem .fio-corpo {
  padding: 1rem 1.1rem;
  background-color: var(--noir-tissage);
  background-image: var(--pano-tile-carta);
  background-repeat: repeat;
  border-left: 1px solid rgba(200, 169, 106, .35);
}

/* `ol.tear` e não `.tear`: o reset usa `ol[class]`, que tem especificidade
   (0,1,1) e venceria uma classe sozinha — o padding da calha vinha a zero
   e a trama passava a nascer fora da margem, à esquerda da urdidura. */
ol.tear {
  --calha: clamp(1.6rem, 6vw, 3rem);
  position: relative; list-style: none; margin: 0;
  padding: 0 0 0 var(--calha);
}
/* A urdidura: três fios de 1px que correm de 1998 até hoje sem se partirem.
   É a única linha contínua do site, e é a linhagem. */
.urdidura {
  position: absolute; left: 0; top: 0; bottom: 0; width: 9px;
  background: repeating-linear-gradient(90deg,
    var(--fil-indigo) 0 1px, transparent 1px 4px);
}

.fio { position: relative; }
/* A trama: parte da urdidura e atravessa até à margem. Só quem foi coroada a tem. */
.fio.tecido::before, .fio.aberto::before {
  content: ""; position: absolute; top: 0;
  left: calc(-1 * var(--calha)); right: 0; height: 1px;
  background: var(--or-champagne); opacity: .45;
}
.fio.aberto::before { opacity: .9; }

.fio-ano {
  display: block;
  font-family: var(--font-titulo); font-weight: 300;
  font-size: 1.5rem; line-height: 1; color: var(--or-champagne);
  font-variant-numeric: tabular-nums;
}

/* (a) Ano sem edição: um terço da altura, sem trama, sem ornamento. */
.fio.vazio { padding-block: .7rem; }
.fio.vazio .fio-ano { font-size: 1.05rem; color: var(--murmure); }
.fio.vazio .fio-nada {
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .2em; font-size: .62rem; color: var(--murmure);
  margin-top: .2rem; display: block;
}

/* (b) e (c) Ano com Miss coroada. */
.fio.tecido { padding-block: 1.5rem; }
.fio-corpo { display: flex; gap: 1rem; align-items: flex-start; margin-top: .7rem; }
.fio-retrato { flex: 0 0 84px; }
.fio-retrato img { width: 100%; height: auto; display: block; }
.fio-texto { min-width: 0; }
.fio-nome {
  font-family: var(--font-titulo); font-weight: 400;
  font-size: 1.3rem; letter-spacing: .05em; line-height: 1.2;
}
.fio-nome a { border-bottom: 1px solid transparent; }
.fio-nome a:hover { border-bottom-color: var(--or-champagne); }
.fio-linha { margin-top: .35rem; font-size: .92rem; line-height: 1.6; color: var(--marfim-voile); }
.fio-apelo {
  margin-top: .5rem; font-style: italic;
  font-size: .82rem; line-height: 1.5; color: var(--marfim-voile);
}
/* Crédito do fotógrafo. A marca de água é crédito contratual de parceria;
   a miniatura recorta-a, por isso repete-se em texto, que nada apaga. */
.fio-credito, .fm-credito, .visor-credito {
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .14em; font-size: .58rem; color: var(--murmure);
}
.fio-credito { margin-top: .5rem; }
.fm-credito { margin-top: .6rem; }
.visor-credito { background: rgba(16, 27, 42, .6); color: var(--marfim-voile); }

/* A última linha: urdidura aberta, trama por tecer, e a candidatura no lugar do nome. */
.fio.aberto { padding-block: 1.8rem clamp(1.8rem, 5vw, 2.6rem); }
/* Aqui o corpo empilha: o retrato não existe, e o que há é uma declaração
   seguida de um botão. Em fila, o botão colava-se à frase. */
.fio.aberto .fio-corpo { flex-direction: column; align-items: flex-start; gap: .4rem; }
.fio.aberto .fio-nome {
  font-style: italic; font-weight: 300; color: var(--marfim-voile);
  text-transform: lowercase; letter-spacing: .04em;
}
.fio.aberto .fio-linha { color: var(--marfim-soie); }
.fio.aberto .btn-grenat { margin-top: 1.1rem; }

@media (min-width: 861px) {
  /* O ano passa a coluna própria; a trama atravessa por trás dele. */
  .fio.tecido, .fio.vazio, .fio.aberto {
    display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0 clamp(1.2rem, 3vw, 2.4rem);
    align-items: start;
  }
  .fio-ano { padding-top: 1.4rem; }
  .fio.vazio .fio-ano, .fio.vazio .fio-nada { padding-top: 0; }
  .fio.vazio { padding-block: .55rem; align-items: baseline; }
  .fio-corpo { margin-top: 1.4rem; }
  .fio-retrato { flex: 0 0 clamp(120px, 12vw, 180px); }
  .fio.aberto .fio-corpo { margin-top: 1.5rem; }
  .fio.aberto .btn-grenat { display: inline-block; width: auto; }
}

/* ── 9c · Ficha individual de uma Miss ──────────────────────── */
.ficha-miss { padding-block: clamp(2.2rem, 6vw, 4rem) clamp(3rem, 8vw, 5rem); }
/* Migalha de volta ao arquivo: é navegação a sério, precisa de alvo a sério. */
.ficha-miss .k a {
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 1px solid transparent;
}
.ficha-miss .k a:hover { border-bottom-color: var(--or-champagne); }
/* Retrato de museu: tudo centrado, e tudo dentro de um palco.
   O palco é a delimitação de largura — não uma moldura pintada. É ela
   que devolve escala a uma fotografia crua contra um fundo infinito, e
   que mantém a placa curatorial abraçada ao quadro. */
.ficha-miss .molde { text-align: center; }
.fm-migalha { display: flex; justify-content: center; }
.fm-palco { max-width: 40rem; margin: clamp(1.2rem, 3vw, 2rem) auto 0; }
.fm-cab { margin-top: 0; }
.fm-linha { margin-top: .6rem; color: var(--marfim-voile); }
.fm-ano {
  font-family: var(--font-titulo); font-weight: 300;
  font-size: clamp(2.4rem, 9vw, 4rem); line-height: 1; color: var(--or-champagne);
  font-variant-numeric: tabular-nums;
}
.fm-nome {
  font-weight: 300; font-size: clamp(1.8rem, 6vw, 3rem);
  letter-spacing: .04em; line-height: 1.1; margin-top: .3rem;
}
.fm-linha { margin-top: 1rem; max-width: 52ch; color: var(--marfim-voile); line-height: 1.7; }
/* Colada à placa: 1,1rem, não 2,6. Em galeria, o texto e a obra são um
   ecossistema; separados, tornam-se dois objetos à deriva. */
.fm-retrato { margin: clamp(1.1rem, 2.4vw, 1.5rem) auto 0; }
.fm-retrato img {
  width: auto; max-width: 100%; height: auto; display: block; margin-inline: auto;
  /* O retrato vertical trava pela altura, o horizontal pela largura: em
     qualquer dos casos cabe no palco sem o rebentar. */
  max-height: min(72vh, 760px);
}
.fm-apelo {
  margin: clamp(1.6rem, 5vw, 2.6rem) auto 0; max-width: 48ch; text-align: left;
  padding: 1.1rem 1.2rem; background: var(--noir-tissage);
  border-left: 1px solid var(--or-champagne);
  font-style: italic; line-height: 1.7; color: var(--marfim-voile);
}
.fm-apelo a { color: var(--marfim-soie); border-bottom: 1px solid var(--or-champagne); padding-block: .25rem; }

/* Cartões de paginação: miniatura, rótulo e nome, ancorados à medida do
   conteúdo — não às margens do browser. Área de toque a sério. */
.fm-vizinhas {
  display: grid; gap: .8rem;
  margin: clamp(2.4rem, 6vw, 3.6rem) auto 0; max-width: 52rem;
  border-top: 1px solid var(--hairline); padding-top: clamp(1.2rem, 3vw, 1.8rem);
  text-align: left;
}
.fm-vizinhas a {
  display: flex; align-items: center; gap: .95rem;
  background: var(--noir-tissage);
  border: 1px solid rgba(200, 169, 106, .16);
  padding: .8rem .95rem;
  transition: border-color .2s ease;
}
.fm-vizinhas a:hover, .fm-vizinhas a:focus-visible { border-color: rgba(200, 169, 106, .6); }
.fm-vizinhas .vz-foto {
  flex: none; width: 58px; height: 58px; overflow: hidden;
}
.fm-vizinhas .vz-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-vizinhas .vz-rotulo {
  display: block; font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .2em; font-size: .62rem; color: var(--or-champagne);
}
.fm-vizinhas b {
  display: block; margin-top: .2rem;
  font-weight: 400; color: var(--marfim-soie); font-size: .98rem; line-height: 1.35;
}
/* O cartao do futuro, no lugar do «Seguinte» que a ultima ficha nao tem:
   granada de CTA, como o botao de candidatura. */
/* `.fm-vizinhas a` tem (0,1,1); sem o pai no seletor, o cartao granada
   perdia para o tissage — a mesma aritmetica que ja mordeu três vezes. */
.fm-vizinhas .fm-proxima { background: var(--grenat); border-color: transparent; }
.fm-vizinhas .fm-proxima:hover, .fm-vizinhas .fm-proxima:focus-visible { background: #93293C; border-color: transparent; }
.fm-vizinhas .fm-proxima .vz-rotulo { color: var(--or-clair); }
.fm-vizinhas .fm-proxima b { color: var(--marfim-soie); }

/* O lado sem vizinha: sem caixa, sem filete. É respiro declarado, não
   ausência — e a linha divisória por cima é que sustenta o conjunto. */
.fm-marco { display: flex; flex-direction: column; justify-content: center; padding: .8rem .95rem; }
.fm-marco .vz-rotulo {
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .2em; font-size: .62rem; color: rgba(200, 169, 106, .55);
}
.fm-marco b {
  display: block; margin-top: .2rem; font-weight: 400;
  color: var(--marfim-voile); font-size: .98rem; line-height: 1.35;
}

@media (min-width: 721px) {
  .fm-vizinhas { grid-template-columns: 1fr 1fr; gap: 1rem; }
  /* «Seguinte» espelha: miniatura à direita, texto encostado a ela. */
  .fm-seg { grid-column: 2; flex-direction: row-reverse; text-align: right; }
  .fm-ant { grid-column: 1; }
}

/* ── 10 · Divisor SVG inline (inc/patterns.php) ─────────────── */
.pano-divider { display: block; width: 100%; }

/* ── 11 · Rodapé ────────────────────────────────────────────── */
.rodape { background: var(--noir-tissage); border-top: 1px solid var(--hairline); color: var(--marfim-voile); }
.grelha-rodape {
  display: grid;                                     /* base: uma coluna */
  gap: clamp(1.8rem, 4vw, 3.2rem); padding-block: clamp(2.6rem, 6vw, 4.2rem);
}
.logo-rodape { width: min(240px, 70%); height: auto; }

.rodape .m1 {
  font-family: var(--font-titulo); font-weight: 400; font-size: 1.2rem;
  letter-spacing: .22em; color: var(--marfim-soie); text-transform: uppercase; display: block;
}
.rodape .m2 {
  font-family: var(--font-titulo); text-transform: uppercase; letter-spacing: .56em;
  font-size: .54rem; color: var(--or-champagne); display: block; margin-top: .4rem;
}
.rodape p { font-size: .78rem; color: var(--marfim-voile); max-width: 38ch; margin-top: 1.1rem; }
.rodape h4 {
  font-family: var(--font-titulo); font-weight: 400; text-transform: uppercase;
  letter-spacing: .32em; font-size: .62rem; color: var(--or-champagne); margin-bottom: .9rem;
}
.rodape ul { display: flex; flex-direction: column; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.rodape nav ul, .rodape .nav-2col {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .35rem 1.6rem;
  list-style: none; margin: 0; padding: 0;
}
/* Alvo de toque: no telemóvel estas ligações são a navegação de recurso. */
.rodape li a {
  display: inline-block; padding-block: .5rem;
  font-size: .82rem; color: var(--marfim-voile);
}
.rodape li a:hover { color: var(--marfim-soie); }
/* murmure dá 3,94:1 sobre o tissage azul — abaixo de AA. Aqui é voile. */
.rodape .legal { font-size: .72rem; color: var(--marfim-voile); }
.rodape .arroba { display: block; font-size: .72rem; color: var(--marfim-voile); }
.fim {
  border-top: 1px solid var(--hairline);
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .2em; font-size: .58rem; color: var(--marfim-voile);
}
.fim .molde {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  flex-wrap: wrap; gap: .6rem 1.4rem; padding-block: .9rem;
}
.fim .fim-meio { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; }
.fim a { display: inline-block; padding-block: .4rem; }
.fim a:hover { color: var(--marfim-soie); }
.fim .credito { color: var(--marfim-voile); transition: color .2s; }
.fim .credito:hover { color: var(--or-champagne); }

@media (min-width: 721px) {
  .fim .molde { flex-direction: row; justify-content: space-between; align-items: baseline; text-align: left; }
}
@media (min-width: 821px) {
  .grelha-rodape { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); }
}

/* ── 11c · Visor das placas do acervo ───────────────────────────
   Um <dialog> nativo: armadilha de foco, Esc e inerte sem uma linha de JS.
   Sem JavaScript nunca abre e a placa continua a levar à ficha da Miss. */
.visor {
  width: min(94vw, 720px); max-width: none;
  padding: 0; border: 1px solid var(--hairline);
  background: var(--noir-tissage); color: var(--marfim-soie);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.visor::backdrop { background: rgba(16, 27, 42, .85); }
.visor-fechar {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: var(--marfim-voile); font-size: 1.6rem; line-height: 1;
}
.visor-fechar:hover { color: var(--or-champagne); }

/* Base = telemóvel: imagem em cima, texto por baixo. */
.visor-corpo { display: grid; }
/* `contain` e não `cover`: o arquivo tem retratos, uma imagem apaisada e
   fotografias de grupo. Cortar para caber num rácio fixo decapitava umas e
   apagava a marca de água de outras — que aqui é crédito, não sujidade. */
.visor-imagem {
  margin: 0; background: var(--noir-velours);
  display: flex; flex-direction: column; justify-content: center;
}
.visor-imagem img { width: 100%; height: auto; max-height: 58vh; object-fit: contain; display: block; }
/* O crédito fica ABAIXO da imagem, nunca por cima: sobrepô-lo taparia a
   assinatura do próprio fotógrafo, que é o que ele contratou para lá estar. */
.visor-credito { padding: .55rem .9rem; }
.visor-texto { padding: 1.4rem 1.3rem 1.6rem; }
.visor-ano {
  font-family: var(--font-titulo); font-weight: 300;
  font-size: 2rem; line-height: 1; color: var(--or-champagne);
  font-variant-numeric: tabular-nums;
}
.visor-nome {
  font-weight: 400; font-size: 1.35rem;
  letter-spacing: .06em; margin-top: .3rem;
}
.visor-linha { margin-top: .9rem; color: var(--marfim-voile); line-height: 1.7; font-size: .95rem; }
.visor-apelo {
  margin-top: .9rem; padding-left: .9rem;
  border-left: 1px solid var(--or-champagne);
  font-style: italic; font-size: .88rem; line-height: 1.65; color: var(--marfim-voile);
}
.visor-ficha {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
  background: var(--grenat); color: var(--or-clair);
  font-family: var(--font-texto); font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; font-size: .8rem; padding: .35rem 1.6rem;
}
.visor-ficha:hover, .visor-ficha:focus-visible { background: #93293C; color: var(--marfim-soie); }

@media (min-width: 641px) {
  /* Com retrato, duas colunas; sem retrato, o texto ocupa tudo. */
  .visor-corpo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
  .visor-imagem[hidden] { display: none; }
  .visor-imagem[hidden] + .visor-texto { grid-column: 1 / -1; }
  .visor-texto { padding: 2rem 2rem 2.2rem; }
}

/* ── 11d · Voltar ao topo ───────────────────────────────────────
   Quadrado, 44px, canto inferior direito. Fica fora do fluxo e só
   aparece depois de um ecrã e meio de rolagem — nunca tapa o CTA do hero. */
.ao-topo {
  position: fixed; right: clamp(.8rem, 3vw, 1.6rem); bottom: clamp(.8rem, 3vw, 1.6rem);
  z-index: 90; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23, 39, 58, .88);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(200, 169, 106, .45);
  color: var(--or-champagne); cursor: pointer;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease, background-color .2s ease;
}
.ao-topo.mostra { opacity: 1; visibility: visible; pointer-events: auto; }
.ao-topo:hover { background: var(--or-champagne); color: #101B2A; }
@media (prefers-reduced-motion: reduce) { .ao-topo { transition: none; } }

/* ── 11b · Revelação ao rolar ───────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .mcvl-js .reveal {
    opacity: 0; transform: translateY(30px);
    transition: opacity .8s cubic-bezier(.16, 1, .3, 1),
                transform .8s cubic-bezier(.16, 1, .3, 1);
  }
  .mcvl-js .reveal.is-visible { opacity: 1; transform: translateY(0); }
}

/* ── 12 · Movimento reduzido ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-grenat, .como-remate a, .h-nota a { transition: none; }
}

/* ── 13 · «Urdidura» — página História (page-historia.php) ──────
   Cinco modos de falha, escritos aqui porque não se guardam na cabeça:

   (1) --murmure NÃO entra nesta página. Dá 4,24:1 sobre --indigo-couture e
       falha AA. Todo o texto secundário é --marfim-voile (7,25:1 sobre índigo,
       8,75:1 sobre veludo). Pela mesma razão não se usa .fio-credito nem
       .tear-nota aqui — ambas são --murmure.
   (2) .k (ouro) NÃO entra nos blocos marfim: ouro sobre marfim dá 1,96:1.
       Nos blocos claros o sobrolho é .como-tit, já desenhado escuro.
   (3) O fio NÃO é --fil-indigo. Sobre --indigo-couture daria 1,41:1, e o plano
       proíbe expressamente esse token como portador de informação. Aqui é fio
       de marfim sobre índigo — que é literalmente o que um panu antigo é —
       em --fio-urdidura, 3,49:1 medidos. Nunca escurecer este token.
   (4) A urdidura é UM elemento contínuo por corrida (.cronologia.tecida),
       nunca um segmento por era. Repetida, o arredondamento de subpíxel
       produz costuras visíveis.
   (5) Nada anima na cronologia — o tecido está parado. As três únicas
       revelações da página são os dois respiros e o remate.

   O passo da calha (13 % da largura a 390px) e a mudança de cor do texto
   em 1998 são os dois portadores VISÍVEIS do conceito; o fio é confirmação.
   Se alguém reduzir --calha abaixo de 3rem, a página deixa de contar a
   história no telemóvel, que é onde está o tráfego. */

/* 13.1 — os cinco pisos. Zero JS, zero listeners de scroll. */
.hist-hero { background: var(--noir-velours); }

/* A passagem. Paragens em percentagem da PRÓPRIA secção: a rampa fecha-se
   sempre no fim de «1997», a 390px e a 1440px, e nunca antes do assunto.
   Paragens desiguais de propósito: entre #0B0B0E e #142130 há ~34 níveis no
   canal azul, e uma rampa de degraus iguais lê-se como escada em OLED.
   O radial descentrado quebra as bandas horizontais em curvas e faz trabalho
   compositivo — é uma fonte de luz fora do eixo. */
/* SÓ a rampa linear. Havia um brilho radial decorativo no topo — a sua
   orla criava um bloco mais claro com aresta visível contra o preto do
   hero: era esse o «corte» entre as secções. A rampa segura o veludo até
   16 % e sobe sem nenhuma paragem dura: a emenda com o hero é invisível
   porque as duas superfícies partilham a mesma tinta no ponto de contacto. */
.hist-abertura {
  background-color: var(--indigo-couture);
  background-image:
    linear-gradient(180deg,
      var(--noir-velours) 0, var(--noir-velours) 16%,
      #111C2C 32%, #121E2E 51%, #131F2F 68%, #142030 84%,
      var(--indigo-couture) 100%);
  background-repeat: no-repeat;
}
.hist-indigo { background: var(--indigo-couture); }
.hist-remate { background: var(--noir-velours); border-top: 1px solid var(--hairline); }

/* O divisor de motivo entre índigo e marfim precisa de chão: sem isto
   aparece uma tira de --noir-velours do <body> entre as duas secções. */
.divisor-pano.sobre-indigo { background-color: var(--indigo-couture); }

/* 13.2 — hero */
.hist-hero .molde { padding-block: clamp(3.4rem, 14vw, 8rem) clamp(2.6rem, 10vw, 6rem); }
/* .k é .66rem = 10,56px. 12px é o piso do projeto; aqui sobe. */
.hist-hero .k { font-size: .75rem; letter-spacing: .3em; }
.hist-hero h1 {
  font-weight: 300; font-size: clamp(2.6rem, 11vw, 5.6rem);
  line-height: 1.02; letter-spacing: -.012em;
  margin-top: .9rem; max-width: 12ch; text-wrap: balance;
}
.hist-lede {
  margin-top: clamp(1.4rem, 4vw, 2.2rem); max-width: 42ch;
  font-size: 1.06rem; line-height: 1.75; color: var(--marfim-voile);
}

/* 13.3 — O EIXO CENTRAL (arquitetura do cliente, 2026-08-12)
   Linha do tempo de eixo central alternado: UMA espinha vertical de 1px
   desenhada por ::before no contentor, nós de losango centrados sobre ela,
   e cada era numa linha de duas metades que alternam de lado.
   Base = telemóvel: o eixo encosta à esquerda, porque metades de 50% não
   existem a 390px. A partir de 861px o eixo vai para o centro (left: 50%).
   O tom da espinha: --fil-indigo puro mede 1,45:1 sobre --indigo-couture e
   desaparece — medido quando a primeira urdidura nasceu. Usa-se a família
   do fio visível, na mesma discrição estrutural. */
.cronologia {
  --calha: clamp(3rem, 13vw, 5.5rem);
  --eixo: rgba(181, 172, 156, .38);
  position: relative;
  padding-left: var(--calha);
}
.cronologia::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px;
  background: var(--eixo);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 3%, #000 96%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 3%, #000 96%, transparent 100%);
}

/* O nó: losango de traço ouro centrado sobre o eixo, um por era, alinhado
   com a paragem. Vazado — no panu o motivo é cruzamento de trama. */
.era::before {
  content: ""; position: absolute; z-index: 1;
  left: calc(-1 * var(--calha));          /* 9px centrados no eixo em x=4,5 */
  top: .3rem;
  width: 9px; height: 9px;
  border: 1px solid var(--or-champagne);
  background: var(--indigo-couture);
  transform: rotate(45deg);
}
/* A cabeça do eixo: o nó maior, à entrada da corrida tecida. */
.hist-no { position: absolute; left: -7px; top: -13px; width: 23px; height: 28px; }

/* Os nove nomes, em registo de gravação — versaletes espaçados, sem caixas. */
.fundadores {
  margin-top: 1.4rem; max-width: 46ch;
  font-family: var(--font-titulo); font-weight: 400;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  line-height: 2.1; color: var(--marfim-voile);
}

/* 13.4 — eras: cada uma é uma LINHA do tempo. No telemóvel as metades
   empilham; a partir de 861px dividem-se em 50/50 e alternam de lado. */
.era {
  position: relative;
  display: flex; flex-direction: column; gap: 1.5rem;
  margin-bottom: clamp(4rem, 14vw, 7.5rem);           /* ~120px em escritório */
}
.cronologia > section:last-of-type { margin-bottom: 0; padding-bottom: clamp(2.4rem, 6vw, 3.5rem); }
.lado { min-width: 0; }
/* overflow: hidden é a rede de segurança da marca de água; o dimensionamento
   em cqw (abaixo) é o que garante que ela nunca precisa de ser recortada. */
.lado-texto { position: relative; overflow: hidden; container-type: inline-size; }
.lado-extra:empty { display: none; }

/* O ano monumental, em duas peças (direção do cliente, 2026-08-12):
   — .marca: o ano em tipografia gigante, ouro a 17% de opacidade, marca de
     água por trás do conteúdo. É esta transparência que torna a
     sobreposição segura: texto sobre um fantasma lê-se; sobre ouro sólido
     era a colisão que já corrigimos uma vez.
   — .paragem: o mesmo ano em corpo pequeno e ouro pleno (7,2:1), junto ao
     nó do fio. É a paragem legível — a marca de água é cenografia, e
     cenografia não pode ser o único portador do ano.
   NOTA fora da cronologia (.hist-remate), .era-ano segue sendo o numeral
   sólido grande: o remate é conversão, não marca de água. */
.era-ano {
  display: block;
  font-family: var(--font-titulo); font-weight: 300;
  font-size: clamp(3.6rem, 16vw, 8.5rem); line-height: .84;
  letter-spacing: -.015em; color: var(--or-champagne);
  font-variant-numeric: proportional-nums;   /* não tabular: a 136px o «1» abre buraco */
}
.cronologia .era-ano { font-size: 1rem; line-height: 1.2; }
/* A marca de água vive DENTRO do bloco de texto (z-index 0, 10 %), atrás do
   parágrafo — e o overflow:hidden do bloco garante que não vaza para as
   outras áreas da tela. O tamanho é relativo ao bloco, não à janela. */
/* O tamanho é função da LARGURA DO BLOCO (cqw), não da janela: quatro
   algarismos de Jost 300 medem ~2,1em de largura, logo 42cqw enche ~88 %
   da metade e nunca passa da aresta. Nada de offsets negativos — foi o
   -.12em que entregava o glifo ao recorte. A primeira declaração é o
   recurso para navegadores sem container queries. */
.cronologia .era-ano .marca {
  position: absolute; top: 0; right: 0; z-index: 0;
  font-size: clamp(4.8rem, 13vw, 9.5rem);
  font-size: min(42cqw, 10.5rem);
  line-height: .82;
  letter-spacing: -.02em; color: var(--or-champagne); opacity: .10;
  pointer-events: none; user-select: none; white-space: nowrap;
  font-variant-numeric: proportional-nums;
}
.cronologia .era-ano .marca.palavra {
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  font-size: min(23cqw, 6.5rem);
  text-transform: uppercase; letter-spacing: .02em;
}
.cronologia .era-ano .paragem {
  display: inline-block; position: relative; z-index: 1;
  font-family: var(--font-titulo); font-weight: 400;
  font-size: .95rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--or-champagne);
}
/* o conteúdo lê-se POR CIMA da marca de água */
.era .prosa, .era .nota-arquivo, .era .onze, .era .teada, .era .fundadores {
  position: relative; z-index: 1;
}

.prosa { margin-top: clamp(1.2rem, 3.5vw, 2rem); max-width: 48ch; }
.prosa p { font-size: 1rem; line-height: 1.78; color: var(--marfim-soie); }
.prosa p + p { margin-top: 1.05rem; }
/* Antes de 1998 o texto é secundário: o material muda no mesmo ponto em que
   muda a estrutura. É o segundo portador visível do conceito. */
.era-antes .prosa p { color: var(--marfim-voile); }
.prosa .baixo {
  margin-top: clamp(2.2rem, 7vw, 3.4rem);
  font-size: 1.1rem; font-style: italic; color: var(--marfim-voile);
}
/* Sem recuo: na corrida de antes de 1998 não há costuras contra as quais
   medir um recuo, e um recuo sem régua lê-se como desarrumação. */
.era-1997 .prosa { max-width: 26ch; }
/* Uma capitular na página inteira, em marfim: o ouro está reservado aos marcos. */
.era-fundacao .prosa > p:first-child::first-letter {
  float: left; font-family: var(--font-titulo); font-weight: 300;
  font-size: 3.4em; line-height: .78; padding-right: .1em; margin-top: .06em;
  color: var(--marfim-soie);
}
.nome-proprio {
  font-family: var(--font-titulo); font-weight: 400;
  text-transform: uppercase; letter-spacing: .08em;
}
.prosa .ligacao {
  display: inline-block; padding-block: .35rem;
  color: var(--marfim-soie); border-bottom: 1px solid var(--or-champagne);
}

/* 13.5 — nota de arquivo: onde não há fotografia não há moldura vazia.
   Quatro na página, todas com texto diferente. */
.nota-arquivo {
  margin-top: clamp(1.4rem, 4vw, 2.2rem); max-width: 30ch;
  padding-top: .6rem; border-top: 1px solid var(--hairline);
  font-size: .82rem; line-height: 1.6; color: var(--marfim-voile);
}
.nota-arquivo b {
  display: block; margin-bottom: .35rem;
  font-family: var(--font-titulo); font-weight: 400;
  text-transform: uppercase; letter-spacing: .2em;
  font-size: .75rem; color: var(--or-champagne);   /* 12px — o piso do projeto */
}
.nota-arquivo a {
  color: var(--marfim-soie); border-bottom: 1px solid var(--hairline);
  padding-block: .3rem;
}
.nota-arquivo a:hover { border-bottom-color: var(--or-champagne); }

/* 13.6 — as onze: nomes, não algarismos */
.onze {
  display: flex; flex-wrap: wrap; gap: 0 1.6rem;
  margin: clamp(1.4rem, 4vw, 2rem) 0 0; padding: 0; list-style: none;
  max-width: 34ch;
}
.onze a { display: block; padding-block: .35rem; }
.onze .oa {
  font-family: var(--font-titulo); font-weight: 300; font-size: .95rem;
  color: var(--or-champagne); font-variant-numeric: tabular-nums;
}
.onze .on {
  font-family: var(--font-titulo); font-weight: 400; font-size: 1.05rem;
  letter-spacing: .06em; color: var(--marfim-soie);
  border-bottom: 1px solid transparent;
}
.onze a:hover .on, .onze a:focus-visible .on { border-bottom-color: var(--or-champagne); }

/* 13.7 — as duas teadas. `large` e não `mcvl-retrato`: mcvl-retrato é
   add_image_size(480,640,TRUE), recorte duro 3:4, e cortaria a apaisada e as
   assinaturas de fotógrafo. Sem object-fit e sem aspect-ratio: as imagens
   entram na proporção verdadeira. */
.teada { display: block; margin-top: 0; width: min(100%, 24rem); }
/* Proporção fixa 4/5: as fotografias do arquivo têm formatos mistos, e a
   moldura uniforme é o que as faz ler como uma série — nada transborda
   para a coluna do texto. */
.teada-caixa {
  display: block; padding-inline: 8px;
  aspect-ratio: 4 / 5; overflow: hidden;
  border-inline: 1px solid rgba(200, 169, 106, .55);       /* as duas ourelas */
}
.teada-caixa img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: top center;
  filter: grayscale(1) sepia(.16) contrast(1.06) brightness(.95);
}
.teada figcaption { margin-top: .7rem; font-size: .82rem; line-height: 1.5; color: var(--marfim-voile); }
.teada-credito {
  display: block; margin-top: .4rem;
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .14em; font-size: .75rem; color: var(--marfim-voile);
}
/* O hover RETIRA o nosso tratamento, não acrescenta efeito à pessoa.
   Nunca scale, nunca zoom, nunca saturação acima de 1. */
@media (prefers-reduced-motion: no-preference) {
  .teada-caixa { transition: border-color .3s ease; }
  .teada-caixa img { transition: filter .5s ease; }
}
@media (hover: hover) {
  a.teada:hover .teada-caixa img { filter: none; }
  a.teada:hover .teada-caixa { border-color: var(--or-champagne); }
}
a.teada:focus-visible .teada-caixa img { filter: none; }
a.teada:focus-visible .teada-caixa { border-color: var(--or-champagne); }

/* 13.8 — a junta. Uma só na página; parte do x da urdidura e morre antes da
   margem. Uma régua a toda a largura é o objeto mais simétrico que existe. */
.junta-era {
  width: min(62%, 30rem);
  margin-top: clamp(2.6rem, 8vw, 5rem);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 58%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 58%, transparent 100%);
}

/* 13.9 — respiros em marfim. .spread-banda só tem border-block: o padding
   vertical vem daqui, não do .mandato (que esta página não usa). */
.respiro .molde { padding-block: clamp(2.8rem, 9vw, 5.6rem); }
.respiro .como-tit { font-size: .78rem; }   /* .72rem = 11,52px, abaixo do piso */
.respiro .m-corpo { max-width: 52ch; }
.respiro .m-corrente { margin-top: clamp(1.8rem, 5vw, 2.6rem); }

/* Ficha própria: .como/.como-lista/.l são todos descendentes de .como, e .como
   traz filete granada, fundo tingido, padding e — a ≥861px — até 96px de
   margem escrita para a grelha do .mandato. Dez linhas em vez de um enxerto. */
.objetivos { margin: clamp(1.8rem, 5vw, 2.6rem) 0 0; max-width: 46rem; }
.objetivos .l { border-top: 1px solid rgba(42, 58, 94, .22); padding: .7rem 0; }
.objetivos dt {
  font-family: var(--font-titulo); font-weight: 400;
  text-transform: uppercase; letter-spacing: .14em; font-size: .78rem;
  color: rgba(11, 11, 14, .72);
}
.objetivos dd { margin: .25rem 0 0; font-size: .98rem; line-height: 1.6; color: rgba(11, 11, 14, .85); }
.objetivos .destaque {
  border-top-color: var(--grenat); background: rgba(126, 27, 44, .06);
  margin-inline: -1rem; padding-inline: 1rem;
}
.objetivos .destaque dd { font-size: 1.08rem; color: var(--noir-velours); }

/* 13.10 — remate: o bloco de conversão do eixo passado (Plano §3) */
.hist-remate .molde { padding-block: clamp(3rem, 10vw, 6.4rem); }
.hist-frase {
  margin-top: 1.2rem; max-width: 34ch;
  font-size: clamp(1.3rem, 4vw, 1.9rem); line-height: 1.35; color: var(--marfim-soie);
}
.hist-ctas {
  display: flex; flex-direction: column; gap: 1rem;
  align-items: flex-start; margin-top: clamp(1.6rem, 4vw, 2.2rem);
}
/* O segundo CTA. .btn-linha não existe no tema; isto existe. */
.btn-sec {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-titulo); font-weight: 400;
  text-transform: uppercase; letter-spacing: .2em; font-size: .78rem;
  color: var(--marfim-voile); border-bottom: 1px solid var(--hairline);
}
.btn-sec:hover { color: var(--marfim-soie); border-bottom-color: var(--or-champagne); }
.hist-lema {
  margin-top: clamp(1.8rem, 5vw, 2.6rem);
  font-style: italic; font-size: 1.02rem; color: var(--marfim-voile);
}

/* ── 13.11 · Crescimento. Nenhum breakpoint novo: 601, 721, 821 e 861 já
   estão em uso no tema. Nunca max-width para layout. ──────────── */
@media (min-width: 601px) {
  .onze { max-width: 42ch; }
}

@media (min-width: 721px) {
  .hist-ctas { flex-direction: row; align-items: center; gap: 1.8rem; }
}

@media (min-width: 821px) {
  .respiro .m-frase, .respiro .m-abre, .respiro .m-corpo,
  .respiro .m-corrente, .respiro .objetivos { margin-left: clamp(0rem, 6vw, 6.5rem); }
}

/* O EIXO CENTRAL ALTERNADO. Cada era é uma linha flex de duas metades de
   50 %; a alternância é matemática — nth-of-type ímpar: texto à esquerda;
   par: texto à direita (row-reverse). A sequência atravessa as duas
   corridas: L·R na abertura, L·R·L na tecida. */
@media (min-width: 861px) {
  /* separa as duas faixas de motivo por mais de um viewport de 900px */
  .respiro .molde { padding-block: clamp(4rem, 8vw, 7rem); }

  .cronologia { padding-left: 0; }
  .cronologia::before { left: 50%; }
  .hist-no { left: calc(50% - 11.5px); }

  .era { flex-direction: row; align-items: flex-start; gap: 0; }
  .era::before { left: calc(50% - 4.5px); }
  .cronologia > section:nth-of-type(even) { flex-direction: row-reverse; }

  .lado { width: 50%; flex: 0 0 50%; padding-inline: clamp(1.8rem, 4vw, 4rem); }
  .lado-extra { display: flex; flex-direction: column; gap: 1.4rem; }
  .lado-extra:empty { display: block; }   /* a metade vazia guarda o lugar do eixo */

  .era-90 .prosa { max-width: 46ch; }
  .era-coroas .prosa { max-width: 38ch; }
  .era-hoje .prosa { max-width: 34ch; }
  .onze { max-width: none; }
}

/* ── 13b · Respiro com ilustração (História) ────────────────────
   Base = telemóvel: texto, depois a chapa. A partir do tablet a chapa
   passa à direita, alinhada ao topo do bloco de texto. */
.respiro-grelha { display: grid; gap: clamp(2rem, 6vw, 3.2rem); }
.respiro-figura { margin: 0; }
.respiro-figura img {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(42, 58, 94, .25);
}
.respiro-figura figcaption {
  margin-top: .7rem; max-width: 34ch;
  font-size: .78rem; line-height: 1.6; font-style: italic;
  color: rgba(11, 11, 14, .62);          /* 7,4:1 sobre marfim */
}
@media (min-width: 861px) {
  .respiro-grelha {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(2.4rem, 5vw, 4.5rem); align-items: start;
  }
  /* Sem sticky: a fotografia deslizava a acompanhar o scroll e lia-se
     como defeito («a foto ficou mexida»), não como recurso. Fica parada. */
}

/* ── 14 · Atividades ─────────────────────────────────────────────
   Base = telemóvel: uma coluna. As fotografias são de telemóvel e de
   qualidades mistas — a moldura 3/2 uniforme é o que as faz série. */
.ativ-cab { padding-block: clamp(2.4rem, 6vw, 4rem) clamp(1.8rem, 5vw, 2.6rem); }
.ativ-cab h1 {
  font-weight: 300; font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.05; margin-top: .7rem;
}
.ativ-intro {
  margin-top: 1.1rem; max-width: 54ch;
  color: var(--marfim-voile); font-size: 1rem; line-height: 1.7;
}

.ativ-secao { padding-block: clamp(2rem, 6vw, 3.6rem); }
.arquivo-ativ { border-top: 1px solid var(--hairline); }
.ativ-titulo {
  font-family: var(--font-titulo); font-weight: 400;
  text-transform: uppercase; letter-spacing: .3em; font-size: .78rem;
  color: var(--or-champagne); margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
}
.ativ-vazio { max-width: 52ch; color: var(--marfim-voile); line-height: 1.75; }
.ativ-vazio a { color: var(--marfim-soie); border-bottom: 1px solid var(--or-champagne); padding-block: .25rem; }

/* O destaque: o evento mais recente como spread — imagem e texto lado a
   lado a partir do tablet, empilhados no telemóvel. */
.ativ-destaque { border-top: 1px solid var(--hairline); padding-block: clamp(2.2rem, 6vw, 4rem); }
.destaque-grelha { display: grid; gap: clamp(1.4rem, 4vw, 3rem); }
.destaque-foto {
  display: block; aspect-ratio: 16 / 11; overflow: hidden;
  background: var(--noir-tissage); border: 1px solid rgba(42, 58, 94, .35);
}
.destaque-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.destaque-meta {
  margin-top: 1rem; font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .2em; font-size: .68rem; color: var(--or-champagne);
}
.destaque-nome { margin-top: .5rem; font-weight: 300; font-size: clamp(1.6rem, 4.4vw, 2.4rem); line-height: 1.15; max-width: 20ch; }
.destaque-nome a:hover { color: var(--or-clair); }
.destaque-resumo { margin-top: 1rem; max-width: 46ch; }
.destaque-resumo p { color: var(--marfim-voile); font-size: .98rem; line-height: 1.75; }
.destaque-liga {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: .8rem;
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .22em; font-size: .68rem; color: var(--or-champagne);
  border-bottom: 1px solid var(--or-champagne);
}
.destaque-liga:hover { color: var(--marfim-soie); border-color: var(--marfim-soie); }
@media (min-width: 861px) {
  .destaque-grelha { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
}

/* As temporadas: o ano em ouro a ancorar, entradas como linhas de programa. */
.temporada { display: grid; gap: .6rem 0; padding-block: clamp(1.4rem, 4vw, 2rem); }
.temporada + .temporada { border-top: 1px solid var(--hairline); }
.temporada-ano {
  font-family: var(--font-titulo); font-weight: 300;
  font-size: clamp(2.2rem, 7vw, 3.2rem); line-height: 1; color: var(--or-champagne);
  font-variant-numeric: proportional-nums;
}
.temporada-lista { display: grid; }
.ativ-linha {
  display: grid; grid-template-columns: minmax(0, 108px) minmax(0, 1fr);
  gap: 1rem; align-items: center;
  padding-block: .9rem; border-top: 1px solid rgba(42, 58, 94, .28);
}
.temporada-lista .ativ-linha:first-child { border-top: 0; }
.ativ-mini {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--noir-tissage); border: 1px solid rgba(42, 58, 94, .35);
}
.ativ-mini img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.ativ-meta {
  display: block; font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .18em; font-size: .64rem; color: var(--or-champagne);
}
.ativ-nome {
  display: block; margin-top: .25rem;
  font-family: var(--font-titulo); font-weight: 400;
  font-size: 1.12rem; line-height: 1.3; letter-spacing: .02em;
  color: var(--marfim-soie);
}
a.ativ-linha:hover .ativ-nome, a.ativ-linha:focus-visible .ativ-nome { color: var(--or-clair); }
@media (prefers-reduced-motion: no-preference) {
  .ativ-mini img, .destaque-foto img { transition: transform .5s ease; }
  a.ativ-linha:hover .ativ-mini img, a.destaque-foto:hover img { transform: scale(1.04); }
}
@media (min-width: 861px) {
  .temporada { grid-template-columns: minmax(0, 2fr) minmax(0, 9fr); gap: 0 clamp(1.6rem, 4vw, 3rem); }
  .ativ-linha { grid-template-columns: minmax(0, 148px) minmax(0, 1fr); gap: 1.4rem; }
}

/* A página de um evento — cobertura de gala, registo de revista. */
.ativ-una { padding-block: clamp(2.2rem, 6vw, 4rem) clamp(3rem, 8vw, 5rem); }
.au-migalha { text-align: center; }
.ativ-una .k a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid transparent; }
.ativ-una .k a:hover { border-bottom-color: var(--or-champagne); }

/* O cabeçalho é uma manchete: centrado, meta em ouro espaçado, título monumental. */
.au-cab { margin-top: .6rem; text-align: center; }
.au-meta {
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: 2.5px; font-size: .74rem; color: var(--or-champagne);
}
.au-titulo {
  font-weight: 300; font-size: clamp(2rem, 5.6vw, 3.8rem);
  line-height: 1.08; letter-spacing: -.005em; text-wrap: balance;
  margin: .7rem auto 0; max-width: 22ch;
}

/* O deque: a entrada centrada sob a manchete. */
.au-texto { margin-top: clamp(1.4rem, 3.5vw, 2.2rem); }
.au-texto > p {
  max-width: 52ch; margin-inline: auto; text-align: center;
  color: var(--marfim-voile); line-height: 1.75;
}
.au-texto > p:first-child {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.7;
  color: var(--marfim-soie);
}
.au-texto h2 {
  margin-top: clamp(2rem, 5vw, 3rem); text-align: center;
  font-weight: 400; text-transform: uppercase;
  letter-spacing: .3em; font-size: .78rem; color: var(--or-champagne);
}

/* O line-up: grelha de atrações, o nome à cabeça de cada uma.
   Sem marcadores — a hierarquia é tipográfica, o fio de ouro é o palco. */
.au-texto ul {
  margin: clamp(1.2rem, 3vw, 1.8rem) auto 0; padding: 0; list-style: none;
  max-width: 64rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 2rem;
}
.au-texto li {
  padding-top: .9rem;
  border-top: 1px solid rgba(200, 169, 106, .3);
  color: var(--marfim-voile); line-height: 1.65; font-size: .95rem;
}
.au-texto li b {
  display: block; margin-bottom: .35rem;
  font-family: var(--font-titulo); font-weight: 400;
  font-size: 1.25rem; letter-spacing: .04em; color: var(--marfim-soie);
}

/* A exposição: sala própria, mais funda que o corpo, fotografias inteiras.
   Colunas de altura natural — cartaz é cartaz, retrato é retrato. */
.au-expo {
  margin-top: clamp(2.2rem, 6vw, 3.5rem);
  padding-block: clamp(2rem, 6vw, 3.5rem);
  background: #0C1420;                     /* um degrau abaixo do veludo azul */
  border-block: 1px solid var(--hairline);
}
.au-galeria { columns: 1; column-gap: 24px; }
.au-foto { margin: 0 0 24px; break-inside: avoid; }
.au-foto a { display: block; }
.au-foto img {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(42, 58, 94, .3); border-radius: 2px;
}
.au-foto figcaption {
  margin-top: .45rem; font-size: .76rem; line-height: 1.5;
  color: var(--marfim-voile);
}
.au-galeria.uma { max-width: 34rem; margin-inline: auto; }
@media (min-width: 721px) { .au-galeria { columns: 2; } }

.ativ-una .fm-vizinhas { margin-top: clamp(2rem, 5vw, 3rem); }

/* Obras citadas dentro do texto: itálico, a convenção editorial para
   títulos de filme e livro. O Jost tem itálico verdadeiro (300–600), por
   isso não há inclinação sintética. Substitui as guillemets, que em corpo
   de manchete liam-se como ornamento e não como marca. */
.au-texto i, .destaque-resumo i { font-style: italic; color: var(--marfim-soie); }

/* ── 15 · Regulamento ────────────────────────────────────────────
   Documento jurídico: cabeçalho escuro curto, corpo claro para a leitura
   longa, índice fixo ao lado no escritório. O ouro não entra como texto
   sobre o marfim (1,96:1) — os acentos são granada. */
.reg-cab, .pag-cab { padding-block: clamp(2.4rem, 6vw, 3.6rem) 0; }
.reg-cab h1, .pag-cab h1 {
  font-weight: 300; font-size: clamp(2rem, 5.6vw, 3.2rem);
  line-height: 1.06; margin-top: .7rem;
}
.reg-lede, .pag-lede {
  margin-top: 1.1rem; max-width: 52ch;
  color: var(--marfim-voile); font-size: 1.04rem; line-height: 1.7;
}
/* A cláusula de língua nunca é letra miúda: fio de ouro à esquerda e
   corpo de leitura. É a primeira coisa que uma candidata tem de saber. */
.reg-lingua {
  margin-top: clamp(1.4rem, 4vw, 2.2rem); max-width: 60ch;
  padding: 1rem 1.2rem;
  border-left: 2px solid var(--or-champagne);
  background: rgba(200, 169, 106, .06);
  font-size: .95rem; line-height: 1.7; color: var(--marfim-voile);
}
.reg-lingua b { color: var(--marfim-soie); font-weight: 500; }
.reg-cab .divisor-pano, .pag-cab .divisor-pano { margin-top: clamp(2rem, 5vw, 3rem); }

/* O corpo, em marfim: oito artigos são uma leitura, não uma vitrina. */
.reg-corpo, .pag-corpo {
  background: var(--marfim-soie);
  color: var(--noir-velours);
  padding-block: clamp(2.4rem, 7vw, 4.5rem) clamp(3rem, 8vw, 5.5rem);
}
.reg-grelha { display: grid; gap: clamp(2rem, 5vw, 3rem); }

/* Índice: lista no telemóvel, coluna fixa a partir do tablet largo. */
.reg-indice-tit {
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .26em; font-size: .68rem; color: var(--grenat);
  margin-bottom: .8rem;
}
.reg-indice ol { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.reg-indice a {
  display: flex; align-items: baseline; gap: .7rem; min-height: 44px;
  padding-block: .3rem; border-top: 1px solid rgba(42, 58, 94, .22);
  color: rgba(16, 27, 42, .8);
}
.reg-indice li:first-child a { border-top: 0; }
.reg-indice a:hover { color: var(--grenat); }
.ri-n {
  font-family: var(--font-titulo); font-weight: 400; font-size: .8rem;
  color: var(--grenat); min-width: 1.1em;
}
.ri-t { font-size: .92rem; line-height: 1.4; }

/* Os artigos. */
.art { padding-block: clamp(1.6rem, 4vw, 2.4rem); border-top: 1px solid rgba(42, 58, 94, .22); }
.reg-artigos > .art:first-child { border-top: 0; padding-top: 0; }
.art-fr {
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .2em; font-size: .66rem; color: var(--grenat);
}
.art-pt {
  font-weight: 400; font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.25; margin-top: .4rem; color: var(--noir-velours);
}
.art p { margin-top: .9rem; max-width: 62ch; color: rgba(16, 27, 42, .82); line-height: 1.8; }
.art b { font-weight: 500; color: var(--noir-velours); }
.art ul[class], .art ul { margin: .9rem 0 0; padding: 0; list-style: none; max-width: 62ch; }
.art li {
  position: relative; padding: .5rem 0 .5rem 1.4rem;
  border-top: 1px solid rgba(42, 58, 94, .16);
  color: rgba(16, 27, 42, .82); line-height: 1.7;
}
.art li:first-child { border-top: 0; }
/* o nó do panu como marcador — a mesma gramática do resto do site */
.art li::before {
  content: ""; position: absolute; left: .15rem; top: 1.15rem;
  width: 6px; height: 6px; border: 1px solid var(--grenat);
  transform: rotate(45deg);
}

/* A cláusula de fecho, agora sobre marfim. */
.reg-lingua.fim {
  margin-top: clamp(2rem, 5vw, 3rem);
  border-left-color: var(--grenat);
  background: rgba(126, 27, 44, .05);
  color: rgba(16, 27, 42, .82);
}
.reg-lingua.fim b { color: var(--noir-velours); }

.reg-remate, .pag-remate {
  margin-top: clamp(2rem, 5vw, 3rem); padding-top: clamp(1.4rem, 4vw, 2rem);
  border-top: 1px solid rgba(42, 58, 94, .22);
}
.reg-remate p, .pag-remate p {
  font-family: var(--font-titulo); font-weight: 300;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--noir-velours);
}
.reg-remate .btn-grenat, .pag-remate .btn-grenat { margin-top: 1rem; }

@media (min-width: 861px) {
  .reg-grelha { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(2rem, 5vw, 4rem); }
  .reg-indice { position: sticky; top: 7.5rem; align-self: start; }
  .reg-remate .btn-grenat, .pag-remate .btn-grenat { display: inline-block; width: auto; }
}

/* ── 16 · Páginas de conteúdo (Comité, Candidatura, Patrocínios, Apoiar, Contacto) ──
   Reutilizam o ritmo do Regulamento: cabeçalho escuro, divisor dourado,
   corpo em marfim. Sobre marfim o acento é granada — nunca ouro. */
.pag-corpo { --pag-gap: clamp(2.5rem, 4vw, 4.5rem); }
.pag-corpo .molde > * + * { margin-top: clamp(2rem, 5vw, 3rem); }
.pag-bloco { border-top: 1px solid rgba(42, 58, 94, .22); padding-top: clamp(1.4rem, 4vw, 2rem); }
.pag-bloco:first-child { border-top: 0; padding-top: 0; }
.pag-tit {
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .26em; font-size: .68rem; color: var(--grenat);
}
.pag-h2 {
  font-weight: 300; font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: 1.15; margin-top: .6rem; color: var(--noir-velours); max-width: 24ch;
}
.pag-corpo p { max-width: 62ch; color: rgba(16, 27, 42, .82); line-height: 1.8; margin-top: .9rem; }
.pag-corpo p b, .pag-corpo b { font-weight: 500; color: var(--noir-velours); }
.pag-corpo a:not(.btn-grenat):not(.pag-liga) {
  color: var(--noir-velours); border-bottom: 1px solid var(--grenat); padding-block: .2rem;
}
ul.pag-lista { margin: 1rem 0 0; padding: 0; list-style: none; max-width: 62ch; }
.pag-lista li {
  position: relative; padding: .55rem 0 .55rem 1.4rem;
  border-top: 1px solid rgba(42, 58, 94, .16);
  color: rgba(16, 27, 42, .82); line-height: 1.7;
}
.pag-lista li:first-child { border-top: 0; }
.pag-lista li::before {
  content: ""; position: absolute; left: .15rem; top: 1.2rem;
  width: 6px; height: 6px; border: 1px solid var(--grenat); transform: rotate(45deg);
}

/* Ficha de rótulo/valor, como a «Como se entra» da home mas sobre marfim liso. */
.pag-ficha { margin-top: 1.2rem; max-width: 46rem; display: grid; gap: .6rem; }
.pag-ficha .l {
  background: rgba(42, 58, 94, .045);
  border-left: 2px solid rgba(126, 27, 44, .5);
  padding: .85rem 1.1rem;
}
.pag-ficha dt {
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .14em; font-size: .74rem; color: rgba(16, 27, 42, .72);
}
.pag-ficha dd { margin: .25rem 0 0; font-size: .96rem; line-height: 1.6; color: rgba(16, 27, 42, .86); }

/* Níveis de patrocínio: cartões que não são iguais — o valor manda no peso. */
.niveis { display: grid; gap: 1.2rem; margin-top: 1.4rem; }
.nivel {
  border-top: 2px solid var(--grenat); padding: 1.1rem 1.2rem 1.3rem;
  background: rgba(42, 58, 94, .045);
}
.nivel-nome {
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .2em; font-size: .72rem; color: var(--grenat);
}
.nivel-valor {
  font-family: var(--font-titulo); font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; margin-top: .3rem;
  color: var(--noir-velours);
}
.nivel ul { margin: .9rem 0 0; padding: 0; list-style: none; }
.nivel li {
  padding: .38rem 0; border-top: 1px solid rgba(42, 58, 94, .16);
  font-size: .9rem; line-height: 1.55; color: rgba(16, 27, 42, .8);
}
.nivel li:first-child { border-top: 0; }
@media (min-width: 721px)  { .niveis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1121px) { .niveis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Canais de contacto. */
.canais { display: grid; gap: 1.2rem; margin-top: 1.2rem; }
.canal { border-top: 1px solid rgba(42, 58, 94, .22); padding-top: .9rem; }
.canal-rot {
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .2em; font-size: .66rem; color: var(--grenat);
}
.canal-val { margin-top: .35rem; font-size: 1rem; line-height: 1.5; }
.canal-val a { display: inline-block; min-height: 44px; line-height: 1.6; }
@media (min-width: 721px) { .canais { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2.4rem; } }

/* O manifesto: quatro pedras fundadoras, não uma lista de compras.
   Sem marcadores, corpo maior, e um filete por cima de cada uma — uma
   lista confere-se, um manifesto absorve-se. */
ol.manifesto { margin: clamp(1.4rem, 4vw, 2.2rem) 0 0; padding: 0; list-style: none; max-width: 34ch; }
.manifesto li {
  padding: clamp(1rem, 2.6vw, 1.5rem) 0;
  border-top: 1px solid rgba(42, 58, 94, .22);
  font-family: var(--font-titulo); font-weight: 300;
  font-size: clamp(1.12rem, 1.9vw, 1.42rem); line-height: 1.4;
  color: var(--noir-velours);
}
.manifesto li:first-child { border-top: 0; padding-top: 0; }
ol.manifesto { margin-top: clamp(1.8rem, 4.5vw, 2.6rem); }
.manifesto li:last-child { padding-bottom: 0; }
@media (min-width: 861px) { .manifesto { max-width: 42ch; } }

/* «Hoje» herda a gravidade de «1998»: a mesma largura, os mesmos cartões.
   A passagem de um para o outro é um desdobramento, não uma quebra. */
.secao-hoje .hoje-gente {
  font-family: var(--font-titulo); font-weight: 300;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem); line-height: 1.5;
  color: var(--noir-velours); max-width: 42ch;
}
.secao-hoje .hoje-gente b { font-weight: 400; color: var(--grenat); }
.organigrama { display: grid; gap: .6rem; margin: clamp(1.4rem, 4vw, 2rem) 0 0; }
.organigrama .l {
  background: rgba(42, 58, 94, .045);
  border-left: 2px solid rgba(126, 27, 44, .5);
  padding: .85rem 1.1rem;
}
.organigrama dt {
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .14em; font-size: .72rem; color: rgba(16, 27, 42, .72);
}
.organigrama dd { margin: .25rem 0 0; font-size: .95rem; line-height: 1.55; color: rgba(16, 27, 42, .84); }
.secao-hoje .hoje-juri { margin-top: clamp(1.4rem, 3.5vw, 2rem); max-width: 62ch; }
@media (min-width: 721px) { .organigrama { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1121px) { .organigrama { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Aviso honesto — o que ainda não existe, dito sem letra miúda. */
.pag-aviso {
  margin-top: clamp(1.6rem, 4vw, 2.4rem); max-width: 60ch;
  padding: 1rem 1.2rem; border-left: 2px solid var(--grenat);
  background: rgba(126, 27, 44, .05);
  font-size: .93rem; line-height: 1.7; color: rgba(16, 27, 42, .82);
}
.pag-aviso b { color: var(--noir-velours); }

/* O lema fica em francês porque vai impresso no cartaz; a glosa portuguesa
   legenda-o. O plano pedia 60 % de opacidade — medido, dá 3,60:1 sobre o
   noir-velours e falha AA. A 75 % dá 4,89:1 e o efeito mantém-se. */
.lema-fr {
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
  font-family: var(--font-titulo); font-weight: 300;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem); line-height: 1.4;
  color: var(--or-champagne); max-width: 44ch; text-wrap: balance;
}
.lema-glosa {
  margin-top: .5rem;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: .68rem; line-height: 1.6;
  color: rgba(181, 172, 156, .75);
}

/* ── Contacto ────────────────────────────────────────────────────
   Sem formulário: cada assunto é uma ligação que já leva o assunto
   escrito. Faz o trabalho do seletor sem fingir um envio. */
.contacto-assuntos { margin-top: 1.2rem; }
.assunto {
  display: block; padding: .95rem 0;
  border-top: 1px solid rgba(42, 58, 94, .22);
  color: inherit;
}
.assunto:first-child { border-top: 0; }
.assunto-rot {
  display: block; font-family: var(--font-titulo); font-weight: 400;
  font-size: 1.05rem; line-height: 1.3; color: var(--noir-velours);
}
.assunto-txt {
  display: block; margin-top: .3rem; max-width: 56ch;
  font-size: .92rem; line-height: 1.65; color: rgba(16, 27, 42, .74);
}
.assunto:hover .assunto-rot,
.assunto:focus-visible .assunto-rot { color: var(--grenat); }
.assunto-rot::after { content: " →"; color: var(--grenat); }
.assunto-nota {
  margin-top: 1.2rem; font-size: .88rem; color: rgba(16, 27, 42, .7);
}

/* ── Patrocínios: o nome francês do nível ao lado do português. ── */
/* .5 de alfa dava 3,24:1 sobre o fundo do cartão — falha AA a 11,5px.
   .65 dá 4,97:1 e o nome francês continua secundário. */
.nivel-fr {
  margin-left: .5em; letter-spacing: .12em;
  color: rgba(16, 27, 42, .65); text-transform: none; font-style: italic;
}

/* ── O Comité: os nove fundadores. Nomes, não cartões — não há
   fotografias de 1998 e um retrato genérico seria pior que nada. ── */
ul.assinaturas {
  margin: 1.2rem 0 0; padding: 0; list-style: none;
  display: grid; gap: .6rem;
}
.assinaturas li {
  background: rgba(42, 58, 94, .045);
  padding: .8rem 1rem;
  font-family: var(--font-titulo); font-weight: 400;
  font-size: 1.02rem; line-height: 1.35; color: var(--noir-velours);
}
.assinaturas-nota { margin-top: 1.1rem; font-size: .95rem; color: rgba(16, 27, 42, .74); }
@media (min-width: 601px) {
  .assinaturas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}
@media (min-width: 1121px) {
  .assinaturas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Apoiar: três maneiras, não três preços. O valor não domina. ── */
.apoios { display: grid; gap: 1.2rem; margin-top: 1.4rem; }
.apoio {
  border-top: 2px solid var(--grenat); padding: 1.1rem 1.2rem 1.3rem;
  background: rgba(42, 58, 94, .045);
}
.apoio-rot {
  font-family: var(--font-titulo); text-transform: uppercase;
  letter-spacing: .2em; font-size: .72rem; color: var(--grenat);
}
.apoio-val {
  font-family: var(--font-titulo); font-weight: 300;
  font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.1; margin-top: .3rem;
  color: var(--noir-velours);
}
.apoio-val span {
  display: block; margin-top: .3rem;
  font-family: var(--font-corpo); font-size: .78rem; letter-spacing: .04em;
  text-transform: none; color: rgba(16, 27, 42, .66);
}
/* `:not([class])` porque `.apoio p` (0,1,1) vencia `.apoio-val` (0,1,0)
   e achatava o valor até ao tamanho do corpo. Só o parágrafo descritivo
   é que encolhe. */
.apoio p:not([class]) { font-size: .93rem; }
/* Os cartões medem o mesmo; as ligações têm de assentar na mesma linha,
   senão a coluna mais curta parece por acabar. */
.apoio { display: flex; flex-direction: column; }
.apoio > a:last-child { display: inline-block; margin-top: auto; padding-top: 1rem; align-self: start; }
.apoio .btn-grenat { width: 100%; text-align: center; }
@media (min-width: 721px) {
  .apoios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .apoio .btn-grenat { width: auto; }
}

.mono { font-variant-numeric: tabular-nums; letter-spacing: .06em; }

/* ── 16.1 · A grelha editorial das páginas de conteúdo ───────────────
   Até 1121px empilha, como todo o resto do site. A partir daí o título
   passa a viver numa coluna estreita à esquerda e o corpo corre à
   direita — é o que impede que a página fique encostada a um lado com
   meio ecrã vazio, e é o gesto de revista que a distingue de um post.

   O par `.pag-lado` / `.pag-conteudo` existe porque uma grelha de DOM
   plano acopla as linhas das duas colunas: o título afundaria até à
   altura do primeiro parágrafo. */
.pag-lado > .pag-tit { margin: 0; }

@media (min-width: 1121px) {
  .pag-bloco:not(.largo) {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--pag-gap);
    align-items: start;
  }
  /* O título acompanha a leitura em secções longas, sem nunca sair da
     sua coluna. `top` é a altura do cabeçalho fixo mais respiro. */
  .pag-bloco:not(.largo) > .pag-lado { position: sticky; top: 8rem; }
  .pag-bloco:not(.largo) .pag-h2 {
    max-width: 18ch; font-size: clamp(1.5rem, 2.3vw, 1.95rem);
  }
  .pag-conteudo > :first-child { margin-top: 0; }

  /* Com o título fora da coluna de texto, a medida pode crescer sem
     prejudicar a leitura — 68ch a 17px continua confortável. */
  .pag-corpo p, .pag-lista { max-width: 68ch; }

  /* As secções largas: título em cima, componente a ocupar tudo. É a
     quebra de ritmo, e é deliberada. */
  .largo .pag-h2 { max-width: 30ch; }
  .largo .pag-conteudo { margin-top: clamp(1.2rem, 3vw, 1.8rem); }
}

/* 16.2 — O cabeçalho no mesmo eixo do corpo. Sem isto o título flutuava
   à esquerda e o corpo abria a um terço: duas páginas na mesma página.
   Empilhado até 1121px, como tudo o resto. */
.cab-titulo > .k { margin: 0; }
.cab-texto > :first-child { margin-top: clamp(1rem, 3vw, 1.4rem); }

@media (min-width: 1121px) {
  .pag-cab .cab-grelha {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--pag-gap);
    align-items: end;
  }
  .pag-cab h1 { font-size: clamp(2.4rem, 3.6vw, 3.4rem); max-width: 14ch; }
  .cab-texto > :first-child { margin-top: 0; }
  .pag-lede { font-size: 1.1rem; max-width: 58ch; }
  .lema-fr { max-width: 40ch; }
}

/* O aviso é filho do molde, não de uma secção: sem isto ficaria encostado
   à margem enquanto tudo à volta abre no eixo de um terço. A conta é a
   mesma da grelha — coluna de 4/12 mais a goteira. */
@media (min-width: 1121px) {
  .pag-corpo > .molde > .pag-aviso {
    margin-left: calc((100% - var(--pag-gap)) / 3 + var(--pag-gap));
  }
}

/* ── 13c · Respiro de arquivo (História, o jantar dos 25 anos) ──────
   Texto em medida de leitura, fotografia a toda a largura por baixo:
   um spread de arquivo, não uma coluna lateral. A fotografia é
   horizontal (a mesa) e encolhida numa coluna estreita perdia as
   caras. Sem crop nenhum, regra do projeto. */
.respiro-arquivo .arquivo-larga { margin-top: clamp(1.8rem, 5vw, 3rem); }
.respiro-arquivo .arquivo-larga figcaption { max-width: none; }
@media (min-width: 861px) {
  .respiro-arquivo .m-frase, .respiro-arquivo .m-corpo,
  .respiro-arquivo .m-corrente { margin-left: clamp(0rem, 6vw, 6.5rem); }
  .respiro-arquivo .arquivo-larga figcaption { text-align: right; }
}

/* ── 3b · A palavra da presidente ────────────────────────────────
   Sob a coroa do hero, o ornamento da referência da cliente: um fio
   de ouro de cada lado, a coroa pequena ao centro, a citação por
   baixo. O ouro fica nos fios e na assinatura; a frase é marfim. */
.palavra { padding-block: clamp(2.4rem, 7vw, 4.5rem) clamp(2.8rem, 8vw, 5rem); }
.palavra-ornato { display: flex; align-items: center; gap: clamp(.9rem, 2.5vw, 1.4rem); }
.palavra-ornato .orn-fio {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 169, 106, .55));
}
.palavra-ornato .orn-fio:last-child {
  background: linear-gradient(270deg, transparent, rgba(200, 169, 106, .55));
}
.palavra-ornato img {
  width: clamp(48px, 6vw, 62px); height: auto;
  filter: drop-shadow(0 0 12px rgba(245, 183, 73, .18));
}
.palavra-frase { margin: clamp(1.8rem, 5vw, 2.8rem) auto 0; max-width: 46rem; text-align: center; }
.palavra-frase p {
  font-family: var(--font-texto); font-weight: 300;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.85;
  color: var(--marfim-soie);
}
.palavra-frase cite {
  display: block; margin-top: clamp(1.1rem, 3vw, 1.6rem);
  font-style: normal; font-family: var(--font-titulo);
  text-transform: uppercase; letter-spacing: .22em; font-size: .7rem;
  color: var(--or-champagne);
}

/* A fotografia dos membros na página O Comité, quando o painel a definir. */
.comite-foto { margin: 0 0 1.4rem; }
.comite-foto img {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(42, 58, 94, .25);
}

/* A porta de entrada da presidente, discreta no fim do rodapé
   (06_DECISAO_CMS §6.2): esconder o endereço não compra segurança e
   custa a única via de regresso que ela encontra sozinha. */
.fim .entrar { margin-left: 1.4rem; opacity: .55; }
.fim .entrar:hover, .fim .entrar:focus-visible { opacity: 1; }

/* O apelo fecha a coluna do argumento. A ficha «Como se entra» é bem mais
   alta que os três parágrafos, e deixava um vazio de trezentos píxeis por
   baixo do texto. Com o botão e o remate aqui, as duas colunas acabam
   quase à mesma altura, e o argumento termina na ação. */
.m-agir { margin-top: clamp(1.6rem, 4vw, 2.4rem); }
/* Esta secção é a banda CLARA: o marfim-voile aqui dá 1,5:1 e desaparece.
   Sobre marfim o texto é noir e o acento é granada, nunca ouro. */
.m-remate {
  margin-top: 1.1rem; max-width: 44ch;
  font-size: .93rem; line-height: 1.7; color: rgba(16, 27, 42, .82);
}
.m-remate a { color: var(--noir-velours); border-bottom: 1px solid var(--grenat); padding-block: .2rem; }
.m-remate a:hover { color: var(--grenat); }

/* O subtítulo do hero: o H1 diz o resultado, esta linha diz o que a coisa
   é e para quem. Corpo de leitura, não de display. */
.h-sub {
  margin-top: clamp(.9rem, 2vw, 1.3rem); max-width: 46ch;
  font-size: 1.02rem; line-height: 1.7; color: var(--marfim-voile);
}