/* ==============================================================
 *  visualizador.css - O CSS da galeria (saiu de dentro do index.php)
 * ==============================================================
 *  Este é o lugar do DESENHO da galeria: o reset, o grid, o modal do
 *  download, a barra de ícones flutuante, o popup do QR code e o popup
 *  da ajuda. O index.php liga este arquivo com
 *
 *      <link rel="stylesheet" href="css/visualizador.css">
 *
 *  O QUE **NÃO** ESTÁ AQUI (e por quê): as regras que trazem NÚMEROS do
 *  config.php — as colunas do grid (GRID_COLUNAS_*), as larguras das
 *  faixas (GRID_LARGURA_*) e a largura do float do iPad antigo (que é o
 *  mesmo interruptor, em %). Elas continuam num <style> no <head> do
 *  index.php, porque mudam junto com o config.php. São só estas:
 *      #grid                 -> quantas colunas no desktop;
 *      @media (max-width)    -> as duas faixas (tablet e celular);
 *      .compat #grid img     -> o float do iPad antigo, em %.
 *  Todo o resto do bloco de compatibilidade (etiqueta
 *  [COMPAT-IPAD-ANTIGO]) está aqui, no fim do arquivo.
 *
 *  O TEXTO DA AJUDA tem CSS próprio (css/ajuda.css): a mesma folha
 *  aparece no popup do index.php e na página info.php.
 *
 *  ATENÇÃO: este arquivo é servido como está — nada de PHP aqui dentro.
 *  Para mudar um número do grid, mexa no config.php.
 * ============================================================== */

/* ============================ BASE ============================ */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #0d0d0f;
  color: #eee;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body.modal-aberto {
  overflow: hidden;
}

/* ========= GRID: COLUNAS POR TAMANHO DE TELA (imagens coladas) ========= */
/* Sem gap, sem borda, sem padding, sem border-radius.              */
#grid {
  display: grid;
  /* ATENÇÃO: as colunas do grid NÃO estão aqui. Elas vêm do config.php
     (GRID_COLUNAS_*) e por isso continuam no <style> do <head> do
     index.php, junto com as duas faixas (@media) — veja o comentário
     grande no <head> daquele arquivo antes de mexer. */
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

#grid img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #111;
  cursor: pointer;
  /* Hover apenas com brilho: nada que crie espaço ou reflow. */
  transition: filter .12s linear;
}

#grid img:hover {
  filter: brightness(1.05);
}

/* As duas faixas do grid (tablet e celular) estão no <style> do
index.php: os breakpoints são GRID_LARGURA_TABLET / GRID_LARGURA_CELULAR
e as colunas, GRID_COLUNAS_TABLET / GRID_COLUNAS_CELULAR. */
/* Sentinela invisível do scroll infinito: quando ela entra na área
visível, o próximo lote é buscado. Fica FORA do grid para não
virar uma célula da grade. */
#sentinela {
  height: 1px;
  margin: 0;
  padding: 0;
}

/* Aviso de fim da lista. */
#fim {
  padding: 28px 20px 72px;
  text-align: center;
  font-size: 13px;
  color: #666;
}

#fim.oculto {
  display: none;
}

/* ================== ESTADOS / AVISOS DISCRETOS ================== */
#vazio {
  padding: 48px 20px;
  text-align: center;
  font-size: 14px;
  color: #777;
}

#vazio.oculto {
  display: none;
}

#vazio code {
  color: #9ab;
}

/* Falha ao carregar a lista: precisa gritar mais que um aviso comum.
Foi justamente a falta disto que fez o iPad antigo parecer "sem imagens"
em vez de "navegador incapaz de carregar". */
#vazio.erro-forte {
  color: #f0b7b3;
  font-size: 15px;
  line-height: 1.6;
}

#vazio.erro-forte strong {
  color: #ff9c96;
}

#vazio.erro-forte code {
  color: #ffd9a0;
}

/* Só aparece quando o JavaScript está desligado. */
.aviso-js {
  margin: 24px auto;
  max-width: 520px;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: #ffd9a0;
  background: rgba(255, 120, 100, .12);
  border: 1px solid rgba(255, 120, 100, .35);
  border-radius: 10px;
}

