/* Mercado Biológico de Óbidos — "O Jornal da Vila"
   Sistema em DESIGN.md. Mobile-first: o telemóvel é o contexto principal de leitura. */

/* ─────────────────────────────  TOKENS  ───────────────────────────── */

:root {
  /* Cor — nomes do lugar */
  --cal-fresca:      #FBF7EE;
  --cal-de-obidos:   #F5EFE4;
  --sombra-da-cal:   #EDE6D5;
  --calcada:         #D8CFB8;
  --poeira:          #A69E8A;
  --tinta-aguada:    #6B6659;
  --tinta:           #2A2620;
  --muralha:         #1E2A1E;
  --breu:            #14201A;
  --calcada-noite:   #3A4A38;
  --cal-fria:        #C8C1B0;
  --musgo:           #7C8B7A; /* 4.66:1 sobre breu. #6B7B6A dava 3.73:1 e falhava AA. */
  /* A cor do logótipo oficial. Era #8B2E2E, inventada antes de haver logótipo;
     duas versões do mesmo vinho no mesmo ecrã leem-se como um erro, e é o
     logótipo que não se repinta. A Funda é a Funda antiga na mesma proporção. */
  --ginjinha:        #801D37;
  --ginjinha-funda:  #65162A;
  --ginjinha-escura: #2A1414;
  --hortas:          #4A6B3A;

  /* Tipo */
  --serif: 'Newsreader', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-display:  clamp(2.75rem, 7vw, 6rem);      /* 44 → 96px */
  --t-headline: clamp(1.75rem, 4vw, 2.75rem);   /* 28 → 44px */
  --t-month:    clamp(1.5rem, 3vw, 2rem);       /* 24 → 32px */
  --t-title:    clamp(1.25rem, 2.2vw, 1.5rem);  /* 20 → 24px */
  --t-lead:     clamp(1.1875rem, 2.2vw, 1.5rem);/* 19 → 24px */
  --t-figure:   clamp(2.75rem, 7vw, 4rem);      /* 44 → 64px — a prova numérica */
  --t-body-lg:  1.125rem;                        /* 18px */
  --t-body:     1.0625rem;                       /* 17px */
  --t-button:   1rem;                            /* 16px */
  --t-small:    0.9375rem;                       /* 15px */
  --t-micro:    0.875rem;                        /* 14px — piso do sistema */
  --t-label:    0.75rem;                         /* 12px */

  /* Espaço — cresce com o ecrã */
  --gutter:    20px;
  --section-y: 56px;
  --rail-gap:  32px;
  --rail-col:  1fr;

  /* Medida de leitura: 65–75ch */
  --measure:      68ch;
  --measure-lead: 60ch;

  --content-max: 1240px;

  --hairline: 1px;
  --shadow-flutuante: 0 12px 32px rgba(30, 42, 30, 0.24);
  --toque: 0.18s ease;

  color-scheme: light;
}

@media (min-width: 640px)  { :root { --gutter: 32px; --section-y: 72px; } }
@media (min-width: 900px)  { :root { --gutter: 48px; } }
@media (min-width: 1200px) { :root { --gutter: 64px; --section-y: 96px; --rail-gap: 80px; --rail-col: 280px 1fr; } }

/* ─────────────────────────────  BASE  ───────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cal-de-obidos);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-body-lg);
  line-height: 1.7;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--muralha);
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }

/* Superfícies do navegador — o que não desenhámos também leva o sistema */

/* O `hidden` tem de ganhar a qualquer `display` que uma classe ponha.
 *
 * A regra do navegador — `[hidden] { display: none }` — perde sempre para uma
 * folha de estilo nossa, por muito fraca que seja: folhas do autor vêm à frente
 * das do navegador. Aqui protege o carrossel das fotografias da nota e o das
 * avaliações, que escondem os elementos que não estão à vista.
 * Daí o `!important`: é o único sítio da folha onde ele se justifica.
 */
[hidden] { display: none !important; }

::selection { background: var(--ginjinha); color: var(--cal-de-obidos); }
html { caret-color: var(--ginjinha); scrollbar-color: var(--calcada) var(--cal-de-obidos); }

:focus-visible {
  outline: 2px solid var(--ginjinha);
  outline-offset: 3px;
}
.on-dark :focus-visible { outline-color: var(--cal-de-obidos); }

a {
  color: var(--ginjinha);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--toque);
}
a:hover { color: var(--ginjinha-funda); }

.num { font-variant-numeric: tabular-nums; }

/* Para o que só a imagem diz e um leitor de ecrã não veria. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--muralha);
  color: var(--cal-de-obidos);
  padding: 14px 20px;
  font-weight: 600;
  z-index: 100;
}
.skip:focus { left: 0; }

/* ─────────────────────────────  LAYOUT  ───────────────────────────── */

.section {
  padding: var(--section-y) var(--gutter);
  border-top: var(--hairline) solid var(--calcada);
}
.section--first { border-top: 0; }
.section--recessed { background: var(--sombra-da-cal); }

/* A coluna-guia: título à esquerda, matéria à direita. Empilha abaixo de 1200px. */
.rail {
  display: grid;
  grid-template-columns: var(--rail-col);
  gap: var(--rail-gap);
  max-width: var(--content-max);
  margin-inline: auto;
}
.rail__body { max-width: var(--measure); min-width: 0; }
.hero > .split, .foot__grid, .foot__legal { max-width: var(--content-max); margin-inline: auto; }

.lead {
  font-family: var(--serif);
  font-size: var(--t-lead);
  font-style: italic;
  line-height: 1.5;
  color: var(--muralha);
  max-width: var(--measure-lead);
}

.prose > * + * { margin-top: 1.5em; }
.prose { font-size: var(--t-body-lg); line-height: 1.7; color: var(--tinta); }

h2 { font-size: var(--t-headline); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
h3 { font-size: var(--t-title); font-weight: 600; line-height: 1.3; }

/* Rótulo de campo. NÃO é kicker: etiqueta dados, nunca decora um título. */
.field-label {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-aguada);
}
.field-label--fruit { color: var(--ginjinha); }
.field-label--veg   { color: var(--hortas); }
.field-label--dark  { color: var(--poeira); }

