/* ===========================================================================
   parque.css — o que é NOSSO, separado do tema.

   POR QUE UM ARQUIVO SEPARADO

   `main.css` é do template Green, comprado. Editar lá significa perder tudo na
   primeira atualização do tema — e não dá para saber o que era nosso e o que
   veio de fábrica.

   POR QUE NÃO REPETIR EM CADA VIEW

   Este padrão nasceu dentro de `conta/facial.php`, num bloco <style>. Ao levá-
   lo para contato, espaços e visita, seriam QUATRO cópias das mesmas regras —
   e a primeira mudança de cor deixaria três telas para trás. Aqui é um lugar
   só, carregado em todas.
   =========================================================================== */

:root {
  --parque-verde: #14512c;
  --parque-verde-claro: #2e7d4f;
  --parque-verde-suave: #e8f3ec;
  --parque-fundo-suave: #f6f9f7;
  --parque-borda: rgba(0, 0, 0, .06);
}

/* ---------------------------------------------------------------------------
   FAIXA DE TOPO

   O convite da página em uma frase, sobre verde. Substitui o título preto em
   fundo branco que todas as telas usavam — que não dizia nada além do nome da
   página.
   --------------------------------------------------------------------------- */
.pq-topo {
  background: linear-gradient(135deg, var(--parque-verde) 0%, var(--parque-verde-claro) 100%);
  color: #fff;
  border-radius: 1rem;
}

.pq-topo .pq-etiqueta {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  opacity: .75;

  /* COLISAO DE NOMES, corrigida aqui.

     `.pq-etiqueta` nasceu nesta faixa, herdando o texto claro do fundo verde.
     Depois criei OUTRA `.pq-etiqueta` para as caracteristicas do espaco, com
     `color` verde escuro e fundo claro — e essa venceu tambem aqui, deixando
     verde escuro sobre verde escuro: a palavra "SUA CONTA" sumia.

     Redeclarar na faixa e mais seguro que renomear: a classe ja esta em uso em
     varias telas, e renomear em massa arrisca esquecer uma. */
  background: transparent;
  color: #fff;
  padding: 0;
  border-radius: 0;
}

/* Uma imagem por trás da faixa, quando a tela tiver foto. O gradiente por cima
   garante que o texto continue legível sobre qualquer foto — sem isso, uma
   imagem clara come as letras brancas. */
.pq-topo-foto {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.pq-topo-foto::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(20, 81, 44, .92) 0%, rgba(46, 125, 79, .82) 100%);
}

.pq-topo-foto > * {
  position: relative;
}

/* ---------------------------------------------------------------------------
   PASSOS NUMERADOS

   Para explicar um processo. O círculo com o número faz a leitura de "isto tem
   N etapas" acontecer ANTES de qualquer texto ser lido — e é isso que decide
   se a pessoa começa.
   --------------------------------------------------------------------------- */
.pq-passo-n {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  border-radius: 50%;
  background: var(--parque-verde-suave);
  color: var(--parque-verde);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pq-passo + .pq-passo {
  margin-top: 1.25rem;
}

/* ---------------------------------------------------------------------------
   SELOS

   Informação curta lado a lado — garantias, regras, o que está incluído. Quem
   está decidindo quer VER de relance; parágrafo exige leitura, e quem está em
   dúvida não lê.
   --------------------------------------------------------------------------- */
.pq-selo {
  background: var(--parque-fundo-suave);
  border: 1px solid var(--parque-borda);
  border-radius: .75rem;
  padding: .85rem 1rem;
  height: 100%;
}

.pq-selo i {
  color: var(--parque-verde-claro);
}

/* ---------------------------------------------------------------------------
   CARTÃO

   Sombra suave em vez de borda dura. `translateY` no hover só onde o cartão é
   clicável — mover o que não leva a lugar nenhum promete algo que não existe.
   --------------------------------------------------------------------------- */
.pq-card {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 6px 20px rgba(0, 0, 0, .04);
  background: #fff;
}

/* O ESPAÇAMENTO INTERNO, que o Bootstrap NÃO dá aqui.

   `.card-body` só ganha padding quando está dentro de `.card` — é assim que o
   Bootstrap escreve a regra. Ao trocar `card` por `pq-card` nos cartões de
   espaço, o padding sumiu e o texto encostou na borda: o crachá "Terreiro"
   começava no mesmo pixel que o cartão.

   Medido antes de corrigir: padding 0 nos quatro lados.

   A regra vive aqui, e não na view, para que o próximo cartão que alguém
   escrever com `pq-card` já nasça com respiro. */
.pq-card > .card-body {
  padding: 1.25rem;
}

@media (min-width: 768px) {
  .pq-card > .card-body {
    padding: 1.5rem;
  }
}

a.pq-card,
.pq-card-link {
  transition: transform .18s ease, box-shadow .18s ease;
}

a.pq-card:hover,
.pq-card-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08), 0 12px 32px rgba(0, 0, 0, .07);
}

/* Título de seção: miúdo, maiúsculo, discreto. Serve para separar blocos sem
   competir com o conteúdo. */