#pulso {
  position: fixed;
  top: 8px;
  right: 10px;
  z-index: 50;
  padding: 5px 9px;
  font-size: 11px;
  line-height: 1.2;
  color: #7c7;
  background: rgba(0, 0, 0, .6);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  opacity: 0;
  transition: opacity .25s linear;
  pointer-events: none;
}

#pulso.visivel {
  opacity: .9;
}

#pulso.erro {
  color: #ff6b6b;
}

/* ========================== MODAL ========================== */
#overlay {
  position: fixed;
  /* [COMPAT-IPAD-ANTIGO] Offsets explícitos ANTES do atalho 'inset': o WebKit
 do iOS 5 ignora 'inset' e, sem isto, o overlay ficaria SEM posicionamento
 nenhum (encolhido no tamanho do conteúdo). Navegadores modernos usam os
 dois; o resultado é idêntico. */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s linear, visibility .18s linear;
}

#overlay.aberto {
  opacity: 1;
  visibility: visible;
}

#modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  max-height: 100%;
}

#modal-img {
  display: block;
  /* [COMPAT-IPAD-ANTIGO] Valor SIMPLES primeiro: 'min()' é de 2020 e o WebKit
 do iOS 5 descarta a declaração inteira, deixando a imagem sair em tamanho
 natural. Com o valor simples, o limite de largura vale sempre.
 (O teto de altura do modo compatível é medido em JS — veja
 ajustarAlturaCompat().) */
  max-width: 92vw;
  max-height: 68vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #000;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* Navegador que entende 'min()' volta ao layout original, com as laterais
reservadas para as setas (56px + margens). Os antigos ignoram este bloco. */
@supports (width: min(1px, 2px)) {
  #modal-img {
    max-width: min(92vw, calc(100vw - 160px));
  }
}

/* Linha de ações do modal: contato (à ESQUERDA) + botão Download (à DIREITA). */
#modal-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 560px;
  margin-top: 10px;
}

/* Bloco de contato: só aparece depois de clicar em Download. */
#contato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

#contato.oculto {
  display: none;
}

#contato .opcao {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #a1e200;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

#contato input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #a1e200;
  cursor: pointer;
}

/* Campo de texto + o '@' que fica FORA do input (modo Instagram). */
#campo-contato {
  display: flex;
  align-items: stretch;
  flex: 1 1 180px;
  min-width: 0;
}

#prefixo {
  display: flex;
  align-items: center;
  padding: 0 9px;
  font-size: 15px;
  color: #a1e200;
  background: #000;
  border: 1px solid #a1e200;
  border-right: 0;
  border-radius: 6px 0 0 6px;
}

#prefixo.oculto {
  display: none;
}

#modal-contato {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  font-size: 15px;
  color: #a1e200;
  background: #000;
  border: 1px solid #a1e200;
  border-radius: 6px;
  outline: none;
}

/* Com o '@' colado à esquerda, o input perde a borda e o radius daquele lado. */
#campo-contato.tem-prefixo #modal-contato {
  border-left: 0;
  border-radius: 0 6px 6px 0;
}

/* Placeholder precisa de cor própria: por padrão herda com opacidade baixa. */
#modal-contato::placeholder {
  color: rgba(161, 226, 0, .55);
  opacity: 1;
}

#modal-contato:focus {
  box-shadow: 0 0 0 2px rgba(161, 226, 0, .3);
}

#btn-download {
  /* Era 'padding: 10px 18px'. Pedido do cliente: 5 pontos a menos de
 padding (em cima/embaixo E nas laterais). */
  padding: 5px 13px;
  font-size: 14px;
  font-weight: normal;
  color: #a1e200;
  background: transparent;
  border: 1px solid #a1e200;
  border-radius: 6px;
  cursor: pointer;
  /* O rótulo é escrito 'Download' no HTML e sai minúsculo em qualquer
 navegador (inclusive se alguém trocar o texto por 'DOWNLOAD'). */
  text-transform: lowercase;
}

#btn-download:hover:not(:disabled) {
  background: rgba(161, 226, 0, .14);
}

#btn-download:disabled {
  opacity: .55;
  cursor: default;
}

/* Telas estreitas: não cabe campo + botão lado a lado, então cada um
ocupa a linha inteira (o campo em cima, o botão embaixo). */
@media (max-width: 520px) {
  #contato {
    flex: 1 1 100%;
    justify-content: center;
  }

  #btn-download {
    flex: 1 1 100%;
  }
}

