/* ============================================================
   PÁGINAS (V3) — MVP, 09/09/2026. SÓ NO DEV.

   ARQUIVO SEPARADO DE PROPÓSITO. O `estilo.css` está congelado por
   regra da Camila (o cabeçalho dele conta o caso das onze fotos
   cortadas em 25/07). Enquanto este formato está sendo validado, o
   custo de errar aqui tem que ser apagar UM arquivo — e nenhuma tela
   que já funciona pode sentir.

   Ele é carregado só nas telas de Página. Todo valor vem do tema; não
   há um hex nem um px de cor aqui.
   ============================================================ */

/* ---------------- A capa ----------------

   Faixa larga no topo, como o toldo de uma loja. Sem foto de capa ela
   NÃO fica vazia: vira um degradê da cor da marca, que é o que impede
   a página nova de parecer quebrada no primeiro dia — o estado vazio é
   um convite, não um buraco. */
.pg-capa {
  position: relative;
  height: 120px;
  border-radius: var(--raio-lg);
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--cor-marca-fundo) 0%, var(--cor-superficie-2) 60%, var(--cor-marca-fundo) 100%);
  border: 1px solid var(--cor-linha);
  margin-top: var(--e-3);
}
@media (min-width: 700px) { .pg-capa { height: 200px; } }

.pg-capa img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

/* ---------------- O corpo: lateral + vitrine ----------------

   No celular, uma coluna: quem ela é, e depois o que ela tem. No
   computador, a lateral fixa à esquerda e o catálogo rolando ao lado —
   assim o nome e o botão de WhatsApp continuam à vista enquanto a
   pessoa desce pelas fotos, que é o momento em que ela decide chamar. */
.pg-corpo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-5);
  margin-top: calc(var(--e-6) * -1);
  align-items: start;
}
@media (min-width: 900px) {
  .pg-corpo {
    /* 280 e não 300: com três fotos por linha, cada 20 pontos que a
       lateral devolve viram ~7 em cada foto. A lateral não perde nada —
       o texto dela é curto e o botão continua inteiro. */
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--e-5);
  }
}

.pg-lateral {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-baixa);
  padding: var(--e-4);
  position: relative;
  z-index: 2;
}
@media (min-width: 900px) {
  .pg-lateral { position: sticky; top: calc(58px + var(--e-4)); }
}

/* O retrato sobe por cima da capa — é o único movimento ousado da
   tela, e ele diz "esta pessoa está na frente da própria loja". */
.pg-retrato {
  width: 88px; height: 88px;
  margin-top: calc(var(--e-6) * -1);
  border-radius: var(--raio-md);
  overflow: hidden;
  background: var(--cor-superficie-2);
  border: 3px solid var(--cor-superficie);
  box-shadow: var(--sombra-media);
}
.pg-retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }

/* Sem retrato: as iniciais, como a bolinha do topo já faz. */
.pg-retrato--vazio {
  display: grid; place-items: center;
  background: var(--cor-marca-fundo);
  color: var(--cor-marca-escura);
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  font-size: var(--t-2xl);
}

.pg-nome {
  margin: var(--e-3) 0 0;
  font-family: var(--fonte-display);
  font-size: var(--t-xl);
  font-weight: var(--peso-display);
  line-height: var(--entrelinha-apertada);
  color: var(--cor-tinta);
}
.pg-papel {
  margin: var(--e-1) 0 0;
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  color: var(--cor-marca-escura);
}
.pg-descricao {
  margin: var(--e-3) 0 0;
  font-size: var(--t-sm);
  line-height: var(--entrelinha-normal);
  color: var(--cor-tinta-media);
  white-space: pre-line;
}

.pg-divisa { height: 1px; background: var(--cor-linha); margin: var(--e-4) 0; border: 0; }

/* ---------------- Chamar e seguir ---------------- */

.pg-whats {
  display: flex; align-items: center; justify-content: center;
  gap: var(--e-2);
  width: 100%;
  padding: var(--e-3);
  border-radius: var(--raio-pilula);
  background: var(--cor-whatsapp);
  color: var(--cor-marca-tinta);
  font-weight: var(--peso-forte);
  font-size: var(--t-base);
  border: 0;
}
.pg-whats:hover { filter: brightness(1.06); }

/* O aviso de quem está de fora do grupo. Mesma regra do botão de
   contato do anúncio: telefone é para quem passou pelo portão. */
.pg-fechado {
  font-size: var(--t-xs);
  color: var(--cor-tinta-fraca);
  text-align: center;
  line-height: var(--entrelinha-normal);
}

