/**
 * style.css — PORTO 100 PORTAS (dentro de Cid@d’ART)
 * ============================================================================
 * IMPORTANTE: este ficheiro NÃO define cor nem tipografia própria. A
 * página que o usa (porta.html) carrega primeiro ../assets/css/style.css
 * (a folha de estilos partilhada do site Cid@d’ART) e só depois este
 * ficheiro — que acrescenta apenas as regras ESTRUTURAIS que o resto do
 * site não precisa de ter (secções de ecrã inteiro com scroll-snap, o
 * comparador foto/desenho, a camada fixa de navegação, o painel do
 * artefacto generativo). Todas as cores usadas aqui são var(--color-...),
 * lidas do :root definido em ../assets/css/style.css (relativo a
 * porta.html) — se a paleta do site mudar, esta página acompanha-a
 * automaticamente, sem precisar de edição.
 *
 * Classes REUTILIZADAS do site (não redefinidas aqui): .eyebrow, .button,
 * .button--secondary, .text-link, .reveal / .reveal.is-visible, .sr-only.
 *
 * Índice:
 *   1. Andaime de scroll / secções de ecrã inteiro
 *   2. Cursor técnico personalizado
 *   3. Camada fixa — marca, ecrã inteiro, progresso
 *   4. Capa
 *   5. Ficha técnica (morada / coordenadas)
 *   6. Fotografia
 *   7. Desenho + comparador
 *   8. Poema
 *   9. Artefacto generativo + controlos
 *  10. Rodapé
 *  11. Visualizador em ecrã inteiro (fotografia e desenho)
 *  12. Responsividade
 *  13. Movimento reduzido
 * ============================================================================
 */

/* ---------------------------------------------------------------------------
   1. ANDAIME DE SCROLL
--------------------------------------------------------------------------- */
.andaime {
  scroll-snap-type: y mandatory;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--color-bg);
}

.estacao {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
}

/* Título de secção: usa o mesmo h2 editorial do resto do site (Georgia,
   ver ../../assets/css/style.css), só ajustado a caber numa secção de
   ecrã inteiro em vez de uma página normal. */
.estacao__titulo {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.98;
  color: var(--color-text);
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.6rem);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   2. CURSOR TÉCNICO PERSONALIZADO
   Uma pequena mira, na cor de acento do site, só sobre as zonas
   realmente interativas (comparador e artefacto).
--------------------------------------------------------------------------- */
.mira-interativa {
  cursor: crosshair;
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='26'%20viewBox='0%200%2026%2026'%3E%3Ccircle%20cx='13'%20cy='13'%20r='8'%20fill='none'%20stroke='%238f1118'%20stroke-width='1.4'/%3E%3Cline%20x1='13'%20y1='0'%20x2='13'%20y2='6'%20stroke='%238f1118'%20stroke-width='1.4'/%3E%3Cline%20x1='13'%20y1='20'%20x2='13'%20y2='26'%20stroke='%238f1118'%20stroke-width='1.4'/%3E%3Cline%20x1='0'%20y1='13'%20x2='6'%20y2='13'%20stroke='%238f1118'%20stroke-width='1.4'/%3E%3Cline%20x1='20'%20y1='13'%20x2='26'%20y2='13'%20stroke='%238f1118'%20stroke-width='1.4'/%3E%3C/svg%3E")
    13 13, crosshair;
}