/* Grelha de filete partilhado: gap de 1px sobre calçada = divisórias sem duplicação */
.hairgrid {
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  gap: var(--hairline);
  background: var(--calcada);
  border: var(--hairline) solid var(--calcada);
}
.hairgrid > * { background: var(--cal-de-obidos); }
.hairgrid--2 { grid-template-columns: minmax(0, 1fr); }
.hairgrid--3 { grid-template-columns: minmax(0, 1fr); }
.hairgrid--4 { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 560px) {
  .hairgrid--2, .hairgrid--3, .hairgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .hairgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hairgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ─────────────────────────────  CABEÇALHO  ───────────────────────────── */

.masthead {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px 24px;
  padding: 20px var(--gutter);
  background: var(--cal-de-obidos);
  border-bottom: var(--hairline) solid var(--calcada);
}

/* A marca é o logótipo, não texto. 76px de altura para "MERCADO" ficar a 13px,
   que é o tamanho a que ainda se lê ao sol, na rua, que é onde isto se lê.
   Abaixo dos 380px encolhe, para não empurrar o estado de abertura para fora. */
.masthead__brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.masthead__logo {
  display: block;
  height: 76px;
  width: auto;
  max-width: 100%;
}
@media (max-width: 379px) {
  .masthead__logo { height: 62px; }
}

/* No telemóvel o menu tem a linha toda para si, por baixo do filete. Os itens
   repartem-na em partes iguais em vez de se juntarem à esquerda: com três
   palavras curtas, encostadas ficavam a ocupar meia linha e a outra metade
   vazia. A partir dos 900px o menu passa a ter coluna própria e volta a ser um
   grupo centrado (ver a media query mais abaixo). */
.masthead__nav {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 8px 24px;
  padding-top: 14px;
  border-top: var(--hairline) solid var(--calcada);
}
.masthead__link {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--muralha);
  text-decoration: none;
  padding: 6px 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  transition: border-color var(--toque);
}
.masthead__link:hover { color: var(--muralha); border-bottom-color: var(--calcada); }
.masthead__link[aria-current="page"] { border-bottom-color: var(--muralha); }

.status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-micro);
  color: var(--tinta-aguada);
  white-space: nowrap;
}
.status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hortas);
  flex: none;
}

@media (min-width: 900px) {
  .masthead {
    grid-template-columns: auto 1fr auto;
    gap: 32px;
    padding: 24px var(--gutter);
  }
  .masthead__nav {
    grid-column: auto;
    justify-content: center;
    gap: 44px;
    padding-top: 0;
    border-top: 0;
  }
  .status { font-size: var(--t-micro); }
}

/* ─────────────────────────────  BOTÕES  ───────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 44px;
  padding: 18px 28px;
  font-family: var(--sans);
  font-size: var(--t-button);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--toque), color var(--toque);
}
@media (min-width: 640px) { .btn { padding: 20px 32px; } }

.btn svg { flex: none; }

.btn--primary { background: var(--muralha); color: var(--cal-de-obidos); }
.btn--primary:hover { background: var(--breu); color: var(--cal-de-obidos); }

.btn--inverse { background: var(--cal-de-obidos); color: var(--muralha); }
.btn--inverse:hover { background: var(--cal-fresca); color: var(--breu); }

.btn--call {
  background: var(--ginjinha);
  color: var(--cal-de-obidos);
  font-size: var(--t-body);
}
@media (min-width: 640px) { .btn--call { padding: 22px 36px; font-size: var(--t-body-lg); } }
.btn--call:hover { background: var(--ginjinha-funda); color: var(--cal-de-obidos); }

.btn--quiet {
  background: var(--cal-de-obidos);
  color: var(--muralha);
  border: var(--hairline) solid var(--calcada);
  padding: 12px 20px;
  min-height: 44px;
  font-size: var(--t-small);
}
.btn--quiet:hover { background: var(--cal-fresca); }

/* Ligação de avanço com seta */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ginjinha);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--toque), color var(--toque);
}
.arrow-link:hover { color: var(--ginjinha-funda); border-bottom-color: currentColor; }

/* Em secção escura a seta inverte. Classe, nunca style inline:
   um style inline ganha ao :hover e mata o estado por completo. */
.on-dark .arrow-link { color: var(--cal-de-obidos); }
.on-dark .arrow-link:hover { color: var(--cal-fresca); border-bottom-color: currentColor; }
.arrow-link svg { flex: none; transition: transform var(--toque); }
.arrow-link:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .arrow-link:hover svg { transform: none; } }

/* ─────────────────────────────  CARTÕES  ───────────────────────────── */

.tile { padding: 24px 20px; }
@media (min-width: 640px) { .tile { padding: 28px 24px; } }
.tile__title { font-family: var(--serif); font-size: var(--t-title); font-weight: 600; color: var(--muralha); }
.tile__sub { font-size: var(--t-small); color: var(--tinta-aguada); margin-top: 6px; line-height: 1.5; }

.panel {
  background: var(--cal-fresca);
  border: var(--hairline) solid var(--calcada);
  padding: 24px 20px;
}
@media (min-width: 640px) { .panel { padding: 28px; } }
.panel__title { font-family: var(--serif); font-size: var(--t-title); font-weight: 600; margin-bottom: 14px; }

/* Painel dentro de secção escura mantém-se claro: sem isto herdava texto
   claro sobre fundo claro. */
.on-dark .panel, .on-dark .panel .datum__note { color: var(--tinta); }
.on-dark .panel a { color: var(--ginjinha); }
.on-dark .panel a:hover { color: var(--ginjinha-funda); }

/* Cartão-ligação: o painel e o mosaico quando são clicáveis por inteiro. */
.card-link { text-decoration: none; display: block; transition: background var(--toque); }
.card-link:hover { background: var(--sombra-da-cal); }
.panel.card-link:hover { background: var(--cal-de-obidos); }

/* A prova numérica e o número de telefone em escala de figura. */
.phone-big {
  font-family: var(--serif);
  font-size: var(--t-figure);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--muralha);
}

/* Aviso — distinção por superfície e por cor do rótulo, sem barra lateral */
.notice {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--cal-fresca);
  border: var(--hairline) solid var(--calcada);
  padding: 20px;
}
.notice svg { flex: none; margin-top: 2px; color: var(--ginjinha); }
.notice__label { margin-bottom: 8px; color: var(--ginjinha); }
.notice__body { font-size: var(--t-body); line-height: 1.6; }
.notice__body strong { font-weight: 600; }