#modal-msg {
  min-height: 20px;
  max-width: 92vw;
  font-size: 13px;
  text-align: center;
  word-break: break-word;
}

#modal-msg.ok {
  color: #5ddc7f;
}

#modal-msg.erro {
  color: #ff6b6b;
}

#modal-msg.info {
  color: #9ab;
}

#btn-fechar {
  position: fixed;
  top: 10px;
  right: 14px;
  z-index: 110;
  width: 44px;
  /* era 42px: +2 pontos */
  height: 44px;
  padding: 0;
  font-size: 28px;
  /* era 26px: +2 pontos */
  line-height: 42px;
  text-align: center;
  /* Branco com transparência, como as setas. */
  color: rgba(255, 255, 255, .72);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

#btn-fechar:hover {
  color: #fff;
  background: rgba(255, 255, 255, .1);
}

/* ---------- setas laterais: anterior / próxima ---------- */
.btn-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 110;
  width: 56px;
  height: 96px;
  padding: 0;
  font-size: 48px;
  line-height: 1;
  text-align: center;
  color: rgba(255, 255, 255, .72);
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.btn-nav:hover:not(:disabled) {
  color: #fff;
  background: rgba(255, 255, 255, .1);
}

.btn-nav:disabled {
  opacity: .2;
  cursor: default;
}

#btn-anterior {
  left: 6px;
}

#btn-proxima {
  right: 6px;
}

@media (max-width: 640px) {
  .btn-nav {
    width: 42px;
    height: 72px;
    font-size: 34px;
  }

  #btn-anterior {
    left: 2px;
  }

  #btn-proxima {
    right: 2px;
  }
}

/* ==================== BARRA DE ÍCONES FLUTUANTE ====================
* Os quatro botões do canto inferior direito, todos com a MESMA forma
* (30x30, redondos, na cor do botão Download):
*     ↑  voltar ao topo — só aparece com a página rolada;
*     QR, modo (grade <-> imagem única) e ajuda (info.php).
* A barra é uma coluna, então o 'topo' fica EM CIMA dos outros três.
* O z-index 95 fica acima do grid e abaixo do modal (100/110) e do popup
* do QR (120).
*
* O ícone do QR é o ÚNICO vermelho da barra (veja a regra do #btn-qr mais
* abaixo); os outros três continuam verdes.
*
* ATENÇÃO no iPad antigo: estes 30px NÃO valem lá. Sem flexbox, os botões
* do iPad ficam com 40px e se CENTRALIZAM por padding — regra 7 do bloco
* de compatibilidade. Não apague aquela regra achando que esta aqui basta.
*/
#barra-icones {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

#barra-icones .icone-barra {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  color: #a1e200;
  background: rgba(0, 0, 0, .74);
  border: 1px solid #a1e200;
  border-radius: 50%;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

#barra-icones .icone-barra:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* O ícone do QR é o ÚNICO vermelho da barra. O SVG é desenhado com
'currentColor', então basta trocar a cor do BOTÃO para o desenho mudar;
a borda redonda continua verde, igual às outras três. O 'hover' acompanha
(um fundo verde dentro do botão vermelho ficaria esquisito).

O seletor usa DOIS ids de propósito: assim ele vence o ':hover' da barra
acima e continua valendo no iPad, onde o bloco de compatibilidade mexe no
tamanho e no padding dos mesmos botões (regra 7). */
#barra-icones #btn-qr {
  color: #ff3b30;
  border-color: #ff3b30;
}

#barra-icones #btn-qr:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* Os ícones são SVG inline (o WebKit do iOS 5 já desenha SVG): sem fonte
de ícone, sem arquivo extra e sem uma requisição a mais. */
#barra-icones .icone-barra svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* O botão do topo usa DOIS ids no seletor de propósito: '#btn-topo' sozinho
PERDERIA para '#barra-icones .icone-barra' (que tem uma classe a mais) e
ele nunca mais conseguiria ficar escondido. Especificidade, não ordem. */
#barra-icones #btn-topo {
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s linear, visibility .2s linear;
}

#barra-icones #btn-topo.visivel {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 640px) {
  #barra-icones {
    right: 10px;
    bottom: 10px;
  }
}