.pg-redes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.pg-rede {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--cor-linha-forte);
  border-radius: var(--raio-pilula);
  font-size: var(--t-xs);
  font-weight: var(--peso-forte);
  color: var(--cor-tinta-media);
  background: var(--cor-superficie);
}
.pg-rede:hover { border-color: var(--cor-marca); color: var(--cor-marca-escura); }
.pg-rede svg { flex: none; }

/* ---------------- A vitrine ---------------- */

.pg-vitrine__cabeca {
  display: flex; align-items: baseline; gap: var(--e-3);
  margin-bottom: var(--e-3);
}
.pg-vitrine__titulo {
  margin: 0;
  font-family: var(--fonte-display);
  font-size: var(--t-lg);
  font-weight: var(--peso-display);
  color: var(--cor-tinta);
}
.pg-vitrine__conta {
  font-size: var(--t-xs);
  color: var(--cor-tinta-fraca);
}

/* GRADE REGULAR, e fotos GRANDES.

   DUAS CORREÇÕES DELA, no mesmo lugar, em 09/09/2026.

   1. "faltou padrao de tamanho na visualizacao" — a primeira versão
      punha cada foto com a altura que ela tem, em colunas, para nenhuma
      ser cortada. Ficou bagunçado; e, pior, era a ÚNICA tela do site
      fora do 4:3, que é o quadro do card de anúncio desde sempre.

      (Este bloco ficou com o layout antigo por um erro meu: eu apliquei
      a correção na maquete e esqueci do arquivo que o site usa. Ela
      pegou de novo.)

   2. "Acho que da p aumentar as fotos das paginas" — e ela explicou
      qual: "Quando ela esta na pagina.. e ficou perfeito quando abro".
      Ou seja, a foto ABERTA (a lupa) está boa; o que era pequeno é a
      foto na grade.

   TRÊS POR LINHA, e não duas — ela olhou no dev e pediu: "ficou 2 por
   linha, da p ser 3?".

   O número não é escrito na mão: a grade se ajusta sozinha ao espaço.
   `auto-fill` com um mínimo de 260 dá TRÊS na tela larga dela, DUAS num
   notebook estreito e UMA no celular, sem três medidas separadas para
   alguém esquecer de mexer numa delas quando a lateral mudar de largura.

   E o mínimo de 260 é o que impede a vitrine de virar lista de
   miniaturas: se o espaço não der para uma foto decente, ela tira uma
   coluna em vez de espremer todas. */
.pg-vitrine {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--e-3);
}
@media (min-width: 900px) { .pg-vitrine { gap: var(--e-4); } }

/* No celular, UMA por vez — pedido dela mais cedo no mesmo dia. O mínimo
   de 260 sozinho já daria uma coluna em tela estreita, mas escrito
   explícito para o dia em que o mínimo mudar. */
@media (max-width: 519px) { .pg-vitrine { grid-template-columns: 1fr; } }

.pg-item {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
  overflow: hidden;
  box-shadow: var(--sombra-baixa);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.pg-item:hover { transform: translateY(-2px); box-shadow: var(--sombra-media); }

/* O QUADRO É QUADRADO, e não 4:3 como o card de anúncio.

   Pedido dela em 09/09/2026, olhando uma foto que ela mesma subiu: "o
   card fechado da p vc abrir mais aumentar nao em largura em altura".

   Largura ela não quis mexer (são três por linha, decisão da mesma
   tarde), então o que cresce é a ALTURA. Quadrado dá ~33% a mais de
   altura que o 4:3 na mesma largura, e é a proporção que catálogo de
   produto usa em toda parte.

   O QUE ISSO CUSTA, e está escrito no campo de quem sobe: numa foto
   deitada o `cover` passa a cortar as LATERAIS. Por isso a medida ideal
   virou 1200x1200 — quem monta no Canva já faz quadrado e não perde
   nada. E a foto ABERTA continua inteira, sem corte nenhum. */
/* O FUNDO EMBAÇADO, também aqui.

   Ela testou no celular: *"no celular a fechada fica cortadinha e abrta
   fica perfeita!"*.

   E o problema é de raiz: caixa de tamanho fixo com `cover` CORTA, e com
   `contain` sobra tarja — foi a tarja branca que deu trabalho em 07/09.
   Não existe terceira saída dentro dessas duas.

   A terceira saída o projeto já tinha, e é dela: em 30/07 ela autorizou o
   fundo embaçado no card ABERTO do anúncio (está no PROPOSITO.md, e o
   `estilo.css` explica na linha do `.anuncio__foto--imagem`). A MESMA foto
   entra duas vezes — ampliada e embaçada preenchendo a caixa, e inteira na
   frente. Nada é cortado, nada fica com tarja, e os cards continuam todos
   do mesmo tamanho.

   NENHUM ARQUIVO DE FOTO É ALTERADO. O efeito mora aqui.

   `--foto-fundo` vem escrito no `style` do próprio item, porque o endereço
   muda a cada foto — é o mesmo jeito que o `anuncio.eta` já faz. */
.pg-item__quadro {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--cor-superficie-2);
}