/* Bloco de dado: rótulo + valor grande */
.datum__label { margin-bottom: 10px; }
.datum__value {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 3vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--muralha);
}
.datum__value a { color: var(--muralha); text-decoration: none; border-bottom: 1px solid var(--calcada); min-height: 44px; display: inline-flex; align-items: center; }
.datum__value a:hover { color: var(--ginjinha); border-bottom-color: currentColor; }
.datum__note { font-size: var(--t-small); color: var(--tinta-aguada); margin-top: 10px; line-height: 1.5; }

/* ─────────────────────────────  CALENDÁRIO  ───────────────────────────── */

.month { padding: 26px 22px; display: flex; flex-direction: column; }
@media (min-width: 640px) { .month { padding: 32px 28px; } }
.month--now { background: var(--sombra-da-cal); }

.month__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
.month__name { font-size: var(--t-month); font-weight: 700; letter-spacing: -0.02em; }
.month__badge {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--ginjinha);
  color: var(--cal-de-obidos);
  padding: 4px 9px;
  white-space: nowrap;
}
.month__body { border-top: var(--hairline) solid var(--calcada); padding-top: 16px; display: flex; flex-direction: column; flex: 1; }
.month__list {
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--tinta);
  margin: 6px 0 14px;
}
.month__note {
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--tinta-aguada);
  font-style: italic;
  border-top: var(--hairline) solid var(--calcada);
  padding-top: 12px;
  margin-top: auto;
}

/* ─────────────────────────────  SECÇÕES ESCURAS  ───────────────────────────── */

.on-dark {
  background: var(--muralha);
  color: var(--cal-fria);
}
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--cal-de-obidos); }
.on-dark .prose { color: var(--cal-fria); }
.on-dark .lead { color: var(--cal-de-obidos); }
/* :not(.btn) é obrigatório nas duas. Sem ele, .on-dark a ganha a .btn--inverse
   por especificidade e pinta o texto de creme sobre o fundo creme do botão. */
.on-dark a:not(.btn) { color: var(--cal-de-obidos); }
.on-dark a:not(.btn):hover { color: var(--cal-fresca); }
.on-dark--ginja { background: var(--ginjinha-escura); color: var(--cal-fria); }
.on-dark--ginja .prose { color: var(--cal-fria); }

/* ─────────────────────────────  BARRA FLUTUANTE  ───────────────────────────── */

.sticky-call {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
}
/* Reserva de espaço para a barra não tapar o fim do rodapé. */
body:has(.sticky-call) .foot { padding-bottom: 96px; }
.sticky-call__chip {
  flex: 1;
  justify-content: center;
  background: var(--ginjinha);
  color: var(--cal-de-obidos);
  padding: 16px 22px;
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-flutuante);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  transition: background var(--toque);
}
.sticky-call__chip:hover { background: var(--ginjinha-funda); color: var(--cal-de-obidos); }

/* No desktop desaparece: a secção "Venha à loja" já faz esse trabalho, e como
   chip solto passava por cima do texto e cortava palavras a meio. */
@media (min-width: 900px) {
  .sticky-call { display: none; }
  body:has(.sticky-call) .foot { padding-bottom: 40px; }
}

/* ─────────────────────────────  RODAPÉ  ───────────────────────────── */

.foot {
  background: var(--breu);
  color: var(--cal-fria);
  padding: var(--section-y) var(--gutter) 40px;
  font-size: var(--t-small);
}
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  padding-bottom: 40px;
  border-bottom: var(--hairline) solid var(--calcada-noite);
}
@media (min-width: 560px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .foot__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; } }

/* O rodapé é Breu: o logótipo na sua cor daria contraste de 1,7 e desaparecia.
   Leva a versão em Cal de Óbidos, que é o mesmo desenho noutra cor. */
.foot__logo { display: block; height: 68px; width: auto; max-width: 100%; margin-bottom: 18px; }
.foot__addr { line-height: 1.7; }
.foot__col-title { margin-bottom: 16px; color: var(--poeira); }
.foot__links { display: flex; flex-direction: column; gap: 4px; }
.foot__links a {
  color: var(--cal-fria);
  text-decoration: none;
  padding: 8px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: color var(--toque), border-color var(--toque);
}
.foot__links a:hover { color: var(--cal-de-obidos); border-bottom-color: var(--calcada-noite); }

.foot__legal {
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: var(--t-micro);
  color: var(--musgo);
}
/* Os três não são a mesma coisa — termos, obrigação legal e crédito de autoria —
   mas pesam todos o mesmo e ficam juntos à direita, para a linha do copyright
   continuar sozinha à esquerda. Abaixo dos 560px passam a coluna. */
.foot__legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
@media (max-width: 559px) { .foot__legal-links { flex-direction: column; align-items: flex-start; gap: 0; } }