/* ==================== MODOS DE VISUALIZAÇÃO ====================
* O #grid tem DUAS formas, trocadas por classe no próprio elemento (quem
* troca é o JavaScript, e a escolha é lembrada no navegador):
*     (sem classe)  grade colada (3/2/1 colunas por tamanho de tela) — o padrão;
*     .unica        uma imagem por vez, centralizada.
* No navegador moderno o modo de uma imagem por vez ocupa a tela inteira:
* cada célula mede 100vh e a imagem é encaixada dentro dela com
* 'object-fit: contain' (sem esticar nem cortar). O CSS de compatibilidade
* repete o necessário para o iOS 5, que não conhece 'vh' nem 'object-fit'.
*/
#grid.unica {
  display: flex;
  flex-wrap: wrap;
}

#grid.unica img {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  object-fit: contain;
  margin: 0;
  background: #000;
}

/* ==================== POPUP DO QR CODE ====================
* Caixa de diálogo com o QR code (arquivo QR_IMAGEM, feito fora do
* sistema) e o endereço da galeria escrito embaixo, para quem não
* conseguir apontar a câmera. O endereço vem do PHP (url_do_site_atual()).
*/
#painel-qr {
  position: fixed;
  /* [COMPAT-IPAD-ANTIGO] Offsets explícitos ANTES do atalho 'inset': o
 WebKit do iOS 5 ignora 'inset' e a caixa ficaria sem posicionamento. */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 120;
  /* acima do modal: é uma caixa de diálogo */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .86);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s linear, visibility .18s linear;
}

#painel-qr.aberto {
  opacity: 1;
  visibility: visible;
}

#qr-caixa {
  position: relative;
  max-width: 92vw;
  padding: 18px 18px 14px;
  text-align: center;
  background: #14141a;
  border: 1px solid rgba(161, 226, 0, .35);
  border-radius: 12px;
}

#qr-titulo {
  margin: 0 0 10px;
  font-size: 15px;
  color: #a1e200;
}

/* Fundo BRANCO sempre: um QR code sobre fundo escuro não é lido por boa
parte dos leitores (e é assim que ele precisa ser impresso). */
#qr-img {
  display: block;
  width: 220px;
  height: 220px;
  max-width: 70vw;
  max-height: 70vw;
  margin: 0 auto 10px;
  background: #fff;
  border: 0;
}

#qr-img.oculto {
  display: none;
}

#qr-url {
  max-width: 260px;
  margin: 6px auto 0;
  font-size: 12px;
  line-height: 1.4;
  color: #9ab;
  word-break: break-all;
}

#qr-aviso {
  max-width: 260px;
  margin: 8px auto 0;
  font-size: 12px;
  line-height: 1.5;
  color: #ffd9a0;
}

#qr-aviso.oculto {
  display: none;
}

/* O × de fechar é o MESMO nos dois popups (o do QR e o da ajuda): a forma
   fica aqui e cada um diz ONDE ele fica. O do QR nasce para fora da
   caixinha (que é pequena); o da ajuda fica por dentro do canto, porque
   a caixa dele ocupa a tela inteira. */
#btn-qr-fechar,
#btn-info-fechar {
  position: absolute;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, .8);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  cursor: pointer;
}

#btn-qr-fechar:hover,
#btn-info-fechar:hover {
  background: rgba(255, 255, 255, .16);
}

#btn-qr-fechar {
  top: -12px;
  right: -12px;
}

#btn-info-fechar {
  top: 6px;
  right: 6px;
}

/* ==================== POPUP DA AJUDA (ícone "i") ====================
 * A MESMA explicação do info.php, agora em caixa de diálogo. O texto é
 * longo, então é a CAIXA que rola (#info-corpo): a página atrás não se
 * mexe, e no celular a ajuda não vira uma parede de texto sem fim.
 *
 * O ícone da barra continua sendo um <a href="info.php"> de verdade:
 * com JavaScript o clique abre esta caixa; SEM JavaScript o navegador
 * segue para a página de ajuda (nada aqui depende de JS para existir).
 *
 * O z-index 130 fica acima do popup do QR (120), do modal (100/110) e
 * da barra de ícones (95): é a última caixa que pode aparecer.
 */