.pg-item__quadro::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--foto-fundo);
  background-size: cover;
  background-position: center;
  /* O `scale` existe para o blur não deixar borda transparente na beirada. */
  transform: scale(1.12);
  filter: blur(18px) brightness(0.82) saturate(1.15);
}

.pg-item__quadro img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.pg-item__legenda {
  padding: var(--e-3);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  flex: 1;
}
.pg-item__titulo {
  margin: 0;
  font-size: var(--t-base);
  font-weight: var(--peso-forte);
  color: var(--cor-tinta);
  line-height: var(--entrelinha-apertada);
}
/* `margin-top: auto` cola o preço no pé do cartão. Sem isto ele sobe
   junto do título curto e desce junto do longo, e a linha de preços
   fica serrilhada de um cartão para o outro. */
.pg-item__preco {
  margin: auto 0 0;
  font-size: var(--t-md);
  font-weight: var(--peso-forte);
  color: var(--cor-marca-escura);
  font-variant-numeric: tabular-nums;
}

/* ---------------- O vazio ----------------

   Tela vazia é convite, não recado de erro. Diz o que fazer e onde. */
.pg-vazio {
  border: 1px dashed var(--cor-linha-forte);
  border-radius: var(--raio-lg);
  padding: var(--e-6) var(--e-4);
  text-align: center;
  color: var(--cor-tinta-media);
  background: var(--cor-superficie-2);
}
.pg-vazio p { margin: 0 0 var(--e-2); font-size: var(--t-sm); }
.pg-vazio p:last-child { margin-bottom: 0; }

/* ============================================================
   A TELA DE CONFIGURAR (cadastro_pagina)

   O outro lado, e ele é de quem TEM a página. Formulário comum,
   deliberadamente sem nada de esperto: campo, rótulo, botão que diz o
   que faz. Quem configura a própria página faz isso de vez em quando,
   não todo dia — tem que dar para entender sem aprender.
   ============================================================ */

.pgc-secao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-lg);
  padding: var(--e-4);
  margin-bottom: var(--e-4);
  box-shadow: var(--sombra-baixa);
}
.pgc-secao__titulo {
  margin: 0 0 var(--e-1);
  font-family: var(--fonte-display);
  font-size: var(--t-md);
  font-weight: var(--peso-display);
  color: var(--cor-tinta);
}
.pgc-secao__ajuda {
  margin: 0 0 var(--e-4);
  font-size: var(--t-xs);
  color: var(--cor-tinta-fraca);
  line-height: var(--entrelinha-normal);
}

.pgc-campo { margin-bottom: var(--e-4); }
.pgc-campo:last-child { margin-bottom: 0; }
.pgc-campo label {
  display: block;
  margin-bottom: var(--e-1);
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  color: var(--cor-tinta);
}
.pgc-campo input[type="text"],
.pgc-campo input[type="url"],
.pgc-campo input[type="tel"],
.pgc-campo textarea {
  width: 100%;
  padding: var(--e-3);
  border: 1px solid var(--cor-linha-forte);
  border-radius: var(--raio-sm);
  background: var(--cor-superficie);
  font-size: var(--t-base);
}
.pgc-campo textarea { min-height: 110px; resize: vertical; line-height: var(--entrelinha-normal); }
.pgc-campo input:focus-visible,
.pgc-campo textarea:focus-visible { outline: 2px solid var(--cor-marca); outline-offset: 1px; }
.pgc-campo__dica { margin: var(--e-1) 0 0; font-size: var(--t-xs); color: var(--cor-tinta-fraca); }

.pgc-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-5);
  border: 0;
  border-radius: var(--raio-pilula);
  background: var(--cor-marca);
  color: var(--cor-marca-tinta);
  font-weight: var(--peso-forte);
  font-size: var(--t-base);
  cursor: pointer;
}
.pgc-botao:hover { background: var(--cor-marca-escura); }

.pgc-botao--calmo {
  background: var(--cor-superficie);
  color: var(--cor-tinta-media);
  border: 1px solid var(--cor-linha-forte);
}
.pgc-botao--calmo:hover { background: var(--cor-superficie-2); color: var(--cor-tinta); }

/* A grade das fotos já no catálogo, na tela de configurar. Aqui SIM
   são caixas iguais: é uma lista de gerenciamento, e o que importa é
   achar a foto e o botão de tirar, não admirar a composição. */