/* ---------------------------------------------------------------------------
   3. CAMADA FIXA — marca, ecrã inteiro, progresso
   mix-blend-mode: difference garante legibilidade sobre qualquer secção,
   clara ou sobre a fotografia da capa, sem depender de JS para trocar cor.
--------------------------------------------------------------------------- */
.camada-fixa {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  padding: max(1.1rem, env(safe-area-inset-top)) 1.1rem max(1.1rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}
.camada-fixa__topo {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.camada-fixa__meio {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marca-site {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  color: #fff;
  mix-blend-mode: difference;
  text-decoration: none;
  pointer-events: auto;
}

.acoes-fixas { display: flex; gap: 0.5rem; pointer-events: auto; }
.botao-icone {
  width: 2.3rem;
  height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  mix-blend-mode: difference;
}
.botao-icone svg { width: 1.05rem; height: 1.05rem; }
.botao-icone:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }

.progresso {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  pointer-events: auto;
}
.progresso__trilho {
  position: relative;
  width: 2px;
  height: 6.5rem;
  background: rgba(255, 255, 255, 0.35);
  mix-blend-mode: difference;
}
.progresso__marcador {
  position: absolute;
  left: 50%;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  transform: translate(-50%, 0);
  transition: top 450ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 47.9375em) {
  .progresso { display: none; }
}

/* ---------------------------------------------------------------------------
   4. CAPA
   Único momento do artefacto com um véu escuro — não é um "tema escuro"
   próprio, é o tratamento universal de legibilidade de texto sobre
   fotografia de fundo, também usado (mais discretamente) no .hero__visual
   do resto do site.
--------------------------------------------------------------------------- */
.capa { color: #fff; }
.capa__fundo { position: absolute; inset: 0; z-index: 0; }
.capa__fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: grayscale(0.15) contrast(1.03);
  animation: capa-zoom 18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes capa-zoom {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}
.capa__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(13, 13, 13, 0.88) 0%, rgba(13, 13, 13, 0.32) 45%, rgba(13, 13, 13, 0.48) 100%);
}
.capa__conteudo {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(2rem, 6vw, 4rem) 1.25rem clamp(4rem, 10vw, 7rem);
  max-width: var(--max-width);
  margin-inline: auto;
  width: 100%;
}
.capa__eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.88;
  margin-bottom: 0.75rem;
}
.capa__numero {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(5rem, 3rem + 11vw, 12rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: #fff; /* o site define h1 com --color-text (escuro); aqui o h1 está sobre a foto com véu escuro, por isso precisa de sobrepor essa regra */
  margin: 0;
}
.capa__morada {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2.2rem);
  margin-top: 0.4rem;
}
.capa__desliza {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.85;
}
.capa__desliza-linha {
  width: 1px;
  height: 2.2rem;
  background: linear-gradient(to bottom, transparent, #fff 40%, transparent);
  animation: desliza 1.8s ease-in-out infinite;
}
@keyframes desliza {
  0% { transform: translateY(-60%); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(60%); opacity: 0; }
}

/* ---------------------------------------------------------------------------
   5. FICHA TÉCNICA (morada / coordenadas / mapa)
   Os rótulos (dt) reutilizam .eyebrow do site — é exatamente o mesmo
   padrão que já usam para pequenas legendas curatoriais.
--------------------------------------------------------------------------- */
.ficha { display: grid; gap: 1.25rem; }
.ficha__item dt { margin-bottom: 0.25rem; }
.ficha__item dd { font-size: 1.05rem; font-weight: 500; }

/* ---------------------------------------------------------------------------
   6. FOTOGRAFIA
--------------------------------------------------------------------------- */
.fotografia { padding: clamp(2rem, 6vw, 4rem) 1.25rem; }
.fotografia__cabecalho {
  max-width: var(--max-width);
  margin-inline: auto;
  width: 100%;
  margin-bottom: 1.5rem;
  text-align: left;
}
.fotografia__grelha {
  max-width: var(--max-width);
  margin-inline: auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  flex: 1;
  min-height: 0;
}
.fotografia__moldura {
  position: relative;
  border: 1px solid var(--color-line);
  background: var(--color-paper);
  padding: 0.6rem;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
}
.fotografia__moldura:hover,
.fotografia__moldura:focus-visible { border-color: var(--color-accent); }
.fotografia__moldura:focus-visible { outline: 3px solid rgba(143, 17, 24, 0.35); outline-offset: 4px; }
.fotografia__moldura img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 70vh;
  filter: grayscale(0.12) contrast(1.02);
}
.fotografia__legenda-canto {
  position: absolute;
  bottom: -1.6rem;
  right: 0;
  font-size: 0.72rem;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}
.fotografia__texto { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); }