.pq-secao-titulo {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .75rem;
  color: #6c757d;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   ÍCONE EM CÍRCULO
   --------------------------------------------------------------------------- */
.pq-icone {
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  border-radius: 50%;
  background: var(--parque-verde-suave);
  color: var(--parque-verde);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.pq-icone-g {
  width: 4rem;
  height: 4rem;
  flex-basis: 4rem;
  font-size: 1.75rem;
}

/* ---------------------------------------------------------------------------
   LISTA DE CONTATO
   --------------------------------------------------------------------------- */
.pq-contato-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
}

.pq-contato-item + .pq-contato-item {
  border-top: 1px solid var(--parque-borda);
}

.pq-contato-item a {
  color: inherit;
  text-decoration: none;
}

.pq-contato-item a:hover {
  color: var(--parque-verde-claro);
}

/* ---------------------------------------------------------------------------
   O TEMA dá `padding: 60px 0` a TODA <section>. Serve para as faixas da home,
   cada uma ocupando a tela inteira — e estoura em página de conteúdo, onde
   cada bloco vira uma tela própria. `pq-secao` volta a um respiro normal.
   --------------------------------------------------------------------------- */
.pq-secao {
  padding: 2.5rem 0 !important;
}

/* QUANDO A SEÇÃO SÓ CARREGA A FAIXA DO TOPO, o padding de baixo sobra.

   MEDIDO no painel do cliente: 40px do `padding-bottom` desta regra + 24px do
   `mb-4` da faixa = 64px de vão até o primeiro conteúdo. Lia como "faltou
   alguma coisa aqui".

   Escrevi antes `.pq-secao { padding-bottom: 0 }` no fim do arquivo e não
   funcionou: a regra acima tem `!important`, que vence independentemente da
   ordem. A correção precisa estar no mesmo nível.

   `:has()` limita ao caso real — seção cuja ÚNICA função é embalar a faixa. Se
   houver conteúdo além dela, o respiro de baixo continua fazendo falta. */
.pq-secao:has(> .container > .pq-topo:last-child) {
  padding-bottom: 0 !important;
}

@media (max-width: 767px) {
  .pq-secao {
    padding: 1.75rem 0 !important;
  }

  .pq-topo {
    border-radius: .75rem;
  }
}

/* ---------------------------------------------------------------------------
   PAGE-TITULO — o cabeçalho das telas que ainda não migraram

   A faixa `pq-topo` foi aplicada a mão em contato, espaços e visita. As outras
   quinze telas (acesso, agendar, entrar, criar conta, pagamento…) usam esta
   classe, definida no <style> do layout: faixa verde de canto a canto, quadrada,
   colada no topo.

   Em vez de reescrever quinze arquivos, a classe passa a se comportar como o
   `pq-topo`: cartão arredondado, com respiro em volta. Uma mudança, todas as
   telas — e nenhuma view precisou ser tocada.

   `!important` porque o <style> do layout vem depois deste arquivo no HTML, e
   sem ele a regra antiga venceria. É a exceção que evita quinze edições.
   --------------------------------------------------------------------------- */
.page-titulo {
  padding: 0 !important;
  background: transparent !important;
  margin: 1.75rem 0 0 !important;
}

/* A FAIXA VERDE ALINHADA COM OS CARTÕES DE BAIXO.

   MEDIDO NA PÁGINA: todo `.container` do tema tem `padding: 0 12px`, então o
   conteúdo de uma seção começa 12px adentro da borda do container. A faixa do
   topo pintava o container INTEIRO, e a cor ia até a borda — 12px mais para
   fora que os cartões logo abaixo.

   Na tela isso lê como "o verde é maior que os outros", que foi o que o dono
   viu. Não era altura nem largura (medi: os dois têm 1116px): era a borda
   esquerda começando em lugares diferentes.

   `background-clip: content-box` resolve sem tocar em nenhuma view: a cor
   passa a respeitar o padding do container em vez de ignorá-lo. Vinte e quatro
   telas usam esta classe — exigir um wrapper novo em todas seria vinte e
   quatro chances de esquecer uma. */
/* `background-clip: content-box` não serve aqui: ele corta o fundo NO padding,
   e o padding é justamente o respiro interno da faixa — ela perdeu altura e os
   cantos arredondados. Vi na captura.

   A saída é mais simples: o container mantém os 12px de padding que alinham
   tudo, e a faixa recebe margem negativa de 12px para o fundo ocupar a largura
   inteira... NÃO. Isso a jogaria de volta para fora.

   O que realmente alinha: manter o padding do container em 12px (igual ao das
   outras seções) e pôr o respiro interno da faixa em cima disso, com o fundo
   no próprio container. O padding total vira 12px de alinhamento + o respiro
   visual, e a borda esquerda da cor cai exatamente onde caem os cartões. */
.page-titulo > .container {
  background: linear-gradient(135deg, var(--parque-verde) 0%, var(--parque-verde-claro) 100%);
  border-radius: 1rem;
  padding: 2rem 2.25rem !important;
  color: #fff;

  /* AS 12px QUE FALTAVAM — em `border-spacing` não, em BORDA TRANSPARENTE.

     O `.container` do Bootstrap é centralizado por `margin: 0 auto`. Escrever
     `margin-left: 12px` MATA esse auto e joga a faixa para a esquerda da tela
     (medi: foi de l=63 para l=12). Não serve.

     O que funciona é uma borda transparente de 12px: ela ocupa o mesmo espaço
     que o padding das outras seções, o fundo não a pinta, e o `margin: auto`
     do container continua centralizando. A cor passa a começar exatamente
     onde começam os cartões. */
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  background-clip: padding-box;
}

.page-titulo h1 {
  font-size: 1.75rem !important;
  margin-bottom: .5rem !important;
}

@media (min-width: 768px) {
  .page-titulo > .container {
    padding: 2.75rem 3rem !important;
  }

  .page-titulo h1 {
    font-size: 2rem !important;
  }
}

@media (max-width: 767px) {
  .page-titulo > .container {
    border-radius: .75rem;
    padding: 1.5rem 1.5rem !important;
  }
}

/* A <section> logo depois do título ganhava 60px do tema em cima do respiro
   que a faixa já tem. */
.page-titulo + section.section,
.page-titulo + .section {
  padding-top: 2rem !important;
}

/* ---------------------------------------------------------------------------
   CARTÃO DE ESPAÇO

   A imagem tinha `height: 200px` fixo no <style> do layout. Altura fixa com
   `object-fit: cover` corta a foto sem critério — uma foto vertical do
   terreiro perde o topo e o pé. Proporção fixa (4:3) mantém a grade alinhada
   e corta menos.

   O zoom suave na foto ao passar o mouse: o cartão inteiro é um link, e o
   movimento diz isso antes do cursor mudar.
   --------------------------------------------------------------------------- */
.cartao-espaco img {
  aspect-ratio: 4 / 3;
  height: auto !important;
  width: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.cartao-espaco:hover img {
  transform: scale(1.04);
}

/* O crachá do tipo, agora ao lado do nome: menor, sem quebrar linha. */
.cartao-espaco .badge-tipo {
  white-space: nowrap;
  font-size: 11px;
}

/* O corpo cresce e o rodapé desce: assim o botão fica na mesma altura em
   todos os cartões da fileira, mesmo com descrições de tamanhos diferentes. */
.cartao-espaco {
  display: flex;
  flex-direction: column;
}

.cartao-espaco .card-body {
  flex: 1 1 auto;
}

/* ===========================================================================
   GALERIA DO ESPAÇO — vídeo e fotos no mesmo palco

   Sem biblioteca. O site precisa carregar rápido no celular de quem está a
   caminho do Parque, e um carrossel pronto traz 40 kB para fazer o que aqui
   são trinta linhas: mostrar um item por vez e trocar ao clicar.
   =========================================================================== */

.pq-galeria-palco {
  border-radius: 1rem;
  background: #0d0d0d;

  /* SEM `overflow: hidden` NO PALCO.

     Ele cortava as setas — que são filhas do palco e ficam sobre a borda
     arredondada. Vi na captura: a seta esquerda aparecia pela metade, no
     desktop e no celular.

     O arredondamento vem do próprio item (a foto e o cartaz do vídeo), que é
     quem realmente precisa dele. */
}

.pq-galeria-item {
  border-radius: 1rem;
  overflow: hidden;
}

/* Todos os itens ocupam o mesmo lugar; só o ativo aparece. Trocar de foto não
   muda a altura da página — e não recarrega imagem já baixada. */
.pq-galeria-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
}

.pq-galeria-item.ativo {
  opacity: 1;
  visibility: visible;
}

.pq-galeria-item img,
.pq-galeria-item iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* A legenda da foto, quando existe. Gradiente por baixo para o texto ficar
   legível sobre qualquer imagem. */
.pq-legenda {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem 1rem .9rem;
  color: #fff;
  font-size: .85rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
}

/* ---------------------------------------------------------------------------
   O CARTAZ DO VÍDEO — miniatura do YouTube com botão de play.

   O <iframe> só é criado ao clicar. Antes disso não há requisição nenhuma
   para o YouTube, nem cookie de terceiro na página.
   --------------------------------------------------------------------------- */
.pq-video-cartaz {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background-color: #111;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pq-video-cartaz::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .25);
  transition: background .2s ease;
}

.pq-video-cartaz:hover::after {
  background: rgba(0, 0, 0, .1);
}

.pq-play {
  position: relative;
  z-index: 1;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: var(--parque-verde);
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .35);
  transition: transform .2s ease;
}