.pgc-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--e-3); }
.pgc-foto {
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
  overflow: hidden;
  background: var(--cor-superficie-2);
}
.pgc-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pgc-foto__pe { padding: var(--e-2); display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.pgc-foto__nome {
  font-size: var(--t-2xs); color: var(--cor-tinta-media);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pgc-foto__tirar {
  border: 0; background: none; padding: var(--e-1);
  color: var(--cor-tinta-fraca); cursor: pointer;
  font-size: var(--t-2xs); font-weight: var(--peso-forte);
}
.pgc-foto__tirar:hover { color: var(--cor-vendido-fundo); }

/* ---------------- A foto que JA esta salva ----------------

   Um campo de arquivo volta SEMPRE vazio - o navegador nao devolve o
   que ja foi enviado antes. Entao "tem foto" e "nao tem foto" tinham
   exatamente a mesma cara: "Nenhum arquivo escolhido".

   A Camila pegou em 10/09/2026, na pagina da mae dela: "quando eu
   coloco as fotos, ele nao registra a foto (...) nao apareceu que tinha
   uma foto la ja". A foto ESTAVA salva. O que faltava era a tela dizer.

   A miniatura sai na PROPORCAO de cada campo - quadrada no retrato, 4
   por 1 na capa -, e isso nao e enfeite: e a segunda vez que a pessoa ve
   qual e o formato daquele campo, agora com a foto dela dentro. */
.pgc-atual {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin: var(--e-2) 0 var(--e-3);
  padding: var(--e-2);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
  background: var(--cor-superficie-2);
}
.pgc-atual__mini {
  flex: 0 0 auto;
  border-radius: var(--raio-sm);
  object-fit: cover;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
}
.pgc-atual__mini--retrato { width: 72px; height: 72px; }
.pgc-atual__mini--capa { width: 160px; height: 40px; }
/* No celular estreito a faixa da capa e o texto nao cabem lado a lado
   sem espremer as palavras em duas letras por linha. */
@media (max-width: 420px) {
  .pgc-atual { flex-direction: column; align-items: flex-start; }
  .pgc-atual__mini--capa { width: 100%; height: auto; aspect-ratio: 4 / 1; }
}
.pgc-atual__texto {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--cor-tinta-fraca);
  line-height: var(--entrelinha-normal);
}
.pgc-atual__texto strong {
  display: block;
  color: var(--cor-tinta);
  font-weight: var(--peso-forte);
}

/* O recado depois de salvar. Salvar sem dizer "salvei" é o mesmo que
   não responder — a Camila pegou exatamente isso na foto de perfil. */
/* O contador de letras da descrição. Discreto até apertar. */
.pgc-conta { color: var(--cor-tinta-fraca); }
.pgc-conta--perto { color: var(--cor-marca-escura); font-weight: var(--peso-forte); }

.pgc-recado {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--raio-md);
  background: var(--cor-marca-fundo);
  color: var(--cor-marca-escura);
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  margin-bottom: var(--e-4);
}
.pgc-recado--erro { background: var(--cor-aviso-fundo); color: var(--cor-aviso); }

/* O selo de rascunho: a página existe e ainda não está na home. */
.pgc-estado {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: 2px var(--e-3);
  border-radius: var(--raio-pilula);
  font-size: var(--t-2xs);
  font-weight: var(--peso-forte);
}
.pgc-estado--rascunho { background: var(--cor-esfriou-fundo); color: var(--cor-esfriou-tinta); }
.pgc-estado--publicada { background: var(--cor-ativo-fundo); color: var(--cor-ativo-tinta); }

/* ============================================================
   O PAINEL DELA — ativar Páginas por pessoa
   ============================================================ */

.adm-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e-3); margin-bottom: var(--e-4); }
.adm-tile {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
  padding: var(--e-3) var(--e-4);
}
.adm-tile__n {
  margin: 0;
  font-family: var(--fonte-display);
  font-size: var(--t-2xl);
  font-weight: var(--peso-display);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.adm-tile__r { margin: var(--e-1) 0 0; font-size: var(--t-xs); color: var(--cor-tinta-fraca); }
/* Só ganha cor quando há alguém esperando. Um número em destaque
   permanente vira parte do móvel e para de ser visto. */
.adm-tile--pedido .adm-tile__n { color: var(--cor-destaque); }

/* A tabela rola dentro da própria caixa, e não empurra a página de lado. */
.adm-rolo { overflow-x: auto; border: 1px solid var(--cor-linha); border-radius: var(--raio-md); background: var(--cor-superficie); }
table.adm { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 620px; }
table.adm th {
  text-align: left; padding: var(--e-3) var(--e-4);
  font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .07em;
  color: var(--cor-tinta-fraca); font-weight: var(--peso-forte);
  border-bottom: 1px solid var(--cor-linha);
  background: var(--cor-superficie-2);
  white-space: nowrap;
}
table.adm td { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--cor-linha); vertical-align: middle; }
table.adm tr:last-child td { border-bottom: 0; }