#painel-info {
  position: fixed;
  /* [COMPAT-IPAD-ANTIGO] Offsets explícitos ANTES do atalho 'inset': o
     WebKit do iOS 5 ignora 'inset' e a caixa ficaria sem posicionamento. */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .86);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s linear, visibility .18s linear;
}

#painel-info.aberto {
  opacity: 1;
  visibility: visible;
}

/* A caixa aproveita a tela (o texto é longo) e é uma COLUNA: o corpo
   rola dentro dela. */
#info-caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  max-height: 100%;
  overflow: hidden;
  background: #14141a;
  border: 1px solid rgba(161, 226, 0, .35);
  border-radius: 12px;
}

/* É AQUI QUE A AJUDA ROLA.
   'min-height: 0' é o que deixa o flex ENCOLHER o corpo: sem ele o
   conteúdo estoura a caixa em vez de criar a barra de rolagem.
   '-webkit-overflow-scrolling: touch' dá a rolagem de um dedo nos
   iPhones/iPads; no iPad ANTIGO (que não conhece flexbox) o teto de
   altura do corpo é medido em px pelo JavaScript — veja abrirInfo(). */
#info-corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 22px 26px;
}

/* Teclado: foco visível sem alterar o layout do grid. */
#grid img:focus-visible {
  outline: 2px solid #a1e200;
  outline-offset: -2px;
}

#btn-download:focus-visible,
#modal-contato:focus-visible,
#contato input:focus-visible,
#btn-fechar:focus-visible,
#btn-anterior:focus-visible,
#btn-proxima:focus-visible,
#barra-icones .icone-barra:focus-visible,
#btn-qr-fechar:focus-visible,
#btn-info-fechar:focus-visible {
  outline: 2px solid #a1e200;
  outline-offset: 2px;
}

/* ==============================================================
*  [COMPAT-IPAD-ANTIGO] — INÍCIO DO BLOCO DE COMPATIBILIDADE
* ==============================================================
*  TUDO neste bloco existe SÓ por causa do iPad 1 (iOS 5 / Safari 5,
*  WebKit de 2012). Nenhuma regra daqui afeta navegador moderno,
*  porque todas dependem da classe .compat no <html> — que só aparece
*  quando MODO_COMPATIVEL = true em config.php.
*
*  Para remover do sistema: apague daqui até "FIM DO BLOCO DE
*  COMPATIBILIDADE" e siga as instruções em config.php.
* ============================================================== */

/* 1) GRID SEM 'display: grid' (as colunas viram largura de float)
O iOS 5 não conhece CSS Grid e descarta a declaração, empilhando as
imagens em tamanho natural. Como o grid do projeto não tem gap, borda
nem padding, 'float' + 33.3333% reproduz o mesmo resultado exato.
'overflow: hidden' no container é o que contém os floats (equivale ao
clear: both), sem precisar de elemento extra. */
.compat #grid {
  display: block;
  overflow: hidden;
}

.compat #grid img {
  float: left;
}

/* As faixas (tablet/celular) DESTE float estão no <style> do index.php:
são os MESMOS breakpoints e as MESMAS porcentagens do grid moderno (acima),
tirados do config.php. As regras do modo de imagem única
(.compat #grid.unica img) têm DUAS classes e continuam vencendo estas por
especificidade (2-1-1 contra 1-1-1), então o modo 'unica' não muda com o
tamanho da tela. */
/* 2) FLEXBOX ANTIGO
No Safari 5.1 o flexbox moderno ('display: flex') NÃO existe: só a
sintaxe antiga '-webkit-box'. Sem isto, o overlay do modal ficaria
desalinhado (conteúdo no canto) em vez de centralizado. */
.compat #overlay {
  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-pack: center;
}

/* Em coluna: o 'orient' vertical é o que empilha imagem -> ações -> msg. */
.compat #modal {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-align: center;
}

/* Sem flex, o contato e o botão não cabem lado a lado: cada um na sua
linha, como já acontece hoje em telas estreitas (@media 520px). */
.compat #modal-acoes {
  display: block;
  text-align: center;
}

.compat #contato {
  display: block;
}

.compat #contato .opcao {
  display: inline;
}

.compat #btn-download {
  display: block;
  width: 100%;
}