/* ---------------------------------------------------------------------------
   7. DESENHO + COMPARADOR
--------------------------------------------------------------------------- */
.desenho { justify-content: center; padding: clamp(2rem, 6vw, 4rem) 1.25rem; }
.desenho__cabecalho {
  max-width: var(--max-width);
  margin-inline: auto;
  width: 100%;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.desenho__acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
.desenho__instrucao { font-size: 0.85rem; color: var(--color-muted); text-align: right; }
.desenho__zoom { display: flex; align-items: center; gap: 0.4rem; }
.desenho__zoom-valor {
  min-width: 3.4ch;
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.botao-zoom {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-text);
  font-size: 1.2rem;
  line-height: 1;
}
.botao-zoom:hover { border-color: var(--color-accent); color: var(--color-accent); }
.botao-zoom:disabled { opacity: 0.35; pointer-events: none; }
.botao-zoom svg { width: 1rem; height: 1rem; } /* gatilho "ver desenho em ecrã inteiro": mesma moldura do botão, ícone em vez de texto */
.desenho__zoom-reset { min-height: 2.25rem; padding: 0 0.85rem; font-size: 0.7rem; }
.desenho__palco {
  max-width: var(--max-width);
  margin-inline: auto;
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comparador {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  min-width: 240px;
  min-height: 240px;
  overflow: hidden;
  background: var(--color-paper);
  touch-action: none;
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow);
}
.comparador.zoom-ativo { cursor: grab; }
.comparador.zoom-ativo.a-arrastar { cursor: grabbing; }
.comparador__conteudo {
  position: absolute;
  inset: 0;
  transform-origin: center center;
}
.comparador__camada { position: absolute; inset: 0; }
.comparador__camada img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.comparador__camada--foto { z-index: 1; }
.comparador__camada--foto img { filter: grayscale(0.12) contrast(1.02); }
.comparador__camada--desenho {
  z-index: 2;
  background: var(--color-paper);
  clip-path: inset(0 calc(100% - var(--posicao, 50%)) 0 0);
}
.comparador__linha {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--posicao, 50%);
  z-index: 3;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  transform: translateX(-50%);
}
.comparador__alca {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--zoom-inverso, 1));
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}
.comparador__alca svg { width: 1.2rem; height: 1.2rem; color: #fff; }
.comparador__linha:focus-visible .comparador__alca { outline: 2px solid var(--color-text); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   8. POEMA
   Tratamento tipográfico: o mesmo Georgia itálico que o site já usa em
   .hero__subtitle para o registo literário — aqui aplicado ao poema
   completo, não inventa uma família tipográfica nova.
--------------------------------------------------------------------------- */
.poema { padding: clamp(2rem, 6vw, 4rem) 1.25rem; }
.poema__topo {
  max-width: var(--max-width);
  margin-inline: auto;
  width: 100%;
  margin-bottom: 1.5rem;
  text-align: left;
}
.poema__palco {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
.poema__corpo { max-width: 42rem; width: 100%; text-align: left; font-size: clamp(1.3rem, 1rem + 1.1vw, 2rem); }
.poema__cabecalho {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 2rem;
}
.poema__estrofe {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.45;
  color: var(--color-text);
  margin-bottom: 1.75rem;
}
.poema__estrofe:last-child { margin-bottom: 0; }
.poema__linha { display: block; }

/* ---------------------------------------------------------------------------
   9. ARTEFACTO GENERATIVO + CONTROLOS
   O fundo do canvas é uma cor plana (corDeFundo em sketch.js, escolhida
   pelo visitante no seletor "Cor de fundo") — não desenha o desenho.png
   como camada visível; este só governa, invisivelmente, onde e como cada
   voluta pode nascer (ver shape-extract.js). .artefacto__palco define
   aqui uma proporção 3:2 de reserva (caso o JS falhe), mas quem decide o
   tamanho final em pixels é configurarDimensaoDoArtefacto() em main.js —
   ver o comentário nessa função para saber porquê o CSS sozinho não
   chega quando a altura disponível é o fator limitante.
--------------------------------------------------------------------------- */
.artefacto { padding: clamp(2rem, 6vw, 4rem) 1.25rem; }
.artefacto__cabecalho {
  max-width: var(--max-width);
  margin-inline: auto;
  width: 100%;
  margin-bottom: 1.5rem;
}
.artefacto__palco {
  max-width: var(--max-width);
  margin-inline: auto;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 100%;
  position: relative;
  background: var(--color-bg);
  border: 1px solid #000;
  overflow: hidden;
}
.artefacto__tela { position: absolute; inset: 0; z-index: 0; }
.artefacto__tela canvas { display: block; }

.artefacto__painel {
  position: relative;
  max-width: var(--max-width);
  margin-inline: auto;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
}
.artefacto__legenda { max-width: 22rem; }
/* Nota de rodapé: alvo direto no <p>, porque o `p { font-size: clamp(...) }`
   da folha partilhada do site aplica-se ao próprio elemento <p> e, sendo
   uma regra direta sobre o elemento, vence sempre um font-size herdado do
   contentor (mesmo que o contentor tivesse mais especificidade) — definir
   o tamanho no .artefacto__legenda (o <div>) nunca chegava a ter efeito. */
.artefacto__legenda p { font-size: 0.62rem; line-height: 1.45; color: var(--color-muted); margin: 0; }

.artefacto__controlos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: center;
}

/* Controlo genérico do artefacto — usado tanto pelo cursor de largura da
   linha como pelos dois seletores de cor, para os três lerem como um
   único sistema uniforme (mesma etiqueta, mesmo espaçamento, mesma
   cor de acento), em vez de três controlos com lógicas visuais diferentes. */
.controlo {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  min-width: 8rem;
}

.controlo input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--color-line);
  outline: none;
  margin: 0.3rem 0;
}
.controlo input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-accent);
  cursor: pointer;
  margin-top: -6px;
}
.controlo input[type="range"]::-moz-range-track { height: 2px; background: var(--color-line); }
.controlo input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-accent);
  cursor: pointer;
}

/* Seletores de cor (forma / fundo): uma pequena amostra circular, para
   ler como "a mesma família" do cursor de largura, não como um controlo
   nativo do browser destoante. */