.adm-pessoa { display: flex; align-items: center; gap: var(--e-3); }
.adm-bolinha {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--cor-marca-fundo); color: var(--cor-marca-escura);
  display: grid; place-items: center;
  font-size: var(--t-xs); font-weight: var(--peso-forte);
}
.adm-nome { margin: 0; font-weight: var(--peso-forte); }
.adm-sub { font-size: var(--t-2xs); color: var(--cor-tinta-fraca); }
.adm-data { font-variant-numeric: tabular-nums; color: var(--cor-tinta-media); white-space: nowrap; }

.adm-acao {
  padding: var(--e-2) var(--e-4); border-radius: var(--raio-pilula);
  border: 1px solid var(--cor-linha-forte); background: var(--cor-superficie);
  color: var(--cor-tinta-media);
  font-family: inherit; font-size: var(--t-xs); font-weight: var(--peso-forte);
  cursor: pointer; white-space: nowrap;
}
.adm-acao:hover { border-color: var(--cor-marca); color: var(--cor-marca-escura); }
.adm-acao--ligar { background: var(--cor-marca); border-color: var(--cor-marca); color: var(--cor-marca-tinta); }
.adm-acao--ligar:hover { background: var(--cor-marca-escura); color: var(--cor-marca-tinta); }

.pgc-estado--desligada { background: var(--cor-inativo-fundo); color: var(--cor-inativo-tinta); }
.pgc-estado--nao-tem { background: var(--cor-superficie-2); color: var(--cor-tinta-fraca); }

/* ============================================================
   A LUPA — a foto do catálogo abrindo grande

   Decisão dela, 09/09/2026, e ela perguntou antes de eu ter feito:
   "importante as fotos abrem né, ficam grandes se caso a pessoa
   clicaer, certo?". O catálogo é uma vitrine, e vitrine que não deixa
   chegar perto não vende.
   ============================================================ */
.pg-item { cursor: zoom-in; }
.pg-item:focus-visible { outline: 3px solid var(--cor-marca); outline-offset: 2px; }

.lupa { display: none; }
.lupa.aberta {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 60;
  background: rgba(9, 20, 16, .82);
  padding: var(--e-4);
}
/* A FOTO ABERTA NÃO PODE SER CORTADA — ela viu: "quando aberto ele
   corta tbm, tem q ajustar".

   A CAUSA era um descuido meu de CSS: esta regra tinha DOIS `overflow`,
   `auto` e depois `hidden`. O segundo ganha, e com `max-height: 90vh` a
   caixa simplesmente cortava a parte de baixo de qualquer foto alta.
   Nada de errado aparecia — a foto só terminava antes.

   Agora quem se limita é a IMAGEM, não a caixa: ela cabe inteira na tela
   e a caixa se ajusta a ela. `object-fit: contain` garante que nada seja
   cortado nem esticado — é o oposto do `cover` do card, e de propósito:
   no card a foto é uma miniatura arrumada; aberta, é a foto. */
.lupa__caixa {
  margin: 0;
  width: auto;
  max-width: min(900px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--cor-superficie);
  border-radius: var(--raio-lg);
  /* Um `overflow` só, e ele existe para o arredondamento das quinas. */
  overflow: hidden;
  box-shadow: var(--sombra-media);
}
.lupa__caixa img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  /* O desconto é o espaço da legenda embaixo. Sem ele, a foto ocupa a
     tela toda e o nome fica fora do alcance. */
  max-height: calc(92vh - 96px);
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--cor-superficie-2);
}
.lupa__legenda { padding: var(--e-4); }
.lupa__titulo { margin: 0; font-family: var(--fonte-display); font-size: var(--t-lg); font-weight: var(--peso-display); }
.lupa__preco { margin: var(--e-1) 0 0; font-weight: var(--peso-forte); color: var(--cor-marca-escura); font-variant-numeric: tabular-nums; }
.lupa__fechar {
  position: absolute; top: var(--e-4); right: var(--e-4);
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--cor-superficie); color: var(--cor-tinta);
  font-size: var(--t-md); font-family: inherit; cursor: pointer;
}

/* Os dois botões lado a lado no "Minha página", dentro do cadastro. */
.meu-cadastro__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-3); }
.meu-cadastro__acoes .pgc-botao { flex: 1 1 auto; min-width: 160px; }