.foot__legal a { color: var(--musgo); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.foot__legal a:hover { color: var(--cal-fria); }

/* ───────────  VINHETAS  ───────────
   A ilustração que acompanha um título, na coluna-guia: o título em cima, o
   desenho por baixo, e a matéria a correr ao lado. É a vinheta do jornal, e
   entra pela mesma guia que tudo o resto.
   Formato: estas três são WebP e não SVG como as da parede de caixas. São
   desenho de traço cheio, com sombra chapada — vetorizá-las dava ficheiros
   maiores e mais sujos do que o WebP, que aqui fica em 27–64KB, ao nível dos
   SVG existentes. A família visual é a mesma; só o formato é que muda. */
.rail__guia { display: grid; gap: 28px; align-content: start; }

.vinheta {
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
}
@media (min-width: 1200px) { .vinheta { max-width: 190px; } }

/* No cabeçalho a vinheta é o assunto da página, não uma nota de margem. */
.vinheta--hero { max-width: 168px; }
@media (min-width: 900px) { .vinheta--hero { max-width: 196px; } }

/* ─────────────────────────────  HERO  ───────────────────────────── */

.hero { padding: calc(var(--section-y) + 8px) var(--gutter) var(--section-y); }
.hero__title {
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.02em;
  /* A animação da tinta recorta pela caixa do título (clip-path). Com a
     entrelinha a 0.98, o acento de uma maiúscula na primeira linha (o Ó de
     "Castelo de Óbidos") fica fora da caixa e era cortado. A folga por cima
     alarga a caixa sem mudar o sítio do texto. */
  padding-top: 0.14em;
  margin-top: -0.14em;
}
.hero__title em { font-style: italic; font-weight: 400; color: var(--tinta-aguada); }
.on-dark .hero__title em { color: var(--poeira); }

/* Dateline — vai por baixo do título, como num jornal. Nunca por cima. */
.dateline {
  margin-top: 20px;
  line-height: 1.5;
  font-size: var(--t-small);
  color: var(--tinta-aguada);
  letter-spacing: 0.02em;
}

/* O momento único de movimento da página: a tinta a assentar no papel. */
@media (prefers-reduced-motion: no-preference) {
  .hero__title {
    animation: tinta 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes tinta {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }
}

/* ───────────────  PAREDE DE CAIXAS  (herói do Início)  ───────────────
   As caixas de transporte de fruta empilhadas que existem na loja — com
   livros lá dentro, que é o que a distingue. O texto vive nos vãos.
   É a grelha de filete partilhado do sistema, levantada em objeto. */

.wall-hero { padding: 0 var(--gutter) var(--section-y); }
/* O filete de topo da parede substitui a linha do cabeçalho. */
body:has(.wall-hero) .masthead { border-bottom: 0; }

.wall {
  --joint: 13px;
  --c: 9px;   /* as retas param onde a diagonal da junção começa */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  position: relative;
  overflow: clip;   /* corta em triângulo as junções da última coluna */
  background-color: var(--cal-de-obidos);
  /* A moldura é desenhada em fundos posicionados, não em `border`: assim as
     retas param onde o canto começa e a diagonal encaixa sem ser cortada. */
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--poeira), var(--poeira)), linear-gradient(var(--poeira), var(--poeira)), linear-gradient(var(--poeira), var(--poeira)), linear-gradient(var(--poeira), var(--poeira));
  background-size:
    calc(100% - 2 * var(--c)) var(--hairline),
    calc(100% - 2 * var(--c)) var(--hairline),
    var(--hairline) calc(100% - 2 * var(--c)),
    var(--hairline) calc(100% - 2 * var(--c));
  background-position:
    var(--c) top, var(--c) bottom, left var(--c), right var(--c);
}

