/* ==========================================================================
   Essence Tântric · visualizador de fotografias
   Autor: DEVOPS (Coneki) · 25/09/2026 · cliente Essence Tântric

   Abre a fotografia em cima da página (pedido do dono, 25/09/2026: «ao clicar
   na foto ela abre sem nenhum efeito tipo lightbox»). Só usa tokens do
   contrato: nenhuma cor, espaço ou raio escrito à mão.

   Contraste: os controlos são tinta (#111111) com o creme do contrato
   (#F2E4D8) por cima — 15,16:1, o par já medido do rodapé. Os alvos têm a
   altura de controlo do contrato (48px). O fundo é a tinta da casa a 92%, para
   a fotografia continuar a ser o que brilha.
   ========================================================================== */

html.visualizador-aberto,
html.visualizador-aberto body {
  overflow: hidden;
}

.visualizador {
  /* Caixa maior do que o ecrã: o que se vê é o interior. O espaço à volta é o
     alvo do toque que fecha. */
  width: 100%;
  max-width: none;
  max-height: none;
  height: 100%;
  margin: 0;
  padding: var(--esp-4);
  border: 0;
  background: transparent;
  color: var(--cor-texto-escuro);
}

.visualizador::backdrop {
  background: color-mix(in srgb, var(--cor-fundo-escuro) 92%, transparent);
}

/* Sem animação de entrada com `prefers-reduced-motion`: a caixa aparece de
   imediato para quem pediu menos movimento. */
@media (prefers-reduced-motion: no-preference) {
  .visualizador[open] .visualizador__interior {
    animation: visualizador-entra var(--dur-media) var(--ease-padrao);
  }
}

@keyframes visualizador-entra {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: none; }
}

.visualizador__interior {
  display: grid;
  /* `minmax(0, 1fr)` e não `1fr`: com a linha a crescer pelo conteúdo, uma
     fotografia de 1 200 px empurrava o pé para fora do ecrã e o botão de fechar
     ficava debaixo da imagem (medido a 390 px em 25/09/2026). */
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--esp-3);
  width: min(100%, 1400px);
  height: 100%;
  margin: 0 auto;
}

.visualizador__quadro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Sem `place-items: center`: centrar o item encolhe-o ao conteúdo, e a
     fotografia — com altura a 100% de um pai de altura automática — voltava a
     crescer até 1 550 px dentro de um quadro de 808. Com o item esticado, o
     `object-fit: contain` é que centra a imagem, e não o layout. */
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

/* O `picture` é inline por omissão e uma percentagem de altura dentro de um
   inline com altura automática é ignorada: a fotografia crescia até à altura
   natural (1 328 px num quadro de 808) e passava por cima do pé da caixa — o
   botão de fechar ficava debaixo da imagem, medido a 390 px em 25/09/2026.

   A correcção não é apertar percentagens: o quadro é a caixa, e a fotografia
   preenche-a toda com `object-fit: contain`, que a desenha inteira, centrada e
   sem distorção, seja qual for a proporção do original. Nada é cortado. */
/* O `picture` é ancorado ao quadro (`inset: 0`) em vez de esticado por
   percentagens: com altura a 100% de um pai de altura automática, o navegador
   tratava-a como `auto` e a fotografia crescia até 1 550 px num quadro de 808 —
   passava por cima do pé da caixa e o botão de fechar ficava debaixo da imagem
   (medido a 390 px e a 1 440 px em 25/09/2026). Ancorado, o quadro é a medida e
   o `object-fit: contain` desenha a fotografia inteira, centrada e sem
   distorção, seja qual for a proporção do original. */
.visualizador__quadro picture {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
}

.visualizador__quadro picture,
.visualizador__quadro img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.visualizador__quadro img {
  object-fit: contain;
  border-radius: var(--raio-fio);
}

.visualizador__pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: var(--altura-controlo);
}

.visualizador__legenda {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--fs-legenda);
  letter-spacing: var(--tracking-legenda);
  color: var(--cor-texto-escuro-suave);
}

.visualizador__contador {
  margin: 0;
  font-size: var(--fs-legenda);
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto-escuro);
}

.visualizador__controlos {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

.visualizador__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-width: var(--altura-controlo);
  min-height: var(--altura-controlo);
  padding: 0 var(--esp-3);
  border: 0;
  border-radius: var(--raio-controlo);
  background: var(--cor-fundo-escuro);
  color: var(--cor-texto-escuro);
  font: inherit;
  font-size: var(--fs-legenda);
  letter-spacing: var(--tracking-legenda);
  text-transform: uppercase;
  cursor: pointer;
}

.visualizador__botao:hover {
  background: var(--cor-marca);
}

.visualizador__botao:focus-visible {
  outline: var(--foco-largura) solid var(--cor-foco-escuro);
  outline-offset: var(--foco-deslocamento);
}

.visualizador__botao:disabled {
  opacity: 0.5;
  cursor: default;
}

.visualizador__botao:disabled:hover {
  background: var(--cor-fundo-escuro);
}

/* O texto dos botoes vive escondido (o icone e que fala) e continua a ser lido
   pelo leitor de ecra. A classe e desta folha, e nao a da ficha: na pagina do
   spa — que carrega este ficheiro por `<link>` sem o `ficha.css` — o rotulo
   aparecia a vista e os botoes mediam 101px em vez de 48 (medido a 25/09/2026). */
.visualizador__oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Os controlos vivem no pé, sobre a tinta da caixa e nunca por cima da
   fotografia: é o par creme-sobre-tinta (15,16:1) já medido no rodapé. */

@media (max-width: 639px) {
  .visualizador {
    padding: var(--esp-3);
  }

  .visualizador__pe {
    flex-wrap: wrap;
    justify-content: center;
  }

  .visualizador__legenda {
    order: 2;
    flex-basis: 100%;
    text-align: center;
  }
}