/* O contador de pedidos na aba Páginas do painel. */
.abas__conta {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--raio-pilula);
  background: var(--cor-destaque); color: var(--cor-marca-tinta);
  font-size: var(--t-2xs); font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
}

/* O bloco "Sua página está liberada", dentro da porta do cadastro. Ela tem
   layout próprio (`porta__*`), então o bloco se veste como ela e não como
   as seções da página. */
.porta__pagina {
  margin: var(--e-4) 0;
  padding: var(--e-4);
  border: 1px solid var(--cor-marca);
  border-radius: var(--raio-md);
  background: var(--cor-marca-fundo);
  text-align: left;
}
.porta__pagina-titulo {
  margin: 0 0 var(--e-1);
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  color: var(--cor-marca-escura);
}
.porta__pagina-texto { margin: 0 0 var(--e-3); font-size: var(--t-sm); color: var(--cor-tinta-media); }

/* ============================================================
   PÔR NO AR — roxo, e não verde

   Pedido dela, 09/09/2026: *"ficou confuso o por no ar verde igual,
   deixa o por no ar roxo"*.

   Ela está certa, e o motivo é o que o verde já significa nesta tela:
   TODOS os botões de "Salvar" são verdes. Pôr no ar não é salvar — é a
   única ação da tela que muda o que os vizinhos veem. Com a mesma cor
   dos outros quatro, ela some no meio deles.

   O roxo não é cor nova: é o `--cor-troca`, o mesmo do botão de avaliar
   (`.avaliar-cta` no estilo.css). O site já usa verde para "falar/salvar"
   e roxo para "a outra coisa importante". Isto segue a regra, não abre
   exceção.
   ============================================================ */
.pgc-botao--noar {
  background: var(--cor-troca);
  color: var(--cor-marca-tinta);
  border: 1px solid var(--cor-troca);
}
.pgc-botao--noar:hover { background: var(--cor-troca-tinta); border-color: var(--cor-troca-tinta); }

/* Depois de pôr no ar, o "Ver página" fica ao lado — pedido dela no mesmo
   recado: "tinha q ter uma opcao depois de por no ar, ver pagina". Sem
   ele, a pessoa põe no ar e fica olhando o formulário, sem saber se
   funcionou nem como chegar lá. */
.pgc-acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.pgc-acoes .pgc-botao { flex: 0 1 auto; }

/* ============================================================
   A LISTA DO CATÁLOGO — editar na própria linha

   Pedido dela, 09/09/2026: *"criar novos publicacoes, editar anteriores
   e etc"*. Até então só dava para TIRAR: quem errasse o preço perdia a
   foto e subia de novo.

   Linha e não cartão: aqui a pessoa está GERENCIANDO, não admirando. O
   que precisa estar fácil é achar o item e mudar o texto — a foto é só
   o reconhecimento, e por isso é pequena.
   ============================================================ */
.pgc-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-3); }

.pgc-linha {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
  background: var(--cor-superficie-2);
  flex-wrap: wrap;
}
.pgc-linha__foto {
  width: 96px; height: 72px; flex: none;
  object-fit: cover;
  border-radius: var(--raio-sm);
  background: var(--cor-superficie);
}
/* Os campos crescem e o botão não. No celular a linha quebra e os campos
   ocupam a largura toda — é onde digitar num campo estreito mais dói. */
.pgc-linha__campos { display: flex; gap: var(--e-2); flex: 1 1 260px; align-items: center; flex-wrap: wrap; }
.pgc-linha__campos .pgc-campo { margin: 0; flex: 1 1 140px; }
.pgc-linha__campos .pgc-campo--preco { flex: 0 1 110px; }

.pgc-entrada-fina {
  width: 100%;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--cor-linha-forte);
  border-radius: var(--raio-sm);
  background: var(--cor-superficie);
  color: var(--cor-tinta);
  font-family: inherit;
  font-size: var(--t-sm);
}
.pgc-entrada-fina:focus-visible { outline: 2px solid var(--cor-marca); outline-offset: 1px; }

.pgc-linha__salvar {
  flex: none;
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--cor-marca);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie);
  color: var(--cor-marca-escura);
  font-family: inherit; font-size: var(--t-xs); font-weight: var(--peso-forte);
  cursor: pointer;
}
.pgc-linha__salvar:hover { background: var(--cor-marca); color: var(--cor-marca-tinta); }

/* Tirar é discreto de propósito: é a ação que não tem volta na lista, e
   não deve competir com "Salvar" pelo dedo. */
