/* ==========================================================================
   Página de links — a que vai na bio do Instagram e dentro da tag.

   A FOTO DO NEGÓCIO É O FUNDO. Ela passa sozinha, devagar, atrás de um véu
   escuro; o conteúdo fica num cartão de vidro por cima. Quem abre isso está
   no celular, de pé, e vai tocar em uma coisa só -- então continua uma
   coluna, botão grande e nada que role sem necessidade.

   A cor e a tipografia vêm do próprio negócio, pelas variáveis que o gerador
   escreve na página (--acao, --acao-contraste, --fundo, as duas fontes).
   Aqui nada é cravado: trocar a cor do cliente troca a página inteira.

   SOBRE O TEMA CLARO: com foto no fundo, texto escuro não tem como funcionar
   -- a foto muda a cada seis segundos e nenhum tom de cinza serve para todas.
   Por isso o cartão é sempre escuro, nos 24 clientes, e o que distingue um do
   outro é a COR DE AÇÃO e a FOTO. O `data-tema` do gerador continua lido só
   para escolher o tom do véu.
   ========================================================================== */

:root {
  --acao: #e8c547;
  --acao-contraste: #10100f;
  --fundo: #0b0b0f;
  --fonte-display: system-ui, sans-serif;
  --fonte-texto: system-ui, sans-serif;

  --tinta: #f7f7f5;
  --tinta-fraca: rgba(247, 247, 245, .66);
  --tinta-apagada: rgba(247, 247, 245, .44);
  --vidro: rgba(16, 16, 20, .52);
  --borda: rgba(255, 255, 255, .14);
  --borda-forte: rgba(255, 255, 255, .3);

  --raio: 26px;
  --raio-item: 16px;
  --mola: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  padding: clamp(1.25rem, 5vw, 2.75rem) 1rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ------------------------------------------------------------------ palco
   O fundo: as fotos do cliente, o véu que as escurece e um grão fino por
   cima. Montado pelo script a partir das fotos que já estão na página -- sem
   script, o que sobra é o gradiente da marca, que também é bonito.
   -------------------------------------------------------------------- */

.palco {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* o gradiente da marca é o que aparece quando o cliente não tem foto */
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--acao) 34%, transparent), transparent 62%),
    linear-gradient(170deg, color-mix(in srgb, var(--acao) 12%, var(--fundo)), var(--fundo) 55%);
}

.palco__foto {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.4s ease;
  will-change: opacity, transform;
}

/* A foto da vez aparece e dá um zoom lento (efeito Ken Burns): parada, uma
   foto de celular num fundo fixo denuncia que é papel de parede. */
.palco__foto.is-ativa {
  opacity: 1;
  animation: respira-foto 9s linear forwards;
}

@keyframes respira-foto {
  from { transform: scale(1.06); }
  to   { transform: scale(1.15); }
}

/* Véu: escurece de cima para baixo e puxa um pouco da cor da marca no topo.
   Sem ele o texto branco some em foto clara. */
.palco__veu {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--acao) 26%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(8, 8, 10, .58) 0%, rgba(8, 8, 10, .74) 42%, rgba(8, 8, 10, .93) 100%);
}

/* Vinheta: fecha os cantos e empurra o olho para o meio. */
.palco__veu::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 100% at 50% 45%, transparent 38%, rgba(0, 0, 0, .55) 100%);
}

/* Grão: textura fina, só para a imagem não ficar com cara de banco de fotos
   esticado. É SVG inline -- nenhum arquivo a mais para baixar. */
.palco__grao {
  position: absolute;
  inset: -50%;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: treme-grao 1.2s steps(3) infinite;
}

@keyframes treme-grao {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

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

.cartao {
  position: relative;
  z-index: 1;
  width: min(100%, 27.5rem);
  margin-inline: auto;
  padding: clamp(1.5rem, 5vw, 2rem) clamp(1.1rem, 4vw, 1.6rem) 1.5rem;
  text-align: center;
  border-radius: var(--raio);
  background: var(--vidro);
  border: 1px solid var(--borda);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .07) inset,
    0 30px 70px -30px rgba(0, 0, 0, .9);
  animation: sobe-cartao .7s var(--mola) both;
}