.crate {
  position: relative;
  min-width: 0;
  padding: 22px 18px;
  border-right: var(--hairline) solid var(--poeira);
  border-bottom: var(--hairline) solid var(--poeira);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* A junção desenha-se nos QUATRO cantos de cada vão, numa só camada.
   Assim o filete de topo da parede também recebe corte, e nos cruzamentos
   internos os losangos de vãos vizinhos coincidem ao pixel. */
.crate::after {
  content: "";
  position: absolute;
  inset: -9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M9 .8 L17.2 9 L9 17.2 L.8 9 Z' fill='%23F5EFE4' stroke='%23A79F8B' stroke-width='1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M9 .8 L17.2 9 L9 17.2 L.8 9 Z' fill='%23F5EFE4' stroke='%23A79F8B' stroke-width='1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M9 .8 L17.2 9 L9 17.2 L.8 9 Z' fill='%23F5EFE4' stroke='%23A79F8B' stroke-width='1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M9 .8 L17.2 9 L9 17.2 L.8 9 Z' fill='%23F5EFE4' stroke='%23A79F8B' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 18px 18px;
  background-position: left top, right top, left bottom, right bottom;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

.crate--art { align-items: center; justify-content: center; min-height: 132px; padding: 18px; }
.crate--art img { width: 100%; max-width: 112px; height: auto; max-height: 118px; object-fit: contain; }

.crate--titulo { justify-content: flex-end; padding: 34px 26px; }
.crate--texto  { gap: 30px; align-items: flex-start; padding: 34px 26px; }
.crate--prova  { align-items: flex-start; grid-column: 1 / -1; }
@media (min-width: 900px)  { .crate--prova { grid-column: span 2; } }
@media (min-width: 1200px) { .crate--prova { grid-column: span 2; } }

/* Telemóvel: 2 colunas, título e texto a toda a largura, 8 objetos. */
.crate--titulo { grid-column: 1 / -1; grid-row: 1; }
.crate--texto  { grid-column: 1 / -1; grid-row: 2; }
.crate--xwide  { display: none; }

@media (min-width: 900px) {
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .crate { padding: 24px 20px; }
  .crate--titulo { grid-column: 1 / span 3; grid-row: 1; padding: 48px 46px; }
  .crate--texto  { grid-column: 1 / span 3; grid-row: 2; padding: 48px 46px; gap: 30px; }
  .crate--art { min-height: 150px; }
  .crate--art img { max-width: 132px; max-height: 138px; }
}

@media (min-width: 1200px) {
  .wall { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .crate { padding: 26px 22px; }
  .crate--titulo { grid-column: 3 / span 3; grid-row: 1; padding: 56px 58px; }
  .crate--texto  { grid-column: 3 / span 3; grid-row: 2; padding: 56px 58px; gap: 34px; }
  .crate--xwide { display: flex; }
  .crate--art { min-height: 164px; }
  .crate--art img { max-width: 152px; max-height: 158px; }
}

.ligacoes { display: flex; flex-wrap: wrap; gap: 12px 36px; }

/* ───────────  SECÇÃO COM FOTOGRAFIA  ───────────
   Fundo em Muralha por baixo da foto: se a imagem faltar a secção continua a
   funcionar, como exige a regra 10 do dossier. O véu garante o contraste do
   texto sobre uma fotografia que ninguém controla. */
.foto {
  position: relative;
  background-color: var(--muralha);
  background-image: url("../img/loja.jpg");
  background-image: image-set(url("../img/loja.webp") type("image/webp"),
                              url("../img/loja.jpg")  type("image/jpeg"));
  background-size: cover;
  background-position: center 62%;
  padding: var(--section-y) var(--gutter);
  overflow: clip;
}
.foto::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(30,42,30,.94) 0%, rgba(30,42,30,.88) 42%, rgba(30,42,30,.80) 100%);
}
.foto > * { position: relative; }

.foto__grelha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  max-width: var(--content-max);
  margin-inline: auto;
}
@media (min-width: 900px)  { .foto__grelha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
@media (min-width: 1200px) { .foto__grelha { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 80px; } }

.foto__lado { display: flex; flex-direction: column; gap: 28px; align-self: start; }
.foto__cartoes { display: flex; flex-direction: column; gap: 18px; }

.fcard {
  border: var(--hairline) solid var(--calcada-noite);
  background: rgba(20,32,26,.50);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 900px) { .fcard { padding: 28px 26px; } }
.fcard .field-label--fruit { color: #D98A7E; }   /* 4,7:1 — o ginja normal dava 1,9:1 */
.fcard .field-label--veg   { color: #ABB98A; }   /* 6,0:1 — o verde normal dava 2,6:1 */
.fcard .field-label--dark  { color: var(--poeira); }
.fcard__titulo { font-family: var(--serif); font-size: var(--t-title); font-weight: 600; color: var(--cal-de-obidos); }
.fcard__lista { font-family: var(--serif); font-size: var(--t-body); line-height: 1.55; color: var(--cal-fria); }

/* ───────────  O QUE ENCONTRA NA LOJA  ───────────
   A única secção do site que não entra pela coluna-guia: aqui o título fica
   por cima do corpo, os dois na coluna da esquerda, e a última submissão do
   feed ocupa a direita, maior. Por isso a secção traz a sua própria largura
   máxima — não há `.rail` por baixo dela a dar-lha. */
.loja {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  max-width: var(--content-max);
  margin-inline: auto;
}
/* Texto à esquerda, cartão do "Chegou fresco" à direita: o que a loja tem todo
   o ano ao lado do que chegou esta semana. O texto fica com a coluna maior. */
@media (min-width: 900px)  { .loja { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 48px; align-items: start; } }
@media (min-width: 1200px) { .loja { gap: 64px; } }

/* Sem nota fresca não há cartão, e o texto ocupa as duas colunas: uma coluna
   vazia ao lado do texto lia-se como página por acabar. */
.loja__texto:only-child { grid-column: 1 / -1; }

/* O corpo já não corre ao lado de um título estreito: pode usar a coluna toda. */
.loja__texto .lead { max-width: none; }
/* Mais folga por baixo do título do que entre parágrafos. */
.loja__texto > h2 + * { margin-top: 32px; }
.rail__body--largo { max-width: none; }

/* O cartão do feed. A idade é tão importante como o texto: uma nota velha
   apresentada como fresca engana, e é isso que a regra 5 do dossier protegia. */
.feed {
  position: sticky;
  top: 24px;
  background: var(--cal-fresca);
  border: var(--hairline) solid var(--calcada);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-self: start;
}
@media (min-width: 900px) { .feed { padding: 32px 30px; } }
.feed__topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding-bottom: 16px;
  border-bottom: var(--hairline) solid var(--calcada);
}
.feed__idade { font-size: var(--t-micro); color: var(--tinta-aguada); white-space: nowrap; }
.feed__nota {
  font-family: var(--serif); font-size: var(--t-lead); font-style: italic;
  line-height: 1.5; color: var(--muralha); margin: 0;
}
.feed__data { font-size: var(--t-micro); color: var(--tinta-aguada); }
.feed__data time { font-variant-numeric: tabular-nums; }

/* Estado gasto: o PHP acrescenta esta classe passados uns dias, e a nota
   deixa de se apresentar como novidade em vez de mentir por omissão. */
.feed--gasta { background: var(--cal-de-obidos); }
.feed--gasta .feed__nota { color: var(--tinta-aguada); font-style: normal; }
.feed--gasta .feed__idade { color: var(--ginjinha); }

/* A fotografia da nota ocupa a largura do cartão, com o mesmo filete e o mesmo
   canto vivo do resto do sistema. Nenhuma página depende dela: se não carregar,
   o texto, a data e a idade continuam onde estavam. */
/* As fotografias da nota. A moldura tem proporção fixa e a fotografia enche-a:
   sem isso, rodar entre um retrato e uma paisagem fazia o cartão saltar de
   altura a cada cinco segundos. O corte é só aqui — na página da nota as
   fotografias aparecem inteiras. */
.feed__fotos { display: grid; gap: 12px; }
.feed__moldura {
  display: block;
  overflow: clip;
  aspect-ratio: 4 / 3;
  border: var(--hairline) solid var(--calcada);
  background: var(--sombra-da-cal);
}
.feed__foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.feed--gasta .feed__foto { opacity: 0.85; }

/* Sem JS ficam todas empilhadas e os losangos não servem para nada, por isso
   não aparecem. Com JS mostra-se uma de cada vez e eles passam a ser o controlo. */
.feed__pontos { display: none; gap: 7px; }
.feed__fotos--js { gap: 10px; }
.feed__fotos--js .feed__pontos { display: flex; }
.feed__ponto {
  width: 6px; height: 6px; padding: 0; cursor: pointer;
  background: none; border: var(--hairline) solid var(--poeira); transform: rotate(45deg);
  transition: background var(--toque);
}
.feed__ponto[aria-current="true"] { background: var(--tinta-aguada); border-color: var(--tinta-aguada); }
.feed__ponto:focus-visible { outline: var(--hairline) solid var(--ginjinha); outline-offset: 3px; }

/* ───────────  PÁGINA DA NOTA  ───────────
   O endereço permanente de uma nota, o que se partilha no Facebook. Quem cá
   chega vem quase sempre de um post antigo: a data e a idade vêm primeiro, e há
   sempre uma saída para o que há agora. */
.nota__cabeca {
  display: grid;
  gap: 8px;
  padding-bottom: 20px;
  border-bottom: var(--hairline) solid var(--calcada);
}
.nota__data { font-size: var(--t-lead); margin: 0; }
.nota__data time { font-variant-numeric: tabular-nums; }
.nota__idade { font-size: var(--t-micro); color: var(--tinta-aguada); margin: 0; }
.nota__velha { font-size: var(--t-micro); color: var(--ginjinha); margin: 0; }

.nota__texto { display: grid; gap: 16px; padding: 24px 0; max-width: 62ch; }
.nota__paragrafo {
  font-family: var(--serif); font-size: var(--t-lead); font-style: italic;
  line-height: 1.5; color: var(--muralha); margin: 0;
}

.nota__fotografias { display: grid; gap: 16px; }
.nota__foto {
  display: block; width: 100%; height: auto;
  border: var(--hairline) solid var(--calcada);
}
.nota__saida { padding-top: 24px; }

/* ───────────  FAIXA DAS CATEGORIAS  ───────────
   A grelha de filete partilhado posta a correr. As seis categorias passam em
   ciclo, de borda a borda, separadas pelo mesmo filete de 1px das listas.
   O filete faz-se como em toda a parte: gap de 1px sobre calçada, com os
   cartões em cal por cima.
   A faixa não leva borda de baixo — a secção seguinte já traz a sua, e duas
   linhas encostadas leem-se como um erro de composição. */
.faixa {
  position: relative;
  background: var(--sombra-da-cal);
  border-top: var(--hairline) solid var(--calcada);
}
.faixa__janela { overflow: clip; min-width: 0; }

.faixa__fita {
  display: flex;
  width: max-content;
  gap: var(--hairline);
  background: var(--calcada);
  animation: faixa-correr 100s linear infinite;
  will-change: transform;
}
.faixa__conjunto { display: flex; gap: var(--hairline); background: var(--calcada); }

/* Metade da fita é a cópia; ao fim de -50% o ciclo recomeça sem emenda. */
@keyframes faixa-correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.faixa__cartao {
  flex: 0 0 260px;
  background: var(--cal-de-obidos);
  padding: 28px 24px;
}
@media (min-width: 640px) { .faixa__cartao { flex-basis: 360px; padding: 40px 32px; } }

/* Ler é mais importante do que andar. */
.faixa:hover .faixa__fita,
.faixa:focus-within .faixa__fita,
.faixa[data-parada] .faixa__fita { animation-play-state: paused; }

/* O botão é a tampa do fim da faixa: mais uma célula da grelha, com o seu
   filete à esquerda, e não um botão a flutuar por cima dos cartões. Só
   aparece com JS — sem JS não haveria nada a fazer ao carregar nele. */
.faixa__botao {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 56px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-left: var(--hairline) solid var(--calcada);
  background: var(--cal-de-obidos);
  color: var(--tinta-aguada);
  cursor: pointer;
  transition: background var(--toque), color var(--toque);
}
.faixa[data-js] .faixa__botao { display: flex; }
.faixa__botao:hover { background: var(--cal-fresca); color: var(--muralha); }

.faixa__icone--play { display: none; }
.faixa__rotulo--retomar { display: none; }
.faixa[data-parada] .faixa__icone--pausa { display: none; }
.faixa[data-parada] .faixa__icone--play { display: block; }
.faixa[data-parada] .faixa__rotulo--parar { display: none; }
.faixa[data-parada] .faixa__rotulo--retomar { display: block; }

/* Sem movimento: a faixa fica quieta, perde a cópia e passa a arrastar-se. */
@media (prefers-reduced-motion: reduce) {
  .faixa__fita { animation: none; }
  .faixa__janela { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
  .faixa__conjunto--copia { display: none; }
  .faixa[data-js] .faixa__botao { display: none; }
}


/* ───────────  MURAL  ───────────
   Faixa recuada com as fotografias espalhadas como instantâneos pousados: a
   palavra do fundo e os filetes verticais fazem o papel do papel, e as molduras
   assentam por cima.
   A profundidade faz-se como em todo o sistema — camadas de tom e filete de
   1px, nunca sombra. A moldura em Cal Fresca sobre fundo em Sombra da Cal já
   levanta o instantâneo; uma sombra por baixo seria a versão barata do mesmo
   efeito e partia a Regra do Que Assenta. */
.mural {
  position: relative;
  padding: 96px var(--gutter);
  background: var(--sombra-da-cal);
  border-top: var(--hairline) solid var(--calcada);
  overflow: clip;
}
@media (min-width: 1000px) { .mural { padding: 120px var(--gutter); } }

/* Os filetes verticais: a grelha do sistema, desta vez só como textura. */
.mural__filetes {
  position: absolute;
  inset: 0;
  max-width: var(--content-max);
  margin-inline: auto;
  background-image: repeating-linear-gradient(to right,
    var(--calcada) 0 var(--hairline), transparent var(--hairline) calc(100% / 6));
  pointer-events: none;
}

/* Textura, não título. Fica atrás de tudo e nunca é lida. */
.mural__fundo {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(6rem, 21vw, 19rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--calcada);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.mural__grelha {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: var(--content-max);
  margin-inline: auto;
}
@media (min-width: 560px)  { .mural__grelha { gap: 28px; } }
@media (min-width: 1000px) { .mural__grelha { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* A moldura: filete a toda a volta, margem larga em baixo. É o que faz um
   instantâneo em vez de uma imagem numa grelha. */
.polaroid {
  margin: 0;
  background: var(--cal-fresca);
  border: var(--hairline) solid var(--calcada);
  padding: 8px 8px 26px;
  rotate: var(--rot, 0deg);
}
@media (min-width: 560px) { .polaroid { padding: 10px 10px 34px; } }

/* A janela do instantâneo. O corte vive aqui e não na imagem: `--pos` marca o
   ponto da fotografia que fica preso ao centro do corte, e `--zoom` aproxima à
   volta desse ponto. Com `object-position` e `transform-origin` no mesmo valor,
   o ponto escolhido não foge quando a escala muda. */
.polaroid picture {
  display: block;
  overflow: clip;
  aspect-ratio: var(--ar, 3 / 4);
  background: var(--muralha);
}
.polaroid__foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
  transform-origin: var(--pos, center);
  scale: var(--zoom, 1);
}

/* Enquadramento, aproximação, proporção e inclinação de cada instantâneo.
   As aproximações andam entre 2,3× e 2,9×: a fotografia tem 2000px de largura
   e a moldura mostra-a a 375px, por isso mesmo aos 2,9× continua a haver mais
   pixels do que ecrã. Cada um destes cortes apanha uma coisa diferente da loja
   — lombadas, letras, garrafas, a cabeça de madeira, laranjas, folhas. */
.polaroid--1 { --ar: 4 / 3; --pos: 12% 14%; --zoom: 2.3; --rot: -1.4deg; }
.polaroid--2 { --ar: 3 / 4; --pos: 45% 43%; --zoom: 2.7; --rot:  1.1deg; }
.polaroid--3 { --ar: 3 / 4; --pos: 60% 60%; --zoom: 2.5; --rot:  1.6deg; }
.polaroid--4 { --ar: 4 / 3; --pos: 31% 60%; --zoom: 2.9; --rot: -1.1deg; }
.polaroid--5 { --ar: 1 / 1; --pos: 14% 93%; --zoom: 2.3; --rot:  0.8deg; }
.polaroid--6 { --ar: 1 / 1; --pos: 83% 94%; --zoom: 2.5; --rot: -1.8deg; }

/* O espalhamento só existe onde há largura para ele. Duas colunas apenas: uma
   encostada à esquerda, outra à direita, e as fotografias descem aos ziguezagues
   entre as duas. O meio fica vazio de propósito — é por ali que se lê a palavra
   do fundo.
   O campo é um retângulo de proporção fixa dividido em 12 colunas por 24 linhas.
   Cada moldura entra numa linha e fica com a altura que a fotografia lhe dá
   (`align-self: start`); as 24 linhas servem só para a pousar à altura certa.
   Como a altura do campo vem da proporção e não de um número de pixels, a
   composição inteira encolhe junta — as distâncias entre fotografias mantêm-se
   as mesmas em qualquer ecrã, em vez de se desmancharem.
   A 1240px de largura o campo tem 1360px de altura; com as folgas de 120px em
   cima e em baixo, a secção fecha nos 1600px. */
@media (min-width: 1000px) {
  .mural__grelha {
    aspect-ratio: 31 / 34;
    grid-template-rows: repeat(24, minmax(0, 1fr));
  }
  .polaroid { align-self: start; }

  /* Coluna da esquerda */
  .polaroid--1 { grid-column: 1  / span 4; grid-row: 1;  }
  .polaroid--3 { grid-column: 1  / span 3; grid-row: 9;  }
  .polaroid--5 { grid-column: 2  / span 3; grid-row: 18; }

  /* Coluna da direita */
  .polaroid--2 { grid-column: 9  / span 3; grid-row: 2;  }
  .polaroid--4 { grid-column: 9  / span 4; grid-row: 11; }
  .polaroid--6 { grid-column: 10 / span 3; grid-row: 19; }
}

/* Os instantâneos entram à medida que a faixa sobe. Cada moldura tem a sua
   própria linha do tempo de vista, por isso o desencontro entre elas vem da
   posição na página e não de atrasos inventados.
   Sem suporte, ou com movimento recusado, estão simplesmente lá — o estado por
   omissão é o estado final, nunca uma página em branco à espera de script. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .polaroid {
      animation: polaroid-entra linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 65%;
      will-change: transform, opacity;
    }
  }
}
@keyframes polaroid-entra {
  from { opacity: 0; transform: translateY(32px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* ───────────  AVALIAÇÕES  ───────────
   Bloco discreto: é prova, não é chamada. As estrelas dizem a nota; o número
   saiu porque repetia o que a barra já mostra. */
.aval { width: 100%; display: flex; flex-direction: column; gap: 18px; }
.aval__topo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.aval__estrelas { flex: none; display: block; }
.aval__fonte { font-size: var(--t-micro); color: var(--tinta-aguada); }
.aval__topo:hover .aval__fonte { color: var(--tinta); }

.aval__item { margin: 0; max-width: 44ch; }

/* A altura fica presa pelas duas pontas: 3 linhas no máximo para uma avaliação
   longa não empurrar o layout, e a mesma medida como mínimo para uma curta não
   o encolher. Assim o carrossel roda sem a página saltar. */
.aval__pista {
  height: calc(3 * 1.55 * var(--t-body) + 10px + 1.4 * var(--t-micro));
  overflow: hidden;
}
.aval__texto {
  font-family: var(--serif); font-size: var(--t-body); font-style: italic;
  line-height: 1.55; color: var(--tinta);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  line-clamp: 3; overflow: hidden;
}
.aval__quem { display: block; margin-top: 10px; font-family: var(--sans);
  font-size: var(--t-micro); line-height: 1.4; font-style: normal; color: var(--tinta-aguada); }

/* Sem JS ficam as três empilhadas; com JS mostra-se uma de cada vez. */
.aval__item + .aval__item { margin-top: 18px; }
.aval--js .aval__item + .aval__item { margin-top: 0; }
.aval__controlos { display: none; align-items: center; gap: 10px; }
.aval--js .aval__controlos { display: flex; }
.aval__ant, .aval__seg {
  width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
  background: none; border: var(--hairline) solid var(--calcada); color: var(--tinta-aguada);
  transition: color var(--toque), border-color var(--toque);
}
.aval__ant:hover, .aval__seg:hover { color: var(--muralha); border-color: var(--poeira); }
.aval__pontos { display: flex; gap: 7px; margin-left: 4px; }
.aval__ponto { width: 6px; height: 6px; padding: 0; cursor: pointer;
  background: none; border: var(--hairline) solid var(--poeira); transform: rotate(45deg);
  transition: background var(--toque); }
.aval__ponto[aria-current="true"] { background: var(--tinta-aguada); border-color: var(--tinta-aguada); }

/* ───────────  PÁGINA DO CASTELO  ───────────
   O guia do Castelo de Óbidos (ADR-0006). Tudo preso a `.castelo`, para não
   vazar para as outras páginas, e tudo com os tokens do sistema. */

.castelo .hero__corpo { max-width: var(--content-max); margin-inline: auto; }
.castelo .hero__corpo .lead { margin-top: 28px; }
.castelo .hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }

.castelo .abertura-foto { padding: 0 var(--gutter) var(--section-y); }
.castelo .abertura-foto .fotografia { max-width: var(--content-max); margin-inline: auto; }

/* A prova numérica: rótulo de campo, figura, nota. */
.castelo .figura {
  font-family: var(--serif);
  font-size: var(--t-figure);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--muralha);
  margin-top: 10px;
}

/* O índice da página fica preso ao topo enquanto se lê. Sem sombra: assenta na
   página, e só o filete o separa do texto que passa por baixo. */
html:has(.castelo .indice) { scroll-padding-top: 72px; }
.castelo .indice {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--cal-de-obidos);
  border-top: var(--hairline) solid var(--calcada);
  border-bottom: var(--hairline) solid var(--calcada);
  padding-inline: var(--gutter);
}
.castelo .indice ul {
  position: relative;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--content-max);
  display: flex;
  gap: 28px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.castelo .indice ul::-webkit-scrollbar { display: none; }
.castelo .indice a {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--muralha);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--toque);
}
.castelo .indice a:hover { color: var(--muralha); border-bottom-color: var(--calcada); }
.castelo .indice a[aria-current] { border-bottom-color: var(--muralha); }
@media (min-width: 900px) { .castelo .indice ul { gap: 44px; } }
.castelo .indice + .section { border-top: 0; }