.pq-video-cartaz:hover .pq-play {
  transform: scale(1.08);
}

/* ---------------------------------------------------------------------------
   SETAS E CONTADOR

   As setas ficam translúcidas até o mouse chegar perto: sobre a foto, dois
   botões opacos brigam com a imagem que a pessoa veio ver. No celular, onde
   não há mouse, ficam sempre visíveis — lá o toque é o único caminho.
   --------------------------------------------------------------------------- */
.pq-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: #222;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  /* CONTRASTE, não transparência.

     A seta ficava em `opacity: .55` para não competir com a foto — e sobre
     uma imagem escura (mata, sombra) sumia: nas capturas parecia CORTADA pela
     borda. Medi e ela estava inteira; o que faltava era ser visível.

     Agora fica opaca, com sombra própria. Ela não briga com a foto porque é
     pequena e tem cor neutra; e um botão que a pessoa não enxerga não serve
     para nada. */
  opacity: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  transition: background .2s ease, transform .2s ease;
}

.pq-seta:hover {
  transform: translateY(-50%) scale(1.08);
}

.pq-seta:hover {
  background: #fff;
}

/* AS DUAS SETAS EMPILHAVAM NO CANTO ESQUERDO.

   O palco é um `.ratio` do Bootstrap, e essa classe declara `.ratio > *` com
   `position:absolute; top:0; left:0; width:100%; height:100%`. Como `left`
   vence `right` quando os dois existem, a seta direita ia parar na esquerda —
   as duas sobrepostas pareciam UMA seta cortada pela metade. Foi isso que vi
   em três capturas seguidas e quase corrigi como se fosse recorte.

   `left: auto` na seta direita desfaz a herança; `width` explícito impede que
   o `width: 100%` do `.ratio` a estique de ponta a ponta. */