@keyframes sobe-cartao {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ marca */

.logo, .mono {
  width: 5.75rem;
  height: 5.75rem;
  margin: 0 auto 1rem;
  display: block;
  border-radius: 24px;
  animation: entra-marca .6s .05s var(--mola) both;
}

.logo { object-fit: cover; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .9); }

.mono {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, color-mix(in srgb, var(--acao) 88%, #fff), var(--acao));
  color: var(--acao-contraste);
  font-family: var(--fonte-display);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .5) inset,
    0 0 0 1px color-mix(in srgb, var(--acao) 50%, transparent),
    0 18px 44px -16px color-mix(in srgb, var(--acao) 70%, transparent);
}

@keyframes entra-marca {
  from { opacity: 0; transform: scale(.82) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

h1 {
  font-family: var(--fonte-display);
  font-size: clamp(1.55rem, 6.4vw, 2rem);
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 .5rem;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .5);
  animation: sobe-item .6s .12s var(--mola) both;
}

.bio {
  margin: 0 auto;
  color: var(--tinta-fraca);
  font-size: .975rem;
  max-width: 30ch;
  animation: sobe-item .6s .18s var(--mola) both;
}

@keyframes sobe-item {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ selo */

.selo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding: .35rem .85rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  font-size: .8125rem;
  color: var(--tinta-fraca);
  animation: sobe-item .6s .22s var(--mola) both;
}

.selo::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--tinta-apagada);
}

.selo[data-aberto="sim"] { color: var(--tinta); border-color: var(--borda-forte); }
.selo[data-aberto="sim"]::before {
  background: #35d07f;
  box-shadow: 0 0 0 0 rgba(53, 208, 127, .55);
  animation: pulsa-selo 2.2s ease-out infinite;
}

@keyframes pulsa-selo {
  0%   { box-shadow: 0 0 0 0 rgba(53, 208, 127, .55); }
  100% { box-shadow: 0 0 0 9px rgba(53, 208, 127, 0); }
}

/* ------------------------------------------------------------------ links */

/* DUAS POR LINHA. O botão é mais baixo e mais estreito que antes porque os
   canais de contato saíram daqui para a fileira de ícones acima -- o que
   sobra é ação secundária (cardápio, rota, avaliação) e não precisa do mesmo
   peso. Item ímpar sobrando ocupa a linha inteira: uma pílula órfã num canto
   desequilibra a coluna. */
.links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin: 1.1rem 0 0;
}
.links > .link:last-child:nth-child(odd) { grid-column: 1 / -1; }

.link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  justify-content: center;
  gap: .45rem;
  padding: .65rem .7rem;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: var(--tinta);
  text-decoration: none;
  text-align: left;
  overflow: hidden;
  /* item de grade nao encolhe abaixo do min-content sem isto: um subtitulo
     longo empurrava a largura da pagina inteira */
  min-width: 0;
  transition:
    transform .22s var(--mola),
    border-color .22s ease,
    background-color .22s ease;
  /* a entrada em cascata: o --i é escrito pelo script, item a item */
  animation: sobe-item .55s calc(.26s + var(--i, 0) * .06s) var(--mola) both;
}

.link:hover, .link:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--acao) 70%, transparent);
  background: rgba(255, 255, 255, .1);
}
.link:active { transform: translateY(-1px) scale(.995); }
.link:focus-visible { outline: 2px solid var(--acao); outline-offset: 3px; }

/* ícone num quadrado tingido com a cor da marca; no toque ele se acende */
.link__i {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  color: var(--acao);
  transition: transform .22s var(--mola);
}
.link:hover .link__i, .link:focus-visible .link__i { transform: scale(1.12); }