.pgc-linha__tirar {
  flex: none;
  border: 0; background: none; padding: var(--e-2);
  color: var(--cor-tinta-fraca);
  font-family: inherit; font-size: var(--t-xs); font-weight: var(--peso-forte);
  cursor: pointer;
}
.pgc-linha__tirar:hover { color: var(--cor-vendido-fundo); text-decoration: underline; }

/* O contador da aba Catálogo é informativo, não um alerta — por isso não
   usa o laranja do contador de pedidos do painel dela. */
.abas__conta--calma { background: var(--cor-linha-forte); color: var(--cor-tinta-media); }

/* O título e o "Ver minha página" na mesma linha, nas duas telas de
   configurar. No celular ele desce e ocupa a largura toda — botão de
   meia linha ao lado de um título é o que fica difícil de acertar com o
   dedo. */
.pgc-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin-top: var(--e-4);
  margin-bottom: var(--e-2);
}
@media (max-width: 520px) {
  .pgc-topo .pgc-botao { width: 100%; }
}

/* ============================================================
   O PAINEL DO CONDOMÍNIO — a porta única

   "ta ruim eu ficar acessando cada uma", 09/09/2026.

   Lista de portas, e não grade de cartões: elas são poucas, têm nomes
   de comprimentos bem diferentes, e a ordem importa (o que espera por
   ela vem primeiro). Em coluna, o olho desce e para na primeira que tem
   número.
   ============================================================ */
.adm-chamada {
  margin: 0 0 var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--raio-md);
  font-size: var(--t-md);
}
.adm-chamada strong { font-family: var(--fonte-display); font-size: var(--t-xl); }
.adm-chamada--tem { background: var(--cor-esfriou-fundo); color: var(--cor-esfriou-tinta); }
.adm-chamada--zero { background: var(--cor-marca-fundo); color: var(--cor-marca-escura); }

.adm-portas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-3); }

.adm-porta {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-4);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-baixa);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.adm-porta:hover { transform: translateY(-1px); box-shadow: var(--sombra-media); }
/* Quem tem gente esperando ganha um traço na lateral — a cor sozinha
   não serve para quem não distingue bem, e o traço é forma. */
.adm-porta--tem { border-left: 4px solid var(--cor-destaque); }

/* O link cobre a porta inteira, mas quem o leitor de tela anuncia é o
   NOME — e não o cartão lido de uma vez. Mesmo padrão do card. */
.adm-porta__link { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.adm-porta__link::after { content: ""; position: absolute; inset: 0; }
.adm-porta:has(.adm-porta__link:focus-visible) { outline: 3px solid var(--cor-marca); outline-offset: 2px; }

.adm-porta__cabeca { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e-2); }
.adm-porta__nome {
  font-family: var(--fonte-display);
  font-size: var(--t-md);
  font-weight: var(--peso-display);
  color: var(--cor-tinta);
}
.adm-porta__conta {
  padding: 1px var(--e-3);
  border-radius: var(--raio-pilula);
  background: var(--cor-destaque);
  color: var(--cor-marca-tinta);
  font-size: var(--t-2xs);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.adm-porta__oque {
  display: block;
  margin-top: var(--e-1);
  font-size: var(--t-sm);
  color: var(--cor-tinta-media);
}
.adm-porta__seta { flex: none; color: var(--cor-tinta-fraca); }

/* ---------------- A AVALIAÇÃO DA PÁGINA (10/09/2026) ----------------

   O grosso do visual vem das classes da página do anúncio (`avalia`,
   `estrelas`, `avaliar`, `nota`), reaproveitadas no template de
   propósito: é a mesma coisa, e dois desenhos para avaliação seriam
   duas telas para a mesma ideia -- a regra 18 da manutenção.

   O que existe aqui é só o que a Página tem e o anúncio não: a lista com
   o TEXTO à mostra. Na página do anúncio o comentário é guardado e não
   aparece, esperando a V3; aqui ele é o conteúdo. */
/* A AVALIAÇÃO FICA NA LATERAL, E SOBE PARA JUNTO DO CARTÃO (13/09/2026).

   Duas correções no mesmo dia, e a segunda desfez metade da primeira --
   fica registrado porque o motivo importa:

   1. ela viu no notebook que a avaliação estava lá no fim: "ficou bem
      baixa ali no visual". Eu a fiz atravessar as duas colunas;
   2. ela respondeu: "mas mudou, tinha ficado mais legal na lateral".

   Ou seja: o lugar sempre esteve certo, a ALTURA é que estava errada. E
   a altura não vinha do lugar: no grid de duas colunas, a avaliação era
   o terceiro filho, então caía na linha 2 -- e a linha 1 tinha a altura
   do CATÁLOGO inteiro. Ela estava na coluna certa, empurrada para baixo
   por uma foto que nem é dela.

   O conserto é dizer que o catálogo ocupa as DUAS linhas da coluna 2.
   Aí a coluna 1 volta a ser uma coluna de verdade: cartão da pessoa, e
   a avaliação logo embaixo. */
.pg-avalia__area { margin-top: var(--e-6); }
@media (min-width: 900px) {
  .pg-vitrine__area { grid-column: 2; grid-row: 1 / span 2; }
  .pg-avalia__area  { grid-column: 1; grid-row: 2; margin-top: var(--e-5); }
}

.pg-avalia__lista { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; gap: var(--e-3); }
.pg-avalia__item {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-lg);
  padding: var(--e-4);
}
.pg-avalia__cabeca { display: flex; align-items: center; gap: var(--e-3); }
.pg-avalia__texto {
  margin: var(--e-3) 0 0;
  color: var(--cor-tinta-media);
  line-height: var(--entrelinha-normal);
  /* Quebra palavra comprida em vez de esticar o card: o texto vem de
     quem escreveu, e ninguém digita pensando na largura da tela. */
  overflow-wrap: anywhere;
}