.pq-seta-esq {
  left: 1rem;
  right: auto;
}

.pq-seta-dir {
  left: auto;
  right: 1rem;
}

.pq-seta {
  width: 2.75rem !important;
  height: 2.75rem !important;
}

@media (max-width: 575px) {
  .pq-seta {
    width: 2.25rem !important;
    height: 2.25rem !important;
    font-size: 1rem;
  }

  .pq-seta-esq { left: .5rem; }
  .pq-seta-dir { right: .5rem; }
}

.pq-contador {
  position: absolute;
  top: .75rem;
  right: .75rem;
  left: auto;
  width: auto;
  height: auto;
  z-index: 2;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: .75rem;
  padding: .25rem .6rem;
  border-radius: 1rem;
}

/* ---------------------------------------------------------------------------
   A TIRA DE MINIATURAS

   Rola na horizontal em vez de quebrar linha: com oito fotos, a grade empurra
   a ficha do espaço para baixo da dobra.
   --------------------------------------------------------------------------- */
.pq-tira {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  scrollbar-width: thin;
}

.pq-miniatura {
  position: relative;
  flex: 0 0 5rem;
  height: 3.75rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: .5rem;
  overflow: hidden;
  cursor: pointer;
  background: #f2f6f3;
  opacity: .65;
  transition: opacity .2s ease, border-color .2s ease;
}

.pq-miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pq-miniatura:hover { opacity: 1; }

/* A ativa fica marcada pela borda verde — sem isso a tira não diz onde a
   pessoa está. */
.pq-miniatura.ativa {
  opacity: 1;
  border-color: var(--parque-verde-claro);
}

.pq-miniatura-vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--parque-verde);
  font-size: 1.5rem;
}

/* O triângulo na miniatura do vídeo: sem ele, a capa do YouTube parece só
   mais uma foto. */
.pq-marca-video {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 1.5rem;
}

@media (max-width: 575px) {
  .pq-miniatura {
    flex-basis: 4rem;
    height: 3rem;
  }

  .pq-play {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.5rem;
  }
}


/* ---------------------------------------------------------------------------
   OS CARTÕES DO SITE TÊM O MESMO RAIO

   O Bootstrap traz `border-radius: 6px` em `.card`, e as telas que escrevi
   depois usam `1rem` no `.pq-card`. Numa página com os dois — o painel do
   cliente tem — a diferença aparece como cartão "de outro conjunto".

   Vale para `.card` DENTRO das áreas do cliente, não para o site todo: o tema
   Green usa `.card` em outros lugares com estilo próprio.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   OS CARTÕES DA ÁREA LOGADA SÃO OS MESMOS DE `/ESPACOS`

   MEDIDO nos dois lados, e o raio já estava igual (16px). A diferença era
   outra, e é o que o olho percebe:

     /espacos       borda: 0     sombra: sim   → o cartão FLUTUA
     área logada    borda: 1px   sombra: não   → o cartão é um RETÂNGULO RISCADO

   Duas linguagens visuais no mesmo site. A de `/espacos` é a que escrevi
   depois e a que o dono aprovou, então é ela que vale.

   A regra alcança `.card` e `.alert` de qualquer tela que use a faixa verde do
   topo — que são justamente as telas do cliente, do checkout e dos avisos. O
   tema Green usa `.card` em outros lugares com estilo próprio, e reescrever o
   site inteiro passaria do que foi pedido.
   --------------------------------------------------------------------------- */
.page-titulo ~ .section .card,
.page-titulo ~ section .card,
.pq-secao .card,
.pq-secao ~ .section .card,
.pq-secao ~ section .card {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 6px 20px rgba(0, 0, 0, .04);
  background: #fff;
}

/* O AVISO MANTÉM A BORDA — ela é o que o distingue de um cartão comum.

   Um aviso âmbar sem contorno vira um retângulo colorido solto; a borda diz
   "isto é um recado, não conteúdo". O que muda é só o arredondamento, para
   acompanhar o resto. */