.link__t {
  font-family: var(--fonte-display);
  font-size: .875rem;
  line-height: 1.15;
  min-width: 0;
  /* quebra em vez de cortar: meio rótulo não diz o que o botão faz */
  text-wrap: balance;
}
.link__t small {
  display: block;
  font-family: var(--fonte-texto);
  font-size: .8125rem;
  font-weight: 400;
  color: var(--tinta-fraca);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: .1rem;
}

.link__seta { display: none; }
.link__t small { display: none; }

/* O PRIMEIRO BOTÃO É O QUE CONVERTE (`:first-child`, e não uma classe que o
   script poria: assim o destaque existe mesmo sem JavaScript): ganha a cor cheia da marca, um halo e um
   brilho que atravessa de tempos em tempos. Só ele -- brilho em tudo vira
   ruído e nenhum botão se destaca. */
.links:not(.links--pilulas) > .link:first-child {
  background: var(--acao);
  color: var(--acao-contraste);
  border-color: color-mix(in srgb, var(--acao) 60%, #fff);
  font-weight: 700;
  box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--acao) 85%, transparent);
}
.links:not(.links--pilulas) > .link:first-child:hover, .links:not(.links--pilulas) > .link:first-child:focus-visible {
  background: color-mix(in srgb, var(--acao) 88%, #fff);
  border-color: #fff;
}
.links:not(.links--pilulas) > .link:first-child .link__t small { color: color-mix(in srgb, var(--acao-contraste) 72%, transparent); }
.links:not(.links--pilulas) > .link:first-child .link__i {
  background: color-mix(in srgb, var(--acao-contraste) 14%, transparent);
  color: var(--acao-contraste);
}
.links:not(.links--pilulas) > .link:first-child:hover .link__i, .links:not(.links--pilulas) > .link:first-child:focus-visible .link__i {
  background: var(--acao-contraste);
  color: var(--acao);
}
.links:not(.links--pilulas) > .link:first-child .link__seta { opacity: .75; }

.links:not(.links--pilulas) > .link:first-child::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: varre-brilho 4.5s ease-in-out infinite;
}

@keyframes varre-brilho {
  0%, 62% { left: -60%; }
  100%    { left: 130%; }
}

/* ------------------------------------------------------------------ fotos
   Com a foto no fundo, a tira deixa de ser galeria e vira CONTROLE do
   carrossel: cada miniatura troca o fundo. Some quando há uma foto só.
   -------------------------------------------------------------------- */

.fotos {
  display: flex;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  margin-top: 1.5rem;
  animation: sobe-item .6s .5s var(--mola) both;
}

.fotos button {
  flex: 1 1 0;
  min-width: 0;
  max-width: 6.5rem;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  opacity: .55;
  transition: opacity .22s ease, transform .22s var(--mola), box-shadow .22s ease;
}
.fotos button:hover { opacity: .85; transform: translateY(-2px); }
.fotos button[aria-current="true"] {
  opacity: 1;
  box-shadow: 0 0 0 2.5px var(--acao), 0 10px 24px -12px rgba(0, 0, 0, .9);
  border-color: transparent;
  transform: translateY(-2px);
}
.fotos button:focus-visible { outline: 2px solid var(--acao); outline-offset: 3px; }

/* a barra fina que mostra quanto falta para a próxima foto */
.tempo {
  height: 2px;
  width: min(11rem, 60%);
  margin: .9rem auto 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}
.tempo i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--acao);
  transform-origin: left;
  transform: scaleX(0);
}
.tempo i.is-correndo { animation: corre-tempo var(--duracao, 6s) linear forwards; }