/* A nota grande, no topo das avaliações. Só aparece a partir de três --
   quem decide é o `resumoAvaliacoes`, em regras.js, num lugar só. */
.nota--grande { font-size: var(--t-lg); margin: var(--e-4) 0 0; }

/* A resposta da dona (10/09/2026). Recuada e com barra na lateral: é a
   mesma avaliação, com outra voz dentro. Sem isso, resposta e comentário
   viram um texto só -- e quem lê atribui à pessoa errada. */
.pg-avalia__resposta {
  margin: var(--e-3) 0 0 var(--e-3);
  padding-left: var(--e-3);
  border-left: 3px solid var(--cor-marca-fundo);
}
.pg-avalia__resposta-quem {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: var(--peso-forte);
  color: var(--cor-marca-escura);
}
.pg-avalia__resposta-texto {
  margin: var(--e-1) 0 0;
  color: var(--cor-tinta-media);
  line-height: var(--entrelinha-normal);
  overflow-wrap: anywhere;
}

.pg-avalia__responder { margin-top: var(--e-3); }
.pg-avalia__responder-botao {
  cursor: pointer;
  font-size: var(--t-xs);
  font-weight: var(--peso-forte);
  color: var(--cor-marca);
}
.pg-avalia__responder form { margin-top: var(--e-2); }

/* "Tirar do ar" (13/09/2026), e só a Camila vê.

   DISCRETO DE PROPÓSITO: é a ação destrutiva de uma tela que ela abre
   para ler, não para moderar. Cor de tinta fraca, e o vermelho de aviso
   só quando o dedo já está em cima -- botão vermelho fixo puxa o toque
   justamente para o que não se quer tocar por engano.

   O alvo tem `--e-2` de folga em volta pelo motivo de sempre: no celular
   ele fica a um centímetro do "Responder", e errar aqui tira o elogio de
   um vizinho do ar. */
.pg-avalia__derrubar { margin-top: var(--e-2); }
.pg-avalia__derrubar-botao {
  cursor: pointer;
  padding: var(--e-2) 0;
  font-size: var(--t-xs);
  font-weight: var(--peso-forte);
  color: var(--cor-tinta-fraca);
  background: none;
  border: 0;
}
.pg-avalia__derrubar-botao:hover,
.pg-avalia__derrubar-botao:focus-visible { color: var(--cor-aviso); }

/* A nota no topo da lateral (13/09/2026).

   Ela nasceu para avisar que havia avaliação lá no fim da página. Com a
   avaliação de volta à lateral, logo abaixo do cartão, o aviso e o
   avisado ficam a um palmo um do outro -- então ela some no computador
   e fica só no celular, onde a avaliação continua depois do catálogo.
   A estrela usa `--cor-estrela`, a mesma do anúncio: duas estrelas de
   cores diferentes no mesmo site seriam duas notas. */
@media (min-width: 900px) { .pg-nota-topo { display: none; } }
.pg-nota-topo { margin: var(--e-2) 0 0; font-size: var(--t-sm); }
.pg-nota-topo a {
  display: inline-flex; align-items: center; gap: var(--e-1);
  color: var(--cor-tinta); font-weight: var(--peso-forte);
  text-decoration: none; font-variant-numeric: tabular-nums;
}
.pg-nota-topo a:hover { text-decoration: underline; }
.pg-nota-topo__estrela { color: var(--cor-estrela); }
.pg-nota-topo__de { font-weight: 400; color: var(--cor-tinta-fraca); }