.page-titulo ~ .section .alert,
.page-titulo ~ section .alert,
.pq-secao .alert,
.pq-secao ~ .section .alert,
.pq-secao ~ section .alert {
  border-radius: 1rem;
}

/* O CARTÃO CLICÁVEL responde ao mouse, como em `/espacos`. */
/* AS TELAS NOVAS usam `.pq-secao` em vez de `.page-titulo` — as do facial, do
   cancelamento e da galeria. Sem incluí-las aqui, elas ficavam com o raio de
   6px do Bootstrap enquanto o resto do site já estava em 16px. A varredura
   pegou duas na tela do cadastro facial. */
.page-titulo ~ .section a.card,
.page-titulo ~ section a.card,
.pq-secao a.card,
.pq-secao ~ .section a.card,
.pq-secao ~ section a.card {
  transition: transform .18s ease, box-shadow .18s ease;
}

.page-titulo ~ .section a.card:hover,
.page-titulo ~ section a.card:hover,
.pq-secao a.card:hover,
.pq-secao ~ .section a.card:hover,
.pq-secao ~ section a.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 12px 28px rgba(0, 0, 0, .07);
}


/* ===========================================================================
   O SELETOR DE FOTO DE DOCUMENTO

   Substitui o `<input type="file">` cru, que tem três problemas num celular:
   o alvo de toque é minúsculo, o texto padrão ("Nenhum arquivo escolhido")
   não é instrução, e com `capture` ele abre a câmera direto — tirando de
   quem já tem a foto pronta a chance de escolhê-la.
   =========================================================================== */