.controlo input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  cursor: pointer;
  background: none;
}
.controlo input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; border-radius: 50%; }
.controlo input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
.controlo input[type="color"]::-moz-color-swatch { border: none; border-radius: 50%; }

.artefacto__botoes { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.artefacto__noscript {
  position: relative;
  z-index: 1;
  margin: auto;
  padding: 2rem;
  font-size: 0.85rem;
  color: var(--color-muted);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   10. RODAPÉ
--------------------------------------------------------------------------- */
.rodape { justify-content: space-between; padding: clamp(2rem, 6vw, 4rem) 1.25rem clamp(1.5rem, 4vw, 2.5rem); }
.rodape__topo {
  max-width: var(--max-width);
  margin-inline: auto;
  width: 100%;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
}
.rodape__navegacao { display: flex; flex-direction: column; gap: 0.5rem; align-self: end; }
.rodape__link-galeria {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--color-text);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.rodape__link-galeria:hover { color: var(--color-accent); }
.rodape__link-galeria svg { width: 0.75em; height: 0.75em; transition: transform 220ms ease; }
.rodape__link-galeria:hover svg { transform: translateX(3px); }
.rodape__base {
  max-width: var(--max-width);
  margin-inline: auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--color-muted);
  border-top: 1px solid var(--color-line);
  padding-top: 1.25rem;
  margin-top: 1.5rem;
}
.rodape__base strong { color: var(--color-accent); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   11. VISUALIZADOR EM ECRÃ INTEIRO (fotografia e desenho)
   Sobreposição fixa, acima de tudo (inclui a .camada-fixa, z-index 40) —
   mostra uma única imagem (fotografia OU desenho, nunca as duas) com zoom
   e pan; sem linha de comparação, ao contrário do comparador da secção 02.
   Começa escondida via [hidden]; configurarVisualizador() em main.js
   trata de mostrar/esconder e ligar as interações (ver porta.html).
--------------------------------------------------------------------------- */
.visualizador {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-black); /* opaco: um fundo translúcido deixava o título da página por baixo transparecer atrás dos controlos de zoom, difícil de ler */
  display: flex;
  flex-direction: column;
}
.visualizador[hidden] { display: none; }
.visualizador__barra {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: max(1.1rem, env(safe-area-inset-top)) 1.1rem 1rem;
}
.visualizador__zoom { display: flex; align-items: center; gap: 0.4rem; }
.visualizador__zoom .botao-zoom,
.visualizador__fechar { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.visualizador__zoom .botao-zoom:hover,
.visualizador__fechar:hover { border-color: #fff; color: #fff; }
.visualizador button:focus-visible { outline-color: #fff; }
.visualizador__zoom-valor {
  min-width: 3.4ch;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
  font-variant-numeric: tabular-nums;
}
.visualizador__fechar {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.visualizador__fechar svg { width: 1.1rem; height: 1.1rem; }
.visualizador__janela {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  touch-action: none;
  cursor: zoom-in;
}
.visualizador__janela.zoom-ativo { cursor: grab; }
.visualizador__janela.zoom-ativo.a-arrastar { cursor: grabbing; }
.visualizador__conteudo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
}
.visualizador__conteudo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------------------------------------------------------------------------
   12. RESPONSIVIDADE
--------------------------------------------------------------------------- */
@media (max-width: 61.9375em) {
  .fotografia__grelha { grid-template-columns: 1fr; gap: 2rem; }
  .rodape__topo { grid-template-columns: 1fr; gap: 1.5rem; }
  .rodape__navegacao { align-self: start; }
}
@media (max-width: 47.9375em) {
  .desenho__cabecalho { align-items: flex-start; flex-direction: column; gap: 0.5rem; }
  .desenho__acoes { align-items: flex-start; }
  .desenho__instrucao { text-align: left; }
  /* As 5 peças do brinco de zoom (−, valor, +, Ajustar, ver em ecrã inteiro)
     não cabem numa só linha em ecrãs estreitos — sem flex-wrap, o
     flex-shrink por omissão comprime os botões (medido: o último ficava
     com 30px de largura em vez dos 36px de .botao-zoom, quase impercetível
     e difícil de tocar com precisão). */
  .desenho__zoom { flex-wrap: wrap; row-gap: 0.6rem; }
  .artefacto__painel { flex-direction: column; align-items: stretch; }
  .artefacto__controlos { justify-content: space-between; }
  .artefacto__botoes { justify-content: stretch; }
  .artefacto__botoes .button,
  .artefacto__botoes .button--secondary { flex: 1; }
}

/* ---------------------------------------------------------------------------
   13. MOVIMENTO REDUZIDO
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .andaime { scroll-behavior: auto; }
  .capa__fundo img { animation: none; }
  .capa__desliza-linha { animation: none; }
}