/* --- AS DUAS REGRAS QUE ESCONDEM O CONTATO (leia antes de mexer) -----
Aqui já houve um bug: no iPad o campo de contato aparecia ABERTO
antes de clicar no botão.

Motivo: `.compat #contato` e `#contato.oculto` têm a MESMA
especificidade — um id + uma classe (1-1-0). Em empate, o CSS
obedece à regra que vem POR ÚLTIMO no arquivo, e o bloco de
compatibilidade vem depois do CSS normal. Ou seja, o
`display: block` logo acima VENCIA o `display: none` do `.oculto`,
e o fieldset nunca ficava escondido. O mesmo acontecia com o `@`
do Instagram (`#prefixo.oculto`).

A forma abaixo resolve de vez: `.compat #id.oculto` tem DOIS
seletores de classe/atributo em vez de um (2-1-0 contra 1-1-0),
então ela ganha por especificidade, NÃO por ordem. Pode mover este
bloco para onde quiser que esconder continua vencendo.
------------------------------------------------------------------- */
.compat #contato.oculto {
  display: none;
}

.compat #prefixo.oculto {
  display: none;
}

/* --- SOMENTE E-MAIL no iPad -----------------------------------------
No iPad o fluxo é "digite seu e-mail e a imagem chega na sua caixa
de entrada", então a opção Instagram não é oferecida. O JavaScript
também ignora o rádio (COMPAT -> aplicarModo('email')), para quem
chegar nele pelo teclado ou mexendo no DOM.

O seletor tem DOIS ids de propósito: ele precisa vencer
`.compat #contato .opcao` (1-2-0), que é quem põe o `display` nos
rótulos. Com um id só, esta regra perderia. */
.compat #contato #opcao-instagram {
  display: none;
}

/* O '@' e o campo, lado a lado, SEM flexbox.
O `font-size: 0` no container é o truque que elimina o espaço em branco
que existe entre os dois no HTML (senão fica um vão visível entre a
caixinha do '@' e o campo). O tamanho da fonte volta nos dois filhos. */
.compat #campo-contato {
  display: block;
  margin-bottom: 8px;
  font-size: 0;
}

.compat #prefixo,
.compat #campo-contato #modal-contato {
  display: inline-block;
  font-size: 15px;
  vertical-align: middle;
}

/* Padding vertical igual ao do input, para as duas caixas ficarem da
mesma altura (o input tem 10px; o span tinha 8px). */
.compat #prefixo {
  padding: 10px 9px;
}

/* 3) TRANSIÇÕES / TRANSFORM COM PREFIXO
O Safari 5.1 exige '-webkit-'; sem isso não há fade nenhum (apenas
perde a animação, nada quebra). */
.compat #overlay {
  -webkit-transition: opacity .18s linear, visibility .18s linear;
}

.compat #barra-icones #btn-topo {
  -webkit-transition: opacity .2s linear, visibility .2s linear;
}

.compat #pulso {
  -webkit-transition: opacity .25s linear;
}

.compat #painel-qr {
  -webkit-transition: opacity .18s linear, visibility .18s linear;
}

/* O popup da ajuda entra na mesma lista: sem o prefixo, a caixa apareceria
   de uma vez no iPad (o Safari 5.1 ignora 'transition' sem '-webkit-'). */
.compat #painel-info {
  -webkit-transition: opacity .18s linear, visibility .18s linear;
}

.compat .btn-nav {
  -webkit-transform: translateY(-50%);
}

.compat #grid img {
  -webkit-transition: -webkit-filter .12s linear;
}

/* 4) PLACEHOLDER
O Safari 5.1 só entende o pseudo-elemento prefixado, então a cor do
placeholder do contato seria a padrão (cinza) em vez do verde do site. */
.compat #modal-contato::-webkit-input-placeholder {
  color: rgba(161, 226, 0, .55);
}

/* 5) MODOS DE VISUALIZAÇÃO NO iPAD ANTIGO
O iOS 5 não conhece 'vh' nem 'object-fit', e o grid dele é feito de
'float: left; width: 33.3333%'. Estas regras desfazem o float e
CENTRALIZAM cada imagem, uma embaixo da outra.

Todas usam DOIS seletores de classe (.compat + .unica) de propósito:
assim elas vencem '.compat #grid img' por ESPECIFICIDADE (2-1-1 contra
1-1-1 no navegador), e não por ordem no arquivo. Mover este bloco de
lugar não muda nada.

O teto de altura de cada imagem é medido em JavaScript
(ajustarAlturaModo) e vai como style inline — aqui só sobra a largura,
porque 'vh' não existe. Veja a seção 12 do README.md. */
.compat #grid.unica {
  display: block;
}