.pq-foto-botao {
  /* ALTO O BASTANTE PARA O DEDO. 88px é o que separa "acertei" de "errei e
     abri a câmera sem querer" em quem segura o telefone com uma mão só. */
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;

  background: #fff;
  border: 1.5px dashed #c9d6cd;
  border-radius: 1rem;
  color: var(--parque-verde, #14512c);
  font-weight: 600;
  font-size: .92rem;

  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}

.pq-foto-botao i {
  font-size: 1.5rem;
  line-height: 1;
}

.pq-foto-botao:hover,
.pq-foto-botao:focus-visible {
  border-color: var(--parque-verde, #14512c);
  background: #f4f9f6;
}

/* O AFUNDAR NO TOQUE: sem ele, num aparelho lento a pessoa não sabe se o
   toque pegou e toca de novo — abrindo a câmera duas vezes. */
.pq-foto-botao:active {
  transform: scale(.97);
}

.pq-foto-previa {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background: #f1f3f2;
}

.pq-foto-previa img {
  display: block;
  width: 100%;

  /* GRANDE O BASTANTE PARA JULGAR SE ESTÁ LEGÍVEL. O motivo de recusa mais
     comum é foto que ninguém consegue ler, e uma miniatura não denuncia
     isso — a pessoa só descobre dias depois, na recusa. */
  max-height: 46vh;
  object-fit: contain;
}

/* A CONFERÊNCIA POR CIMA DA IMAGEM: é o que a pessoa está olhando enquanto
   espera. Um aviso no rodapé passaria despercebido. */
.pq-foto-conferindo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, .88);
  color: var(--parque-verde, #14512c);
  font-weight: 600;
}

/* O BOTÃO TRAVADO PRECISA PARECER TRAVADO.

   O verde do Bootstrap com `opacity: .65` ainda lê como botão pronto num
   celular ao sol. Medi na captura: "Continuar" aparecia verde e convidativo
   antes de existir foto nenhuma — a pessoa toca, nada acontece, e ela não
   sabe se o site travou ou se fez algo errado. */
.pq-foto ~ .btn:disabled,
.pq-foto ~ .d-flex .btn:disabled {
  background: #e9ecef;
  border-color: #e9ecef;
  color: #8a9299;
  opacity: 1;
}


/* ===========================================================================
   A ESCOLHA DO FORMATO DO DOCUMENTO

   Dois botões que são uma pergunta ("como é o seu documento?"), não uma ação.
   Precisam parecer escolhíveis e mostrar qual está valendo — um `select`
   esconderia a opção não escolhida, e a pessoa não compararia as duas.
   =========================================================================== */
.pq-formato {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;

  min-height: 84px;
  padding: .7rem .5rem;

  background: #fff;
  border: 1.5px solid #dee2e6;
  border-radius: .85rem;
  color: #55605a;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.15;

  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.pq-formato i {
  font-size: 1.35rem;
  line-height: 1;
}

.pq-formato small {
  font-weight: 400;
  font-size: .72rem;
  color: #8a9299;
  text-align: center;
}

/* O ESCOLHIDO precisa ser inconfundível: com dois botões parecidos, a dúvida
   sobre qual está valendo faz a pessoa clicar de novo no que já estava. */
.pq-formato.ativo {
  border-color: var(--parque-verde, #14512c);
  border-width: 2px;
  background: #f4f9f6;
  color: var(--parque-verde, #14512c);
}

.pq-formato.ativo small {
  color: var(--parque-verde, #14512c);
}

.pq-formato:active {
  transform: scale(.98);
}


/* ---------------------------------------------------------------------------
   AS CARACTERÍSTICAS DO ESPAÇO — capacidade e metragem

   Duas caixas iguais, lado a lado, dentro do cartão da listagem. O peso visual
   idêntico é o ponto: quem escolhe compara os mesmos dois números entre 29
   cartões, varrendo a página em coluna, sem precisar ler frase nenhuma.

   Fundo levemente esverdeado em vez de borda: o cartão já tem sombra, e mais
   um traço fecharia demais um bloco que precisa parecer parte do cartão, não
   uma tabela colada nele.
   --------------------------------------------------------------------------- */
.pq-carac {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem .75rem;
  border-radius: .75rem;
  background: rgba(20, 81, 44, .05);
}

.pq-carac i {
  font-size: 1.125rem;
  color: var(--parque-verde, #14512c);
  flex-shrink: 0;
}

/* O NÚMERO é o que a pessoa procura; o rótulo só o qualifica. */
.pq-carac-valor {
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  color: var(--parque-verde, #14512c);
}

.pq-carac-valor sup {
  font-size: .6em;
  top: -.5em;
}

.pq-carac-rotulo {
  font-size: .72rem;
  line-height: 1.2;
  color: #6c757d;
}

/* NO CELULAR as duas caixas continuam LADO A LADO.

   Empilhar deixaria o cartão alto demais numa lista de 29, e a comparação —
   que é o motivo de os números existirem — exigiria rolar. O que cede é o
   espaçamento interno, não o arranjo. */
@media (max-width: 400px) {
  .pq-carac {
    padding: .5rem .5rem;
    gap: .4rem;
  }

  .pq-carac i {
    font-size: 1rem;
  }

  .pq-carac-valor {
    font-size: .85rem;
  }

  .pq-carac-rotulo {
    font-size: .68rem;
  }
}


/* ---------------------------------------------------------------------------
   AS ETIQUETAS DE CARACTERISTICA — gruta exclusiva, coberto, banheiro

   Nome `pq-tag` e nao `pq-selo`: aquele ja existe neste arquivo e e outra
   coisa — um bloco de conteudo com padding de 1rem. Reaproveitar o nome
   quebraria as telas que o usam.

   Estas caracteristicas vinham escondidas no fim do texto de observacao, entre
   parenteses e em letra miuda: "(Gruta Coletiva)" depois de uma frase sobre
   como chegar ao terreiro. Sao o que a pessoa esta alugando — gruta exclusiva
   e so do grupo dela, compartilhada e dividida com o vizinho.

   NEUTRO por padrao, COLORIDO so no que e exclusivo: 12 espacos sao cobertos e
   7 tem gruta exclusiva. Pintar todos apagaria a distincao que importa.
   --------------------------------------------------------------------------- */
.pq-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  line-height: 1.5;
  background: #f1f3f5;
  color: #495057;
  white-space: nowrap;
}

.pq-tag i {
  font-size: .8rem;
  opacity: .75;
}

/* O QUE E EXCLUSIVO do grupo: a informacao que muda a decisao. */
.pq-tag-forte {
  background: rgba(20, 81, 44, .1);
  color: var(--parque-verde, #14512c);
  font-weight: 500;
}

.pq-tag-forte i {
  opacity: 1;
}




/* ---------------------------------------------------------------------------
   AS ABAS DA AREA DO CLIENTE

   MEDIDO em /meus-dados: as quatro abas saiam em `rgb(13,110,253)` — o azul
   padrao do Bootstrap — num site inteiro verde. E a unica cor de link azul da
   area logada, e cai justamente na tela onde a pessoa mexe nos proprios dados.

   Vale so onde ha faixa `.pq-topo`: o tema Green usa `.nav-tabs` noutros
   lugares com estilo proprio.
   --------------------------------------------------------------------------- */
.pq-secao ~ .section .nav-tabs .nav-link,
.pq-secao ~ section .nav-tabs .nav-link {
  color: #6c757d;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: .625rem 1rem;
  font-weight: 500;
}

.pq-secao ~ .section .nav-tabs .nav-link:hover,
.pq-secao ~ section .nav-tabs .nav-link:hover {
  color: var(--parque-verde, #14512c);
  border-bottom-color: rgba(20, 81, 44, .25);
}

/* A ABA ATIVA marcada por uma LINHA, nao por caixa.

   A caixa do Bootstrap desenha tres bordas e emenda com o conteudo abaixo;
   dentro de um cartao arredondado isso vira um degrau. A linha embaixo diz a
   mesma coisa sem competir com o cartao. */
.pq-secao ~ .section .nav-tabs .nav-link.active,
.pq-secao ~ section .nav-tabs .nav-link.active {
  color: var(--parque-verde, #14512c);
  background: transparent;
  border-bottom-color: var(--parque-verde, #14512c);
  font-weight: 600;
}

.pq-secao ~ .section .nav-tabs,
.pq-secao ~ section .nav-tabs {
  border-bottom: 1px solid #dee2e6;
  gap: .25rem;
}


/* ---------------------------------------------------------------------------
   O SUBMENU DO USUARIO NAO PODE ARRASTAR A PAGINA PARA O LADO

   MEDIDO com o cliente LOGADO, entre 992px e 1440px: a pagina ganhava 52px de
   rolagem horizontal. O culpado e o submenu do nome ("Minha conta", "Minhas
   reservas"...), que o tema Green esconde com `visibility: hidden` — e nao com
   `display: none`.

   Escondido assim, ele CONTINUA OCUPANDO ESPACO: 200px de largura projetados a
   partir de `left: 14px` do item do menu. Como esse item e o ULTIMO da barra e
   fica colado na margem direita, os 200px caem fora da tela.

   Deslogado nao acontece: sem submenu, sem transbordo. Por isso so aparece
   depois de entrar na conta.

   A CORRECAO ancora o submenu pela DIREITA. Ele passa a crescer para dentro da
   tela em vez de para fora, e continua alinhado ao nome — que e onde a pessoa
   clicou.
   --------------------------------------------------------------------------- */
.navmenu > ul > li.dropdown {
  position: relative;
}

.navmenu > ul > li.dropdown > ul {
  left: auto !important;
  right: 0 !important;
}

/* REDE DE SEGURANCA: nada no site pode criar rolagem horizontal.

   Vale para o defeito que ainda nao existe — um menu novo, uma tabela larga,
   uma imagem sem `max-width`. `overflow-x: clip` corta o excesso SEM criar
   contexto de rolagem, entao nao quebra `position: sticky` como `hidden`
   faria. */
html {
  overflow-x: clip;
}


/* ---------------------------------------------------------------------------
   PERGUNTAS FREQUENTES

   `<details>` nativo, sem JavaScript: abre com script bloqueado, e o navegador
   ja cuida de teclado e leitor de tela. Um acordeao feito a mao custaria mais
   codigo para funcionar pior.
   --------------------------------------------------------------------------- */
.pq-faq {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 6px 20px rgba(0, 0, 0, .04);
  overflow: hidden;
}

.pq-faq summary {
  padding: 1rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--parque-verde, #14512c);
}

/* A SETINHA PADRAO do navegador sai (cada um desenha a sua) e entra um sinal
   que gira ao abrir — o mesmo gesto em todos. */
.pq-faq summary::-webkit-details-marker { display: none; }

.pq-faq summary::after {
  /* O "+" LITERAL, nao um icone da fonte.

     Usei `\f4fe` das Bootstrap Icons e o resultado girado virou um "x"
     torto: aquele ponto de codigo nao e o sinal de mais. O caractere
     direto gira certo e nao depende do mapa de icones da fonte, que muda
     entre versoes. */
  content: "+";
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 400;
  flex-shrink: 0;
  transition: transform .2s ease;
  opacity: .6;
}

.pq-faq[open] summary::after {
  transform: rotate(45deg);
}

.pq-faq summary:hover {
  background: rgba(20, 81, 44, .04);
}

.pq-faq-resposta {
  padding: 0 1.25rem 1.25rem;
  color: #495057;
  line-height: 1.7;
}

.pq-faq-resposta a {
  color: var(--parque-verde, #14512c);
}


/* ---------------------------------------------------------------------------
   PAINEL DO ESPACO

   Antes era uma lista so, com capacidade, medida, endereco interno e
   caracteristicas enfileirados com o mesmo icone verde e o mesmo peso. Tudo
   parecia igualmente importante, entao nada se destacava.
   --------------------------------------------------------------------------- */

/* OS NUMEROS em caixa: capacidade e area sao a primeira pergunta de quem
   organiza um evento. Em caixa se leem antes do texto ao redor. */
.pq-dado {
  background: #f6faf7;
  border: 1px solid rgba(20, 81, 44, .10);
  border-radius: .85rem;
  padding: .8rem .6rem;
  text-align: center;
  height: 100%;
}

.pq-dado i {
  display: block;
  color: var(--parque-verde, #14512c);
  opacity: .55;
  font-size: 1.05rem;
  margin-bottom: .15rem;
}

.pq-dado strong {
  display: block;
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--parque-verde, #14512c);
}

.pq-dado span {
  display: block;
  font-size: .78rem;
  color: #6c757d;
  margin-top: .1rem;
}

/* AS CARACTERISTICAS como etiqueta, nao como lista: sao o que diferencia um
   terreiro do outro, e o dono pediu que tivessem peso visual. */
.pq-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(20, 81, 44, .07);
  color: var(--parque-verde, #14512c);
  border-radius: 2rem;
  padding: .32rem .75rem;
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
}

.pq-etiqueta i { opacity: .7; font-size: .9rem; }

/* ONDE FICA: localizacao e observacao respondem a mesma pergunta (como e
   chegar la), entao ficam no mesmo bloco, separadas do resto por uma linha. */
.pq-local {
  border-top: 1px solid rgba(0, 0, 0, .07);
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  padding: .9rem 0;
  font-size: .88rem;
  color: #495057;
  line-height: 1.55;
}

/* O VALOR depois das caracteristicas: quem ainda nao sabe o que esta
   comprando nao tem como julgar o preco. */
.pq-preco {
  background: #f6faf7;
  border: 1px solid rgba(20, 81, 44, .12);
  border-radius: .85rem;
  padding: .9rem 1rem;
}

.pq-preco-valor {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--parque-verde, #14512c);
}

.pq-preco-filiado {
  border-top: 1px dashed rgba(20, 81, 44, .22);
  color: var(--parque-verde, #14512c);
}


/* ---------------------------------------------------------------------------
   PAINEL DO CLIENTE — estado vazio e atalhos

   A tela era sempre igual, desenhada para quem TEM reservas: quem nao tem via
   dois cartoes grandes dizendo "nada aqui" e, logo abaixo, quatro atalhos
   repetindo os mesmos destinos. `/agendar` aparecia tres vezes na mesma tela.
   --------------------------------------------------------------------------- */

/* OS DOIS CAMINHOS da tela vazia: reservar espaco x comprar acesso. Cada um
   com o motivo embaixo, porque a duvida real de quem chega e a DIFERENCA entre
   os dois — e dois botoes soltos nao respondem isso. */
.pq-caminho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  height: 100%;
  padding: 1.4rem 1rem;
  border: 1px solid rgba(20, 81, 44, .16);
  border-radius: 1rem;
  background: #f6faf7;
  text-decoration: none;
  color: inherit;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.pq-caminho:hover,
.pq-caminho:focus-visible {
  border-color: var(--parque-verde, #14512c);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(20, 81, 44, .12);
  color: inherit;
}

.pq-caminho i {
  font-size: 1.7rem;
  color: var(--parque-verde, #14512c);
  margin-bottom: .35rem;
}

.pq-caminho strong { color: var(--parque-verde, #14512c); }

.pq-caminho span {
  font-size: .82rem;
  color: #6c757d;
  line-height: 1.35;
  text-align: center;
}

/* OS ATALHOS do rodape do painel. Mesma linguagem dos cartoes, sem a borda
   do Bootstrap que destoava do resto das telas. */
.pq-atalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  height: 100%;
  padding: 1rem .75rem;
  border-radius: .9rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 6px 20px rgba(0, 0, 0, .04);
  text-decoration: none;
  color: inherit;
  font-size: .86rem;
  text-align: center;
  transition: transform .16s ease, box-shadow .16s ease;
}

.pq-atalho:hover,
.pq-atalho:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(20, 81, 44, .13);
  color: inherit;
}

.pq-atalho i {
  font-size: 1.3rem;
  color: var(--parque-verde, #14512c);
}

/* CADA RESERVA/ACESSO na lista do painel. Era `.border.rounded` do Bootstrap,
   que desenhava uma caixa dentro da caixa — dois contornos concorrendo. */
.pq-linha {
  padding: .85rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.pq-linha:last-child { border-bottom: 0; padding-bottom: 0; }
.pq-linha:first-child { padding-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .pq-caminho, .pq-atalho { transition: none; }
  .pq-caminho:hover, .pq-atalho:hover { transform: none; }
}


/* ---------------------------------------------------------------------------
   CARD DO TOPO DO PAINEL

   MEDIDO no card antigo: 1116px de largura para um texto de 132px — 952px de
   verde vazio a direita, so para "Ola, Rayane". Retangulo grande para duas
   palavras.

   Agora a saudacao divide a linha com o estado da conta: quantas visitas e se
   o rosto ja esta cadastrado. Mesmo espaco, informacao no lugar de vazio.
   --------------------------------------------------------------------------- */
.pq-topo-painel {
  padding-block: 1.35rem !important;
}

.pq-topo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.pq-topo-saudacao { min-width: 0; }

.pq-topo-dados {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

/* CADA DADO numa pastilha translucida: o fundo do card e um gradiente, e uma
   caixa solida por cima cortaria a transicao de cor. */
.pq-topo-dado {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: .82rem;
  white-space: nowrap;
}

.pq-topo-dado i { align-self: center; opacity: .9; }

.pq-topo-dado strong {
  font-size: 1.15rem;
  line-height: 1;
}

/* O ROSTO CADASTRADO ganha destaque: e o dado que muda o dia da pessoa na
   portaria, e o unico aqui que representa algo CONCLUIDO. */
.pq-topo-dado-ok {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .38);
}

/* NO CELULAR os dados descem para baixo da saudacao, alinhados a esquerda: em
   linha eles espremeriam o nome. */
@media (max-width: 575.98px) {
  .pq-topo-linha { gap: .9rem; }
  .pq-topo-dados { width: 100%; }
}


/* A PASTILHA DE CONVITE e clicavel: quem ainda nao cadastrou o rosto ve o
   caminho no lugar mais visivel da tela, e a tarja ambar abaixo some. */
.pq-topo-dado-acao {
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease;
}

.pq-topo-dado-acao:hover,
.pq-topo-dado-acao:focus-visible {
  background: rgba(255, 255, 255, .26);
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}

.pq-topo-dado-acao .bi-arrow-right { font-size: .78rem; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .pq-topo-dado-acao { transition: none; }
}