/* Variante da coluna-guia com nota lateral: 280px 1fr 320px. */
@media (min-width: 1200px) {
  .castelo .rail--nota { grid-template-columns: 280px minmax(0, 1fr) 320px; }
  .castelo .rail--nota .rail__nota { position: sticky; top: 88px; align-self: start; }
}

.castelo .dupla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 900px) { .castelo .dupla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; } }

/* Cronologia: o ano na serifa, o facto ao lado, um filete entre cada. */
.castelo .cronologia { list-style: none; margin: 0; padding: 0; border-bottom: var(--hairline) solid var(--calcada); }
.castelo .cronologia li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding-block: 20px;
  border-top: var(--hairline) solid var(--calcada);
}
@media (min-width: 640px) { .castelo .cronologia li { grid-template-columns: 128px minmax(0, 1fr); gap: 28px; } }
.castelo .cronologia time { font-family: var(--serif); font-size: var(--t-title); font-weight: 600; line-height: 1.3; color: var(--muralha); }
.castelo .cronologia time small { display: block; margin-top: 4px; font-family: var(--sans); font-size: var(--t-micro); font-weight: 400; color: var(--tinta-aguada); }
.castelo .cronologia p { font-size: var(--t-body); line-height: 1.65; }

/* Fotografias: recorte fixo por proporção, e o crédito que a licença pede na
   legenda. O fundo Sombra da Cal segura o lugar enquanto a imagem carrega. */