@keyframes corre-tempo {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ------------------------------------------------------------------ rodapé */

.rodape {
  margin-top: 1.5rem;
  color: var(--tinta-apagada);
  font-size: .8125rem;
  animation: sobe-item .6s .56s var(--mola) both;
}

/* ---------------------------------------------------------------- índice interno */

.cartao--indice { text-align: left; width: min(100%, 36rem); }
.cartao--indice .bio { max-width: none; margin: 0; }

.indice { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .2rem; }

/* No HTML o <small> é IRMÃO do <a>, não filho. Então quem recebe o espaçamento
   e a borda é o <li>; o <a> se estica por cima com ::after, para o toque pegar
   a linha inteira e não só o nome. */
.indice li {
  position: relative;
  padding: .7rem .75rem;
  border-radius: 12px;
  border-bottom: 1px solid var(--borda);
  transition: background-color .18s ease, padding-left .18s var(--mola);
}
.indice li:last-child { border-bottom: 0; }
.indice li:hover { background: rgba(255, 255, 255, .06); padding-left: 1.15rem; }
.indice li:focus-within { outline: 2px solid var(--acao); outline-offset: 2px; }

.indice a {
  font-family: var(--fonte-display);
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
}
.indice a::after { content: ""; position: absolute; inset: 0; }
.indice a:focus-visible { outline: none; }
.indice li:hover a { color: var(--acao); }

.indice small { display: block; color: var(--tinta-fraca); font-size: .8125rem; font-weight: 400; margin-top: .1rem; }

/* ------------------------------------------------------------------ menos movimento
   Quem pediu menos movimento no sistema continua vendo TUDO -- as fotos, a
   cor, o cartão. O que para é o que se mexe sozinho. */

@media (prefers-reduced-motion: reduce) {
  .cartao, .logo, .mono, h1, .bio, .selo, .link, .fotos, .rodape {
    animation: none !important;
  }
  .palco__foto.is-ativa { animation: none; transform: scale(1.02); }
  .palco__grao { animation: none; }
  .links:not(.links--pilulas) > .link:first-child::after { animation: none; left: -60%; }
  .selo[data-aberto="sim"]::before { animation: none; }
  .tempo i.is-correndo { animation: none; transform: scaleX(1); }
  .link, .link__i, .link__seta, .fotos button, .indice li { transition: none; }
  .link:hover, .link:focus-visible { transform: none; }
}

/* ------------------------------------------------------------------ redes
   A FILEIRA DE CONTATO: WhatsApp, Instagram e telefone saem da lista e viram
   dois ou três ícones grandes, lado a lado. São os canais que a pessoa
   procura primeiro e os únicos que ela reconhece pelo desenho -- não precisam
   de frase, e ocupando uma linha só sobra espaço para as pílulas embaixo.

   O WhatsApp nasce aceso, com a cor da marca: é o que converte. Os outros
   ficam contornados e acendem no toque.
   -------------------------------------------------------------------- */

.redes {
  display: flex;
  justify-content: center;
  gap: .85rem;
  margin: 1.5rem 0 0;
}

.rede {
  display: grid;
  justify-items: center;
  gap: .45rem;
  text-decoration: none;
  color: var(--tinta-fraca);
  animation: sobe-item .55s calc(.26s + var(--i, 0) * .06s) var(--mola) both;
}

.rede__bolha {
  position: relative;
  width: 3.6rem;
  height: 3.6rem;
  display: grid;
  place-items: center;
  border-radius: 20px;
  border: 1px solid var(--borda-forte);
  background: rgba(255, 255, 255, .07);
  color: var(--acao);
  overflow: hidden;
  transition:
    transform .22s var(--mola),
    background-color .22s ease,
    color .22s ease,
    border-color .22s ease;
}

.rede__bolha svg { width: 1.75rem; height: 1.75rem; }

.rede:hover .rede__bolha,
.rede:focus-visible .rede__bolha {
  transform: translateY(-3px) scale(1.04);
  background: var(--acao);
  color: var(--acao-contraste);
  border-color: transparent;
}
.rede:active .rede__bolha { transform: translateY(-1px) scale(.99); }
.rede:focus-visible { outline: none; }
.rede:focus-visible .rede__bolha { outline: 2px solid var(--acao); outline-offset: 3px; }

.rede__nome {
  font-family: var(--fonte-display);
  font-size: .75rem;
  letter-spacing: .02em;
  line-height: 1;
}

.rede:hover .rede__nome, .rede:focus-visible .rede__nome { color: var(--tinta); }

/* o canal principal já vem aceso, com halo e o mesmo brilho que varria o
   botão antigo */
.rede--principal .rede__bolha {
  background: var(--acao);
  color: var(--acao-contraste);
  border-color: color-mix(in srgb, var(--acao) 60%, #fff);
  box-shadow: 0 14px 32px -12px color-mix(in srgb, var(--acao) 85%, transparent);
}
.rede--principal .rede__nome { color: var(--tinta); }

.rede--principal .rede__bolha::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -70%;
  width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: varre-brilho 4.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .rede { animation: none !important; }
  .rede__bolha { transition: none; }
  .rede:hover .rede__bolha, .rede:focus-visible .rede__bolha { transform: none; }
  .rede--principal .rede__bolha::after { animation: none; left: -70%; }
}

/* ------------------------------------------------------------------ visor
   Tocar numa miniatura abre a foto grande. É um <dialog> de verdade, aberto
   com showModal(): daí vêm de graça o Esc, a prisão do foco dentro da caixa e
   a camada acima de tudo. Reconstruir isso à mão é onde acessibilidade quebra.

   Ao fechar, o fundo passa a mostrar a foto que a pessoa estava vendo -- sair
   do visor e dar de cara com outra imagem parece que o site se perdeu.
   -------------------------------------------------------------------- */

.visor {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* o <dialog> fechado é escondido pelo navegador; só o aberto vira flex */
.visor[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.visor::backdrop {
  background: rgba(6, 6, 8, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  animation: surge-fundo .25s ease both;
}

@keyframes surge-fundo { from { opacity: 0; } }

.visor__img {
  max-width: min(92vw, 60rem);
  max-height: 82dvh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95);
  animation: abre-visor .32s var(--mola) both;
}

@keyframes abre-visor {
  from { opacity: 0; transform: scale(.93); }
  to   { opacity: 1; transform: none; }
}

/* Os botões do visor: alvo grande, longe da borda da tela e acima da foto.
   O de fechar fica no alto à direita, onde o polegar não esbarra sem querer. */
.visor__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(20, 20, 24, .66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s var(--mola), border-color .18s ease;
}
.visor__btn:hover { background: var(--acao); color: var(--acao-contraste); border-color: transparent; transform: scale(1.06); }
.visor__btn:focus-visible { outline: 2px solid var(--acao); outline-offset: 3px; }
.visor__btn svg { width: 1.3rem; height: 1.3rem; }

.visor__fechar { top: max(1rem, env(safe-area-inset-top, 0px)); right: 1rem; }
.visor__ant { left: .75rem; top: 50%; transform: translateY(-50%); }
.visor__prox { right: .75rem; top: 50%; transform: translateY(-50%); }
.visor__ant:hover { transform: translateY(-50%) scale(1.06); }
.visor__prox:hover { transform: translateY(-50%) scale(1.06); }

@media (min-width: 640px) {
  .visor__ant { left: 1.5rem; }
  .visor__prox { right: 1.5rem; }
}

.visor__conta {
  position: absolute;
  left: 50%;
  bottom: max(1.1rem, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  margin: 0;
  padding: .35rem .9rem;
  border-radius: 999px;
  background: rgba(20, 20, 24, .66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--fonte-display);
  font-size: .8125rem;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .8);
}

/* a miniatura avisa que dá para abrir */
.fotos button { position: relative; }
.fotos button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, .25);
  opacity: 0;
  transition: opacity .2s ease;
}
.fotos button:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .visor::backdrop, .visor__img { animation: none; }
  .visor__btn { transition: none; }
  .visor__btn:hover { transform: none; }
  .visor__ant:hover, .visor__prox:hover { transform: translateY(-50%); }
  .fotos button::after { transition: none; }
}