.compat #grid.unica img {
  display: block;
  float: none;
  width: auto;
  max-width: 92%;
  margin: 10px auto;
  background: #000;
}

/* 6) POPUP DO QR NO iPAD ANTIGO
Mesmo problema do overlay do modal, em dois pontos:
1) no iOS 5 o 'position: fixed' é posicionado em relação ao DOCUMENTO,
  não à janela. Com 'absolute' e as duas medidas vindas do JavaScript
  (abrirQr() escreve 'top' com a rolagem atual e 'height' com
  window.innerHeight), a caixa cobre exatamente a tela em qualquer
  posição da página;
2) o 'display: flex' do iOS 5 é o '-webkit-box': sem ele a caixinha do
  QR ficaria no canto em vez de centralizada. */
.compat #painel-qr {
  position: absolute;
  left: 0;
  width: 100%;
  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-pack: center;
}

/* 7) A BARRA DE ÍCONES NO iPAD ANTIGO
Aqui está a cura de um bug relatado NO iPAD: os ícones da barra
apareciam PEQUENOS e colados no canto ESQUERDO do círculo (parecendo
atravessar a borda do círculo), em vez de centralizados.

Motivo: o iOS 5 não conhece o flexbox moderno e descarta tudo em
silêncio. Quem centralizava o desenho era o 'justify-content' do botão,
que lá não existe; e o SVG é um BLOCO ('svg { display: block }'), e
bloco dentro do botão IGNORA o 'text-align: center' — encosta no canto
superior esquerdo. O 'gap' do flexbox também não existe, nem no iPad
nem em qualquer navegador da época: o espaço entre os botões tem de ser
margem.

A forma abaixo centraliza SEM flexbox nenhum, que é o que o WebKit de
2012 entende:
 · padding IGUAL nos quatro lados (8px) com '-webkit-box-sizing:
   border-box' (o prefixo é obrigatório no Safari 5; sem o
   border-box os 40px virariam 58px) — sobra uma área de 22x22
   exatamente no MEIO do círculo;
 · o SVG é um bloco de 22x22 com 'margin: 0 auto': encaixa nessa área
   sem depender de 'line-height', 'vertical-align' nem do flexbox;
 · os botões ficam 'display: block' (um embaixo do outro), então a
   coluna também não depende de 'flex-direction'/'align-items'
   (o mesmo 'display: block' no botão já é usado no #btn-download
   deste bloco);
 · o espaço entre eles é 'margin-top', e no PRIMEIRO filho o topo é
   zero — assim o buraco do botão do topo escondido não empurra a
   barra para cima.

Por que 40px aqui e 30px no resto? Porque no iPad não existe ':hover'
para ajudar a acertar o ícone: o dedo precisa de alvo maior. O
navegador moderno continua com os 30px da regra de cima. */
.compat #barra-icones {
  display: block;
  text-align: center;
}

.compat #barra-icones .icone-barra {
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 8px;
  margin: 25px auto 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50%;
}

.compat #barra-icones .icone-barra:first-child {
  margin-top: 0;
}

.compat #barra-icones .icone-barra svg {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto;
}

/* 8) POPUP DA AJUDA NO iPAD ANTIGO
   Mesmo caso do popup do QR (regra 6), com uma diferença: aqui o texto é
   longo, então quem ROLA é o #info-corpo. Sem flexbox não existe
   'flex: 1 1 auto' nem 'min-height: 0' — o teto de altura do corpo é
   medido em px pelo JavaScript (abrirInfo()), como o teto da imagem do
   modal e o das imagens do grid. */
.compat #painel-info {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 12px;
  display: block;
}

.compat #info-caixa {
  width: 100%;
  max-width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-height: 100%;
}

.compat #info-corpo {
  -webkit-overflow-scrolling: touch;
  padding: 18px 16px 22px;
}

/* ==============================================================
*  [COMPAT-IPAD-ANTIGO] — FIM DO BLOCO DE COMPATIBILIDADE
* ============================================================== */