.castelo .fotografia { margin: 0; display: grid; gap: 10px; align-content: start; }
.castelo .fotografia img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: var(--proporcao, 3 / 2);
  object-fit: cover;
  background: var(--sombra-da-cal);
}
.castelo .fotografia--panorama { --proporcao: 4 / 3; }
@media (min-width: 640px) { .castelo .fotografia--panorama { --proporcao: 21 / 9; } }
.castelo .fotografia--vertical { --proporcao: 4 / 5; }
.castelo .fotografia figcaption { font-size: var(--t-micro); line-height: 1.55; color: var(--tinta-aguada); }
.castelo .fotografia figcaption a { color: var(--tinta-aguada); }
.castelo .fotografia figcaption a:hover { color: var(--ginjinha-funda); }
.castelo .credito { display: block; }

.castelo .fotos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 640px) { .castelo .fotos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .castelo .fotos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.castelo .tile__texto { font-size: var(--t-body); line-height: 1.65; margin-top: 10px; }

/* A agenda é a grelha dos meses do sistema, aqui com quatro. */
.castelo .agenda .month__evento { font-size: var(--t-title); }
.castelo .agenda .month__texto { font-size: var(--t-body); line-height: 1.6; margin-top: 8px; }
.castelo .agenda .month__note { margin-top: 16px; }

.castelo .lista-def { margin: 0; border-bottom: var(--hairline) solid var(--calcada); }
.castelo .lista-def > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding-block: 20px;
  border-top: var(--hairline) solid var(--calcada);
}
@media (min-width: 640px) { .castelo .lista-def > div { grid-template-columns: 140px minmax(0, 1fr); gap: 24px; } }
.castelo .lista-def dt { padding-top: 5px; }
.castelo .lista-def dd { margin: 0; font-size: var(--t-body); line-height: 1.65; }

/* Perguntas: abrem e fecham sem JavaScript, e o texto é o mesmo da marcação. */
.castelo .perguntas { border-bottom: var(--hairline) solid var(--calcada); }
.castelo .perguntas details { border-top: var(--hairline) solid var(--calcada); }
.castelo .perguntas summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 44px;
  padding-block: 18px;
}
.castelo .perguntas summary::-webkit-details-marker { display: none; }
.castelo .perguntas summary h3 { font-size: var(--t-title); }
.castelo .perguntas summary svg { flex: none; color: var(--muralha); transition: transform var(--toque); }
.castelo .perguntas details[open] summary svg { transform: rotate(45deg); }
.castelo .perguntas details p { padding-bottom: 22px; font-size: var(--t-body); line-height: 1.7; max-width: var(--measure); }
@media (prefers-reduced-motion: reduce) { .castelo .perguntas summary svg { transition: none; } }

.castelo .antes .tile { display: flex; gap: 16px; align-items: flex-start; }
.castelo .antes .tile svg { flex: none; margin-top: 3px; color: var(--muralha); }
.castelo .antes .tile p { font-size: var(--t-body); line-height: 1.6; }

.castelo .a-caminho__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.castelo .a-caminho__dados { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 640px) { .castelo .a-caminho__dados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.castelo .a-caminho__dados .datum__value { color: var(--cal-de-obidos); }

/* ─────────────────────────────  PROVA  ───────────────────────────── */

.proof { text-decoration: none; display: inline-block; }
.crate--prova .proof__score, .crate--prova .proof__src { display: block; }
.proof__score {
  font-family: var(--serif);
  font-size: var(--t-figure);
  font-weight: 700;
  line-height: 1;
  color: var(--ginjinha);
  letter-spacing: -0.02em;
}
.proof__src { font-size: var(--t-small); color: var(--tinta-aguada); margin-top: 6px; }
.proof:hover .proof__score { color: var(--ginjinha-funda); }
.proof:hover .proof__src { color: var(--tinta); }

/* ─────────────────────────────  UTILITÁRIOS  ───────────────────────────── */

.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }
.stack-32 > * + * { margin-top: 32px; }
.stack-40 > * + * { margin-top: 40px; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  max-width: var(--content-max);
  margin-inline: auto;
}
.rail .split, .rail__body .split { max-width: none; }
@media (min-width: 900px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } }
@media (min-width: 1200px) { .split { gap: 64px; } }

.rule { border: 0; border-top: var(--hairline) solid var(--calcada); margin: 0; }
.on-dark .rule { border-top-color: var(--calcada-noite); }

.month__list--last { margin-bottom: 0; }
.datum__value--spaced { margin-top: 10px; }
.notice--spaced { margin-top: 24px; }
.prose--spaced { margin-top: 20px; }
.tile__icon { margin-bottom: 16px; }
.arrow-link--static { margin-top: 14px; min-height: 0; }

.map-frame {
  background: var(--breu);
  border: var(--hairline) solid var(--calcada-noite);
  padding: 20px;
}
@media (min-width: 640px) { .map-frame { padding: 28px; } }
.map-frame__caption { font-size: var(--t-micro); color: var(--poeira); margin-top: 12px; font-style: italic; }
.map-frame__action { margin-top: 16px; }
figure.map-frame { margin: 0; }